# Ramyeon: a MIAN design language

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.

- Family: Minimal · Origin: Korea · instant noodles · License: MIAN License (free to use)
- Traits: technical, terminal, nerdy, raw, fast · intensity 2/5 · contrast high · density compact. Good for: developer tools, cli products, hacker events, changelogs, infrastructure. Less for: luxury, children, wellness.
- Use: `<html data-noodle="ramyeon">` (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/ramyeon.css
- Page: https://mian.ro/noodles/ramyeon

## Design philosophy

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.

## The language

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

## Colour, type and brand

- **Primary** #111111: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #a34c05: brown and terracotta (mid, saturated). Earth, craft, reliability, age. Feels made by hand and unhurried.
- **Page** #f7f7f4: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one brown and terracotta accent: the accent means “look here” precisely because nothing else is coloured. The page 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.
- **Reads as** technical, terminal, nerdy, raw, fast.
- **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.
- 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: "ramyeon").

## Inspired by the noodle

- Printed instructions on the packet → monospace type, plain text first, uppercase labels
- Three minutes on a timer → block-character progress bars and a | / - \ text spinner
- A block of dried noodles → square corners and a strict character grid
- Late-night screens → amber on black in dark mode, ink on paper in light

## Designing new components in Ramyeon

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

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

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

## Tokens

- Fonts: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
- Heading font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace
- Radius: field 0px, box 0px, badge 0px
- Density: compact · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f7f7f4 | #0b0b0a |
| surface | #ffffff | #121211 |
| surface2 | #eeeeea | #1b1b19 |
| fg | #111111 | #e9e9e4 |
| muted | #595955 | #9d9d97 |
| border | #d9d9d4 | #2a2a27 |
| input | #a9a9a3 | #55554f |
| primary | #111111 | #e9e9e4 |
| primaryFg | #f7f7f4 | #0b0b0a |
| secondary | #eeeeea | #1b1b19 |
| secondaryFg | #111111 | #e9e9e4 |
| accent | #a34c05 | #fbbf24 |
| accentFg | #ffffff | #1f1300 |
| ring | #a34c05 | #fbbf24 |
| 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 | #111111 | #e9e9e4 |
| secondaryText | #6e6e6c | #7e7e7a |
| accentText | #a34c05 | #fbbf24 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #111111 | #e9e9e4 |