Hakata

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.

LinearJapan · Fukuokaradius 3px / 4pxcompact densitynone shadows

Use Hakata Design language (Markdown)Tokens JSON

Design language

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.

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

Designing new components in Hakata

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

Do

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

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

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

Colour, type and brand

What Hakata 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 · Magenta and pink

#d61f4f · mid, saturated

Play, tenderness, boldness. Pale pinks are gentle; hot magenta is loud and modern.

Watch for: Heavily gendered in some markets; test with the real audience instead of assuming.

Page · White and paper

#f7f7f5 · 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 magenta and pink 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 heavy, which reads as loud and direct. Clear, modern, impartial. The voice of software and signage.

Personality

Reads as fast, thin, efficient, technical, dense. Intensity 2 of 5.

Suits

dashboards, fitness and tracking apps, data-heavy tools, trading. Less suited to editorial storytelling.

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.

Inspired by the noodle

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

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

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

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

Surface#ffffff

Muted surface#efefec

Foreground#111111

Muted text#5a5a5a

Border#e2e2de

Input border#c4c4bf

Primary#111111

On primary#ffffff

Secondary#efefec

Accent#d61f4f

Success#15803d

Warning#b45309

Danger#dc2626

Info#0369a1

Focus ring#d61f4f

Typography & shape

--mn-font	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-font-heading	ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
--mn-radius-field / box / badge	3px · 4px · 2px
density	compact
shadows	none