# Hakata: a MIAN design language

Thin, straight, fast. Hakata ramen uses ultra-thin straight noodles, boiled for seconds and ordered by firmness, with a refill (kaedama) called for the moment the bowl runs low. Hakata is a fast, horizontal system: pinstripe speed lines, everything aligned to straight rules, compact density, oblique headings and motion measured in tens of milliseconds.

- Family: Linear · Origin: Japan · Fukuoka · License: MIAN License (free to use)
- Traits: fast, thin, efficient, technical, dense · intensity 2/5 · contrast medium · density compact. Good for: dashboards, fitness and tracking apps, data-heavy tools, trading. Less for: editorial storytelling.
- Use: `<html data-noodle="hakata">` (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/hakata.css
- Page: https://mian.ro/noodles/hakata

## Design philosophy

Hakata is speed along straight lines. Its noodles are ultra-thin and perfectly straight, cooked in seconds, and ordered at a counter where everything happens fast. The interface is compact and horizontal: fields sit on a rule, surfaces carry pinstripe speed lines, headings lean forward (oblique), and motion is the fastest in MIAN, things slide in along the line in about 100ms.

## Principles

- Everything on a straight horizontal rule: fields are filled strips with a 2px bottom rule, cards are ruled top and bottom only.
- Pinstripes (--hk-pin: 1px every 4px) mark headers and active surfaces.
- Compact density; uppercase, tracked labels.
- Forward lean: oblique headings (font-style: oblique 10deg).
- Fast: 90–110ms, ease-out, horizontal slides.

## The language

- **Shape.** 3px fields, 4px containers, 2px badges; long low switches with a bar knob.
- **Surface.** Milk-white with pinstriped header bands; no side borders on cards.
- **Colour.** Ink primary, pickled-ginger red accent for focus, current items and highlights.
- **Type.** Sans at 700–800; oblique headings; uppercase, tracked buttons and tabs.
- **Motion.** hakata-in: 10px slide from the left, 110ms. Progress and spinners run with moving stripes.
- **Data.** Tight bars (3px gap), square line caps, a denser grid (8 rows).

## Colour, type and brand

- **Primary** #111111: black and ink (deep, muted). Authority, precision, luxury. It makes everything next to it look more deliberate.
- **Accent** #d61f4f: magenta and pink (mid, saturated). Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.
- **Page** #f7f7f5: white and paper (pale, muted). Space, honesty, simplicity. Warm whites feel human, cool whites feel clinical.
- **Scheme.** A neutral primary with one magenta and pink accent: the accent means “look here” precisely because nothing else is coloured. The page is neutral.
- **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** fast, thin, efficient, technical, dense.
- **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. 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: "hakata").

## Inspired by the noodle

- Thin, perfectly straight strands → horizontal pinstripes and long straight rules
- Boiled for seconds → the fastest motion of any noodle (90ms), sliding in along the line
- Ordered by firmness at the counter → compact, dense controls built for speed
- Milky pork broth and red pickled ginger → milk-white surfaces with a ginger-red accent

## Designing new components in Hakata

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

- Put the component on a rule: border-width: 0 0 2px or 1px top/bottom only.
- Use var(--hk-pin) as the background of headers or hovered rows.
- Selected = a 2–3px ginger-red line (inset box-shadow) at the leading edge or underneath.
- Keep it compact (var(--mn-size-sm) heights) and uppercase the labels.

Avoid:

- Rounded pills and large radii
- Vertical emphasis
- Slow or bouncy motion
- Side borders

Recipe: a selectable tile in this language:

```css
[data-noodle="hakata"] .tile {
  padding: 8px 12px; border: 0; border-bottom: 2px solid var(--mn-border); border-radius: 0;
  background: var(--mn-surface-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  transition: box-shadow 90ms cubic-bezier(0, 0, .2, 1);
}
[data-noodle="hakata"] .tile:hover { background-image: var(--hk-pin); }
[data-noodle="hakata"] .tile[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--mn-accent); border-bottom-color: var(--mn-fg); }
```

## 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 3px, box 4px, badge 2px
- Density: compact · Shadows: none

| token | light | dark |
|---|---|---|
| bg | #f7f7f5 | #0c0c0c |
| surface | #ffffff | #141414 |
| surface2 | #efefec | #1e1e1e |
| fg | #111111 | #f0f0ee |
| muted | #5a5a5a | #a0a09c |
| border | #e2e2de | #2a2a2a |
| input | #c4c4bf | #444444 |
| primary | #111111 | #f0f0ee |
| primaryFg | #ffffff | #111111 |
| secondary | #efefec | #1e1e1e |
| secondaryFg | #111111 | #f0f0ee |
| accent | #d61f4f | #ff5c85 |
| accentFg | #ffffff | #2a0510 |
| ring | #d61f4f | #ff5c85 |
| 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 | #f0f0ee |
| secondaryText | #6e6e6d | #7f7f7e |
| accentText | #c61e4a | #ff5c85 |
| successText | #15793a | #4ade80 |
| warningText | #aa4f09 | #fbbf24 |
| dangerText | #c82424 | #f87171 |
| infoText | #0369a1 | #38bdf8 |
| link | #111111 | #f0f0ee |