# Laksa: a MIAN design language

Spicy, creamy, layered colour. Curry laksa is rice noodles in a rich coconut-curry broth, red with chilli oil, topped with tofu puffs, lime and laksa leaf. Laksa is a bold colour system: saturated sambal red over coconut cream, thick coloured rings and bands, and a bubbling pulse of motion.

- Family: Bold · Origin: Malaysia · Singapore · License: MIAN License (free to use)
- Traits: spicy, warm, colourful, layered, vibrant · intensity 4/5 · contrast medium · density comfortable. Good for: food, festivals, travel, culture. Less for: enterprise, legal.
- Use: `<html data-noodle="laksa">` (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/laksa.css
- Page: https://mian.ro/noodles/laksa

## Design philosophy

Laksa is layered colour. Chilli oil floats in a red layer over creamy coconut broth, so the interface is bold and saturated: sambal red over coconut cream in thick bands, thick coloured rings instead of thin borders, full round shapes, laksa-leaf and lime accents, and a bubbling pulse as things arrive.

## Principles

- Thick rings (3px inset box-shadows) replace thin borders.
- Layers: a band of chilli red floats on top of cream surfaces (inset top band plus --lk-oil).
- Saturated and warm: red, turmeric, leaf green, cream.
- Round and plump with a bubbling spring (laksa-in, laksa-bubble).

## The language

- **Shape.** 14px fields, 22px panels, pill buttons with a 4px darker base edge.
- **Surface.** Coconut cream with a red band on top and warm coloured shadows.
- **Colour.** Sambal red primary, laksa-leaf green accent, turmeric and chilli series.
- **Type.** Rounded body, heavy (850) headings.
- **Motion.** laksa-in: pop with overshoot 360ms; checkboxes bubble; the spinner is a rising ripple.
- **Data.** Round saturated bars in four broth colours, thick lines and a thick donut.

## Colour, type and brand

- **Primary** #be3a10: red (mid, saturated). Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
- **Accent** #3f6212: green (deep). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #fff5e8: orange (pale, saturated). Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
- **Scheme.** Red with green: a contrasting pair that needs one of the two to dominate. The page is warm.
- **Type.** Two voices: neutral sans for headings, rounded sans for the interface. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
- **Reads as** spicy, warm, colourful, layered, vibrant (brand dimension: excitement).
- **Tone of voice.** Bold. Short claims, strong verbs, big numbers. Say one thing per screen and say it loudly.
- **Logo.** Round marks fit: a circular symbol or a soft, lowercase wordmark. Use a heavy wordmark; a thin one would vanish beside these headings.
- 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: "laksa").

## Inspired by the noodle

- Chilli oil floating on coconut broth → saturated red-orange over warm cream, layered in thick bands
- Rich and creamy → full, rounded shapes with thick coloured rings instead of borders
- Laksa leaf and lime → herb green and lime as accents
- A simmering pot → components bubble in with a soft pulse

## Designing new components in Laksa

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

- Outline with box-shadow: inset 0 0 0 3px (colour at 30–45%) instead of border.
- Put a 5px inset top band of var(--mn-primary) on panels.
- Buttons: 999px radius, 4px darker bottom edge, lift on hover.

Avoid:

- 1px hairlines
- Cold neutrals
- Flat, unlayered surfaces

Recipe: a selectable tile in this language:

```css
[data-noodle="laksa"] .tile {
  padding: 16px 18px; border: 0; border-radius: 22px; background: var(--mn-surface);
  box-shadow: inset 0 5px 0 var(--mn-primary), inset 0 0 0 3px var(--mn-border);
}
[data-noodle="laksa"] .tile[aria-selected="true"] { box-shadow: inset 0 0 0 3px var(--mn-primary), 0 0 0 3px color-mix(in oklab, var(--mn-primary) 22%, transparent); }
```

## Tokens

- Fonts: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
- Radius: field 14px, box 22px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #fff5e8 | #170b06 |
| surface | #fffcf6 | #22120a |
| surface2 | #fbe6cd | #2f1a0f |
| fg | #2a120a | #fdebdc |
| muted | #6e4a36 | #c9a58c |
| border | #f2d6b6 | #45281a |
| input | #dfb58b | #654030 |
| primary | #be3a10 | #ff8a5b |
| primaryFg | #ffffff | #2a0d03 |
| secondary | #fbe6cd | #2f1a0f |
| secondaryFg | #2a120a | #fdebdc |
| accent | #3f6212 | #b5e36b |
| accentFg | #ffffff | #172603 |
| ring | #be3a10 | #ff8a5b |
| 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 | #b83810 | #ff8a5b |
| secondaryText | #826b5c | #927e71 |
| accentText | #3f6212 | #b5e36b |
| successText | #177739 | #4ade80 |
| warningText | #a64d09 | #fbbf24 |
| dangerText | #c32322 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #be3a10 | #ff8a5b |