Increase
A precise, infrastructure-grade fintech interface built on a white canvas with a deep slate-navy (#1a2b3b) as the dominant brand and text color. The system reads as serious engineering software for developers — restrained near-monochrome surfaces, 8–12px rounded cards, dark code panels shown inline as product proof, and a single high-voltage accent set (teal, lime, electric blue, orange) deployed only in geometric hero shards and syntax highlighting. Brand voltage comes from the diagonal gradient banner shapes and live API code, not from colored UI chrome.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
72px · 700 · 1.05
The quick brown fox jumps
display-lg
40px · 700 · 1.1
The quick brown fox jumps
heading
24px · 600 · 1.3
The quick brown fox jumps
title-sm
16px · 600 · 1.4
The quick brown fox jumps
body-md
16px · 400 · 1.5
The quick brown fox jumps
body-sm
14px · 400 · 1.5
The quick brown fox jumps
caption
13px · 500 · 1.4
The quick brown fox jumps
button
14px · 500 · 1.429
The quick brown fox jumps
nav-link
14px · 500 · 1.429
The quick brown fox jumps
code
13px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 32px | |
| xxxl | 40px | |
| huge | 64px | |
| section | 96px | |
| section-lg | 112px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| md | 8px | |
| lg | 12px | |
| full | 999px |
FAQ
- What colors does Increase use?
- Increase's core palette includes #1a2b3b, #132030, #000000, #1a2b3b, #314352. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Increase DESIGN.md.
- What font does Increase use?
- Increase's primary typeface is Inter. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Increase design system?
- A precise, infrastructure-grade fintech interface built on a white canvas with a deep slate-navy (#1a2b3b) as the dominant brand and text color. The system reads as serious engineering software for d…