# Kalguksu: a MIAN design language

Knife-cut, precise, clean. Kalguksu means "knife noodles": dough rolled flat on a floured board and cut by hand into clean strips. Kalguksu is a monochrome, grid-true system with crisp 45° cut corners, tabular numbers and motion that slices rather than fades.

- Family: Linear · Origin: Korea · License: MIAN License (free to use)
- Traits: precise, structured, monochrome, dependable, engineered · intensity 2/5 · contrast high · density default. Good for: finance, admin dashboards, b2b saas, analytics, logistics. Less for: children, playful consumer.
- Use: `<html data-noodle="kalguksu">` (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/kalguksu.css
- Page: https://mian.ro/noodles/kalguksu

## Design philosophy

Kalguksu means “knife noodles”: dough rolled flat on a floured board and cut into clean strips by hand. The language is monochrome, measured and exact, a strict grid, full table rules, tabular numbers, and its signature is the cut: 45° corners on labels, bars and progress ends, and motion that slices content in rather than fading it.

## Principles

- The grid is visible: tables are fully ruled, segmented controls share borders, charts sit on a dotted board.
- Cut, don’t round: small elements get a 45° chamfer (6px) instead of a radius.
- Ink and flour: black, white and greys; one zucchini-green accent for focus and meaning.
- Numbers and labels are monospaced and tabular.
- Motion slices along a line (clip-path wipes) in 120–240ms with a sharp in-out curve.

## The language

- **Shape.** 6px fields, 8px containers, 0px badges with a cut top-right corner. The switch knob is a thin blade.
- **Surface.** White on white with 1px borders; card headers and modal headers are separated by a full rule; footers sit on surface-2.
- **Colour.** Pure monochrome; the accent (deep green / light green in dark) is reserved for focus rings and highlights.
- **Type.** Clean sans at 600 with tight tracking (−0.035em) for headings; uppercase mono labels at 11px with 0.06em tracking.
- **Motion.** kalguksu-drop: clip-path inset(0 0 100% 0) → inset(0), 240ms cubic-bezier(.7,0,.3,1). Tab underlines are drawn left-to-right with scaleX.
- **Data.** Square bars with the top-left corner cut, on a 12px dot grid; progress is a tick-marked strip with a slanted leading edge; dashed grid lines.

## Colour, type and brand

- **Primary** #0a0a0a: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #2f6f3e: green (mid). Growth, health, permission, money. The easiest colour to look at for a long time.
- **Page** #ffffff: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one green accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **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** precise, structured, monochrome, dependable, engineered (brand dimension: competence).
- **Tone of voice.** Calm and clear. Short sentences, one idea each, a friendly but not chatty register.
- **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: "kalguksu").

## Inspired by the noodle

- Cut with a knife → 45° cut corners on badges, bars and progress ends; content wipes in like a slice
- Rolled flat on a board → a strict grid: full table rules, square hit areas, a dotted chart grid
- Flour-dusted dough → pure white and ink black, one zucchini-green accent from the garnish
- Hand-measured strips → monospaced numbers and labels, blade-thin switch knob

## Designing new components in Kalguksu

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

- Give the component 1px var(--mn-border) edges and align every internal division to a shared rule, no floating gaps.
- Label with uppercase mono (font: 500 .6875rem var(--mn-font-mono); letter-spacing .06em).
- Mark importance with a clip-path chamfer: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%).
- Selected = inverted (fg background, bg text). Pressing adds an inset 1px line; nothing moves.

Avoid:

- Large radii and pills
- Soft shadows
- Colour used decoratively
- Proportional numbers in data
- Fade-only or bouncy motion

Recipe: a selectable tile in this language:

```css
[data-noodle="kalguksu"] .tile {
  padding: 12px 14px; border: 1px solid var(--mn-border); border-radius: 0;
  background: var(--mn-surface); font-feature-settings: "tnum";
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
[data-noodle="kalguksu"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }
[data-noodle="kalguksu"] .tile .label { font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
```

## Tokens

- Fonts: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Heading font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
- Radius: field 6px, box 8px, badge 0px
- Density: default · Shadows: subtle

| token | light | dark |
|---|---|---|
| bg | #ffffff | #0a0a0a |
| surface | #ffffff | #111111 |
| surface2 | #f4f4f3 | #1b1b1b |
| fg | #0a0a0a | #ededed |
| muted | #5e5e5e | #a3a3a3 |
| border | #e6e6e6 | #262626 |
| input | #d0d0d0 | #3b3b3b |
| primary | #0a0a0a | #ededed |
| primaryFg | #ffffff | #0a0a0a |
| secondary | #f4f4f3 | #1b1b1b |
| secondaryFg | #0a0a0a | #ededed |
| accent | #2f6f3e | #86c795 |
| accentFg | #ffffff | #0b1f10 |
| ring | #2f6f3e | #86c795 |
| 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 | #0a0a0a | #ededed |
| secondaryText | #717171 | #808080 |
| accentText | #2f6f3e | #86c795 |
| successText | #14793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c72323 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #0a0a0a | #ededed |