# Relief · Design system migration spec

> Source: https://www.relief.app  ·  Curated by OpenDesign  ·  en

> A strong example of a modern fintech UI that balances playful 3D illustrations with a calm, professional, and trustworthy aesthetic.

## 1. Identity DNA

Relief operates on the principle of the safe harbor, offering a design system that is less about the storm of debt and more about the calm of the destination. Its visual identity is built to convey the specific feeling of finding stable ground—a place where financial anxiety can finally subside.

**One-liner:** A financial app that helps you reduce debt and become debt-free faster.
**Keywords:** relief · debt · savings · financial freedom · protection
**Analogy:** A calm, safe harbor for people navigating debt.

## 2. Color

The color system is a study in quiet confidence, pairing warm off-whites with a spectrum of soft, trustworthy blues. This palette does not demand attention; it provides a consistent, calming backdrop that reassures the user at every interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F7F0` | main background |
| `--bg-soft` | `#EAF4FF` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#333333` | body text |
| `--muted` | `#D0D5DD` | placeholder |
| `--muted-soft` | `#F2F4F7` | weak hint |
| `--accent` | `#328DD1` | single accent |
| `--line` | `rgba(51,51,51,0.1)` | divider |

**Color principle:** A calm, trustworthy palette combining warm off-whites with varied blues to convey relief and safety.

The guiding principle is restraint, using color as a subtle signal of safety rather than a loud declaration of brand.

## 3. Typography

The typographic voice is humanist and accessible, using Gilroy to deliver clear, action-oriented headlines that feel encouraging rather than demanding. It establishes a tone of straightforward support, prioritizing clarity and warmth over financial formality.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 49px | 1.2 | 800 | 0px | Hero headlines |
| display | 31.5px | 1.2 | 700 | 0px | Section headlines |
| display | 20.25px | 1.25 | 700 | 0px | Subheadlines |
| body | 18px | 1.4 | 400 | 0px | Body copy |
| body | 16px | 1.4 | 400 | 0px | Secondary copy |
| body | 14px | 1.4 | 400 | -0.25px | Small text and metadata |

## 4. Spacing

Spacing follows a strict 4px grid, creating a measured, predictable rhythm that gives every element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent spacing based on a 4px grid, utilizing values like 14px, 21px, 28px, and 56px.

## 5. Surfaces

Surfaces are defined by depth and elevation, primarily through distinctive 3D shadow offsets rather than hard borders. This approach creates a tactile, almost playful hierarchy, lifting interactive elements like the primary pill-shaped buttons off the page.

- **Radius:** sm 4px · md 8px · lg 18px · pill 999px
- **Shadows:**
  - 0px 7px 0px 0px rgba(154, 207, 246, 0.5)
  - 0px 3px 0px 0px rgba(0, 0, 0, 0.05)
  - 6px 6px 44px 0px rgba(22, 31, 53, 0.1)
- **Borders:** Mostly borderless, relying on background color contrast.

## 6. Layout

The layout skeleton is intentionally simple and centered, beginning with a focused, single-column hero. It then transitions into a clear two-column feature section, maintaining generous whitespace to prevent visual clutter and guide the user's path.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered hero layout transitioning into a two-column feature section.

## 7. Motion & Interaction

Motion is employed with significant restraint, used only to provide subtle, reassuring feedback on interactive elements. All transitions are quick and smooth, following a consistent ease-out timing to maintain the system's calm, predictable feel.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Hover transitions on interactive elements

- **Hover:** Subtle transition effects on hover
- **Click:** No visible click state changes in screenshots
- **Transition:** All properties with a 0.15s to 0.2s ease-out timing function
- **Keyboard:** Standard focusable elements

## 8. Voice & Don'ts

The editorial voice is that of a supportive guide, using direct, encouraging phrases that avoid technical jargon and aggressive urgency. It is a voice designed to reduce anxiety, not add to it.

- **Tone:** Supportive, encouraging, and straightforward.
- **Headline style:** Direct, action-oriented phrases like 'Let's get you out of debt'.
- **CTA style:** Clear and simple, such as 'Get Relief' or 'See my savings'.
- **Avoid:** Overly technical financial jargon / Aggressive or urgent tones / Complex sentence structures

### Don'ts
- ❌ Don't use a dark background for the hero — the screenshot shows a light blue background with clouds.
- ❌ Don't use sharp, rectangular corners for buttons — the screenshot shows fully rounded, pill-shaped buttons.
- ❌ Don't use a flat design for primary buttons — the screenshot shows buttons with a distinct 3D shadow offset.
- ❌ Don't use a complex navigation menu — the screenshot shows a minimal top bar with just a logo and one CTA.
- ❌ Don't use multiple high-contrast colors — the screenshot shows a palette restricted mostly to blues and off-whites.
- ❌ Don't use a dense, multi-column layout for the hero — the screenshot shows a centered, single-column focus.

The system deliberately avoids complex interfaces, high-contrast multi-color schemes, and sharp-cornered elements, choosing instead a path of clear, unadorned simplicity.

## System Prompt (paste into AI tool)

```
Relief is a fintech mobile app focused on debt relief and financial safety. The design uses a calm, trustworthy palette dominated by soft blues (#BADEFF, #2E96FF) and warm off-whites (#F9F7F0). Typography is a humanist-sans-serif (Gilroy) featuring bold, friendly headlines and clean body copy. Critical design elements include pill-shaped buttons with 3D offset shadows, playful 3D illustrations of shields and clouds, and a spacious, centered layout. Avoid sharp corners, dark hero backgrounds, or overly complex interfaces; the design relies on restraint and clear, encouraging messaging.
```