Harusame
Clear, cool, layered. Glass noodles. Translucent surfaces with backdrop blur over a soft gradient, large radii, sky-blue primary. For dashboards and media.
Design language
Harusame are glass noodles: clear, glossy and refractive. The language is layered glass: frosted see-through surfaces over a soft gradient, bright specular edges, a sheen that sweeps across buttons, translucent overlapping chart layers and transitions that come into focus out of blur.
Principles
- See-through: surfaces are 55–72% opaque with a backdrop blur.
- Light catches edges: a bright 1px inner top highlight on every glass surface.
- Sheen on interaction: a diagonal highlight sweeps across on hover.
- Depth by layering and blur, not by heavy shadows.
Shape
12px fields, 20px containers.
Surface
Frosted glass (var(--h-glass)) over a gradient page, inner edge highlights (var(--h-edge)).
Colour
Clear blue primary, a warm amber-brown accent, cool translucent neutrals.
Type
Clean sans, medium weights.
Motion
harusame-in: blur(6px) → sharp with fade, 240ms.
Data
Translucent, overlapping bar and area layers, glowing lines.
Designing new components in Harusame
MIAN does not ship every component you will need. To make a new one that belongs in Harusame, build it from --mn-* tokens inside [data-noodle="harusame"] and follow these rules.
Do
- Use background var(--h-glass) with backdrop-filter: blur(18px) saturate(1.4) and box-shadow var(--h-edge).
- Add a ::before sheen (a skewed white gradient) that translates across on hover.
- Keep contrast on text by placing it on the more opaque layers.
Avoid
- Opaque flat fills
- Hard outlines
- Heavy shadows
- Texture
Recipe: a selectable tile
[data-noodle="harusame"] .tile {
padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--mn-fg) 12%, transparent); border-radius: 16px;
background: var(--h-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
box-shadow: var(--h-edge);
}
[data-noodle="harusame"] .tile[aria-selected="true"] { background: color-mix(in srgb, var(--mn-primary) 18%, var(--h-glass)); }The same guide, for AI tools: /ai/noodles/harusame.md · MCP tool get_design_language.
Colour, type and brand
What Harusame 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 · 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.
Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. 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, cool, layered, modern, calm. Intensity 2 of 5.
Suits
dashboards, media apps, weather, consumer apps. Less suited to serious finance, legal.
Tone of voice
Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
Logo
Round marks fit: a circular symbol or a soft, lowercase wordmark.
Inspired by the noodle
- Glass noodles→frosted, see-through surfaces with backdrop blur
- Refraction→specular edge highlights and a sheen that sweeps across buttons
- Clear layers→translucent overlapping chart bars
- Crisp→precise, quick, blur-in transitions
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 Harusame. 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="harusame">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/harusame.css">
<!-- or scope it to one element -->
<section data-noodle="harusame" 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 | 12px · 20px · 999px |
| density | default |
| shadows | soft |