Fantastic Four

Two climates in one interface. The page is a 1964 World's Fair sky — cool, open, slightly chrome. Surfaces sit in warm ivory, like the Baxter Building interiors. Navy carries the work, brass the fixtures, torch orange the spark. This is Earth-828 as a product theme, not a generic light-blue dashboard.

Optimistic, public, slightly ceremonial. A fairground sky over a lived-in apartment. Navy + brass + fire. Not another blue SaaS theme.

Inspiration & Context

Fantastic Four: First Steps (2025) is set on Earth-828, an alternate 1964 where the team is famous, the future arrived early, and the world still believes in it. Matt Shakman called the look 'if Stanley Kubrick made a Fantastic Four movie in 1965.' We take the production design's split seriously: exterior/tech is sky, silver, navy; interior/human is ivory, wood, brass, and a hit of Johnny's fire. Typography is geometric and tracked (NASA plaque, World's Fair posters) — Jost is loaded on purpose, because the old Futura stack silently became Trebuchet.

Color Palette

Background

#c8dff0

Sky vault — postcard blue, not hospital gray

Foreground

#142033

Ink navy — Reed's chalkboard, high-contrast type

Card

#f4efe4

Ivory interior — paper, plaster, the human rooms

Primary

#1a4f86

Suit navy — primary actions, the team's public face

Secondary

#c9923a

Brass fixtures — lamps, hardware, mid-century metal

Accent

#e25c24

Torch — the heat the old palette was missing

Muted

#b6d0e3

Horizon haze — cooler than the ivory cards

Muted Foreground

#4a6278

Secondary type — slate with a blue bias

Border

#8eabc0

Chrome edge — sky reflecting off metal

Destructive

#b4232c

Lab red — danger on the workbench, not generic error pink

Typography

Jost

--font-display-family

Display / Headings

A geometric sans in the Futura family — round O, sharp A, space-age posters. Loaded from Google Fonts (real Futura is not a web font). Headings get extra tracking so they read like a World's Fair wordmark, not a SaaS H1.

Source Sans 3

--font-body-family

Body / UI Text

A readable grotesque for labels and copy. Neutral at small sizes so Jost can stay ceremonial on titles. Replaces the previous Helvetica stack, which never matched the film.

Spacing & Radius

Border Radius Scale

0.375rem (6px) — Sharper than before. The last pass used 8px on a washed blue field and read as corporate admin. This is closer to mid-century metalwork: tight corners, sky outside, ivory inside.

0.375rem (6px)

Base Radius

calc(0.375rem - 4px)

Radius SM

calc(0.375rem - 2px)

Radius MD

calc(0.375rem + 4px)

Radius XL

Dark Mode Variant

Background

#0a141f

Night over the river — the sky after the fair closes

Foreground

#e4edf4

Cool paper white

Card

#142536

Cockpit / study after hours

Primary

#6aade8

Sky blue lifted for dark surfaces

Secondary

#d4a04a

Brass lamp still on

Accent

#f07838

Torch stays the hottest thing in the room

Best For

Editorial / exhibition sitesProduct stories that want 1960s futurePortfolios with architecture or film influenceAny UI that should feel civic and warm, not startup-pastel