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

# Relief · Design System

> Calm, clear debt relief with a bright blue lift

**Theme:** light · **Industry:** fintech · **Source:** https://www.relief.app/ · **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._

Relief pairs confident navy typography with bright blue calls to action and soft, sea-inspired illustrations to make debt support feel approachable. A spacious, rounded layout carries visitors from the app’s savings promise through product benefits, user reviews, FAQs, and a phone-number CTA.

## North star

Make financial help feel reassuring: keep content spacious and legible, anchor it in deep blue, and reserve bright blue for clear actions.

## Overview

Relief builds a reassuring fintech identity from a small, consistent palette: deep blue anchors the logo, headlines, links, and testimonial cards; bright blue marks primary actions; white keeps the page open; and warm off-white gives the reviews area a quiet change of pace. The hero’s pale-blue sea-and-sky illustration supplies the most prominent color field, but its varied light blues belong to the artwork rather than the measured brand palette. Gilroy is used throughout, with heavy, compact display headlines balanced by regular, readable body copy. The page uses centered hero content, generous white intervals between major sections, and alternating product-benefit compositions rather than dense blocks of copy. Rounded buttons, cards, and section corners soften the financial subject matter. The phone mockup and playful nautical objects turn abstract savings into a tangible app story, while testimonials and FAQs provide proof and reassurance.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Harbor Navy | `#13426f` | `--color-harbor-navy` | brand | Primary brand anchor for the logo, major headings, links, and deep-blue testimonial cards. |
| Open Canvas | `#ffffff` | `--color-open-canvas` | surface | Main page canvas and contrast color for text or icons on bright-blue buttons. |
| Quiet Mist | `#d0d5dd` | `--color-quiet-mist` | semantic | Measured muted text color; use for secondary information only where contrast remains clear. |
| Relief Blue | `#2e96ff` | `--color-relief-blue` | accent | Primary Get Relief buttons and small interface highlights. |
| Slate Haze | `#616c8a` | `--color-slate-haze` | semantic | Muted supporting text, distinct from the stronger navy headings and primary links. |
| Soft Linen | `#f9f7f0` | `--color-soft-linen` | surface | Subtle off-white section surface, notably the testimonials band. |
| Link Cobalt | `#0254a5` | `--color-link-cobalt` | accent | Emphasized inline legal or utility link text. |
| Cloud Tint | `#f2f4f7` | `--color-cloud-tint` | neutral | Minor measured text color; not a defining page surface or brand field. |
| Illustration Blue | `#328dd1` | `--color-illustration-blue` | semantic | Minor measured text color; blue tones in the sea illustration are artwork, not core palette guidance. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Open Canvas) · `--color-surface` → `#13426f` (Harbor Navy) · `--color-surface-2` → `#f9f7f0` (Soft Linen) · `--color-text` → `#13426f` (Harbor Navy) · `--color-text-muted` → `#d0d5dd` (Quiet Mist) · `--color-text-subtle` → `#616c8a` (Slate Haze) · `--color-accent` → `#13426f` (Harbor Navy) · `--color-accent-2` → `#2e96ff` (Relief Blue) · `--color-accent-3` → `#0254a5` (Link Cobalt) · `--color-on-accent` → `#ffffff` (Open Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#13426f` | `#ffffff` | 10.31:1 | AAA |
| `#13426f` | `#f9f7f0` | 9.62:1 | AAA |
| `#d0d5dd` | `#ffffff` | 1.47:1 | fail |
| `#d0d5dd` | `#13426f` | 6.99:1 | AA |
| `#d0d5dd` | `#f9f7f0` | 1.38:1 | fail |
| `#616c8a` | `#ffffff` | 5.22:1 | AA |
| `#616c8a` | `#13426f` | 1.97:1 | fail |
| `#616c8a` | `#f9f7f0` | 4.87:1 | AA |
| `#13426f` | `#ffffff` | 10.31:1 | AAA |
| `#13426f` | `#f9f7f0` | 9.62:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Gilroy | `--font-body` | webfont | 400, 700, 600, 800, 500 | Site-wide typeface for headlines, body copy, links, buttons, and captions. | Nunito Sans |

- **Gilroy:** Use heavy 700–800 headlines with friendly rounded forms; body text is regular, with no measured tracking or uppercase treatment.

### Type scale — Perfect Fourth (ratio ≈ 1.294, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 58px | 800 | 1 | 0 | — | Gilroy | Largest promotional headings and high-impact display copy. |
| h1 | 52.5px | 800 | 1 | 0 | — | Gilroy | Primary page headline, including the centered hero title. |
| h2 | 49px | 800 | 1.2 | 0 | — | Gilroy | Major section headings for product benefits and FAQs. |
| h3 | 40px | 800 | 1.1 | 0 | — | Gilroy | Supporting feature or subsection headings. |
| h4 | 20.5px | 700 | 1.2 | 0 | — | Gilroy | Compact card headings and smaller content titles. |
| body | 16px | 400 | 1.38 | 0 | — | Gilroy | Main descriptive copy and standard supporting paragraphs. |
| caption | 14px | 400 | 1.43 | 0 | — | Gilroy | Small metadata, helper text, and testimonial details. |
| link | 16px | 400 | 1.2 | 0 | — | Gilroy | Inline navigation, resource links, and benefit CTAs. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 7, 8, 10, 14, 16, 18, 20, 21, 24, 28, 30, 56 px.
- Section rhythm 56px · element gap 14px · card padding 28px · max content width 1384px.

Use a centered, responsive content frame capped at the measured 1384px maximum width. The hero is center-aligned and spacious, while product-benefit sections shift to left-aligned split compositions. Keep substantial breathing room between major blocks; the measured section rhythm is 56px, with comfortable element spacing and 28px card padding. Reviews form a multi-column card band, FAQs return to a single centered column, and the footer organizes resources into four columns.

## Shape & elevation

- Radius: button `9999px` · card `18px` · xs `18px` · sm `26px` · md `30px` · pill `9999px`
- Shadow `hairline` (button): `rgba(154, 207, 246, 0.5) 0px 7px 0px 0px`
- Shadow `hairline-2` (card): `rgba(0, 0, 0, 0.05) 0px 3px 0px 0px`
- Shadow `lg` (other): `rgba(22, 31, 53, 0.1) 6px 6px 44px 0px`
- Shadow `hairline-3` (button): `rgba(154, 207, 246, 0.5) 0px 5px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

Most surfaces feel flat against white, with rounded corners doing more work than borders. Primary bright-blue pill buttons use a visible pale-blue offset shadow; cards use a faint short shadow, while testimonial cards stand out through their deep-blue fill. Keep layering restrained and reserve stronger depth for interface actions and illustration.

## Imagery

Favor polished, playful 3D-style illustration over editorial photography. The hero combines a centered phone mockup with a small sailboat, buoy, clouds, and a stylized ocean, framed inside a large pale-blue rounded field. Keep imagery colorful but soft and avoid letting illustration details compete with the headline or CTA. Product and review visuals should support the app story and social proof.

## Components

### Primary CTA

Bright-blue pill button with white bold Gilroy text and a pale-blue offset shadow; repeat the short “Get Relief” label.

### Hero panel

Large rounded pale-blue illustrated field with centered social proof, a heavy navy headline, concise copy, CTA, and phone mockup.

### Feature split

Benefit-focused text and a supporting product visual arranged as a spacious split composition, with a navy heading and inline link.

### Review card

Deep-navy rounded card with light review copy and compact rating or date details; group cards into a multi-column proof band.

### FAQ row

Rounded white question surface on a pale-blue section, with concise navy text and a bright-blue circular expand control.

### Phone CTA form

Centered conversion block with a phone-number input, bright-blue submit pill, and small consent text with a cobalt legal link.

### Measured component styles

- **Primary button** (“Get Relief”): background #2e96ff · text #ffffff · radius 70px · padding 14px 28px · 700 14px Gilroy · shadow rgba(154, 207, 246, 0.5) 0px 7px 0px 0px
- **Link** (“Help Center”): transparent background · text #13426f · radius 0px · padding 0px · 400 16px Gilroy
- **Input**: transparent background · text #202634 · radius 0px · padding 8px 160px 8px 32px · 500 16px Gilroy
- **Card** (“11/10/2024 Must use I had very low expec”): background #13426f · text #333333 · radius 18px · padding 28px · 400 14px Gilroy

## Do

- Use Harbor Navy for headings and key brand text.
- Reserve Relief Blue for prominent actions and small highlights.
- Keep the hero headline and CTA centered over the illustration.
- Give major sections generous white space.
- Use rounded shapes for buttons, cards, and prominent panels.
- Keep body copy concise and comfortably readable.

## Don't

- Do not introduce unmeasured brand colors as core UI colors.
- Do not turn the page into a dense dashboard or financial spreadsheet.
- Do not use sharp-edged buttons where the pill treatment is established.
- Do not let decorative artwork obscure the headline or CTA.
- Do not use heavy borders where surface contrast and rounding suffice.
- Do not use all-caps display typography or exaggerated tracking.

## Agent prompt

Build a new page in Relief’s approachable fintech style. Use Harbor Navy (#13426f) for headings, links, and key brand elements; Relief Blue (#2e96ff) for primary pill CTAs; white (#ffffff) as the main canvas; and Soft Linen (#f9f7f0) for a restrained section change. Set all text in Gilroy or a close rounded sans-serif, with bold, friendly headlines and readable regular body copy. Keep the layout spacious, with a centered illustrated hero, generous section breaks, and rounded cards. Use soft, polished app-oriented illustration rather than stock-heavy photography; treat pale sea blues as artwork, not extra brand tokens. Make the main action obvious, then support it with clear product benefits, credible social proof, accessible FAQs, and a simple contact or signup form.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTA inside a wide rounded illustrated panel, with phone mockup below. | social proof, primary CTA | pale-blue illustration field, navy headline, blue pill button |
| 2 | stats | Compact proof strip featuring a large savings claim and four supporting visuals. | proof point, credibility | large metric, small supporting images |
| 3 | how-it-works | Three evenly arranged columns describing app download, debt linking, and savings discovery. | step-by-step guidance, onboarding | three-column layout, illustrated step visuals |
| 4 | feature-split | Spacious left-aligned benefit content paired with a supporting product image. | benefit-led explanation, learn more | navy heading, inline CTA, product visual |
| 5 | feature-split | Product benefit section with a large heading, short copy, CTA link, and app visual. | personalized guidance, learn more | feature split, app illustration |
| 6 | feature-split | Another spacious feature composition pairing supporting copy with a product image. | reassurance, protective support | navy heading, inline CTA, supporting visual |
| 7 | testimonials | Off-white band with a section heading and horizontally arranged deep-blue review cards. | social proof, app store link | multi-column cards, star ratings, navy card fills |
| 8 | faq | Pale-blue full-width panel with centered FAQ rows and a phone signup CTA below. | accordion questions, phone signup | rounded white rows, blue expand controls, inline legal link |
| 9 | footer | Four-column resource navigation followed by compact legal disclosures and a final copyright line. | resource navigation, legal disclosure | grouped link columns, small muted text |

## Source CSS custom properties (selected)

```css
--untitled-ui--primary600: #7f56d9;
--untitled-ui--primary700: #6941c6;
--untitled-ui--primary100: #f4ebff;
--untitled-ui--primary300: #d6bbfb;
--untitled-ui--primary800: #53389e;
--untitled-ui--primary500: #9e77ed;
--untitled-ui--primary50: #f9f5ff;
```

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