型Kata / hanabira.kata.json compiled · 6 open
Apply design system
This page is rendered in the system it documents. The colours, the families, the type ramp and the corner grammar below were all read out of hanabira.kata.json and applied to this page. If a compiled file cannot rebuild the look of the thing it came from, it is not carrying enough to teach a model either.

Registry entry

Hanabira

The landing at hanabira.dev. Dark only — no light theme exists.

18roles
13composition rules
5patterns
5refusals
6open questions
3widths inspected

Colour

Named for the job it does.

Every value is scoped to a surface, so nothing can be borrowed across one by mistake. The swatches above and the page you are reading are drawn from these.

marketing15 roles
page#0C0C0D
stated
navBg#000000
stated
footerBg#000000
stated
tile#0E0E10
stated
card#131316
stated
textPrimary#8A898C5.62:1 on page. Passes AA for body. This mid-grey is also the base colour of every heading, because the global * rule paints them. See unspecified/text-hierarchy-inversion.
stated
textSecondary#C7CDE112.34:1. The 'secondary' colour is brighter and higher-contrast than 'primary'. The names run backwards relative to their jobs.
stated
cardTitle#FFFFFF
stated
border#222223
stated
linergba(199, 205, 225, .1)Second hairline token from the later era. Tilebeds use this; older components use --border-primary. Two hairlines, one job.
stated
accent#8B9CE07.38:1 on page, 7.00:1 on card. The --hana token is the accent. #5E79C7 remains recorded below as legacy.
stated
petal#C391D9the kanji slot in eyebrows, gradient mid-stop
stated
eyebrowPrefix#4A4A52Fails: 2.23:1 on page. Below AA at any size. If the // prefix is content, it fails; if decorative, it should be marked aria-hidden and is not.
stated
footerHairline#272D41A third line colour, drawn as a shadow rather than a border.
stated
accentLegacy#5E79C7Superseded. Live in the header SVG stroke; migrate to #8B9CE0.
stated

