Design Tokens
The Colors of Orbit
The Orbit color pattern is inspired by the contrast of deep space and vibrant celestial phenomena. We use dark, grounding neutrals to reduce eye strain and create depth, while applying iconic brand and accent colors purposefully to guide the user's journey and highlight critical mission data.

Base Tokens

These four tokens form the foundation of every surface and text element. Always reference tokens — never raw hex values — in production code.

background-primary
Mode: Mode 1
HEX: #2E2F33, 100%
background-secondary
Mode: Mode 1
HEX: #111113, 93%
text-primary
Mode: Mode 1
HEX: #FDFDFD, 100%
text-secondary
Mode: Mode 1
HEX: #E4E5E6, 100%
Color Palette
Light Blue
#38BDF9
Orange
#F97315
Green
#22C55D
Deep Blue
#2345B2
Blue
#0DA0E2
Purple
#A855F7
Yellow
#FACC14
Red
#EF4444
Palette Categorization
Color by Intent

Our color palette is categorized into their intended jobs using the following categories:

Neutrals — The Vacuum & Starlight
White, Light Gray, Dark Charcoal, Deep Gray

Use these for foundational elements: backgrounds, surfaces, text, and borders. The dark charcoals are perfect for dark mode backgrounds or primary text in lighter components.

Semantic / Status — Mission Control
Red, Orange, Yellow, and Green

Preserve these for communicating system status to the user.

  • Red (Supernova): Destructive actions, errors, or critical alerts.
  • Orange/Yellow (Solar Flare): Warnings or actions requiring attention.
  • Green (Atmosphere): Success states, confirmations, or safe-to-proceed indicators.
Accents — Nebula & Cosmic Dust
Blues and Purples

Use these sparingly to add visual interest, differentiate data in charts, or for secondary illustrations and badges. These shouldn't compete with your Primary and Semantic colors.

Components
Color in the Wild
See how Orbit's color tokens translate into real FocusRoom components — from task priority selectors to mission timers and danger zones.
Priority
Low
Light lift
Medium
Important
High
Deep work

Priority cards use semantic colors — Green/Low, Yellow/Medium, Red/High — with tinted backgrounds and matching borders to communicate urgency at a glance.

Recurring Task Card
Recurring
Task
Repeat daily,
weekly…

Purple border + ambient glow signals a modifier. Accent color applied with restraint.

App Icon — Exit

Red #EF4444
Semantic/Destructive

Cockpit Stats
Total Sessions
2
Total Focus Time
46m
Average Session
Focus Health
Deep Focus Days
Distance Traveled
Tasks Screen
Good evening, Temeka McDaniel
M
T
17
W
18
T
19
F
20
S
21
S
22
Today's Focus
SCHOOL (1)
UI Audit
Medium
···
+
Tasks
Focus
Cockpit
Focus Timer Screen
Turn on sound
Space flight
cabin rumble
ON
Rain drift
Soft rainfall
OFF
Paused
44:17
Mission objectives (1)
Ui audit
Play
Mar 18
Time Remaining
44 min
Distance Remaining
89.6M km
Danger Zone
Danger zone
Delete Account
Sign Out
FocusRoom V3.2

Red semantic color applied to destructive UI — bordered row for Delete, filled surface for Sign Out.

Accessibility
Accessibility and Contrast

No design system is complete without accessibility standards.

Aa Primary
#FDFDFD / #2E2F3312.6:1 ✓
Aa Secondary
#E4E5E6 / #11111310.3:1 ✓
Aa Light Blue
#0a0a0b / #38BDF97.8:1 ✓
Aa Error
#fff / #EF44444.5:1 ✓
Aa Success
#fff / #22C55D4.7:1 ✓
Aa Warning
#111 / #FACC148.5:1 ✓
WCAG AA Guideline: All text and interactive elements must meet WCAG AA standards for contrast (a ratio of at least 4.5:1 for normal text). Do not use color alone to convey meaning — always pair status colors with iconography or text labels.
Usage Rules

Color Do's & Don'ts

Visual rules for applying Orbit's color tokens correctly. Each example shows a real UI pattern — the good and the bad, side by side.

✓
Do
✓ Do
Session saved successfully
Connection timed out
Focus streak at risk
Do pair status colors with an icon and a text label. All three signals together (color + icon + text) ensure the message lands even for colorblind users.
✓ Do
Next Mission
Ready to focus?
Do reserve #38BDF9 Light Blue for the single primary interactive element. One accent per view keeps hierarchy clear and draws the eye to the action.
✓ Do
Deploy Project
Use primary text for headings and muted text for supporting copy — creating a clear hierarchy at a glance.
Active
Confirmed
Do use #FDFDFD for headings and #9AA3B0 for body — a 2-step text hierarchy that meets WCAG AA on all dark backgrounds.
✓ Do
Delete Workspace
This will permanently remove all sessions and tasks. This action cannot be undone.
Delete Forever
Do use #EF4444 Red consistently for all destructive actions — delete, remove, cancel. Semantic consistency builds user trust.
✕
Don't
✕ Don't
Session status
Network health
Sync state
Don't use color alone to convey status. A colorblind user sees all three dots as identical. Always add an icon or text label alongside the color signal.
✕ Don't
Next Mission
Ready to focus?
Don't apply #38BDF9 to multiple elements at once. When everything is highlighted, nothing is. The accent loses its power to guide attention.
✕ Don't
Deploy Project
This text is almost invisible against the dark background. Fails WCAG AA completely.
Active
Confirmed
Don't use #555860 or darker for body text on #0D0D0F. Contrast ratios below 4.5:1 fail WCAG AA — always use #9AA3B0 as the minimum muted value.
✕ Don't
Start Focus Session
25 min Sprint
45 min Deep Work
Don't use #EF4444 Red for positive or neutral actions. Users will hesitate — red is hardwired to mean danger or stop. Reserve it exclusively for destructive actions.