01 — Foundations
Core web foundations
Brand primitives are frozen. Components reference semantic tokens only — that's how light and dark stay in sync.
Logo lockups
Wordmark + mascot. Six valid lockups.
Wordmark / blue on light
Wordmark / knockout
Mark / on light
Mark / on brand
Combined / horizontal
Combined / stacked
Combined / dark surface
Color
Primitives never used in components. Semantic tokens flip with the theme.
Brand primitives
--astry-blue
#0051FF
Primary brand · CTA · marketing surfaces
--astry-blue-2
#2D6BFF
Lighter brand · gradients
--deep-navy
#0B1F3A
Marketing accent · charts
--charcoal
#111111
Inverse surfaces · light body text
--paper-white
#F4F4F2
Default canvas (light)
--cloud-blue
#E0EAFF
Soft brand bg
Semantic tokens
Surfaces
Borders
Text
Brand
Status
Typography
Neue Haas Display Pro for everything. Inter as the secondary / UI face.
Display · headings & body
Neue Haas Display
200 / 300 / 400 / 500 / 700 / 900
Secondary · UI, tokens
Inter
400 / 500 / 600 / 700
Spacing
4 px scale. Restrictive on purpose.
Radius
Astry runs sharp. All sizes = 0 except pill for circular-by-nature elements.
Elevation
Astry stays flat. Use shadow with intent.
Motion
Snappy. 200 ms is the default.
instant
Color shifts on click
80ms
fast
Hover, focus
140ms
base
Default
200ms
slow
Drawer slides, entries
320ms
Easing — cubic-bezier(0.4, 0, 0.2, 1)
Container & grid
Marketing surfaces use 12-col grid with 24 px gutter, 1440 px max.
Visual signatures
Two things that read as Astry instantly.
Signature 01
Section eyebrow
The eyebrow
Uppercase, 12 px, Astry Blue. Sits above every section title.
Signature 02
Corner angles
SVG L-shapes in Astry Blue. Mark KPIs, hero panels, key quotes. Sparingly.
Mascot library
The Astry character has its own catalog — searchable, filterable, 57 entries.
Open the mascot library →
9 categories · poses · roles · moods · gestures · alerts.
Accessibility
WCAG 2.2 AA is the floor. Most components clear AAA.
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.
Sample · brand on bg (light)
8.34 : 1
AAA
Sample · text on bg (light)
17.4 : 1
AAA
Sample · text-subtle on bg
4.7 : 1
AA — non-essential metadata only