---
name: Empower Me
description: "This site is a strong example of bold typography and minimalist color usage in modern fintech, creating a highly memorable and accessible brand identity."
version: alpha

colors:
  background: "#171616"
  primary: "#FFFFFF"
  tertiary: "#E4E24E"
  neutral: "#64635C"
  bg-soft: "#F7F5EF"
  bg-quiet: "#FDFDF6"
  line: "rgba(16,15,15,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 96px
    lineHeight: 0.95
    fontWeight: 900
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 900
    letterSpacing: "-0.6px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 16px
  lg: 24px
  pill: 99999px

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

---

## Overview

A bold, high-contrast fintech platform that uses massive typography and photographic storytelling to demystify credit and financial potential.

*A bold, empowering financial advisor in a sleek dark suit with a bright yellow pocket square.*

## Colors

High-contrast dark mode punctuated by a single vibrant, neon-adjacent chartreuse accent to draw the eye to primary actions.

- **Background (`#171616`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Accent (`#E4E24E`)** — uses `accent` token
- **Muted (`#64635C`)** — uses `muted` token
- **Borders (`rgba(16,15,15,1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** grotesque-sans

- Use tight letter-spacing (-0.6px to -1px) for large headlines
- Uppercase tracking (+1.2px) for navigation and small labels
- Combine massive geometric display type with a cleaner grotesque for UI elements

## Layout

A full-width dark hero section transitions into a light, centered content area with a 3-column feature grid.

*Rhythm:* Generous padding around major content blocks and massive internal spacing within hero sections.

## Elevation & Depth

- Borders: Thin, high-contrast borders (2px) separating dark hero from light sections.

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 24px
- `pill`: 99999px

## Components

- **button:** Pill-shaped with vibrant chartreuse background, dark text, and bold uppercase tracking.
- **card:** Light, rounded cards with generous internal padding and playful, hand-drawn illustration styles.
- **chip:** Small floating badges with icons and text, often pill-shaped.
- **hero:** Massive dark section featuring a huge white headline and a floating, asymmetric collage of photographic portraits with small data badges.

## Do's and Don'ts

**Don't:**
- Don't use thin, delicate fonts — the screenshot shows massive, heavy weight typography.
- Don't use a complex, multi-colored palette — the screenshot shows a strict dark/white/chartreuse scheme.
- Don't use sharp, square corners — the screenshot shows heavily rounded, pill-shaped buttons and cards.
- Don't use small, subtle CTAs — the screenshot shows large, high-contrast yellow buttons.
- Don't use dense, text-heavy layouts — the screenshot shows generous whitespace and large images.
- Don't use serif fonts for primary text — the screenshot shows exclusively bold sans-serif display and grotesque body fonts.

---

## System Prompt (paste into AI agent)

```
This is a fintech platform design system that leverages a dark mode aesthetic with a single, vibrant chartreuse accent color (#E4E24E) to guide user attention to primary actions. The typography is defined by massive, bold geometric sans-serif headlines paired with a cleaner grotesque sans-serif for body copy. The layout features generous spacing, high-contrast section transitions, and a mix of realistic photography with playful, rounded UI components. Critical donts: Do not use multiple competing accent colors; avoid thin, delicate typefaces for headlines; and never use sharp, square corners on buttons or cards. The system prioritizes a bold, empowering tone through direct language and impactful visual hierarchy.
```