# Ramen: a MIAN design language

Bold, loud, high contrast. Pure black and white with a chilli-red primary and amber accent. Heavier type, crisp shadows. For products that want to be noticed.

- Family: Bold · Origin: Japan · License: MIAN License (free to use)
- Traits: bold, loud, energetic, confident, noticeable · intensity 4/5 · contrast high · density default. Good for: campaigns, product launches, agencies, sport, youth brands. Less for: quiet luxury, healthcare.
- Use: `<html data-noodle="ramen">` (or on any element to scope it). Add `data-mode="dark"` or `"light"` to force a mode.
- Everything: https://mian.ro/dist/mian.css · Only this noodle: https://mian.ro/dist/mian-core.css + https://mian.ro/dist/noodles/ramen.css
- Page: https://mian.ro/noodles/ramen

## Design philosophy

Ramen is curly alkaline noodles in a loud, rich bowl, loaded with toppings and steam. The language is bold: heavy ink outlines, hard offset shadows like printed stickers, wavy lines wherever a straight one would be expected, and things that rise into place like steam.

## Principles

- Ink first: 2px outlines in the foreground colour around every raised thing.
- Hard shadows, never blurred: offset 3–5px in ink.
- Curly, not straight: underlines, dividers and bar tops are waves.
- Toppings on top: stickers and bands, slightly rotated.
- High contrast, high energy.

## The language

- **Shape.** 8px fields, 12px containers, badges as rotated stickers.
- **Surface.** Pure white/black with ink outlines and hard offset shadows (var(--r-ink)).
- **Colour.** Chilli red primary, amber accent, black and white.
- **Type.** Heavy (800) headings, uppercase bold labels.
- **Motion.** ramen-steam: rise and settle with a slight overshoot, 260ms. Hover lifts and grows the shadow; press flattens it.
- **Data.** Wave-topped bars, bold outlined charts, wavy dividers (var(--r-wave)).

## Colour, type and brand

- **Primary** #dc2626: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #f59e0b: orange (mid, saturated). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Page** #ffffff: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Red with its neighbour orange: an analogous pair, harmonious and natural. The page is neutral.
- **Type.** One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
- **Reads as** bold, loud, energetic, confident, noticeable (brand dimension: excitement).
- **Tone of voice.** Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
- **Logo.** A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles. Use a heavy wordmark; a thin one would vanish beside these headings.
- To keep this noodle’s shape with your own brand colours: POST https://mian.ro/api/v1/noodles/create or the MCP tool `create_noodle` (base: "ramen").

## Inspired by the noodle

- Curly, wavy alkaline noodles → wavy underlines, wavy dividers and wave-topped bars
- A loud, rich bowl → heavy outlines and hard offset shadows
- Steam → components rise into place when they appear
- Toppings on top → header bands and bold labels

## Designing new components in Ramen

Build new components from `--mn-*` tokens, scoped with `[data-noodle="ramen"]`, and follow these rules. Any `--x-*` variables named below are defined by this noodle's skin and can be used inside its scope.

- Outline with 2px var(--r-ink) and add box-shadow 4px 4px 0 var(--r-ink).
- On hover translate(-1px,-1px) and grow the shadow; on press translate(3px,3px) with no shadow.
- Replace straight rules with the wave pattern (var(--r-wave) as a mask or background).
- Small labels: uppercase, weight 900, rotated ±2°.

Avoid:

- Blurred shadows
- Hairlines
- Pastel palettes
- Subtle states

Recipe: a selectable tile in this language:

```css
[data-noodle="ramen"] .tile {
  padding: 12px 14px; border: 2px solid var(--r-ink); border-radius: 12px;
  background: var(--mn-surface); box-shadow: 4px 4px 0 var(--r-ink);
  transition: transform 140ms, box-shadow 140ms;
}
[data-noodle="ramen"] .tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--r-ink); }
[data-noodle="ramen"] .tile:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--r-ink); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 8px, box 12px, badge 6px
- Density: default · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #ffffff | #0c0a09 |
| surface | #ffffff | #151211 |
| surface2 | #f5f5f4 | #1f1b19 |
| fg | #0c0a09 | #fafaf9 |
| muted | #66615d | #a8a29e |
| border | #e7e5e4 | #2b2523 |
| input | #d6d3d1 | #443b37 |
| primary | #dc2626 | #dc2626 |
| primaryFg | #ffffff | #ffffff |
| secondary | #0c0a09 | #fafaf9 |
| secondaryFg | #ffffff | #0c0a09 |
| accent | #f59e0b | #fbbf24 |
| accentFg | #1c1002 | #1c1002 |
| ring | #dc2626 | #f87171 |
| success | #15803d | #4ade80 |
| successFg | #ffffff | #052e16 |
| warning | #b45309 | #fbbf24 |
| warningFg | #ffffff | #1f1300 |
| danger | #dc2626 | #f87171 |
| dangerFg | #ffffff | #210505 |
| info | #0369a1 | #38bdf8 |
| infoFg | #ffffff | #03202d |
| primaryText | #c72323 | #e35554 |
| secondaryText | #0c0a09 | #fafaf9 |
| accentText | #98630a | #fbbf24 |
| successText | #14793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #dc2626 | #fbbf24 |