Woonsen
Crystal clear, a prism at the edge. Woonsen are Thai glass noodles, crystal clear in a bright salad of lime, chilli and herbs. Woonsen is a crystal system: clear glass with faceted, bevelled edges that split light into a thin prism of colour, and small sparkles of motion.
Design language
Woonsen is cut crystal. Thai glass noodles are crystal clear in a bright salad, so the interface is clear, lightly frosted glass with bevelled edges, a light facet top-left, a darker one bottom-right, and a thin prism of colour where light splits along borders, focus rings and the current tab. Things arrive with a quick sparkle.
Principles
- The prism edge: a 1px conic rainbow border (padding-box glass over a border-box --w-prism).
- Bevels, not shadows: --w-bevel gives every raised thing cut facets.
- Clear and bright: 60–90% glass over a pale prismatic wash.
- A glint sweeps across buttons on hover; entrances sparkle (brightness → normal).
Shape
10px fields, 16px panels, pill badges.
Surface
Clear frosted glass with a prism edge, bevels and a light lift.
Colour
Violet primary, lime accent; the prism (pink, gold, lime, cyan, lilac) only at edges.
Type
Clean sans at 600–650.
Motion
woonsen-in: from brightness(1.6) desaturated to normal, 300ms; woonsen-glint on hover.
Data
Cut-glass bars with a facet highlight; a turning prism-ring spinner.
Designing new components in Woonsen
MIAN does not ship every component you will need. To make a new one that belongs in Woonsen, build it from --mn-* tokens inside [data-noodle="woonsen"] and follow these rules.
Do
- border: 1px solid transparent; background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, var(--w-prism) border-box.
- Add box-shadow: var(--w-bevel), var(--w-lift).
- Use the prism only on edges and indicators, never fill an area with it.
Avoid
- Rainbow fills
- Dark smoky tints
- Soft blurred-only edges
Recipe: a selectable tile
[data-noodle="woonsen"] .tile {
padding: 14px 16px; border: 1px solid transparent; border-radius: 16px;
background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, var(--w-prism) border-box;
-webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
box-shadow: var(--w-bevel), var(--w-lift);
}The same guide, for AI tools: /ai/noodles/woonsen.md · MCP tool get_design_language.
Colour, type and brand
What Woonsen 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 · Green
Growth, health, permission, money. The easiest colour to look at for a long time.
Watch for: Success messages are green too: a green brand needs a success state that is clearly a status (icon, words). Claims of sustainability made with green alone read as greenwashing.
Page · White and paper
Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
Watch for: Empty is not the same as calm: white space needs a grid behind it.
Blue with green: 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 crystal, bright, faceted, fresh, sparkling. Intensity 3 of 5.
Suits
jewellery, beauty, launches, drinks. Less suited to dense admin.
Tone of voice
Lively. A point of view in the headline, concrete verbs, a little humour where it is true.
Logo
A simple geometric mark with slightly softened corners fits; avoid both hard spikes and full circles.
Inspired by the noodle
- Crystal clear→clear, lightly frosted glass on a bright white page
- Light through glass→a thin iridescent prism along edges and focus rings
- Cut glass facets→bevelled edges: a light edge on top-left, a dark edge on bottom-right
- Lime and chilli→a bright, zesty accent; a quick sparkle when things appear
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 Woonsen. 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="woonsen">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/woonsen.css">
<!-- or scope it to one element -->
<section data-noodle="woonsen" 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 | 10px · 16px · 999px |
| density | default |
| shadows | subtle |