Chronicle Design System

design skillschronicle · № —

The design system

Two files, versioned together.

Read the spec, then read the prompt that teaches the model how to use it.

explore the bundle

rendered with chronicle tokens

Color Palette · 10 tokens

primary#000000

surface#FFFFFF

surface-dim#F5F5F5

neutral#B3B3B3

on-primary#FFFFFF

on-surface#000000

outline#E5E5E5

error#DC2626

success#16A34A

focus-ring#000000

Typography Scale · 7 levels

display-lgDisplay lg48px

headline-mdHeadline md24px

body-mdBody md16px

label-smLabel sm12px

Components

Chronicle card

design.md · 14 components

Input field

Spacing Scale

2xl

Border Radius Scale

full

Coverage & preview

Per-surface coverage of this spec — the higher each bar, the fewer gaps your AI has to guess.

coverage by surface

77%

what's covered

accessibility advisory

1 color combination don't meet WCAG AA. Verify before shipping.

components.badge-error: textColor (#dc2626) on backgroundColor (#fee2e2) has contrast ratio 3.95:1, below WCAG AA minimum of 4.5:1.

Not affiliated with Chronicle. All trademarks belong to their respective owners.