# Kuzukiri: a MIAN design language

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.

- Family: Glass · Origin: Japan · Kyoto kudzu noodles · License: MIAN License (free to use)
- Traits: glass, clear, monochrome, cool, premium · intensity 2/5 · contrast high · density default. Good for: premium apps, hardware, media, portfolios. Less for: print-like editorial, dense tables.
- Use: `<html data-noodle="kuzukiri">` (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/kuzukiri.css
- Page: https://mian.ro/noodles/kuzukiri

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #0a0a0a: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #3b2a1e: brown and terracotta (deep, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #eef0f2: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. The page 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.
- **Reads as** glass, clear, monochrome, cool, premium.
- **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.
- 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: "kuzukiri").

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

## Designing new components in Kuzukiri

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

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

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

## 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 18px, badge 999px
- Density: default · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #eef0f2 | #07080a |
| surface | #ffffff | #121418 |
| surface2 | #e6e9ec | #1b1e23 |
| fg | #0a0a0a | #f1f3f5 |
| muted | #555b62 | #9ba2ab |
| border | #dde1e5 | #262a30 |
| input | #b9c0c7 | #434a53 |
| primary | #0a0a0a | #f1f3f5 |
| primaryFg | #ffffff | #0a0a0a |
| secondary | #e6e9ec | #1b1e23 |
| secondaryFg | #0a0a0a | #f1f3f5 |
| accent | #3b2a1e | #c9a88a |
| accentFg | #ffffff | #1c120a |
| ring | #0a0a0a | #f1f3f5 |
| 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 | #0a0a0a | #f1f3f5 |
| secondaryText | #6b6c6d | #7d8084 |
| accentText | #3b2a1e | #c9a88a |
| successText | #14793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0a0a0a | #f1f3f5 |