Shirataki
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.
Design language
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.
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.
Designing new components in Shirataki
MIAN does not ship every component you will need. To make a new one that belongs in Shirataki, build it from --mn-* tokens inside [data-noodle="shirataki"] and follow these rules.
Do
- 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
[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; }The same guide, for AI tools: /ai/noodles/shirataki.md · MCP tool get_design_language.
Colour, type and brand
What Shirataki 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 · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Accent · Indigo and violet
Imagination, luxury, spirituality, the unusual.
Watch for: A violet-to-blue gradient is the most recognised mark of a generated page. If violet is your brand, use it flat, with a warm second colour, and never as a gradient behind a centred headline.
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.
Teal and cyan with indigo and violet: a contrasting pair that needs one of the two to dominate. The page itself is neutral.
Type
One voice throughout: rounded sans. Headings are semibold, which reads as confident without shouting. Friendly, soft, safe, young.
Personality
Reads as bouncy, jelly, playful, soft, fun. Intensity 3 of 5.
Suits
games, kids, consumer apps, social. Less suited to finance, legal, enterprise.
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.
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
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 Shirataki. 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="shirataki">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/shirataki.css">
<!-- or scope it to one element -->
<section data-noodle="shirataki" 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-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-font-heading | ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif |
| --mn-radius-field / box / badge | 16px · 26px · 999px |
| density | comfortable |
| shadows | soft |