# Jjajang: a MIAN design language

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.

- Family: Bold · Origin: Korea · License: MIAN License (free to use)
- Traits: glossy, rich, dark, bold, premium · intensity 4/5 · contrast high · density comfortable. Good for: nightlife, music, gaming, premium brands. Less for: public services, children.
- Use: `<html data-noodle="jjajang">` (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/jjajang.css
- Page: https://mian.ro/noodles/jjajang

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #15110d: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #3f7d1f: green (mid). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #f6f3ee: brown and terracotta (pale, muted). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Scheme.** A neutral primary with one green accent: the accent means “look here” precisely because nothing else is coloured. The page 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.
- **Reads as** glossy, rich, dark, bold, premium.
- **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: "jjajang").

## 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 → warm cream text on black
- Rich and heavy → large, heavy type and generous, rounded shapes

## Designing new components in Jjajang

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

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

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

## 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 14px, box 20px, badge 999px
- Density: comfortable · Shadows: soft

| token | light | dark |
|---|---|---|
| bg | #f6f3ee | #050403 |
| surface | #ffffff | #110e0b |
| surface2 | #ebe6de | #1c1814 |
| fg | #15110d | #f6f0e6 |
| muted | #5f554a | #ac9f8e |
| border | #ddd5ca | #2c2620 |
| input | #bcb0a1 | #4a4138 |
| primary | #15110d | #f6f0e6 |
| primaryFg | #f6f3ee | #110e0b |
| secondary | #ebe6de | #1c1814 |
| secondaryFg | #15110d | #f6f0e6 |
| accent | #3f7d1f | #9bdc62 |
| accentFg | #ffffff | #132503 |
| ring | #3f7d1f | #9bdc62 |
| 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 | #15110d | #f6f0e6 |
| secondaryText | #736f69 | #807b75 |
| accentText | #3c771e | #9bdc62 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #15110d | #f6f0e6 |