{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "tokoroten",
  "name": "Tokoroten",
  "family": "Glass",
  "origin": "Japan · agar noodles",
  "tagline": "Pressed through a grid. Glass tiles.",
  "description": "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.",
  "inspiration": [
    "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"
  ],
  "traits": {
    "mood": [
      "glass",
      "grid",
      "tiled",
      "cool",
      "structured"
    ],
    "intensity": 2,
    "contrast": "medium",
    "geometry": "square glass tiles",
    "type": "sans",
    "surface": "glass on a grid",
    "motion": "pressed",
    "goodFor": [
      "dashboards",
      "productivity",
      "smart home"
    ],
    "lessFor": [
      "editorial"
    ],
    "density": "default"
  },
  "license": "LicenseRef-MIAN-1.0",
  "designLanguage": {
    "essence": "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."
    ],
    "aspects": {
      "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."
    },
    "extend": [
      "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": "[data-noodle=\"tokoroten\"] .tile {\n  padding: 12px 14px; border: 0; border-radius: 4px;\n  background: var(--tk-grid), var(--tk-glass); -webkit-backdrop-filter: var(--tk-blur); backdrop-filter: var(--tk-blur); box-shadow: var(--tk-edge);\n  font: 500 .75rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .05em;\n}\n[data-noodle=\"tokoroten\"] .tile[aria-selected=\"true\"] { background: var(--tk-grid), var(--mn-primary); color: var(--mn-primary-fg); }"
  },
  "psychology": {
    "temperature": "cool",
    "colours": [
      {
        "role": "Primary",
        "hex": "#134e4a",
        "family": "Teal and cyan",
        "depth": "deep",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      },
      {
        "role": "Accent",
        "hex": "#8a5a06",
        "family": "Brown and terracotta",
        "depth": "deep, saturated",
        "says": "Earth, craft, reliability, age. Feels made by hand and unhurried.",
        "use": "Food, coffee, leather, ceramics, heritage brands, anything artisanal.",
        "risk": "Looks dull on screens unless the neutrals around it are warm too."
      },
      {
        "role": "Page",
        "hex": "#edf3f3",
        "family": "Teal and cyan",
        "depth": "pale, muted",
        "says": "Clarity, cleanliness, calm technology. Cooler than green, softer than blue.",
        "use": "Health tech, wellness, productivity tools, water and travel.",
        "risk": "Very common in medical and SaaS products, so it needs a distinctive neutral or typeface to be remembered."
      }
    ],
    "relation": "Teal and cyan with brown and terracotta: a contrasting pair that needs one of the two to dominate.",
    "type": {
      "body": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "heading": {
        "class": "neutral",
        "name": "Neutral sans",
        "says": "Clear, modern, impartial. The voice of software and signage.",
        "use": "Interfaces, documentation, most product marketing.",
        "risk": "The same few neutral sans typefaces set every generated page. Without a distinct weight, size or pairing it reads as a template."
      },
      "weight": 600,
      "summary": "One voice throughout: neutral sans. Headings are semibold, which reads as confident without shouting."
    },
    "personality": {
      "reads": [
        "glass",
        "grid",
        "tiled",
        "cool",
        "structured"
      ],
      "intensity": 2,
      "dimensions": [],
      "suits": [
        "dashboards",
        "productivity",
        "smart home"
      ],
      "lessFor": [
        "editorial"
      ],
      "tone": "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."
  },
  "url": "https://mian.ro/noodles/tokoroten",
  "markdownUrl": "https://mian.ro/ai/noodles/tokoroten.md",
  "stylesheet": "https://mian.ro/dist/noodles/tokoroten.css",
  "usage": "<html data-noodle=\"tokoroten\">",
  "fonts": {
    "sans": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "heading": "ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace"
  },
  "headingWeight": 600,
  "radius": {
    "field": "4px",
    "box": "6px",
    "badge": "2px"
  },
  "shadow": "subtle",
  "density": "default",
  "glass": true,
  "light": {
    "bg": "#edf3f3",
    "surface": "#ffffff",
    "surface2": "#e2ebeb",
    "fg": "#0d1717",
    "muted": "#4c5c5c",
    "border": "#d4e0e0",
    "input": "#a9bcbc",
    "primary": "#134e4a",
    "primaryFg": "#ffffff",
    "secondary": "#e2ebeb",
    "secondaryFg": "#0d1717",
    "accent": "#8a5a06",
    "accentFg": "#ffffff",
    "ring": "#134e4a",
    "success": "#15803d",
    "successFg": "#ffffff",
    "warning": "#b45309",
    "warningFg": "#ffffff",
    "danger": "#dc2626",
    "dangerFg": "#ffffff",
    "info": "#0369a1",
    "infoFg": "#ffffff",
    "primaryText": "#134e4a",
    "secondaryText": "#667070",
    "accentText": "#8a5a06",
    "successText": "#14783a",
    "warningText": "#aa4f0a",
    "dangerText": "#c72525",
    "infoText": "#0369a1",
    "link": "#134e4a"
  },
  "dark": {
    "bg": "#081010",
    "surface": "#0f1919",
    "surface2": "#172222",
    "fg": "#e8f2f1",
    "muted": "#93a7a5",
    "border": "#233131",
    "input": "#3e5251",
    "primary": "#7dd3c7",
    "primaryFg": "#062522",
    "secondary": "#172222",
    "secondaryFg": "#e8f2f1",
    "accent": "#facc15",
    "accentFg": "#1c1500",
    "ring": "#7dd3c7",
    "success": "#4ade80",
    "successFg": "#052e16",
    "warning": "#fbbf24",
    "warningFg": "#1f1300",
    "danger": "#f87171",
    "dangerFg": "#210505",
    "info": "#38bdf8",
    "infoFg": "#03202d",
    "primaryText": "#7dd3c7",
    "secondaryText": "#7b8685",
    "accentText": "#facc15",
    "successText": "#4ade80",
    "warningText": "#fbbf24",
    "dangerText": "#f87171",
    "infoText": "#38bdf8",
    "link": "#7dd3c7"
  },
  "css": "[data-noodle=\"tokoroten\"] {\n  --mn-bg: light-dark(#edf3f3, #081010);\n  --mn-surface: light-dark(#ffffff, #0f1919);\n  --mn-surface-2: light-dark(#e2ebeb, #172222);\n  --mn-fg: light-dark(#0d1717, #e8f2f1);\n  --mn-muted: light-dark(#4c5c5c, #93a7a5);\n  --mn-border: light-dark(#d4e0e0, #233131);\n  --mn-input: light-dark(#a9bcbc, #3e5251);\n  --mn-primary: light-dark(#134e4a, #7dd3c7);\n  --mn-primary-fg: light-dark(#ffffff, #062522);\n  --mn-secondary: light-dark(#e2ebeb, #172222);\n  --mn-secondary-fg: light-dark(#0d1717, #e8f2f1);\n  --mn-accent: light-dark(#8a5a06, #facc15);\n  --mn-accent-fg: light-dark(#ffffff, #1c1500);\n  --mn-ring: light-dark(#134e4a, #7dd3c7);\n  --mn-success: light-dark(#15803d, #4ade80);\n  --mn-success-fg: light-dark(#ffffff, #052e16);\n  --mn-warning: light-dark(#b45309, #fbbf24);\n  --mn-warning-fg: light-dark(#ffffff, #1f1300);\n  --mn-danger: light-dark(#dc2626, #f87171);\n  --mn-danger-fg: light-dark(#ffffff, #210505);\n  --mn-info: light-dark(#0369a1, #38bdf8);\n  --mn-info-fg: light-dark(#ffffff, #03202d);\n  --mn-primary-text: light-dark(#134e4a, #7dd3c7);\n  --mn-secondary-text: light-dark(#667070, #7b8685);\n  --mn-accent-text: light-dark(#8a5a06, #facc15);\n  --mn-success-text: light-dark(#14783a, #4ade80);\n  --mn-warning-text: light-dark(#aa4f0a, #fbbf24);\n  --mn-danger-text: light-dark(#c72525, #f87171);\n  --mn-info-text: light-dark(#0369a1, #38bdf8);\n  --mn-link: light-dark(#134e4a, #7dd3c7);\n  --mn-font: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-heading: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --mn-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --mn-heading-weight: 600;\n  --mn-radius-field: 4px;\n  --mn-radius-box: 6px;\n  --mn-radius-badge: 2px;\n  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);\n  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);\n  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);\n  --mn-size-xs: 26px;\n  --mn-size-sm: 32px;\n  --mn-size-md: 38px;\n  --mn-size-lg: 46px;\n  --mn-text-sm: 14px;\n  --mn-surface-alpha: 72%;\n  --mn-backdrop: blur(18px) saturate(1.4);\n  --mn-bg-image: linear-gradient(135deg, light-dark(#dcefec, #0a1b19) 0%, light-dark(#eef4f4, #081010) 50%, light-dark(#e6ecf6, #0b1019) 100%);\n}\n"
}