# Shio: a MIAN design language

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.

- Family: Minimal · Origin: Japan · salt ramen · License: MIAN License (free to use)
- Traits: airy, light, calm, optimistic, gentle · intensity 1/5 · contrast low · density comfortable. Good for: wellness, onboarding, landing pages, personal sites. Less for: dense admin, financial data.
- Use: `<html data-noodle="shio">` (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/shio.css
- Page: https://mian.ro/noodles/shio

## Design philosophy

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.

## The language

- **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.

## Colour, type and brand

- **Primary** #1f3a5f: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #2f6b5a: green (mid). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #fafaf9: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue with green: a contrasting pair that needs one of the two to dominate. The page 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.
- **Reads as** airy, light, calm, optimistic, gentle.
- **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.
- 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: "shio").

## 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

## Designing new components in Shio

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

- 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 in this language:

```css
[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); }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 10px, box 16px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #fafaf9 | #0e1014 |
| surface | #ffffff | #16191e |
| surface2 | #f3f3f1 | #1e2228 |
| fg | #14181f | #eef1f5 |
| muted | #5d6470 | #9aa3ae |
| border | #ececea | #262a31 |
| input | #d5d6d4 | #3a404a |
| primary | #1f3a5f | #a9c3e8 |
| primaryFg | #ffffff | #0e1a2b |
| secondary | #f3f3f1 | #1e2228 |
| secondaryFg | #14181f | #eef1f5 |
| accent | #2f6b5a | #8fd1bd |
| accentFg | #ffffff | #06231b |
| ring | #1f3a5f | #a9c3e8 |
| 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 | #1f3a5f | #a9c3e8 |
| secondaryText | #6d7073 | #82858a |
| accentText | #2f6b5a | #8fd1bd |
| successText | #15783b | #4ade80 |
| warningText | #aa4f0a | #fbbf24 |
| dangerText | #c82525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1f3a5f | #a9c3e8 |