Designing with Navy and Orange

Most theme palettes drift. A blue here, a teal there, a stray purple for the “premium” tier — and before long the interface feels like a swatch book. Kepler takes the opposite stance: two hues, and no third.

The rule

Navy carries structure — headings, dark sections, the sticky nav. Orange carries energy — calls to action, highlights, the eyebrow labels. Everything else is a warm neutral built from off-white paper and ink.

1. Navy #1e3a8a for trust and structure
2. Orange #f97316 for action and accent
3. Warm neutrals for everything in between

Why constraints help

A tight palette makes decisions faster. When there are only two accent colors, you never agonize over which one to use — the context decides. It also makes the theme trivial to rebrand: swap the two hues and the entire site follows.

The signature move is the hard-offset shadow — a solid 6px 6px 0 block with no blur. It gives cards a confident, sticker-like weight that a soft drop shadow never could.