# Empower Me · Design system migration spec

> Source: https://empower.me  ·  Curated by OpenDesign  ·  en

> This site is a strong example of bold typography and minimalist color usage in modern fintech, creating a highly memorable and accessible brand identity.

## 1. Identity DNA

Empower Me's identity is built on a stark, memorable contrast: the quiet authority of a dark mode interface, deliberately punctuated by a single, vibrant chartreuse accent. Like a financial advisor in a sleek dark suit with a bright yellow pocket square, the system balances trustworthiness with a flash of bold, actionable energy.

**One-liner:** A bold, high-contrast fintech platform that uses massive typography and photographic storytelling to demystify credit and financial potential.
**Keywords:** bold · empowering · accessible · modern · trustworthy
**Analogy:** A bold, empowering financial advisor in a sleek dark suit with a bright yellow pocket square.

## 2. Color

The color system is ruthlessly focused, built on a high-contrast dark mode with a single vibrant, neon-adjacent chartreuse accent. This strict hierarchy ensures user attention is funneled unerringly to primary actions and interactive states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#171616` | main background |
| `--bg-soft` | `#F7F5EF` | card background |
| `--bg-quiet` | `#FDFDF6` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#64635C` | placeholder |
| `--accent` | `#E4E24E` | single accent |
| `--line` | `rgba(16,15,15,1.0)` | divider |

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

The principle is singular focus: one accent color commands the interface, making every interactive moment clear and intentional.

## 3. Typography

Typography is the system's most defining feature, pairing a massive geometric display face for headlines with a cleaner grotesque for functional UI elements. Tight, negative letter-spacing on large text creates a dense, impactful block, while uppercase tracking gives navigation and labels a measured, technical precision.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 0.95 | 900 | -1px | Massive hero headlines |
| heading | 48px | 1.1 | 900 | -0.6px | Section titles |
| body | 16px | 1.5 | 400 | 0px | General body text |

**Type rules:**
- 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

## 4. Spacing

Rhythm is established through generous, almost architectural padding, with massive internal spacing within hero sections that demands visual pause.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding around major content blocks and massive internal spacing within hero sections.

## 5. Surfaces

Depth is communicated not through shadow, but through stark division. Thin, high-contrast borders cleanly separate the dark hero environment from the light content areas, creating a clear, almost graphic section break.

- **Radius:** sm 4px · md 16px · lg 24px · pill 99999px
- **Borders:** Thin, high-contrast borders (2px) separating dark hero from light sections.

## 6. Layout

The layout skeleton is a two-part narrative: a full-width, dark hero section commands the viewport, then transitions abruptly to a light, centered content area. Within this lighter zone, a stable 3-column grid provides a clear structure for feature presentation.

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

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

## 7. Motion & Interaction

Motion is minimal and purely functional, designed to reinforce clarity rather than decorate. All interactive feedback relies on a consistent, quick 0.15s ease transition, creating a responsive and predictable interface.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - smooth color transitions on hover and focus states

- **Hover:** Smooth background color transitions on buttons and links.
- **Click:** Immediate response with subtle easing.
- **Transition:** Consistent 0.15s transition across all interactive elements.
- **Keyboard:** Standard focus states

## 8. Voice & Don'ts

The editorial voice is empowering and direct, stripping away financial jargon to communicate benefits in simple, relatable language. This tone is mirrored visually in the bold, concise headlines and strong, action-oriented CTAs.

- **Tone:** Empowering, direct, and accessible, breaking down complex financial concepts into simple, relatable language.
- **Headline style:** Extremely bold, concise, and benefit-driven, often using trademark symbols for branding.
- **CTA style:** Strong, action-oriented imperative verbs in all caps with vibrant color.
- **Avoid:** Overly technical jargon / Passive voice / Generic corporate speak

### Don'ts
- ❌ 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.

What it deliberately avoids defines the system just as clearly: thin delicate type, multi-colored palettes, sharp corners, and dense, text-heavy layouts are all excluded to preserve its bold, accessible identity.

## System Prompt (paste into AI tool)

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