Two-Color Discipline · 2026 Design Direction

01 · FIVE CANONICAL VARIANTS

Pick exactly one pair per project

VARIANT A · WARM EDITORIAL

Marvell · Obsidian Assembly

#E8E5DF · #1E1B16

VARIANT B · ATHLETIC NEON

Lando Norris · Floema

#D2FF00 · #111111

VARIANT C · CORPORATE CONFIDENT

Stripe Sessions

#221B35 · #FFFFFF

VARIANT D · SOLAR (NO NEUTRAL)

FlowFest 2025

#F3A20F · #F97028

VARIANT E · TRUE MONOCHROME

Silent House · Studio Namma

#FFFFFF · #000000

↑ ALSO VALID INVERSION

Same pair, flipped roles

#000000 · #FFFFFF

02 · TYPE AS IMAGE

Display fills the viewport

Display: Söhne Breit (Black) for editorial OR Druk Wide (Heavy) for athletic. Body: SAME family at lighter weight. NO accent typeface, NO mono unless functional, NO script.

MOODBOARD SUBSTITUTE: Anton (Google Fonts) — geometric condensed display approximating Druk Wide athletic energy.

DISCIPLINE

03 · COLOR-FLIP DIVIDERS

Section breaks via inversion

The bg switches between color-1 and color-2 every 2-3 sections. Type flips with it. The flip IS the section break.

Hover the grid below to see the inversion in action.

04 · SINGLE SIGNATURE MOTION

One distinguishing animation per page

Floema's elegant scroll. Stripe's wave header. Lando's WebGL energy. Pick ONE signature, ship it. Hover the box below — you get the wave once, not many micro-animations.

HOVER · ONE WAVE · 1600MS

05 · 50% OPACITY OVERLAY

The only allowed "third value"

When discipline tempts you to add a third color for hover state, use color-2 at 50% opacity over color-1 instead. Or hatched / dotted patterns in color-1. The 50% blend IS the only allowed third value.

STILL TWO COLORS

06 · CUSTOM 404 / FOOTER

Every page on system

Stripe Sessions treats every page as design surface, not just hero. Custom 404, custom footer, custom error states — all using the same two colors. NO third-party "coming soon" placeholders.

404

— PAGE LOST IN THE PALETTE —

07 · SIGNATURE MOVES

Five recognizable patterns

Each signature reinforces the palette discipline. Together they make the aesthetic legible from a single screenshot.

SIG 01

Color-flip section dividers

bg switches between color-1 and color-2 every 2-3 sections; type flips with it.

SIG 02

Single signature motion moment

ONE distinguishing animation per page — never many small motions.

SIG 03

Type-as-image hero

Display type at 100-200px filling 60% of the viewport, no decorative element.

SIG 04

50% opacity overlay

The only allowed "third value" — or hatched / dotted patterns in color-1.

SIG 05

Custom 404 / footer using the same two colors

Every page surface is on-system. No third-party "coming soon" placeholders. No browser-default error pages.

08 · ANTI-PATTERNS

No exceptions, no third color

The DO-NOT-USE list is the discipline. Each rule traces to a specific failure mode that defeats the two-color premise.

✕A third accent color "for hover state" — use color inversion instead

✕Gradients between the two colors (defeats the discipline)

✕Full-color photography that hasn't been color-graded into the palette

✕Multiple accent fonts (one family carries everything)

✕Drop shadows in a third color

✕"Trusted by" logo walls in third-party color (use silhouettes in color-2)

✕Animated multi-step transitions (one signature motion, that's it)

✕Any deviation from the two named colors — no exceptions