04 · Identity / Color

Color with character.

Twelve hues do all the work: three primaries, three accents, six neutrals. Plus 20% tints when a section needs softness without a new color. Click any value to copy it.

Color theory

The why behind the palette.

A teal-and-orange world: optimistic, cinematic, grounded.

The palette is built on a complementary relationship. Rocket Flame (orange) and Galactic Seafoam (teal) sit almost opposite on the color wheel, the same pairing that defines modern cinematic color grading. Complements create maximum vibrancy and contrast while still resolving into harmony, which is why the brand reads as energetic yet balanced.

Warm advances, cool recedes. Orange comes forward (it's the color of firelight, action, and human skin) while teal falls back (sky, water, distance). Setting them against each other builds natural depth on an otherwise flat page: warmth in the foreground, cool space behind, exactly the retro-futurist horizon we live on.

The emotional split does the storytelling. The warm hues carry optimism, energy, and humanity; the cool hues carry trust, calm, and progress. Together they promise a future that is both bright and dependable, hopeful without being naive.

Restraint keeps it from tipping into noise. Purple and blue appear rarely, red only signals alarm, and warm neutrals hold everything in a calm, editorial frame. Each color below carries its own short note on the why.

Primaries

The brand's calling cards.

Primary

Rocket Flame

HEX

RGB

CSS

Orange fuses red's drive with yellow's optimism, so it reads as warm momentum: energetic and human, never aggressive.

Secondary · success

Galactic Seafoam

HEX

RGB

CSS

Teal-green sits between blue's calm trust and green's growth, signaling fresh, reassuring progress.

Tertiary · energy

Solar Gold

HEX

RGB

CSS

Amber is the hue of sunlight and discovery; it draws the eye and radiates optimism and worth.

Accents

Used sparingly. Atmosphere Blue and Voyager Purple are quieter pairings; Red Alert is reserved for warnings and destructive UI only.

Sparing

Atmosphere Blue

HEX

RGB

CSS

Blue is the most universally trusted color, calm and expansive like open sky, so it grounds the bolder hues.

Very sparing

Voyager Purple

HEX

RGB

CSS

Purple has always signaled imagination and the visionary: the dreamlike edge of the universe.

Destructive only

Red Alert

HEX

RGB

CSS

Red is the instinctive signal to stop, which is exactly why we reserve it for warnings alone.

Neutrals

The structural palette: backgrounds, text, dividers.

Surface

Pure White

HEX

RGB

CSS

White is room to breathe, the clarity and openness the brand is built on.

Light bg (default)

Cosmic Fog

HEX

RGB

CSS

A warm off-white feels human and inviting where pure white can feel clinical.

Dividers (light)

Lunar Dust

HEX

RGB

CSS

A soft warm gray separates elements without harshness, keeping the page calm.

Muted text

Steel Gray

HEX

RGB

CSS

A neutral mid-gray recedes on purpose, letting color and content lead.

Primary text · dark surface

Graphite Core

HEX

RGB

CSS

A warm near-black grounds the palette with depth and gravity, softer than pure black.

Dark bg

Deep Void

HEX

RGB

CSS

The deepest tone lets the brand colors glow against it, like stars against space.

20% tints

The only supported tint. Use these for backgrounds, badges, and section accents.

Rocket Flame#ED6033

20%

rgba(237, 96, 51, 0.2)

40%

rgba(237, 96, 51, 0.4)

60%

rgba(237, 96, 51, 0.6)

80%

rgba(237, 96, 51, 0.8)

100%

#ED6033

Galactic Seafoam#5DC6AD

20%

rgba(93, 198, 173, 0.2)

40%

rgba(93, 198, 173, 0.4)

60%

rgba(93, 198, 173, 0.6)

80%

rgba(93, 198, 173, 0.8)

100%

#5DC6AD

Solar Gold#FFAE00

20%

rgba(255, 174, 0, 0.2)

40%

rgba(255, 174, 0, 0.4)

60%

rgba(255, 174, 0, 0.6)

80%

rgba(255, 174, 0, 0.8)

100%

#FFAE00

Atmosphere Blue#5DA3C6

20%

rgba(93, 163, 198, 0.2)

40%

rgba(93, 163, 198, 0.4)

60%

rgba(93, 163, 198, 0.6)

80%

rgba(93, 163, 198, 0.8)

100%

#5DA3C6

Voyager Purple#895DC6

20%

rgba(137, 93, 198, 0.2)

40%

rgba(137, 93, 198, 0.4)

60%

rgba(137, 93, 198, 0.6)

80%

rgba(137, 93, 198, 0.8)

100%

#895DC6

Red Alert#E13D33

20%

rgba(225, 61, 51, 0.2)

40%

rgba(225, 61, 51, 0.4)

60%

rgba(225, 61, 51, 0.6)

80%

rgba(225, 61, 51, 0.8)

100%

#E13D33

Light mode

Text and icons on a 20% tint use the matching ink hue, a darkened version of the color. It carries the hue while staying legible on a light tint.

Dark mode

Ink hues are light mode only. On a dark canvas the tint is already dim and the ink collapses into it, so use the base brand color instead.

Approved combinations

Stack from darkest to lightest. Each text color is locked to the surface.

Default

Rapidly hire humans.

Rocket Flame · Pure White text

Default

Earth's best workforce.

Seafoam · Pure White text

Default

Energy and optimism.

Solar Gold · Graphite text

Default

A calm, steady frame.

Graphite Core · White text

Default

The page that breathes.

Cosmic Fog · Graphite text

Sparing

A signal, not a system.

Atmosphere Blue · White text

Very sparing

Lore moments only.

Voyager Purple · White text

Dark mode

Welcome to the void.

Deep Void · White text

Rules

A few non-negotiables.

20% tints only

If you need a softer step, stair-step in 20% increments. No 10/30/40; those are out.

Ink is light mode only

Text on a 20% tint uses the ink hue in light mode and the base brand color in dark mode. Never ink on a dark canvas; it disappears.

Rocket Flame is joy

It's the calling-card primary. Never a warning. Destructive UI uses Red Alert (#E13D33).

Stack dark to light

When pairing colors, stack from darkest at the foundation to lightest at the top.

No gradients

Ever. Color with character means flat color, not bleeding hues.

No new hues

If you need a new color, you don't. Pick a tint of an existing hue or use Steel Gray.

No color-on-color logos

Brand-color background → white or graphite-alt lockup. Never the color lockup.