# Shirataki: a MIAN design language

Translucent, jelly-soft, bouncy. "White waterfall" noodles made of konjac: milky, translucent, slippery and springy. Shirataki is a jelly system: glossy blobs, wobble-on-press, overshooting springs and soft pearl surfaces.

- Family: Glass · Origin: Japan · konjac noodles · License: MIAN License (free to use)
- Traits: bouncy, jelly, playful, soft, fun · intensity 3/5 · contrast low · density comfortable. Good for: games, kids, consumer apps, social. Less for: finance, legal, enterprise.
- Use: `<html data-noodle="shirataki">` (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/shirataki.css
- Page: https://mian.ro/noodles/shirataki

## Design philosophy

Shirataki are konjac noodles: translucent, jelly-soft and springy. The language is gelatinous: pearl surfaces with a glossy highlight blob, controls that wobble when pressed, blobby shapes that morph, and springs that overshoot and settle like jelly.

## Principles

- Gloss: a radial highlight (var(--s-gloss)) near the top-left of every raised thing.
- Wobble: presses and selections play a jiggle (squash and stretch in both axes).
- Soft and round: large radii (16–28px), no sharp corners anywhere.
- Sunken wells: inputs and tracks are inset with a soft inner shadow.

## The language

- **Shape.** 16px fields, 26px containers, blob spinners that morph their border-radius.
- **Surface.** Pearl surfaces with gloss and a soft coloured drop shadow; sunken fields.
- **Colour.** Mint-teal primary, violet accent, pearly neutrals.
- **Type.** Rounded sans.
- **Motion.** shirataki-in: squash (0.7,1.15) → overshoot → settle, 480ms, cubic-bezier(.3,1.3,.5,1). shirataki-jiggle on press.
- **Data.** Jelly-blob bars with gloss that swell on hover, thick 5px lines, a glossy donut with a coloured shadow.

## Colour, type and brand

- **Primary** #0f766e: teal and cyan (deep, saturated). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Accent** #6d28d9: indigo and violet (mid). Imagination, luxury, spirituality, the unusual.
- **Page** #f5f6f5: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Teal and cyan with indigo and violet: a contrasting pair that needs one of the two to dominate. The page is neutral.
- **Type.** One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
- **Reads as** bouncy, jelly, playful, soft, fun.
- **Tone of voice.** Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark.
- 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: "shirataki").

## Inspired by the noodle

- Gelatinous konjac → controls wobble and jiggle when pressed
- Milky translucence → pearl surfaces with a glossy highlight blob
- Springy → every transition overshoots and settles
- Slippery → knobs and indicators slide past and bounce back

## Designing new components in Shirataki

Build new components from `--mn-*` tokens, scoped with `[data-noodle="shirataki"]`, 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) var(--s-gloss), radius 18–28px, shadow 0 10px 30px -14px of the primary.
- On press and on selection play animation: shirataki-jiggle 400ms.
- Wells and tracks: surface-2 with inset 0 2px 6px rgb(0 0 0/.07).

Avoid:

- Hard edges
- Flat, matte fills
- Linear motion

Recipe: a selectable tile in this language:

```css
[data-noodle="shirataki"] .tile {
  padding: 14px 18px; border: 0; border-radius: 22px;
  background: var(--mn-surface) var(--s-gloss);
  box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--mn-primary) 40%, transparent);
}
[data-noodle="shirataki"] .tile:active,
[data-noodle="shirataki"] .tile[aria-selected="true"] { animation: shirataki-jiggle 400ms ease-out; }
```

## Tokens

- Fonts: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Heading font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Radius: field 16px, box 26px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #f5f6f5 | #0f1211 |
| surface | #fbfcfb | #161a19 |
| surface2 | #eceeec | #1f2523 |
| fg | #1d2321 | #eaf0ed |
| muted | #56605b | #9aa7a1 |
| border | #dde2df | #2a322f |
| input | #c7cfcb | #3a4541 |
| primary | #0f766e | #5eead4 |
| primaryFg | #ffffff | #042f2c |
| secondary | #e4e9e6 | #1f2523 |
| secondaryFg | #1d2321 | #eaf0ed |
| accent | #6d28d9 | #c4b5fd |
| accentFg | #ffffff | #1a0b3a |
| ring | #0f766e | #5eead4 |
| 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 | #10736b | #5eead4 |
| secondaryText | #6d7270 | #808684 |
| accentText | #6d28d9 | #c4b5fd |
| successText | #16773a | #4ade80 |
| warningText | #a54e0b | #fbbf24 |
| dangerText | #c12625 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0f766e | #5eead4 |