Skip to content
Kurt Matthew Nudo

Design system · source private

Akari 灯

A design system for data-heavy, bilingual apps. Calm precision: indigo for action, a single vermilion seal, Mincho headings and generous space. Everything below is rendered from Akari's own tokens and components.

Principles

  1. 間 Ma

    Meaningful empty space. One idea per screen, wide margins, hairlines instead of boxes.

  2. Calm precision

    Exact numbers in tabular figures, quiet chrome, nothing that moves without a reason.

  3. 藍 for action

    Indigo carries every primary action, link and focus ring, so the eye learns one colour.

  4. 朱, sparingly

    Vermilion is the seal: at most one emphasis per view, never a second button colour.

  5. Two scripts, one rhythm

    Japanese and English share the type scale; Japanese gets more leading and is always marked lang="ja".

  6. Accessible by default

    AA contrast in every theme, AAA targets in high contrast, visible focus, reduced motion respected.

Colour

Primitive colours carry traditional Japanese names. Components never use them directly: they go through semantic roles, which change per theme.

和紙washiWarm paper whites: light backgrounds

  • washi.97
    #f6f5f1
  • washi.95
    #f0efea
  • washi.95a
    #eeede7
  • washi.94
    #ebeae4
  • washi.93
    #ebe9e3
  • washi.92
    #e8e6df
  • washi.92a
    #dde5ee

墨sumiInk blacks: text, and the dark theme

  • sumi.31
    #2c3039
  • sumi.30
    #2a2e37
  • sumi.26
    #22252d
  • sumi.25
    #1e2128
  • sumi.24
    #1c1f26
  • sumi.23
    #1b1d22
  • sumi.23a
    #1a1d24
  • sumi.21
    #16181d
  • sumi.21a
    #161920
  • sumi.19
    #121419
  • sumi.15
    #0b0c0f
  • sumi.00
    #000000

藍aiIndigo: the primary, links and focus

  • ai.94
    #e6ecf4
  • ai.90
    #d0e0f7
  • ai.84
    #b5cdf0
  • ai.83
    #b7c8df
  • ai.80
    #a6c1e8
  • ai.78
    #9dbbe6
  • ai.75
    #97afd0
  • ai.75a
    #8fb0e0
  • ai.69
    #7f9dc4
  • ai.62
    #6189c0
  • ai.62a
    #547deb
  • ai.54
    #4a6fa2
  • ai.49
    #385dad
  • ai.48
    #3f5f8a
  • ai.40
    #23467a
  • ai.36
    #2b3f5c
  • ai.35
    #1c3a66
  • ai.33
    #1a3561
  • ai.28
    #12284b
  • ai.27
    #1e2836
  • ai.24
    #18202c
  • ai.20
    #0f1622

朱shuVermilion: the seal, used sparingly

  • shu.80
    #f0a98c
  • shu.79
    #f4a688
  • shu.75
    #dc9e84
  • shu.69
    #e47a57
  • shu.63
    #c96a48
  • shu.58
    #c4532f
  • shu.57
    #c64333
  • shu.55
    #b54a28
  • shu.55a
    #c13c00
  • shu.54
    #b04a26
  • shu.53
    #af4522
  • shu.52
    #b6351c
  • shu.48
    #8e4630
  • shu.45
    #8f3519
  • shu.40
    #7a2c12
  • shu.18
    #1b0f0a

鼠nezumiMouse greys: lines and secondary text

  • nezumi.89
    #dcdad3
  • nezumi.85
    #cfcdc6
  • nezumi.84
    #c9ccd3
  • nezumi.72
    #a8a69e
  • nezumi.71
    #9aa0ad
  • nezumi.65
    #8a909c
  • nezumi.63
    #8c8a82
  • nezumi.61
    #85837b
  • nezumi.55
    #6b717d
  • nezumi.54
    #686e7a
  • nezumi.54a
    #6b6f78
  • nezumi.50
    #5d6270
  • nezumi.43
    #4a4f5b
  • nezumi.38
    #3d414b
  • nezumi.37
    #3a3f4a

Semantic roles × themes

Semantic colour roles and their hex value in each theme
RoleLightDarkLight · high contrastDark · high contrast
--ak-bgPage#f6f5f1#1b1d22#ffffff#000000
--ak-surfaceCards, inputs#ffffff#24272d#ffffff#0b0c0f
--ak-textBody text#1b1d22#ebe9e3#0b0c0f#ffffff
--ak-text-mutedSecondary text#5d6270#9aa0ad#3d414b#c9ccd3
--ak-primary藍 actions#23467a#8fb0e0#1a3561#b5cdf0
--ak-accent朱 seal#c4532f#e47a57#8f3519#f4a688
--ak-text-linkLinks#23467a#8fb0e0#1a3561#b5cdf0
--ak-border-strongControl borders#85837b#6b717d#3d414b#c9ccd3
--ak-focusFocus ring#23467a#8fb0e0#1a3561#b5cdf0

Type

Three families, each covering Latin and (for the first two) Japanese. The Japanese lines below are a typographic specimen.

Display · Shippori Mincho B1

Calm precision, in ink.

静かな精度、意味のある余白。

