Grid Design System

Problem

Haven's product and marketing surfaces — the app, the marketing site, the customer proposal flow — were growing faster than the visual foundation underneath them. Type treatments, spacing, and button styles were being decided page by page instead of pulled from a shared source of truth, and every new surface risked drifting a little further from a coherent look.

Opportunity

Rather than trying to systemize everything at once, the system was structured as a set of ordered pillars — colors, typography, buttons, icons, spacing, footers, progress bars — each built out fully before moving to the next, with the remaining pillars (border radius, motion, inputs, cards, assets) already scaffolded as a visible queue rather than an afterthought.

Exploration

Each pillar was developed as its own branch, mirroring how a codebase would eventually consume it: a color token architecture (base → functional → extended → semantic, with a full dark-mode variant), a 4px-based spacing scale bound as real Figma variables, and a full button variant matrix across size, type, and state. Typography changes weren't validated in isolation — they were reviewed and rolled out against real Haven pages, including a before/after pass on the marketing site's About page and a state-specific program page.

Typography · Live spec vs updated text styles, About page

Solution

Named principles turned the button system from a style sheet into a decision framework: rules like "Volt is earned, not default" and "States tell the truth" gave the rest of the team language for when to reach for the brand's high-emphasis color versus a neutral action, rather than leaving it to individual judgment. A companion foundation file extended the system into motion and illustration — a modular isometric component kit (battery, solar panels, sun, tree) and a full animation sequence showing the battery cycling through grid-outage, normal, and off-grid states, built as reusable product-education content rather than a one-off explainer.

Four principles that shape every button decision

Buttons are Haven’s most direct promise to a user — click this, and something happens. These principles keep that promise consistent across every size, type, and state we ship.

• 

  One clear path forward

  Every screen should have exactly one Primary button: the single action we most want someone to take. Secondary, Ghost, and Text Only exist to support that path, not compete with it.

• 

  Volt is earned, not default

  Volt and Volt Ghost carry Haven’s signature color, so they’re reserved for the one moment that matters most on a screen. Everywhere else, reach for Secondary, Ghost, or Text Only.

• 

  States tell the truth

  Hover, Pressed, Disabled, and Loading aren’t decoration — they’re how someone knows a button is working, waiting, or unavailable. A button that can’t show its state can’t be trusted.

• 

  Same shape, every size

  Small, Medium, and Large scale the same button consistently, so resizing never means relearning how it behaves.

Four principles that shape every color decision

Haven’s palette is deliberately rooted — in earth, sky, and the warmth of real spaces. A purposeful range of colors allows each one to carry weight: semantic, emotional, and brand. These principles govern how color is applied across the product.

• 

  Ground first

  Haven’s dominant tones are warm neutrals drawn from the earth — not the screen. Sand, white, and warm backgrounds form the majority of every surface. Color should never feel tech-heavy or electric at scale. The warmth of Sand is the default; everything else exists on top of that foundation.

• 

  Signal with Intention

  Volt is Haven’s most distinctive color. Its power comes entirely from restraint — used only for primary actions, success states, and brand expression moments. The moment Volt appears in too many places, it loses its ability to say “here is what matters.” Every other color defers to it.

• 

  Sky & Earth together

  Glacier brings openness and calm — it’s the color of ease, the ambient feeling of a clear day. The earth tones (Ocean, Sage, Birch, Brick) bring warmth, depth, and nature. Together, sky and earth create a palette that feels like the real world — grounded above and below.

• 

  Warmth as a promise

  Every surface should feel lived-in. Haven is not a website — it’s a home. Birch, Brick, and Sand carry the feeling of real materials and real light. Wherever possible, choose the warmer option. Color should make people feel settled and in capable hands, not impressed by technology.

Outcomes

• 7 of 13 planned system pillars shipped in full — colors, typography, buttons, icons, spacing, footers, and progress bars — each with documented principles and dark-mode coverage
• Typography changes verified against two live marketing pages before rollout, not just isolated specs
• A separate illustration and animation system shipped for Haven's core battery-backup value proposition, reused across product-education surfaces
• The remaining pillars (border radius, motion, inputs, cards, assets) are scaffolded and next in the queue — a system built to be finished incrementally, not abandoned mid-way

Company presentation · Already in use