Applies to hanabira.dev/, hana/apps/landing/**

app3 roles
page#242424Vite starter default, not a decision.
stated
textrgba(255,255,255,.87)Same.
stated
progressgreenThe nprogress bar ships with the CSS keyword green. Nothing about it belongs to any palette.
stated

This surface is scaffold boilerplate, recorded as found. It shares nothing with the landing: different font (Inter), different background, keyword colours. See unspecified/app-surface-exists.

Applies to hana/apps/example/**

docs0 roles

Deliberately empty. This theme belongs to the Leaf docs, not to Hanabira. Harvesting from it would import a third system's values.

Applies to hana/apps/docs/**

Type

The ramp, at its own sizes.

Rendered in the family this system actually uses, at the sizes it actually states. Anything that looks wrong here is wrong in the system.

rampBricolage Grotesque
Aa
h196pxContradiction recorded: hero-display-size
Aa
heroTitleShippedclamp(52px, 7vw, 92px)
Aa
h282px
Aa
h352px
Aa
sectionTitleShippedclamp(34px, 4vw, 52px)Two clamps for the same role, 52 vs 56 max. Drift, not intent, most likely — but that is a guess and it is not encoded.
Aa
heroSubtext24px
Aa
body16px

Space

The scale, and whether it binds.

A scale that is not enforced is a habit rather than a rule, and the file says which this is.

spacenot enforced

No scale exists, and per review 2026-08-03 that is intentional — spacing is reviewed by eye. Shipped paddings sampled: 10, 12, 16, 20, 24, 34, 40, 44, 48, 50, 60, 70, 80, 85, 100, 140. enforce stays false.

Composition

The part no export format carries.

Breakpoints, grid relationships and alignment. This is where the correction effort goes, and where a token file tells you nothing.

breakpoints4
global-typeh1 and h2 drop to 48px, hero subtext to 18px738px
cards-and-footercard and footer padding collapses720px
nav-switchheader switches from disclosure menu to inline nav, via matchMedia in script50em (800px)px
noteThree different mobile thresholds — 720, 738, 800 — govern one page. Whether this is one breakpoint with drift or three decisions is unanswerable from source. See unspecified/breakpoint-consolidation.px
grid4
  • Grids of tiles use a 1px gap over a line-coloured bed, not per-tile borders.Shared hairlines read as one drawn grid. This is the Leaf family convention, stated here in the Hana-edition block.Checked by: Tile containers use gap: 1px with background set to --line.
    auto
  • Stacked grids share column tracks and gaps. A section heading that sits above a list must use the same track definition as the list.Checked by: Compare grid-template-columns and gap of each heading block against the content grid beneath it.
    auto
  • Side-by-side comparison panes share row tracks.Checked by: Paired panes use subgrid or equivalent equal-height behaviour.
    model
  • A grid collapses at the width its content stops fitting, not at the shared breakpoint.Checked by: manual
    manual
alignment2
  • Display type balances, body ledes balance, no line ends with a one- or two-word orphan.Checked by: text-wrap balance on display and lede, plus a rendered orphan check.
    model
  • Stacked figure-and-label rows reserve a fixed width for the figure.Checked by: Figures in repeated rows set min-width.
    auto
motion3
  • The falling-petal hero animation honours prefers-reduced-motion: reduce.Checked by: HeroBG animations disabled inside the reduce media block.Stated for the hero only. No other animated element declares a reduce path, and no global rule exists.
    auto
  • Buttons transition colour only. They do not lift, scale or translate.Checked by: No transform on :hover for button elements.
    auto
  • Every animation and transition honours prefers-reduced-motion, not just the hero petals.Checked by: No animation or transition longer than 1ms inside a reduce block.Known finding: no element other than HeroBG currently declares a reduce path.
    auto

Patterns

What each part is for, and what it is not.

The second half is the one that matters. A component list says what exists; only the refusals say what to reach for.

eyebrowUse for: Mono uppercase label above a section title. // prefix in muted ink, label text in hana blue, optional kanji slot in petal.Same grammar as Leaf's eyebrow with the muted/accent split in the same places. The kanji slot is Hanabira's own addition.
gradientDisplayUse for: Display type filled with the three-stop petal gradient (#8296B3 to #C391D9 to #E5E5F5). The hero h1, four section h3s and the community h2 all carry it.Never for: any product outside Leaf and Hanabira — the gradient is frontline brand identity and does not transferConfirmed as the norm by Michael, review 2026-08-03, resolving the Leaf-side gradient-policy conflict: Leaf and Hanabira are the frontline runners and the gradient is theirs alone.
cornerMarkerUse for: 5px square markers in accent blue on the corners of a bordered panel. All four corners, offset 3px outside.
linkCardUse for: Feature card with a blurred colour orb behind it, colour passed per-card as a raw hex prop.The orb colours are content-level hexes that belong to no token. Whether that is intentional (each card owns a hue) or debt is not answerable from source. See unspecified/card-orb-colours.
terminalCommandUse for: An install command in Berkeley Mono inside a squared pre, click-to-copy (cursor: copy).

Refusals

What this system will not do.

The least recoverable section in the file. A rendered site shows only what it does, never what it declines, so every line here came from a person saying no.

Contradictions

Where the system disagrees with itself.

Places the written intent and the shipped code do not match. The compiler surfaces both and picks neither.

hero-display-sizeunresolved
claimed

h1: 96px fixed global.css

observed

.hero-title: clamp(52px, 7vw, 92px), which wins in the cascade and renders 92px at 1440 index.astro:313, measured live

decided

Nothing yet. The compiler will not pick.

two-accentsresolved
claimed

#5E79C7 (--accent, original block; also hardcoded as an SVG stroke in Header.astro) global.css, Header.astro

observed

#8B9CE0 (--hana, Hana-edition block; eyebrows and markers) global.css

decided

#8B9CE0. Michael, review 2026-08-03. --accent #5E79C7 is legacy and should migrate, including the hardcoded header SVG stroke.

corner-radius-eraunresolved
claimed

pre { border-radius: 14px } global.css:106, original block

observed

pre { border-radius: 0 } plus the squared-corners intent comment global.css:169, Hana-edition block

decided

Nothing yet. The compiler will not pick.

hairline-valueunresolved
claimed

#222223 (--border-primary) and rgba(199,205,225,.1) (--line) global.css, both stated

observed

#272D41 drawn as a box-shadow on the footer Footer.astro:22

decided

Nothing yet. The compiler will not pick.

Still open

What it does not know.

Recorded rather than guessed, and shipped into the rules files so a model asks instead of inventing. 4 further questions were raised and answered during review, and stay in the file as a record of how it was decided.

breakpoint-consolidationmedium

720, 738 and 800 all govern mobile behaviour on one page. One breakpoint with drift, or three decisions?

Assumed meanwhile: Drift.

app-surface-existsmedium

The example app is unstyled Vite boilerplate. Does a designed app surface exist anywhere, or is the landing the only designed surface?

Assumed meanwhile: Landing only.

eyebrow-prefix-contrastmedium

The // prefix sits at 2.23:1. If it is content it fails AA; if it is decorative it needs aria-hidden, which it lacks. Which is it?

Assumed meanwhile: Decorative, unmarked.

card-orb-colourslow

Card orbs take raw hexes per instance (#DB1010, #591040, ...). Intentional per-card hues, or token debt?

Assumed meanwhile: Intentional content, off-token.

section-title-clamp-variantslow

clamp(34px,4vw,52px) and clamp(34px,4vw,56px) both style section titles in the same file. Which is canonical?

Assumed meanwhile: Drift.

text-role-naminglow

textSecondary is brighter and higher-contrast than textPrimary. The hierarchy is intentional in effect, but the names run backwards. Rename, or keep?

Assumed meanwhile: Kept as shipped.

Provenance

Where this came from.

Compiled 2026-08-03 at 1440, 900, 390 pixels wide. Compiled from shipped source plus a live run of the landing. Nothing was written down before it was built, so the open list is dominated by intent questions no scrape can answer. No overflow at any inspected width.

sources5
tokensparsedhana/apps/landing/src/styles/global.css
componentsparsedhana/apps/landing/src/components/*.astro
codeparsedhana/apps/landing/src/pages/index.astro
urlrendered inspection at three widthshttp://localhost:4321 (astro dev)
codeparsedhana/apps/example/src/styles/index.css

Take it with one command.

Download the file, run it in your repo, and your AI tools write in this language.

Apply design system

pnpx kata apply ./hanabira.kata.json  ·  back to the registry