Tokoroten
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.
Design language
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.
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.
Designing new components in Tokoroten
MIAN does not ship every component you will need. To make a new one that belongs in Tokoroten, build it from --mn-* tokens inside [data-noodle="tokoroten"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/tokoroten.md · MCP tool get_design_language.
Colour, type and brand
What Tokoroten 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 · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
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 · Teal and cyan
Clarity, cleanliness, calm technology. Cooler than green, softer than blue.
Watch for: Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered.
Teal and cyan with brown and terracotta: a contrasting pair that needs one of the two to dominate. 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, grid, tiled, cool, structured. Intensity 2 of 5.
Suits
dashboards, productivity, smart home. Less suited to editorial.
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
- 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
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 Tokoroten. 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="tokoroten">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/tokoroten.css">
<!-- or scope it to one element -->
<section data-noodle="tokoroten" 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 | 4px · 6px · 2px |
| density | default |
| shadows | subtle |