Design System

The public design system for KITAMAE BASE Kaga Hashitate. We share color, type, spacing, and key component styles to align with stakeholders and partners. The source of truth is the CSS tokens (tokens.css).

Color Tokens

Built on azumi cool navy (ink) and indigo-grey (surface); blue is used only for function.

ink#00053A
ink header#0A152F
accent muted#3A4A6B
surface#EFF4F6
text secondary#585E6A
success#2F6F6A
error#B3322F
warning#B06A2A

Typography

Serif for editorial headings / sans for function (nav, body, numerals).

Display Heading (Hero)

Heading 1

Heading 2

Heading 3

Body text. Readability first — generous line height and a constrained measure.

Type Role Duality (R029)

eyebrow = functional word (nav, label, section marker). heroTitle = emotional word (page face, editorial heading). Same Serif typeface, different role classes.

vds-eyebrow

Eyebrow — functional

vds-display-heading

A view only found here, where the sea meets dusk.

Spacing Scale

0.5rem
0.75rem
1rem
1.5rem
2.5rem
4rem

Key Components

Primary CTASecondary actionEyebrow Label

CanBusTimetableModal

CAN BUS timetable modal on the Access page. Supports route tab switching, ESC to close, and scroll lock.