Chime DESIGN.md
Brands
Neobank design with energetic green identity, member-first surfaces, friendly typography, and accessible mobile-first banking.
At a glance
- Group
- Brands
- Main color
- #00d64fGreen design systems
- Fonts
- CircularSF Mono
Colors in this file
- #1c2b4a
Unnamed
- #00d64f
background
- #ffffff
Unnamed
- #00a83f
Unnamed
- #3b82f6
Unnamed
- #f59e0b
Unnamed
- #ef4444
Unnamed
- #f0fdf4
Unnamed
- #111827
Unnamed
- #6b7280
Unnamed
Neobank design with energetic green identity, member-first surfaces, friendly typography, and accessible mobile-first banking.
1. Visual Theme & Atmosphere
Chime should feel empowering, friendly, and accessible. The design language communicates fee-free banking, early direct deposit, credit building, and financial wellness for everyday Americans.
- Mood: friendly, empowering, accessible, modern
- Density: low-to-medium, with large balance displays, clear transaction lists, and simple CTAs
- Character: energetic green brand, fresh white canvas, light rounded cards, no-fee forward messaging
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--chime-green | #00D64F | Primary brand CTA and balance positive |
--chime-green-dark | #00A83F | Hover and pressed states |
--chime-navy | #1C2B4A | Dark text and contrast surfaces |
--chime-blue | #3B82F6 | Secondary actions and links |
--chime-amber | #F59E0B | Savings goal milestone |
--chime-red | #EF4444 | Negative balance and alerts |
--surface-card | #FFFFFF | Account and transaction cards |
--surface-bg | #F0FDF4 | Light green-tinted background |
--text-primary | #111827 | Balance and transaction text |
--text-secondary | #6B7280 | Category labels and timestamps |
--border-default | #E5E7EB | Card and row borders |
Use bright green as the dominant positive signal. Never associate it with negative or alert states.
3. Typography Rules
css--font-sans: "Circular", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "SF Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Balance | 52px | 700 | 1.0 |
| Page Title | 30px | 700 | 1.1 |
| Section Title | 22px | 600 | 1.2 |
| Card Title | 18px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Transaction Amount | 16px | 600 | 1.3 |
| Label | 13px | 500 | 1.4 |
4. Component Stylings
css.button-primary {
min-height: 52px;
padding: 0 28px;
border: none;
border-radius: 999px;
background: #00D64F;
color: #1C2B4A;
font: 700 16px/1 Inter, sans-serif;
}
.account-card {
border-radius: 20px;
background: linear-gradient(135deg, #1C2B4A, #2E4370);
color: #FFFFFF;
padding: 28px;
}
.transaction-row {
display: flex;
align-items: center;
padding: 16px;
border-bottom: 1px solid #F0F4F8;
}
.savings-progress {
height: 8px;
border-radius: 999px;
background: #D1FAE5;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-3 | 12px | List item spacing |
--space-5 | 20px | Card padding |
--space-8 | 32px | Section separation |
--space-14 | 56px | Major screen sections |
The account balance must dominate the home screen. Transaction list below, CTAs (transfer, pay) accessible at thumb reach.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 4px 16px rgba(28, 43, 74, 0.10); }
.shadow-account { box-shadow: 0 12px 36px rgba(0, 214, 79, 0.15); }
.shadow-modal { box-shadow: 0 20px 52px rgba(28, 43, 74, 0.18); }
The account card gets a green-tinted shadow to reinforce the positive brand feel. Transaction list items are essentially flat.
7. Do's and Don'ts
Do make the account balance the largest element on the home screen. Do make fee-free messaging visible but not intrusive. Do use rounded, approachable card shapes. Do not use small type for transaction amounts. Do not bury the "No fees" value proposition. Do make mobile transfers a one-tap action.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Full-screen native app: balance card + transaction list |
| Tablet | 768px | Two-column account overview and transaction history |
| Desktop | 1200px | Marketing/dashboard view with multiple account panels |
Chime is mobile-first by design. Desktop views are secondary.
9. Agent Prompt Guide
Design like Chime: energetic green CTAs, large balance displays, dark navy account cards, rounded friendly shapes, accessible mobile-first banking layouts, and no-fee-forward messaging.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Betterment
Brands · GT America
Digital investment design with calming green identity, trust-forward surfaces, humanist typography, and goal-based financial clarity.
Supabase
Brands · Circular
An inspired interpretation of Supabaze's design language — an open-source database platform built on a clean white-and-near-black system with a single signature emerald-green CTA, a custom humanist sans display tier,…
Temporal
Brands · Inter
Durable execution design with dark reliability surfaces, green workflow accents, and code-first orchestration clarity.
CircleCI
Brands · Inter
CI/CD platform design with confident black-and-green delivery surfaces, automation-first dashboards, and pipeline clarity.
Tripadvisor
Brands · Trip Sans
Travel discovery with content-heavy browsing, green brand cues, and review-driven utility. Tripadvisor's public site uses white surfaces, black text, rounded search controls, and the familiar Tripadvisor green…
Neon
Brands · Inter
Serverless Postgres design with dark developer-native surfaces, bright green database accents, and branch-based workflow clarity.