# Sanuki: a MIAN design language

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.

- Family: Linear · Origin: Japan · Kagawa · License: MIAN License (free to use)
- Traits: square, firm, exact, industrial, serious · intensity 2/5 · contrast high · density default. Good for: engineering, architecture, industrial, b2b tools. Less for: soft consumer, wellness.
- Use: `<html data-noodle="sanuki">` (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/sanuki.css
- Page: https://mian.ro/noodles/sanuki

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #1e3a8a: blue (mid). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #b45309: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f7f6f2: yellow and gold (pale, muted). Optimism, attention, caution. Gold tones add value and ceremony.
- **Scheme.** Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. The page 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.
- **Reads as** square, firm, exact, industrial, serious (brand dimension: ruggedness).
- **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.
- 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: "sanuki").

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

## Designing new components in Sanuki

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

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

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

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 0px, box 0px, badge 0px
- Density: default · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f7f6f2 | #0e0e0d |
| surface | #ffffff | #161615 |
| surface2 | #eeece6 | #21201e |
| fg | #121212 | #f2f1ec |
| muted | #595650 | #a8a59c |
| border | #121212 | #f2f1ec |
| input | #121212 | #f2f1ec |
| primary | #1e3a8a | #93b4ff |
| primaryFg | #ffffff | #0b1633 |
| secondary | #eeece6 | #21201e |
| secondaryFg | #121212 | #f2f1ec |
| accent | #b45309 | #f59e0b |
| accentFg | #ffffff | #1f1300 |
| ring | #1e3a8a | #93b4ff |
| 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 | #1e3a8a | #93b4ff |
| secondaryText | #6e6e6b | #81807d |
| accentText | #aa4f0a | #f59e0b |
| successText | #15793a | #4ade80 |
| warningText | #aa4f0a | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #1e3a8a | #93b4ff |