Kuzukiri
Clear glass in ice water. Black and white. Kuzukiri are clear kudzu-starch noodles from Kyoto, served floating in ice water and dipped in black sugar syrup. Kuzukiri is Mian in glass: black and white, one-pixel edges and clear type, but every surface is a sheet of clear, cold glass, and the only colour is the dark syrup.
Design language
Kuzukiri is Mian in glass. The noodles are perfectly clear, served in ice water with black sugar syrup, so the interface keeps every Mian rule, black and white, 1px edges, two type weights, nothing decorative, but each surface is a sheet of clear, cold glass over a pale backdrop, with one bright hairline along its top edge. The only colour is the syrup.
Principles
- Clear glass, not frosted colour: 58% white (dark: 52% night) with blur(20px).
- A bright top hairline and a 1px ink ring at 7% (--kz-edge) instead of borders.
- Ink for action: solid black buttons and selections, as in Mian.
- Stillness: quick, clean fades with a touch of blur.
Shape
10px fields, 18px surfaces, pill badges.
Surface
Clear glass sheets with --kz-edge over a pale, cool backdrop with one soft ink shadow.
Colour
Black and white; a dark syrup-brown accent.
Type
Clean sans at 500/600, tight headings.
Motion
kuzukiri-in: 4px rise from blur(4px), 260ms.
Data
Ink for the highlight, frosted grey for the rest.
Designing new components in Kuzukiri
MIAN does not ship every component you will need. To make a new one that belongs in Kuzukiri, build it from --mn-* tokens inside [data-noodle="kuzukiri"] and follow these rules.
Do
- background-color: var(--kz-glass); backdrop-filter: var(--kz-blur); box-shadow: var(--kz-edge); border: 0.
- Selected = solid var(--mn-fg) with var(--mn-bg) text.
- Keep everything else exactly as Mian would.
Avoid
- Coloured glass
- Thick rims or lens effects
- Gradients on controls
Recipe: a selectable tile
[data-noodle="kuzukiri"] .tile {
padding: 14px 16px; border: 0; border-radius: 14px;
background-color: var(--kz-glass); -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur); box-shadow: var(--kz-edge);
}
[data-noodle="kuzukiri"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }The same guide, for AI tools: /ai/noodles/kuzukiri.md · MCP tool get_design_language.
Colour, type and brand
What Kuzukiri 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
Accent · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
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.
A neutral primary with one brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. The page itself is cool.
Type
One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as glass, clear, monochrome, cool, premium. Intensity 2 of 5.
Suits
premium apps, hardware, media, portfolios. Less suited to print-like editorial, dense tables.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- Clear noodles in ice water→clear glass sheets with a strong blur over a cool, pale backdrop
- Black sugar syrup→ink-black primary; a dark syrup-brown accent
- Kyoto restraint→the Mian rules: 1px edges, two type weights, nothing decorative
- Cold and still→slow, clean fades; a soft chill of blur as things appear
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 Kuzukiri. 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="kuzukiri">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/kuzukiri.css">
<!-- or scope it to one element -->
<section data-noodle="kuzukiri" 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 · 18px · 999px |
| density | default |
| shadows | soft |