Skip to content
Kurt Matthew Nudo
Status: Active

Akari灯

The design system behind every app here: tokens, a shadcn/ui-based React kit and MapLibre helpers.

Open the live demo
Example index, 13 periods (illustrative)
5.6pts
+2.5 since period 1
A live Akari component: switch the trend.

Problem

Every project here is a data-heavy app: maps, small multiples, tables of numbers, and text that may be Japanese or English. Starting each one from a generic component library meant re-deciding colour scales, Japanese typography, focus styles and dark mode every time, and getting contrast wrong in at least one theme.

Approach

  • Tokens first: colours, type, space, radius and motion are written once as DTCG design tokens, in three tiers (primitive, semantic, component) and four themes: light, dark, and a high-contrast variant of each.
  • Generated, not hand-copied: a build step turns the tokens into CSS variables, a Tailwind v4 theme, the shadcn/ui variable mapping and typed TypeScript exports.
  • Components: the full shadcn/ui set, kept unmodified so upstream updates apply cleanly, plus a few Akari pieces: seal mark, stat card, sparkline, map legend, language switch and theme toggle.
  • Checked: contrast for every promised text and UI pair is tested in all four themes, and Storybook stories run through visual and accessibility tests.
  • Maps: MapLibre style helpers use the same palette as the charts.

This site is built with it; see the living showcase.

Architecture

Standard pattern: a token-driven design system, where design tokens are the single source and a build generates each platform’s format, with a component kit on top. Customisations: tokens follow the DTCG 2025.10 format with four themes (light, dark and a high-contrast variant of each); the shadcn/ui components stay as upstream source, synced weekly, with Akari’s changes kept as marked hunks; and the map helpers share the chart palette. One package serves React apps, plain CSS pages and Tailwind apps alike.

  1. 01 · Tokens

    • DTCG JSON, 3 tiers
    • 4 themes incl. high contrast

  2. 02 · Build

    • CSS variables (layered)
    • Tailwind v4 theme
    • shadcn/ui mapping, TS exports

  3. 03 · Kit

    • shadcn/ui components
    • Akari composites
    • MapLibre helpers

  4. 04 · Checks

    • Contrast tests (WCAG 2.2)
    • Visual + axe tests
    • Weekly upstream sync
How Akari is built.

Where it stands

Active, and still growing. The source is private; this site, its living showcase and the projects above are where it can be seen.

Next: committing the visual regression baselines, which must be generated inside the pinned Playwright container. Known cost: the package is about 12 MB, nearly all of it the Japanese Mincho font, although browsers fetch only the slices a page uses.