Ramyeon

Three minutes, a terminal and a timer. Ramyeon comes in a packet with instructions: boil 550 ml, add noodles and soup, wait three minutes. Ramyeon is a terminal system: monospace everything, square corners, [ bracketed ] buttons, block-character progress, a text spinner and a blinking cursor, instructions, not decoration.

MinimalKorea · instant noodlesradius 0px / 0pxcompact densitynone shadows

Use Ramyeon Design language (Markdown)Tokens JSON

Design language

Ramyeon is a terminal. Its world is a packet of printed instructions and a three-minute wait, so the interface is plain monospaced text on a strict character grid: square corners, [ bracketed ] buttons and badges, selection shown in inverse video, progress and bars built from character blocks, a | /, \ spinner and a blinking cursor. Instructions, not decoration.

Principles

Monospace everything; uppercase, tracked labels.
Brackets mark what you can press or read as a token: [ SAVE ], [NEW].
Selection = inverse video (fg background, bg text). Hover on quiet buttons inverts too.
Blocks, not bars: progress and chart bars are rows of solid blocks with 2px gaps.
Steps, not easing: motion uses steps(), typing in, ticking spinners, stepped fills.

Shape

0px radius everywhere; square knobs and checkboxes.

Surface

Paper white or true black, 1px solid or dashed rules, a faint offset shadow on floating panels.

Colour

Ink and paper; amber accent (cursor, focus, highlights).

Type

Monospace at 400/600/700; # before card titles, ! before alert titles.

Motion

ramyeon-type: clip-path reveal in 10 steps (220ms); ramyeon-tick spinner in 4 steps.

Data

Block-character bars (6px blocks, 2px gaps), square line joins, dashed grid lines.

Designing new components in Ramyeon

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

Do

font-family: var(--mn-font-mono); border-radius: 0; border: 1px solid var(--mn-fg) (or 1px dashed var(--mn-input) for quiet rules).
Wrap action labels in brackets with ::before / ::after content "[" "]".
Selected / hovered rows and items: background var(--mn-fg); color var(--mn-bg).
Show quantities as repeating-linear-gradient blocks (6px fill, 2px gap).

Avoid

Rounded corners
Proportional fonts
Smooth easing and fades
Gradients or glass

Recipe: a selectable tile

[data-noodle="ramyeon"] .tile { padding: 8px 12px; border: 1px dashed var(--mn-input); border-radius: 0; font-family: var(--mn-font-mono); text-transform: uppercase; letter-spacing: .04em; }
[data-noodle="ramyeon"] .tile::before { content: "[ ] "; }
[data-noodle="ramyeon"] .tile[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); border-style: solid; }
[data-noodle="ramyeon"] .tile[aria-selected="true"]::before { content: "[x] "; }

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

Colour, type and brand

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

#111111 · 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 · Brown and terracotta

#a34c05 · mid, saturated

Earth, craft, reliability, age. Feels made by hand and unhurried.

Watch for: Looks dull on screens unless the neutrals around it are warm too.

Page · White and paper

#f7f7f4 · 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 brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. The page itself is neutral.

Type

One voice throughout: monospace. Headings are semibold, which reads as confident without shouting. Technical, exact, raw, honest. The voice of code, receipts and instruments.

Personality

Reads as technical, terminal, nerdy, raw, fast. Intensity 2 of 5.

Suits

developer tools, cli products, hacker events, changelogs, infrastructure. Less suited to luxury, children, wellness.

Tone of voice

Calm and clear. Short sentences, one idea each, a friendly but not chatty register.

Logo

Square and angular marks fit: a wordmark in capitals or a solid block symbol. A monospaced wordmark matches the headings.

Inspired by the noodle

Printed instructions on the packetmonospace type, plain text first, uppercase labels
Three minutes on a timerblock-character progress bars and a | / - \ text spinner
A block of dried noodlessquare corners and a strict character grid
Late-night screensamber on black in dark mode, ink on paper in light

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="ramyeon">

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

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

Surface#ffffff

Muted surface#eeeeea

Foreground#111111

Muted text#595955

Border#d9d9d4

Input border#a9a9a3

Primary#111111

On primary#f7f7f4

Secondary#eeeeea

Accent#a34c05

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#a34c05

Typography & shape

--mn-font	ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
--mn-font-heading	ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
--mn-radius-field / box / badge	0px · 0px · 0px
density	compact
shadows	none