Foundations / Color

One orange, one ink, one paper.

The palette runs on a single saturated orange, a warm cream paper, and an off-black ink. Everything else is supporting cast. Teal does cool secondary work. Olive carries the third service. The rest stays in the rainbow stripe motif and out of the UI.

Why this orange specifically

I chose #E8692A deliberately, not from an AI default. It runs through my actual home as an interior accent. The brand is a deliberate extension of how I already live, not a startup color picker decision.

Brand.

Orange is the only brand color. It marks the period in joel.design, anchors every primary action, and is the one color I own. I use it sparingly for impact.

Orange--orange

#E8692A

Primary action. The mark period. The brand color across web, print, and the wall in my home.

Orange Deep--orange-deep

#D45A1F

Hover state for primary actions. Slightly compressed orange for in-motion moments.

Neutrals.

Cream paper, ink type, three grays for hierarchy. The neutrals do most of the work. Every screen is mostly cream and ink with one small orange period.

Ink--dark

#1C1C1C

Display text, dark backgrounds, footer, hero. My anchor on the dark side.

Text Dark--text-dark

#2A2A2A

Body text on cream. One step up from pure black for warmth.

Text Body--text-body

#555555

Secondary copy. Captions. Long-form body when ink is too heavy.

Dim--dim

#888888

Labels, metadata, eyebrows, footer chrome. The quietest readable gray.

Cream--cream

#F7F2EA

Page background. Warm paper, not pure white. Where the system breathes.

Cream Warm--cream-warm

#F0E8DA

Section variants, subtle elevations on light surfaces.

White--white

#FDFAF5

Cards on cream. Slightly cooled white that holds against the warm paper.

Accents.

Teal is the secondary character, used where orange would compete with itself. Secondary actions, the “Web & Apps” service surface, hover states on dark backgrounds. Olive supports the third service (Automations) and quiet success moments. Both are in active rotation. Neither dominates.

Teal--teal

#1A8C8C

Secondary action. The cooler companion to orange. Web & Apps service. Hero ghost link underline.

Teal Light--teal-light

#2BA3A3

Teal hover or elevated state.

Olive--olive

#6B8C52

Tertiary accent. Automations service. Calmer earth tone for quiet success states.

Decorative.

These five colors live in the rainbow stripe motif and nowhere else. They are not UI colors. They exist to create a recurring visual signature across page tops and section dividers. Treat them as a single “stripe” element, not as individual brand colors.

Mustard--mustard

#E8B832

Stripe motif only.

Terracotta--terracotta

#D4764A

Stripe motif only.

Coral--coral

#D4604A

Stripe motif only.

Gold--gold

#B89A20

Stripe motif only.

Brown--brown

#7A5C48

Stripe motif only.

Pairings that work.

The two pairings I use constantly. Orange on ink for primary CTAs. Ink on cream for body. Both meet WCAG AA contrast standards.

Aa.

Orange on Ink · 4.62:1 · AA Large

Aa.

Ink on Cream · 14.32:1 · AAA

Rules.

One brand color. Orange owns the period and primary actions. Don’t introduce a second brand color.
Two accents max in any UI moment. Orange + teal is the limit. Adding olive next to orange + teal makes the surface read as “every color.”
Decorative stays in the stripe. Mustard, terracotta, coral, gold, brown. Only in the rainbow stripe element. Never as a button background or text color.
The period is always brand orange. Including in headlines, the wordmark, and the favicon. This is the locked mark decision.

← Overview Type →