---
name: Relief
description: "A strong example of a modern fintech UI that balances playful 3D illustrations with a calm, professional, and trustworthy aesthetic."
version: alpha

colors:
  background: "#F9F7F0"
  primary: "#333333"
  tertiary: "#328DD1"
  neutral: "#D0D5DD"
  bg-soft: "#EAF4FF"
  bg-quiet: "#FFFFFF"
  muted-soft: "#F2F4F7"
  line: "rgba(51,51,51,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 49px
    lineHeight: 1.2
    fontWeight: 800
    letterSpacing: "0px"
  display:
    fontFamily: humanist-sans
    fontSize: 31.5px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  display:
    fontFamily: humanist-sans
    fontSize: 20.25px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.25px"

rounded:
  sm: 4px
  md: 8px
  lg: 18px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A financial app that helps you reduce debt and become debt-free faster.

*A calm, safe harbor for people navigating debt.*

## Colors

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

- **Background (`#F9F7F0`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Accent (`#328DD1`)** — uses `accent` token
- **Muted (`#D0D5DD`)** — uses `muted` token
- **Borders (`rgba(51,51,51,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Consistent spacing based on a 4px grid, utilizing values like 14px, 21px, 28px, and 56px.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 18px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with a solid blue fill and a distinct 3D offset shadow.
- **card:** Testimonial cards with dark blue backgrounds and 5-star ratings.
- **chip:** Rounded tag with avatars showing user trust.
- **input:** Clean, rounded input fields.
- **hero:** Illustrated hero section with a mobile app mockup and floating 3D elements.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```