Kalguksu

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.

LinearKorearadius 6px / 8pxdefault densitysubtle shadows

Use Kalguksu Design language (Markdown)Tokens JSON

Design language

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.

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.

Designing new components in Kalguksu

MIAN does not ship every component you will need. To make a new one that belongs in Kalguksu, build it from --mn-* tokens inside [data-noodle="kalguksu"] and follow these rules.

Do

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

[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; }

The same guide, for AI tools: /ai/noodles/kalguksu.md · MCP tool get_design_language.

Colour, type and brand

What Kalguksu 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

#0a0a0a · deep, muted

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

#2f6f3e · mid

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 · White and paper

#ffffff · pale, muted

Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.

Watch for: Empty is not the same as calm: white space needs a grid behind it.

A neutral primary with one green accent: the accent means “look here” precisely because nothing else is coloured. The page itself 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.

Personality

Reads as precise, structured, monochrome, dependable, engineered. Intensity 2 of 5. Brand dimension: competence.

Suits

finance, admin dashboards, b2b saas, analytics, logistics. Less suited to children, playful consumer.

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.

Inspired by the noodle

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

Specimen

The same markup as every other noodle. Press, hover, open the menu and the dialog: shape, depth, texture and motion all change.

Try your brand colour

Your own

Open in the studio

Light

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Dark

Buttons

Fields

Name

Choices

Check Radio

Status

NewPaidPendingDraftTag

Tabs

Overview panel.

Activity panel.

Settings panel.

Bars

Line & donut

45%

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

Use it

<!-- everything -->
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<html data-noodle="kalguksu">

<!-- or only this noodle -->
<link rel="stylesheet" href="https://mian.ro/dist/mian-core.css">
<link rel="stylesheet" href="https://mian.ro/dist/noodles/kalguksu.css">

<!-- or scope it to one element -->
<section data-noodle="kalguksu" 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.

Background#ffffff

Surface#ffffff

Muted surface#f4f4f3

Foreground#0a0a0a

Muted text#5e5e5e

Border#e6e6e6

Input border#d0d0d0

Primary#0a0a0a

On primary#ffffff

Secondary#f4f4f3

Accent#2f6f3e

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#2f6f3e

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
--mn-font-heading	ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
--mn-radius-field / box / badge	6px · 8px · 0px
density	default
shadows	subtle