●Astry Design System—01 Foundations

Core
foundations.

Brand primitives are frozen. Semantic tokens translate them into light and dark. Components are forbidden from reading anything but tokens — so a theme can never drift.

03
Token layers: 6
Brand primitives: 11
Type steps: AA
WCAG 2.2

Token pipeline

Primitives → Tokens → Components

The system is a one-way pipeline. Brand primitives are frozen at the source. Semantic tokens translate them into light and dark. Components are forbidden from reading anything but tokens — so a theme can never break.

No hex in componentsSharp cornersLight + darkRegistry-backed

Layer 01

Brand primitives

Frozen. Hex, type files, the mark. Never consumed directly.

Layer 02

Semantic tokens

Light + dark. The only thing components are allowed to read.

Layer 03

Components

Primitives + patterns. Token-only — theming can never break.

Logo lockups

6 valid lockups

astry

Wordmark / on ivory

astry

Wordmark / on infra-red

Mark / on ivory

Mark / on slate

astry

Combined / on ivory

astry

Combined / on deep blue

Brand primitives

Frozen · never in components

Deep Blue

#0A183D

Tonal accent surface · deep panels

Infra Red

#E43D1A

Primary accent · CTAs · highlights

Forest

#1C2B28

Tonal accent surface · secondary

Slate

#0F1115

Base canvas · the page ground

Ivory

#F2F1EC

Primary ink · light surfaces

Semantic tokens

Light + dark · the only layer components read

TokenLightDarkNote

Surfaces

--bg#F4F4F2#0F1115—

--canvas#FFFFFF#14161B—

--subtle#F2F4F8#191B22—

--surface#FFFFFF#14161B—

--surface-raised#FFFFFF#1C1F27—

Borders

--border#E2E5EA#262932—

--border-strong#C9CFD8#3B3F4B—

Text

--text#111111#F2F1EC—

--text-muted#4F5560#9C9C95—

--text-subtle#7A818D#6B6C68—

Accent

--brand#0051FF#E43D1AInfra-red in dark

--brand-hover#0042D6#F1502D—

--brand-soft#E0EAFFrgba(228,61,26,.15)—

Status

--success#16A34A#4FA56F—

--warning#D97706#D7A046—

--danger#DC2626#E43D1A—

Typography

Neue Haas Display · Inter mono

Display face

Neue Haas

Display Pro

200 / 300 / 400 / 500 / 700 / 900

Secondary face

Inter

400 / 500 / 600 / 700

TokenSize / LhSample

display96 / 100Embedded intelligence.

5xl72 / 75Embedded intelligence.

4xl56 / 60Embedded intelligence.

3xl40 / 44Embedded intelligence.

2xl32 / 38Embedded intelligence.

xl24 / 30Embedded intelligence.

lg20 / 30Embedded intelligence.

md18 / 28Embedded intelligence.

base16 / 25Embedded intelligence.

sm14 / 20Embedded intelligence.

xs12 / 18Embedded intelligence.

Signature gradient

Red → blue · the Astry diagonal

Marketing surface only

The right answer.
In seconds.

Reserved for hero surfaces only. Never behind body copy. Never behind interactive elements.

Spacing scale

4 px base unit

14px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

14px

28px

312px

416px

520px

624px

832px

1040px

1248px

1664px

2080px

2496px

Radius scale

Sharp by default · pill reserved

Astry runs sharp. Every radius token resolves to 0. The only exception is pill (9999 px), reserved for switch knobs, slider thumbs, status dots, and avatar status indicators.

xs0all = 0

sm0

md0default

lg0

xl0

2xl0

pill9999pxswitch · dots · thumb

Elevation

Borders over shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

Astry stays flat. Cards have no shadow by default. A border delineates. Hover state darkens the border — never adds translate. Use shadow with intent, not for decoration.

Motion

200 ms default · snappy

instant

Color shifts on click

80ms

fast

Hover, focus

140ms

base

Default

200ms

slow

Drawer slides, entries

320ms

Easing function

cubic-bezier(0.4, 0, 0.2, 1)

Standard ease-in-out. Applied to all transitions. Killed entirely under prefers-reduced-motion: reduce.

transition-colorstransition-opacitytransition-transform

Container & grid

12-col · 24 px gutter · 1440 max

max-width: 1440⋅gutter: 24⋅columns: 12⋅breakpoints: sm 640 / md 768 / lg 1024 / xl 1280

Visual signatures

Two things that read as Astry instantly

Signature 01 — Eyebrow

Section eyebrow

The eyebrow

Uppercase, 12 px, Astry Blue. Sits above every section title. Registered as the Eyebrow primitive.

Signature 02 — Corner angles

BracketFrame

SVG L-shapes in Astry Blue. Mark KPIs, hero panels, key quotes. Use sparingly — reserved for brand-weighted moments.

Mascot library

57 poses · searchable catalog

Open the mascot library

9 categories · poses · roles · moods · gestures · alerts

/design-system/mascots

Accessibility

WCAG 2.2 AA floor

Focus visible

2 px brand ring, 2 px offset, only via :focus-visible.

Touch targets

44 × 44 minimum hit area on every interactive primitive.

Reduced motion

All transitions killed under prefers-reduced-motion: reduce.

Forced colors

Components keep visible 1 px borders under Windows High Contrast.

Color independence

Status badges always pair color with a dot or icon.

Semantics

Inputs labeled. Errors role=alert. Switches expose aria-checked.

Contrast samples

Ratios in dark theme

Brand on bg (light)

8.34 : 1

AAA

Text on bg (light)

17.4 : 1

AAA

Text-subtle on bg

4.7 : 1

AA — non-essential only

Next · 02

Layouts & app patterns