Jjajang
Glossy black, bold and rich. Jjajangmyeon comes under a thick, glossy black-bean sauce with diced onion and a crisp tangle of cucumber on top. Jjajang is a bold, lacquered-black system: heavy glossy black surfaces with a wet highlight, bright cucumber-green and onion-cream accents, and rich, heavy type.
Design language
Jjajang is glossy black sauce. The noodles are coated in a thick, shining black-bean sauce and topped with crisp cucumber, so the interface is bold and filled: heavy glossy black controls with a wet highlight across the top, cucumber-green accents, onion-cream text on black, rich heavy type and generous round shapes.
Principles
- Filled, not outlined: selected and primary things are glossy black (--jj-sauce with --jj-gloss).
- Wet highlight: a bright band across the top half of black fills (--jj-wet).
- Cucumber green for focus, on-states and highlights.
- Heavy, rounded, generous: 800–900 type, 14–20px radii, comfortable density.
Shape
14px fields, 20px panels, pills for badges and tabs.
Surface
Warm white with deep soft shadows; black glossy fills for emphasis.
Colour
Sauce black primary, cucumber green accent, onion cream on black.
Type
Sans at 800–900.
Motion
jjajang-in: rise with a light overshoot, 300ms; hover brightens the gloss.
Data
Glossy black bars with a green highlight; thick lines.
Designing new components in Jjajang
MIAN does not ship every component you will need. To make a new one that belongs in Jjajang, build it from --mn-* tokens inside [data-noodle="jjajang"] and follow these rules.
Do
- Emphasis = background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet).
- Use var(--mn-accent) (cucumber) for the single focus or on-state.
- Round and heavy: radius ≥14px, weight ≥750.
Avoid
- Thin outlines as the main style
- Pale pastels
- Light type weights
Recipe: a selectable tile
[data-noodle="jjajang"] .tile {
padding: 14px 18px; border: 0; border-radius: 20px; background: var(--mn-surface-2); font-weight: 750;
}
[data-noodle="jjajang"] .tile[aria-selected="true"] { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet); }The same guide, for AI tools: /ai/noodles/jjajang.md · MCP tool get_design_language.
Colour, type and brand
What Jjajang 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 · Black and ink
Authority, precision, luxury. It makes everything next to it look more deliberate.
Watch for: Pure #000 on pure #fff is harsh on long text. Soften one of the two slightly, or warm both.
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 · Brown and terracotta
Earth, craft, reliability, age. Feels made by hand and unhurried.
Watch for: Looks dull on screens unless the neutrals around it are warm too.
A neutral primary with one green accent: the accent means “look here” precisely because nothing else is coloured. The page itself is warm.
Type
One voice throughout: neutral sans. Headings are heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.
Personality
Reads as glossy, rich, dark, bold, premium. Intensity 4 of 5.
Suits
nightlife, music, gaming, premium brands. Less suited to public services, children.
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
- A thick, glossy black sauce→deep black fills with a wet highlight across the top
- Stirred through until every strand is coated→bold filled controls rather than outlines
- Cucumber on top→a crisp green accent; diced onion
- Rich and heavy→large, heavy type and generous, rounded shapes
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 Jjajang. 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="jjajang">
<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/jjajang.css">
<!-- or scope it to one element -->
<section data-noodle="jjajang" 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 | 14px · 20px · 999px |
| density | comfortable |
| shadows | soft |