Ramen
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.
Design language
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.
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)).
Designing new components in Ramen
MIAN does not ship every component you will need. To make a new one that belongs in Ramen, build it from --mn-* tokens inside [data-noodle="ramen"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/ramen.md · MCP tool get_design_language.
Colour, type and brand
What Ramen says before anyone reads a word, and what kind of brand it suits. Tendencies, not laws: see the guides on colour, type, branding and logos.
Primary · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
Accent · Orange
Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
Red with its neighbour orange: an analogous pair, harmonious and natural. The page itself 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.
Personality
Reads as bold, loud, energetic, confident, noticeable. Intensity 4 of 5. Brand dimension: excitement.
Suits
campaigns, product launches, agencies, sport, youth brands. Less suited to quiet luxury, healthcare.
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.
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
Specimen
The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
Buttons
Fields
Choices
Status
Tabs
Bars
Line & donut
Table
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | €250.00 |
| INV-002 | Pending | €150.00 |
| INV-003 | Overdue | €350.00 |
Feedback & motion
Deployed
Your site is live.
- Cart
- Pay
- Done
This palette on Ramen. Load it after mian.css and put data-brand on the same element as data-noodle.
Use it
<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="ramen">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/ramen.css">
<!-- or scope it to one element -->
<section data-noodle="ramen" data-mode="dark">…</section>Palette
Left half light, right half dark. Every text pair is verified for WCAG AA contrast when the site is built.
Typography & shape
| --mn-font | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 8px · 12px · 6px |
| density | default |
| shadows | soft |