Shio
The clearest broth. Light, airy, afloat. Shio ramen is seasoned only with salt, so its broth is the clearest and lightest of all ramen, you can see every noodle. Shio is an airy system with no visible borders: everything floats on soft, layered elevation over a pale page, with generous space, light type and a sea-slate ink.
Design language
Shio is the clearest broth. Nothing in it has an outline: every surface floats over a pale page on soft, layered elevation, and rises a little, casting a softer, wider shadow, when you reach for it. Space is generous, type is medium weight, and there is one sea-slate ink.
Principles
- No visible borders. Separate with elevation: --sh-1 (resting), --sh-2 (raised), --sh-3 (floating).
- Touch lifts: hover raises by 1–2px and steps up one elevation level; press settles back.
- One ink (sea slate) for action, kombu green as a quiet accent, pale neutrals for everything else.
- Generous space: comfortable density, 16px containers, medium (500) headings with tight tracking.
Shape
10px fields, 16px surfaces, pill badges; tabs are small floating cards in a pale track.
Surface
White on #fafaf9, separated only by layered, very soft shadows with a 1px 4–5% ring.
Colour
Sea-slate primary, kombu-green accent, warm pale greys.
Type
Clean sans; 500 for headings and controls.
Motion
shio-in: 6px rise with a 2px blur, 300ms; elevation transitions 260ms.
Data
Soft rounded bars that lift on hover; 2px lines; a slim donut.
Designing new components in Shio
MIAN does not ship every component you will need. To make a new one that belongs in Shio, build it from --mn-* tokens inside [data-noodle="shio"] and follow these rules.
Do
- background: var(--mn-surface); border: 0; box-shadow: var(--sh-2); radius 16px.
- Hover: transform: translateY(-2px); box-shadow: var(--sh-3).
- Selected inside a group: a white card with --sh-1 on a --mn-surface-2 track.
Avoid
- 1px borders as structure
- Hard or dark shadows
- Dense layouts
Recipe: a selectable tile
[data-noodle="shio"] .tile {
padding: 16px 18px; border: 0; border-radius: 16px; background: var(--mn-surface); box-shadow: var(--sh-2);
transition: box-shadow 260ms cubic-bezier(.2, .7, .2, 1), transform 260ms cubic-bezier(.2, .7, .2, 1);
}
[data-noodle="shio"] .tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }The same guide, for AI tools: /ai/noodles/shio.md · MCP tool get_design_language.
Colour, type and brand
What Shio 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
Accent · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
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.
Blue with green: a contrasting pair that needs one of the two to dominate. The page itself is neutral.
Type
One voice throughout: neutral sans. Headings are medium, which reads as calm and assured. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as airy, light, calm, optimistic, gentle. Intensity 1 of 5.
Suits
wellness, onboarding, landing pages, personal sites. Less suited to dense admin, financial data.
Tone of voice
Quiet. Plain statements in sentence case, no exclamation marks, numbers with their units. Let space do the persuading.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- A broth clear enough to see through→no borders; surfaces are separated by soft, layered elevation alone
- Seasoned only with salt→nothing added: pale neutrals, one sea-slate ink, a kombu-green accent
- A light, delicate bowl→generous space, medium-weight type, comfortable density
- Noodles lifted from the broth→things float up gently and cast softer shadows as they rise
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 Shio. 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="shio">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/shio.css">
<!-- or scope it to one element -->
<section data-noodle="shio" 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 Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif |
| --mn-radius-field / box / badge | 10px · 16px · 999px |
| density | comfortable |
| shadows | soft |