Designing with Navy and Orange

Most SaaS interfaces drift. A blue here, a teal there, a stray purple for the “premium” tier — and before long the interface feels like a swatch book. Dogbro 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 branding trivial to white-label: swap the two hues and the entire interface 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.

Constraints are the silent salesperson. They guide attention, build trust, and make every element earn its place.