LAUNCHDesign system

Design system

Launch product UI v0.8
Product design system

Quiet surfaces. Loud only where it counts.

Launch combines a strong aerospace identity with a restrained B2B product interface. Identity can be bold; daily authoring stays calm, dense, readable and predictable.

Identity

The 60 / 20 / 20 brand system used at identity moments, not as a quota inside every product screen.

#0F1112
Deep Space
Structural navigation and identity
#FFFFFF
Fuselage
Primary workspace surface
#A6192E
Ignition
Liftoff, hold and consequential actions
#005288
Avionics
Links, focus and operational interaction
#A7A9AC
Chassis
Frames, dividers and metadata
LAUNCH
LAUNCH

Product tokens

Neutral surfaces do most of the work. Signal colors are functional and sparse.

Background
#F7F7F6
Surface
#FFFFFF
Border
#E6E4E3
Foreground
#17191A
Go
#0F7A48
Caution
#D99A16
Hold
#A6192E
Live
#005288

Typography

Archivo is the product face. Product UI uses sentence case; uppercase belongs to identity and rare status moments.

Display
Mission control for marketing.
Page title
Summer Product Launch
Body
Launch keeps every marketing change visible, reviewable and ready.
Metadata
Observed 14 minutes ago · 7 Systems
Identity
ALL SYSTEMS GO

Status language

Use a status glyph plus a plain-language label. Avoid decorative filled badges for routine status.

DraftPreflightAll systems goLaunch holdIn orbitDebrief
All systems go
100%
Conditional
82%
Launch hold
97%

Controls

Controls use compact geometry, visible focus, neutral primary actions and Ignition only when consequence matters.

Alerts and Guidance

Information is calm and specific. Signal colors identify consequence, not decoration.

Guidance

Paid media and the pricing page use different offer language. Review before Countdown.

Launch hold

Checkout tracking did not fire in the expected test journey.

Icon set

38 supplied Launch vector symbols are available as React components and standalone SVG assets.

alert
branch
check
clock
cog
down
filter
flight-plan
grip
guidance
info
kebab
launchpad
left
lock
logo
menu
minus
mission-control
missions
plus
preflight
radar
refresh
right
search
sort
status-done
status-draft
status-go
status-hold
status-live
status-preflight
systems
template
trash
user
x

Standalone exports: /public/icons/launch/*.svg · React API: <LaunchIcon name="radar" />

Mission Control dark theme

Mission Control is the intentional dark operational surface; authoring and planning remain light by default.

Mission Control In orbit
Conversion
4.6%
+0.8 pts
Signals
2
1 needs attention
Systems
7 / 7
Operational