---
title: "Boost Insurance design system"
variant: extended
source: https://boostinsurance.com/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/boostinsurance-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Boost Insurance · Design System

> A calm dark canvas lit by electric gradients.

**Theme:** dark · **Industry:** saas · **Source:** https://boostinsurance.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Boost pairs a deep teal canvas with crisp white typography and vivid gradient accents to present its embedded insurance platform. The homepage combines a restrained navigation and text-led hero with soft-edged product imagery and generous dark section bands.

## North star

Keep the page grounded in deep teal, using crisp off-white type and the vivid three-color gradient as a focused highlight.

## Overview

The visual identity is built around a deep teal canvas (#002025), which gives the homepage a quiet, technical atmosphere. Warm off-white (#fffffa) carries the main headings and navigation, while muted blue-grays soften supporting copy. A saturated cyan-to-green-to-yellow gradient supplies the main burst of energy: it appears in the hero CTA and in prominent visual treatments, rather than as a substitute for the dark page background. Gellix is used throughout, with large, tightly tracked display and heading styles contrasted against small uppercase, widely tracked eyebrows. The first viewport uses a compact navigation above a left-aligned, multiline hero and a rounded product visual on the right. Broad dark section bands and ample vertical breathing room keep the overall density low. Cards and media use generous rounding; subtle teal borders distinguish surfaces without making the interface feel outlined or busy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Porcelain | `#fffffa` | `--color-soft-porcelain` | neutral | Main headings, body copy, navigation labels, and light section or footer surfaces. |
| Deep Tidal | `#002025` | `--color-deep-tidal` | brand | Dominant page canvas and dark sections; also used for text on bright gradient controls. |
| Slate Teal | `#244348` | `--color-slate-teal` | surface | Raised dark card surfaces and restrained borders that separate content from the canvas. |
| Harbor Gray | `#7d8f92` | `--color-harbor-gray` | semantic | Muted secondary text, especially in the footer. |
| Mist Gray | `#b7c6c9` | `--color-mist-gray` | semantic | Secondary explanatory copy on dark backgrounds. |
| Electric Lime | `#79fa4b` | `--color-electric-lime` | accent | Middle stop in the vivid brand gradient, visible on CTA and highlight treatments. |
| Signal Cyan | `#30d7f1` | `--color-signal-cyan` | accent | Cool gradient stop and selective link or interface highlight. |
| Solar Yellow | `#fce344` | `--color-solar-yellow` | accent | Warm gradient stop that adds contrast to bright highlight treatments. |
| Deep Pewter | `#54696c` | `--color-deep-pewter` | neutral | Subtle secondary border and text variation; keep it subordinate to the core palette. |
| Clouded Sage | `#9eaeb0` | `--color-clouded-sage` | neutral | Intermediate muted text tone for secondary content. |
| Dusk Teal | `#455c60` | `--color-dusk-teal` | surface | Low-contrast card and media detail, not a primary page background. |
| Abyss Teal | `#05333a` | `--color-abyss-teal` | surface | Inset card surface used to distinguish content within the dark interface. |

### Semantic aliases

`--color-canvas` → `#002025` (Deep Tidal) · `--color-surface` → `#fffffa` (Soft Porcelain) · `--color-surface-2` → `#244348` (Slate Teal) · `--color-surface-3` → `#05333a` (Abyss Teal) · `--color-text` → `#fffffa` (Soft Porcelain) · `--color-text-muted` → `#7d8f92` (Harbor Gray) · `--color-text-subtle` → `#b7c6c9` (Mist Gray) · `--color-border` → `#244348` (Slate Teal) · `--color-accent` → `#79fa4b` (Electric Lime) · `--color-accent-2` → `#30d7f1` (Signal Cyan) · `--color-accent-3` → `#fce344` (Solar Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fffffa` | `#002025` | 16.98:1 | AAA |
| `#fffffa` | `#244348` | 10.62:1 | AAA |
| `#fffffa` | `#05333a` | 13.59:1 | AAA |
| `#7d8f92` | `#002025` | 5.04:1 | AA |
| `#7d8f92` | `#fffffa` | 3.37:1 | AA-large |
| `#7d8f92` | `#244348` | 3.15:1 | AA-large |
| `#7d8f92` | `#05333a` | 4.03:1 | AA-large |
| `#b7c6c9` | `#002025` | 9.68:1 | AAA |
| `#b7c6c9` | `#fffffa` | 1.75:1 | fail |
| `#b7c6c9` | `#244348` | 6.05:1 | AA |

### Gradients

- `linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%)`
- `linear-gradient(to top, rgba(0, 32, 37, 0.95) 0%, rgba(0, 32, 37, 0) 100%)`
- `linear-gradient(178.79deg, rgba(36, 67, 72, 0.35) 1.03%, rgba(36, 67, 72, 0) 94.15%)`
- `linear-gradient(100.7deg, rgb(48, 215, 241) 8.74%, rgb(121, 250, 75) 92.06%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gellix | `--font-body` | webfont | 400, 500, 600, 300 | Site-wide typeface for navigation, headings, body copy, links, and buttons. | DM Sans |

- **Gellix:** Use medium-weight display headings with tight negative tracking; reserve light, uppercase, widely tracked styling for eyebrows.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 500 | 0.85 | -0.04em | — | Gellix | Oversized display moments and prominent brand statements. |
| h1 | 90px | 500 | 0.85 | -0.04em | — | Gellix | Primary homepage headline in the hero. |
| h2 | 48px | 500 | 1.1 | -0.03em | — | Gellix | Major section headings. |
| h3 | 26px | 500 | 1.2 | -0.02em | — | Gellix | Feature and content-card headings. |
| h4 | 22px | 400 | 1.3 | 0 | — | Gellix | Smaller supporting headings. |
| body | 16px | 400 | 1.3 | 0 | — | Gellix | Main explanatory and paragraph copy. |
| caption | 12px | 400 | 1.3 | 0 | — | Gellix | Compact captions and tertiary details. |
| button | 14px | 500 | 1.3 | -0.01em | — | Gellix | CTA and button labels. |
| link | 14px | 500 | 1.3 | -0.01em | — | Gellix | Navigation and inline action links. |
| eyebrow | 12px | 300 | 1.05 | 0.35em | uppercase | Gellix | Small uppercase labels above section content. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 9, 10, 15, 18, 19, 20, 24, 25, 30, 40, 100, 112, 136 px.
- Section rhythm 136px · element gap 15px · card padding 29px · max content width —.

Use a spacious, wide desktop composition with navigation across the top and a two-column hero: headline and supporting copy on the left, product media on the right. Keep text left-aligned and content groups clearly separated, with generous vertical gaps between dark section bands. The measured page width is unspecified, so do not hard-code a maximum width from these observations. Keep supporting content visually sparse, letting large type and uninterrupted dark canvas carry the hierarchy.

## Shape & elevation

- Radius: button `9999px` · card `30px` · media `30px` · xs `8px` · sm `10px` · md `15px` · lg `16px` · xl `30px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 32, 37, 0.15) 0px 80.5536px 24.1632px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface relies more on tonal contrast and fine borders than on pronounced shadows. Separate dark cards with subdued teal surfaces and hairlines; use rounded media and card containers for softness. Where layering is needed, keep the shadow broad and faint against the deep canvas rather than creating a hard, floating effect.

## Imagery

The first viewport pairs the hero copy with a softly rounded product-interface visual. The separate captured viewport shows a large rounded dark panel against a cyan-green-yellow gradient; treat the gradient as a deliberate visual field, while keeping the interface panel and its details subdued. Avoid adding decorative photography or illustrations unsupported by the reference.

## Components

### Top navigation

Place the Boost mark at the left, compact navigation links through the center, and a Contact Us action at the right; use off-white text against the deep teal canvas.

### Hero headline

Set a large, multiline, left-aligned Gellix statement with tight negative tracking and warm off-white color.

### Hero product visual

Pair the headline with rounded product-interface media on the right; keep its contrast controlled so the message remains primary.

### Gradient CTA

Use a pill-shaped button with the cyan, lime, and yellow gradient, deep teal label, and medium-weight Gellix text.

### Content card

Use a dark teal inset surface, generous corner rounding, and restrained borders for cards against the canvas.

### Measured component styles

- **Primary button** (“Get in Touch”): transparent background · text #002025 · border 1px solid · radius 999px · padding 18px 30px · 500 20.0016px Gellix
- **Link** (“Learn More”): transparent background · text #002025 · radius 0px · padding 0px · 500 13.9968px Gellix
- **Card** (“MGAs, Brokers & Agents Leverage Boost’s ”): background #05333a · text #002025 · radius 29.9952px · padding 40px 19px · 400 16px Times New Roman
- **Navigation item** (“Contact Us”): transparent background · text #fffffa · radius 0px · padding 9px 20px · 500 13.9968px Gellix

## Do

- Use #002025 as the dominant page canvas.
- Set primary text in #fffffa.
- Reserve the cyan-to-lime-to-yellow gradient for focused highlights and CTAs.
- Use Gellix or a close geometric sans-serif substitute consistently.
- Keep hero copy left-aligned and pair it with product media.
- Separate content with generous vertical breathing room.

## Don't

- Do not turn the page into a light-background layout.
- Do not use the bright gradient as the default background for every section.
- Do not introduce heavy shadows or high-contrast outlines.
- Do not crowd the hero with extra content or decorative assets.
- Do not use all-caps styling for regular headings or body text.
- Do not invent page-width or spacing measurements not present in the supplied data.

## Agent prompt

Build a new Boost-style SaaS page on a deep teal (#002025) canvas. Use warm porcelain (#fffffa) for primary text, mist gray (#b7c6c9) for supporting copy, and restrained teal surfaces and borders such as #244348 and #05333a. Set type in Gellix, or DM Sans if unavailable; make major headings large, tight-tracked, and left-aligned, with small uppercase, widely tracked eyebrows. Use a spacious two-column hero with copy on the left and subdued, rounded product media on the right. Apply the Signal Cyan (#30d7f1), Electric Lime (#79fa4b), and Solar Yellow (#fce344) gradient selectively to the primary CTA and key visual accents. Keep cards soft-edged, borders subtle, shadows minimal, and section transitions calm. Avoid adding unsupported measurements or decorative imagery.

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/boostinsurance-com