Astro framework test

A comprehensive showcase of your design system tokens and components.

Typography

Text styles and hierarchy.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Small/Muted - Secondary information with reduced emphasis.

Caption - Fine print and supporting details.

Colors

Color palette from your design tokens.

Semantic Defaults

Primary
Accent

Feedback

Success
Warning
Danger
Info

primary

25
50
100
200
300
400
500
600
700
800
900
950

accent

25
50
100
200
300
400
500
600
700
800
900
950

neutral

25
50
100
200
300
400
500
600
700
800
900
950

Spacing

Consistent spacing scale.

xs 4px
sm 8px
md 16px
lg 24px
xl 32px
2xl 48px

Corners

Border radius tokens.

None
Small
Medium
Large
XL
Full

Shadows

Elevation and depth.

Small
Medium
Large
XL

Theme

Semantic theme tokens that adapt to light/dark mode.

Background
Elevated
Subtle
Border
Text
Text Muted

Quick Start

pnpm dev

Start development server

pnpm storybook

Start Storybook with token editor

pnpm tokens:build

Rebuild CSS from tokens.json

pnpm test

Run component tests