Body · Zen Kaku Gothic New

Body text is set at 16px with a 1.6 line height: comfortable for long methodology notes and dense enough for tables.

本文は16pxで、日本語は行間を1.75に広げて読みやすくします。

Utility · DM Mono

0123456789 · 2013-11-08 06:00 UTC · 87.5 m/s · 895 hPa

Scale

  • 4xl · 56pxTyphoon 台風
  • 3xl · 40pxTyphoon 台風
  • 2xl · 30pxTyphoon 台風
  • xl · 22pxTyphoon 台風
  • lg · 18pxTyphoon 台風
  • base · 16pxTyphoon 台風
  • sm · 14pxTyphoon 台風
  • xs · 12pxTyphoon 台風
  • 2xs · 11pxTyphoon 台風

Space & radius

An 8px rhythm with two half steps, and a 2px radius on almost everything.

  • space.0 · 0px
  • space.0-5 · 4px
  • space.1 · 8px
  • space.1-5 · 12px
  • space.2 · 16px
  • space.3 · 24px
  • space.4 · 32px
  • space.5 · 40px
  • space.6 · 48px
  • space.8 · 64px
  • space.10 · 80px
  • space.12 · 96px
  • space.16 · 128px
  • radius.control · 2px
  • radius.pill · 999px
  • radius.surface · 2px

Components

Live and interactive: the full shadcn/ui set themed by Akari's tokens, plus Akari's own pieces. Try the theme switch above while you use them.

Button

Input + Select

Tabs

One idea per screen: the map first.

Toggle group

Selected: map

Dialog

Card

Small-area estimates
Official figures with their confidence intervals.
Cards hold one idea, with a hairline instead of a heavy shadow.

StatCard + Sparkline

Example index, 13 periods
5.6pts
+2.5 since period 1

Illustrative values.

MapLegend

Sequential (illustrative)
0%15%30%45%60%+
Diverging (illustrative)
−30+3

LangSwitch

Quiet tools that make data legible.

May 1, Reiwa 1 (2019)

Akari apps are bilingual; this site is English, so only the demo switches.

ThemeToggle

Segmented and compact variants. Both change the whole page.

SealMark

Akari seal灯

朱 shu, used once per view.

Accessibility

Contrast is computed at build time from the tokens, with Akari's own contrast() (WCAG 2.x). Targets: 4.5:1 for text and 3:1 for UI in the standard themes; 7:1 and 4.5:1 in high contrast. Every pair below meets its target.

WCAG contrast ratio per colour pair and theme, with the target in brackets
PairLightDarkLight · high contrastDark · high contrast
Body text on pagetext / bg15.46:1 (4.5) ✓13.89:1 (4.5) ✓19.56:1 (7) ✓21.00:1 (7) ✓
Muted text on subtle surfacetext-muted / surface-subtle5.19:1 (4.5) ✓5.84:1 (4.5) ✓8.47:1 (7) ✓10.26:1 (7) ✓
Link on pagetext-link / bg8.64:1 (4.5) ✓7.59:1 (4.5) ✓12.17:1 (7) ✓12.96:1 (7) ✓
朱 small text on surfacetext-accent / surface5.68:1 (4.5) ✓5.15:1 (4.5) ✓7.80:1 (7) ✓9.92:1 (7) ✓
Primary button labelon-primary / primary9.42:1 (4.5) ✓8.16:1 (4.5) ✓12.17:1 (7) ✓12.96:1 (7) ✓
Control borderborder-strong / surface3.80:1 (3) ✓3.05:1 (3) ✓10.21:1 (4.5) ✓12.16:1 (4.5) ✓
Focus ringfocus / bg8.64:1 (3) ✓7.59:1 (3) ✓12.17:1 (4.5) ✓12.96:1 (4.5) ✓
Seal markaccent / bg4.16:1 (3) ✓5.80:1 (3) ✓7.80:1 (4.5) ✓10.66:1 (4.5) ✓
  • Focus is a #23467a indigo outline, 2px wide, and 3px in high contrast. It is never removed.
  • Themes follow prefers-color-scheme and prefers-contrast with no JavaScript; the toggles only override them.
  • Motion durations drop to zero under prefers-reduced-motion.
  • Interactive components are Radix-based shadcn/ui: keyboard support and ARIA roles come built in.
  • Japanese text is marked lang="ja" so screen readers switch voice.
  • Charts carry text alternatives: every Sparkline needs a label describing the trend.

How it's built

  1. DTCG tokens

    Primitive, semantic and component tiers in the W3C Design Tokens format, with four themes.

  2. CSS variables, Tailwind and shadcn/ui

    One build generates layered CSS custom properties, a Tailwind v4 theme, the shadcn/ui variable mapping and typed TypeScript exports (used on this page).

  3. All shadcn/ui components

    Kept as upstream ships them and themed only through tokens, with Akari composites on top.

  4. Visual and accessibility tests

    Unit tests check every promised contrast pair in every theme; Storybook stories run through screenshot and axe checks in Playwright.

  5. Weekly upstream sync

    A scheduled job pulls the latest shadcn/ui components so fixes arrive without a fork drifting.

The source is private. This page, and the projects on this site, are where Akari can be seen.