# Tokoroten: a MIAN design language

Pressed through a grid. Glass tiles. Tokoroten is agar jelly pushed through a wooden press whose blades form a square grid, so it comes out as clear, square strands. Tokoroten is a glass-tile system: frosted glass etched with a fine square grid, square-cut corners, grid-snapped indicators and a clean, cool palette with a mustard accent.

- Family: Glass · Origin: Japan · agar noodles · License: MIAN License (free to use)
- Traits: glass, grid, tiled, cool, structured · intensity 2/5 · contrast medium · density default. Good for: dashboards, productivity, smart home. Less for: editorial.
- Use: `<html data-noodle="tokoroten">` (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/tokoroten.css
- Page: https://mian.ro/noodles/tokoroten

## Design philosophy

Tokoroten is glass pressed through a grid. Agar jelly is pushed through a wooden press whose blades form a square grid, so every surface is a frosted glass tile etched with a fine 8px grid, corners are small and square, indicators snap cell by cell, labels are mono, and components slide out of their slot in one clean push.

## Principles

- The etched grid (--tk-grid) on every glass surface, track and chart.
- Square tiles: 2–6px corners; selections are filled tiles.
- Snap to cells: the switch knob and progress move in visible steps.
- Cool agar teal with a mustard accent; mono uppercase labels.

## The language

- **Shape.** 4px fields, 6px surfaces, 2px badges; square spinner turning in quarter steps.
- **Surface.** Frosted glass (62%) with a white inner edge and a teal outline, etched grid.
- **Colour.** Agar-teal primary, mustard accent.
- **Type.** Sans body, mono uppercase labels, tabs and badges.
- **Motion.** tokoroten-in: slides out of a slot (clip-path from the top), 240ms.
- **Data.** Bars made of 8px cells over the grid.

## Colour, type and brand

- **Primary** #134e4a: teal and cyan (deep). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Accent** #8a5a06: brown and terracotta (deep, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #edf3f3: teal and cyan (pale, muted). Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
- **Scheme.** Teal and cyan with brown and terracotta: a contrasting pair that needs one of the two to dominate. 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, grid, tiled, cool, structured.
- **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: "tokoroten").

## Inspired by the noodle

- Pushed through a grid of blades → a fine square grid etched into every glass surface
- Square, translucent strands → frosted glass tiles with small, square corners
- Served with vinegar and mustard → cool agar-teal ink with a mustard accent
- Pressed out in one push → components slide out of a slot in one clean move

## Designing new components in Tokoroten

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

- background: var(--tk-grid), var(--tk-glass); backdrop-filter: var(--tk-blur); box-shadow: var(--tk-edge); radius ≤6px.
- Selected = a filled tile in var(--mn-primary).
- Label with mono uppercase at 11–12px.

Avoid:

- Large radii and pills
- Grid-free flat panels
- Smooth continuous motion for discrete values

Recipe: a selectable tile in this language:

```css
[data-noodle="tokoroten"] .tile {
  padding: 12px 14px; border: 0; border-radius: 4px;
  background: var(--tk-grid), var(--tk-glass); -webkit-backdrop-filter: var(--tk-blur); backdrop-filter: var(--tk-blur); box-shadow: var(--tk-edge);
  font: 500 .75rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .05em;
}
[data-noodle="tokoroten"] .tile[aria-selected="true"] { background: var(--tk-grid), var(--mn-primary); color: var(--mn-primary-fg); }
```

## 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 4px, box 6px, badge 2px
- Density: default · Shadows: subtle · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #edf3f3 | #081010 |
| surface | #ffffff | #0f1919 |
| surface2 | #e2ebeb | #172222 |
| fg | #0d1717 | #e8f2f1 |
| muted | #4c5c5c | #93a7a5 |
| border | #d4e0e0 | #233131 |
| input | #a9bcbc | #3e5251 |
| primary | #134e4a | #7dd3c7 |
| primaryFg | #ffffff | #062522 |
| secondary | #e2ebeb | #172222 |
| secondaryFg | #0d1717 | #e8f2f1 |
| accent | #8a5a06 | #facc15 |
| accentFg | #ffffff | #1c1500 |
| ring | #134e4a | #7dd3c7 |
| 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 | #134e4a | #7dd3c7 |
| secondaryText | #667070 | #7b8685 |
| accentText | #8a5a06 | #facc15 |
| successText | #14783a | #4ade80 |
| warningText | #aa4f0a | #fbbf24 |
| dangerText | #c72525 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #134e4a | #7dd3c7 |