Design System Analysis of Spasex

An inspired interpretation of Spasex's design language — a mission-oriented aerospace brand built on pure black canvas, full-bleed rocket and Mars photography, uppercase D-DIN display type, and a single ghost outlined pill CTA per band.

01 — Colors

Color Palette

Core brand and surface tokens.

Primary
#ffffff
Brand primary surface and CTA color.
Ink
#ffffff
Default body text color.
On Primary
#000000
Text on primary surfaces.
Canvas
#000000
Default content surface.
Canvas Alt
#0a0a0a
Secondary surface / band fill.
Hairline
#3a3a3f
1px divider on cards and tables.
Muted
#a0a0a8
Secondary text and helper copy.
Accent 2
#ffffff
Inline link / second chromatic accent.

Brand & Accent (extended)

Canvas Night Soft
#0a0a0a
Barely-lifted near-black for subtle separation.
On Primary Mute
#f0f0fa
Cooled-white for secondary text on dark.

02 — Typography

Typography Scale

Display tier handles hero and section openers; body tier carries UI copy and captions.

display-xxl80px / 800 / 1.12 / 1.6px
Display headline
display-lg50 / 700 / 1.12 / -0.6px
Section opener
display-md32 / 700 / 1.25 / -0.256px
Card title
heading-lg24 / 700 / 1.33
Pricing tier name
body-lg18 / 400 / 1.55
Marketing body lead — relaxed leading for comfortable reading at scale.
body-md16 / 400 / 1.55
Default UI body, table cells, form labels.
caption14 / 400 / 1.43
Helper copy, footnotes.
button-md16 / 700 / 1.38 / 0.2px
CTA Label
micro-cap12 / 700 / 1.0 / 0.96px
Eyebrow Label

03 — Components

Button Variants

Primary, secondary, and outline variants.

button-primary
button-secondary
button-outline
button-ghost · marketing
button-filled-cool · shop

04 — Components

Card Examples

Pricing tiers with one inverted featured tier, plus alt-canvas feature card.

Starter

$0

For small teams.

  • Core features
  • Email support
  • 3 seats

Pro

$29

For growing teams.

  • Everything in Starter
  • Priority support
  • 20 seats

Business

$80

For scaled organizations.

  • Everything in Pro
  • SSO + audit log
  • Unlimited seats

Built-in security

SOC 2 Type II, GDPR, HIPAA-ready out of the box.

05 — Components

Form Elements

Standard inputs with hairline borders; focus replaces hairline with primary color.

06 — Foundations

Spacing Scale

8px base with denser sub-units for fine vertical rhythm.

xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
huge · 64px

07 — Foundations

Border Radius Scale

From inputs to pill buttons; the brand's radius vocabulary.

sm · 4px
md · 8px
lg · 12px
xl · 16px
button · 32px

08 — Foundations

Elevation & Depth

Layered shadow stacks for surface lift; deeper shadows for floating panels.

L0 · Flat
L1 · Card
L2 · Mockup halo
L3 · Toast

09 — Responsive

Responsive Behavior

Display sizes scale through the breakpoint stair; pricing tiers stair-step 4-up to 1-up.

NameWidthKey Changes
Wide≥ 1440pxFull hero band; pricing 4-up
Desktop1024–1440pxDefault content max-width
Tablet768–1023pxPricing 2-up; grid feature 1-up
Mobile< 768pxPricing 1-up; hamburger nav
375
768
1024
1440

Touch Targets

Pill buttons hit ≥44×44px on mobile. Form fields stay at the 44px minimum. WCAG AAA compliant.

Collapsing Strategy

Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

  • Core features
  • Up to 3 projects
  • Community support
/0.2 · Pro Most popular
$29/month

For teams ready to ship.

  • Everything in Starter
  • Unlimited projects
  • Email support
  • Advanced analytics
/0.3 · Team
$99/month

For organizations operating at scale.

  • Everything in Pro
  • SSO + audit log
  • Priority support
  • SLA & onboarding