Mirako

The Ledger

Mirako’s design system, and the only one.

Every page on this site links one stylesheet. This page is drawn from that same stylesheet, so if a swatch here is wrong the site is wrong with it.

Source of truth mirako.css
Accent Iris #9391C3, sampled from the mark
Corners 90°. No radius anywhere in the system.

A printed sheet, not a screen. Hairlines instead of cards.

Everything here follows from that one idea. Rules divide, they don’t enclose. There is no elevation, because paper has none. Colour is spent on what is moving and nothing else, and every state that matters is drawn as a shape first so it survives losing its hue entirely.

Colour

Six surfaces, three inks, one accent. The ground is cool slate rather than neutral black — a slight blue cast reads better on a screen than true grey, and it keeps the paper metaphor from going warm and editorial.

Stock#12151BThe page.
Field#171B23Insets, panels, specimens.
Rule 2#212734Rows within a block.
Rule#2B3140Structure. Also the watermark.
Flat#3B3A63The masthead. One per page.
Iris#9391C3The accent. Sampled from the mark, not chosen. Reserved.
Ink 3#7C8593Labels, meta. 4.9:1.
Ink 2#9BA5B4Body copy. 7.4:1.
Ink#E3E7ECHeadings, the human hand. 14.9:1.
The rule that does the most work

Colour is reserved for what is moving. The accent marks a live project, something a machine did, or the one primary action on a surface. It never marks a heading, a link, or a section just to make the page look designed.

If two accented things are visible at rest in one block, one of them is decoration and gets demoted.

Type

Three roles and no more. Mono is for data, identifiers and measurement — never as costume for “technical”.

Display
Familjen Grotesk
700 · page titles · tracking −.035em
Headings
Section headings, 600
clamp(1.35rem, 2.6vw, 1.75rem)
Body

Onest, 400. Set at 16.5px on marketing pages and 14px in product chrome, because a surface you read once and a surface you stare at all day want different densities. Measure stays between 58 and 66ch.

Mono
Martian Mono — PL‑7 · 09:04 · !41
tabular-nums always on for anything that lines up in a column
Label
Uppercase mono, tracking .16em .6rem · the chrome voice

State markers

The load-bearing idea. Every state is a shape before it is a colour, so the whole system can be desaturated without losing a single distinction. That is what makes the neutral chrome below possible at all.

Live · machineFilled diamond, accent. In development, or an entry a machine wrote.
PausedHollow square. Work that stopped but could resume.
StoppedStruck bar. Dead, and labelled with the reason.
InternalHollow diamond. Exists, not published.
PersonFilled square, full ink. The human hand in any log.
Why it matters

A person and a machine writing into the same record is the thing Mirako is actually about. In the log it reads as filled square versus filled diamond — two shapes, two values, no hue required.

Test for any new marker: print it in greyscale. If you can still tell it apart, it is a real marker. If you cannot, it was a colour swatch pretending to be one.

Neutral chrome

Brand colour is a marketing instrument. A surface somebody stares at for eight hours needs its colour budget for meaning — destructive, error, degraded — not for identity.

One class, whole surfacemirako.css
/* marketing keeps the iris. apps get this. */
.chrome-neutral{
  --mach:#A8B2BF;   /* the machine hand, desaturated */
  --mach-flat:#232A36;
  --lift:rgba(227,231,236,.07);       /* selection */
  --lift-soft:rgba(227,231,236,.04);  /* hover */
}

Put it on <body> and the surface desaturates in one line. Nothing breaks, because hue was always the second cue. Cloudflare’s brand is orange and their dashboard is black and white; same reasoning.

Against Zen Brutalism

Sina’s other system, running on sinadilek.com. The two are close relatives, not the same language. Rows in accent are where they now agree exactly.

Accent Zen BrutalismIris #8F90C2, exactly one The LedgerIris #9391C3, exactly one. The same colour — ZB’s value is it, rounded. Both trace to the mark below.
Corners Zen Brutalism90° only, never a radius The Ledger90° only. The last rounded thing, a status dot, became a hollow diamond to hold this.
Easing Zen Brutalism--snap .13s cubic-bezier(.2,0,0,1). Mechanical only. The LedgerThe same curve, adopted over a softer expo-out.
Lists Zen BrutalismRegister rows over card grids The LedgerRegister rows throughout. No cards anywhere.
Chrome voice Zen BrutalismMono for all labels and data, wide tracking, uppercase The LedgerIdentical.
Ground Zen BrutalismWarm concrete #0C0C0D, paper #ECECE4 The LedgerCool slate #12151B, ink #E3E7EC. Concrete and steel there; paper and print here.
Type Zen BrutalismArchivo Expanded · Plus Jakarta · IBM Plex Mono The LedgerFamiljen Grotesk · Onest · Martian Mono. Industrial signage versus a printed record.
Elevation Zen BrutalismHard non-blurring shadows that shift 4px on hover. The signature. The LedgerNone at all. A sheet of paper has no elevation, and adding one would break the metaphor the rest of the system rests on.
Borders Zen Brutalism2px on content blocks, 1px architectural frame The Ledger1px hairlines throughout. Rules divide rather than enclose.
Emphasis Zen BrutalismHighlighter — a solid accent block with dark text on top The LedgerAccent-coloured text. An open conflict: Zen Brutalism lists coloured-text emphasis as a mistake. Not yet resolved.
Signatures Zen BrutalismBilingual kanji labels, plate numbering, raw square cursor, ≤5% noise The LedgerNone of these. The ledger’s own signature is the gutter and the two-hand ink.
One decision still open

Zen Brutalism says emphasis is a highlighter block — solid accent, dark text on top — and explicitly names accent-coloured text as a mistake. The ledger currently uses coloured text, including on the line above every thesis on this site.

Adopting the highlighter would tighten the two systems further, but it changes the look of every marketing page. Left as-is until that is a deliberate call rather than a side effect.

Using it

Link mirako.css, then put only what your page genuinely adds in its own <style>. Do not copy the token block — if it appears twice, one copy is already wrong.

Product surfaces add class="chrome-neutral" to the body. Marketing surfaces keep the iris.

Superseded

hako/mirako-design-system.html documents an older dual-palette system defaulting to sakura pink. It disagrees with this page. This one is live and that one is not.

Back to Mirako