Laksa
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.
Design language
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).
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.
Designing new components in Laksa
MIAN does not ship every component you will need. To make a new one that belongs in Laksa, build it from --mn-* tokens inside [data-noodle="laksa"] and follow these rules.
Do
- 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
[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); }The same guide, for AI tools: /ai/noodles/laksa.md · MCP tool get_design_language.
Colour, type and brand
What Laksa 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 · Red
Urgency, energy, appetite, danger. It raises attention faster than any other hue and reads as the most forceful.
Watch for: It is also the colour of errors. A red primary button next to a red error message makes both ambiguous, so pair a red brand with a distinct danger treatment (icon and words).
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 · Orange
Warmth, friendliness, appetite, affordability. Active like red, without the alarm.
Watch for: Can read as cheap when saturated across large areas; text on orange rarely passes contrast, so use it for fills with dark text or for accents.
Red with green: a contrasting pair that needs one of the two to dominate. The page itself 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.
Personality
Reads as spicy, warm, colourful, layered, vibrant. Intensity 4 of 5. Brand dimension: excitement.
Suits
food, festivals, travel, culture. Less suited to enterprise, legal.
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.
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
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 Laksa. 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="laksa">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/laksa.css">
<!-- or scope it to one element -->
<section data-noodle="laksa" 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-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", 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 | 14px · 22px · 999px |
| density | comfortable |
| shadows | soft |