Sanuki
Square-cut, firm, exact. Sanuki udon from Kagawa is cut square, with sharp edges and a firm, springy bite. Sanuki is a rigid, square system: no radius anywhere, 2px straight lines, chunky square controls and a snap to every movement.
Design language
Sanuki is cut square and has a firm bite. The interface has no radius anywhere, not on buttons, checkboxes, switches, avatars or charts, and is drawn with 2px ink lines and chunky square blocks with hard 4px offset shadows. Motion snaps into place with no easing tail, like a firm noodle springing back.
Principles
- Zero radius, always.
- 2px ink lines everywhere (--mn-border-w: 2px; borders in var(--mn-fg)).
- Blocks with hard shadows (4px 4px 0 ink) that press flat when clicked.
- Snap motion: 90ms, cubic-bezier(.9,0,.1,1) or steps().
- Heavy (800) type, uppercase table headers.
Shape
Square everything; square switch knob and slider thumb; square radial.
Surface
Wheat-white surfaces with 2px ink borders and 4–6px hard offset shadows.
Colour
Indigo primary, amber accent, ink and wheat.
Type
Sans at 800, tight tracking; uppercase table headers.
Motion
sanuki-in: a stepped reveal (steps(4)) in 140ms; presses translate 4px into the shadow.
Data
Square outlined bars packed tight; square legend keys.
Designing new components in Sanuki
MIAN does not ship every component you will need. To make a new one that belongs in Sanuki, build it from --mn-* tokens inside [data-noodle="sanuki"] and follow these rules.
Do
- border: 2px solid var(--mn-fg); border-radius: 0; box-shadow: 4px 4px 0 var(--mn-fg).
- Press: transform: translate(4px, 4px); box-shadow: none, in 90ms.
- Selected = inverted (ink fill, paper text).
Avoid
- Any border-radius
- Soft or blurred shadows
- Thin 1px lines
- Eased or springy motion
Recipe: a selectable tile
[data-noodle="sanuki"] .tile {
padding: 14px 16px; border: 2px solid var(--mn-fg); border-radius: 0;
background: var(--mn-surface); box-shadow: 4px 4px 0 var(--mn-fg); font-weight: 800;
transition: transform 90ms cubic-bezier(.9, 0, .1, 1), box-shadow 90ms cubic-bezier(.9, 0, .1, 1);
}
[data-noodle="sanuki"] .tile:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--mn-fg); }
[data-noodle="sanuki"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }The same guide, for AI tools: /ai/noodles/sanuki.md · MCP tool get_design_language.
Colour, type and brand
What Sanuki 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 · Blue
Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
Watch for: The safest choice is also the least memorable. A blue brand is told apart by its typography, shape and tone of voice, not by its blue.
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 · Yellow and gold
Optimism, attention, caution. Gold tones add value and ceremony.
Watch for: The lightest hue: white text on yellow fails, so yellow always carries dark text. Large yellow areas tire the eye.
Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as square, firm, exact, industrial, serious. Intensity 2 of 5. Brand dimension: ruggedness.
Suits
engineering, architecture, industrial, b2b tools. Less suited to soft consumer, wellness.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
Square and angular marks fit: a wordmark in capitals or a solid block symbol. Use a heavy wordmark; a thin one would vanish beside these headings.
Inspired by the noodle
- Cut square with sharp edges→zero radius on everything, including checkboxes, switches and avatars
- Thick and firm→2px lines, heavy square blocks, chunky controls
- A firm bite (koshi)→motion that snaps into place with no easing tail
- Kagawa indigo noren→deep indigo primary on wheat white
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 Sanuki. 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="sanuki">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/sanuki.css">
<!-- or scope it to one element -->
<section data-noodle="sanuki" 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", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-font-heading | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| --mn-radius-field / box / badge | 0px · 0px · 0px |
| density | default |
| shadows | none |