Service title
Hairline divider, no shadow, index label in dust-tertiary. Used for services, process steps, and FAQs.
Internal reference
Design guide
Colors, typography, spacing, and interactive components for the Aurora design system. Not linked in navigation — for internal reference only.
Color tokens
Surfaces
Foreground
Borders
Functional
Typography
Type scale
Display / hero
clamp(3.5rem, 6vw, 5rem) / 300w
The considered life
Section headline
clamp(2rem, 3.5vw, 2.5rem) / 400w
The considered life
Subheading
1.25rem / 400w
The considered life
Body
1rem / 400w
The considered life
Caption / metadata
0.8125rem / 400w
The considered life
Micro-label
0.625rem / 500w
Micro label
Font tokens
--font-displayRoboto Flex
Headings, display, editorial
--font-bodyRoboto Flex
Body copy, labels, UI text
--font-monoRoboto Mono
Code snippets, technical metadata only
Spacing & radius
Border radius
--radius-base0px — UI structure — buttons, fields, panels
--radius-card4px — Cards — subtle lift off the surface
--radius-image240px — Images — asymmetric stadium-pill drift
--radius-pill9999px — Tags, badges, inline status labels
Shadow
--shadow-softCard elevation — used with restraint
Motion
--duration-quick200ms
Micro-interactions: hover, focus, toggle
--duration-medium400ms
Component transitions: accordion, dropdown
--duration-slow600ms
Page-level entrances: section reveals
--ease-smoothcubic-bezier(0.4, 0, 0.2, 1)
The only easing curve in the system
Buttons
Primary
Default · Small · Large · Disabled — --slate-900 bg, --bone-700 text
Secondary
--bone-700 bg, border: --mauve-border-subtle
Ghost
Transparent bg, border: --slate-border-strong
Inverse (on --slate-900 surface)
Form fields
Please enter a valid email address.
Cards
Service / offering card
Service title
Hairline divider, no shadow, index label in dust-tertiary. Used for services, process steps, and FAQs.
Service title
Hairline divider, no shadow, index label in dust-tertiary. Used for services, process steps, and FAQs.