# Increase · Design system migration spec

> Source: https://increase.com  ·  Curated by OpenDesign  ·  en

> A prime example of a modern, developer-focused Fintech interface that balances professional authority with high-tech visual appeal through bold typography and geometric abstraction.

## 1. Identity DNA

Increase is a precision-engineered dashboard for financial infrastructure. Its design system treats interfaces like circuitry—every connection intentional, every surface serving a function. The result is a visual language that communicates enterprise-grade banking APIs to the developers who build with them.

**One-liner:** Enterprise-grade banking APIs for technology companies.
**Keywords:** Enterprise · Banking · APIs · Infrastructure · Developer
**Analogy:** A precision-engineered dashboard for financial infrastructure.

## 2. Color

The palette is built on a foundation of deep navy (#1A2B3B), a color chosen for the authority and trust it conveys in financial contexts. Vibrant teal (#31F2CC) and lime-green gradients provide contrast and signal technological dynamism without compromising professionalism.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F6F7` | card background |
| `--bg-quiet` | `#E4E5E9` | quiet area |
| `--ink` | `#1A2B3B` | body text |
| `--ink-soft` | `#687887` | secondary text |
| `--muted` | `#314352` | placeholder |
| `--muted-soft` | `#1A2B3B` | weak hint |
| `--accent` | `#31F2CC` | single accent |
| `--line` | `rgba(26, 43, 59, 0.1)` | divider |

**Color principle:** A clean, professional palette anchored in deep navy for trust, balanced by vibrant teal and lime gradients for modern tech appeal.

The principle is clear: trust is established with depth, and innovation is signaled through precise, vibrant accents.

## 3. Typography

Typography is handled with a grotesque-sans font for both display and body text, ensuring clarity and a modern, technical feel. The system reserves monospace for code snippets, creating a clear visual distinction between interface copy and developer-centric content.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 700 | -2px | Hero headlines |
| h2 | 40px | 1.1 | 700 | -1.6px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Body text |
| caption | 14px | 1.4 | 400 | 0px | Small labels and nav links |

## 4. Spacing

All spacing is governed by a strict 4px grid, creating a measurable rhythm that underpins the interface's hierarchy and readability.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px grid system driving clear visual hierarchy.

## 5. Surfaces

Surface design relies on a layered shadow system to create subtle depth, with three defined levels for cards and interactive elements. Borders are kept to a minimal 1px solid rule, using a low-opacity navy to define edges without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(12, 25, 39, 0.05) 0px 6px 8px 0px
  - rgba(12, 25, 39, 0.06) 0px 16px 20px 0px
  - rgba(12, 25, 39, 0.1) 0px 50px 60px 0px
- **Borders:** 1px solid rgba(26, 43, 59, 0.1)

## 6. Layout

The layout skeleton employs a 12-column grid within a max-width container, centering the main content for optimal legibility. This structure enforces a tight, organized hierarchy, avoiding the airy, undefined spaces that can dilute information density.

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

**Skeleton:** Max-width container with a 12-column grid, centering main content.

## 7. Motion & Interaction

Motion is functional and restrained, with smooth 150ms transitions applied to hover and focus states. The philosophy is one of immediate, subtle feedback—a color shift or shadow elevation that confirms interaction without distraction.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states on interactive elements
  - Subtle color and shadow shifts on interaction

- **Hover:** Subtle color transitions or slight shadow elevation.
- **Click:** Immediate visual response, often through color or scale shifts.
- **Transition:** 150ms cubic-bezier(0.4, 0, 0.2, 1) for all properties.
- **Keyboard:** Standard browser focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct and authoritative, tailored for a developer audience. Headlines are powerful statements of capability, and calls to action are clear, often paired with directional cues.

- **Tone:** Professional, authoritative, and developer-focused.
- **Headline style:** Direct, powerful statements emphasizing enterprise-grade reliability.
- **CTA style:** Action-oriented with clear directional arrows.
- **Avoid:** Overly casual slang / Flowery adjectives / Vague marketing speak

### Don'ts
- ❌ Don't use serif fonts — screenshot shows grotesque-sans for display and body text
- ❌ Don't use complex, organic illustrations — screenshot shows bold, flat geometric gradients
- ❌ Don't use a wide, airy layout without clear hierarchy — screenshot shows tight, structured grids
- ❌ Don't use bright, neon colors as primary UI elements — screenshot uses a deep navy base with vibrant accents
- ❌ Don't use heavy drop shadows on every element — screenshot uses subtle shadows only on cards and buttons
- ❌ Don't use a cluttered navigation bar — screenshot shows a clean, minimal top navigation

The system deliberately avoids serif typography, organic illustrations, and any playful or neon-driven UI elements that would conflict with its enterprise focus.

## System Prompt (paste into AI tool)

```
This is a professional Fintech SaaS product designed for enterprise developers. The palette is anchored by a deep navy (#1A2B3B) for trust, contrasted with vibrant teal (#31F2CC) and lime-green gradients for modern energy. Typography uses grotesque-sans for display and body, with monospace for code snippets. Layouts are grid-based, spacious, and highly legible. Critical constraints: Don't use serif fonts, avoid cluttered UI, and never use overly playful or organic visual elements. Ensure the deep navy is used for primary buttons and text to maintain authority.
```