# Woonsen: a MIAN design language

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.

- Family: Glass · Origin: Thailand · glass noodles · License: MIAN License (free to use)
- Traits: crystal, bright, faceted, fresh, sparkling · intensity 3/5 · contrast medium · density default. Good for: jewellery, beauty, launches, drinks. Less for: dense admin.
- Use: `<html data-noodle="woonsen">` (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/woonsen.css
- Page: https://mian.ro/noodles/woonsen

## Design philosophy

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

## The language

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

## Colour, type and brand

- **Primary** #111827: blue (deep). Trust, competence, calm, distance. The world’s most-liked colour and the default of banks, software and social networks.
- **Accent** #3f6212: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #f5f7fb: white and paper (pale). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** Blue with green: a contrasting pair that needs one of the two to dominate. 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** crystal, bright, faceted, fresh, sparkling.
- **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.
- 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: "woonsen").

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

## Designing new components in Woonsen

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

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

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

## 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 10px, box 16px, badge 999px
- Density: default · Shadows: subtle · Translucent surfaces

| token | light | dark |
|---|---|---|
| bg | #f5f7fb | #07080d |
| surface | #ffffff | #11131c |
| surface2 | #eceff6 | #1a1d29 |
| fg | #111827 | #eef1f8 |
| muted | #4b5563 | #9aa3b5 |
| border | #dfe3ec | #272b3a |
| input | #c3c9d6 | #3b4154 |
| primary | #111827 | #eef1f8 |
| primaryFg | #ffffff | #111827 |
| secondary | #eceff6 | #1a1d29 |
| secondaryFg | #111827 | #eef1f8 |
| accent | #3f6212 | #bef264 |
| accentFg | #ffffff | #1a2e05 |
| ring | #111827 | #eef1f8 |
| 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 | #111827 | #eef1f8 |
| secondaryText | #696e7a | #7c7f88 |
| accentText | #3f6212 | #bef264 |
| successText | #15783b | #4ade80 |
| warningText | #aa4f0b | #fbbf24 |
| dangerText | #c82526 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #111827 | #eef1f8 |