# Harusame: a MIAN design language

Clear, cool, layered. Glass noodles. Translucent surfaces with backdrop blur over a soft gradient, large radii, sky-blue primary. For dashboards and media.

- Family: Glass · Origin: Japan · glass noodles · License: MIAN License (free to use)
- Traits: glass, cool, layered, modern, calm · intensity 2/5 · contrast medium · density default. Good for: dashboards, media apps, weather, consumer apps. Less for: serious finance, legal.
- Use: `<html data-noodle="harusame">` (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/harusame.css
- Page: https://mian.ro/noodles/harusame

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #0369a1: blue (mid, saturated). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #9a4a12: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #eef2f7: blue (pale). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Scheme.** Blue against brown and terracotta, close to complementary: strong contrast, so the accent must stay rare. 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, cool, layered, modern, calm.
- **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.
- 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: "harusame").

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

## Designing new components in Harusame

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

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

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

## 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 12px, box 20px, badge 999px
- Density: default · Shadows: soft · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #eef2f7 | #0a0f1a |
| surface | #ffffff | #131b2b |
| surface2 | #e4eaf2 | #1c2536 |
| fg | #0f172a | #e8eef7 |
| muted | #4f5d70 | #95a3b8 |
| border | #d8e0eb | #27334a |
| input | #c3cedc | #374560 |
| primary | #0369a1 | #38bdf8 |
| primaryFg | #ffffff | #04202e |
| secondary | #e2e8f0 | #1c2536 |
| secondaryFg | #0f172a | #e8eef7 |
| accent | #9a4a12 | #fdba74 |
| accentFg | #ffffff | #2a1403 |
| ring | #0369a1 | #38bdf8 |
| 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 | #0369a1 | #38bdf8 |
| secondaryText | #636b79 | #7e8593 |
| accentText | #9a4a12 | #fdba74 |
| successText | #15783b | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c82526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0369a1 | #38bdf8 |