---
title: "Increase design system"
variant: extended
source: https://increase.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/increase-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Increase · Design System

> Clear financial infrastructure, drawn in confident contrast.

**Theme:** light · **Industry:** fintech · **Source:** https://increase.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Increase presents API-first banking through a restrained white-and-ink interface, punctuated by vivid gradients and mint calls to action. Technical product visuals and proof points make the page feel engineered, while generous whitespace keeps complex infrastructure approachable.

## North star

Keep the interface calm and spacious, reserving saturated colour for purposeful emphasis and technical visual storytelling.

## Overview

The visual strategy pairs a predominantly white canvas with deep ink-blue bands that anchor the infrastructure story and footer. Dark headings and muted slate copy establish hierarchy without heavy decoration; bright mint marks the primary CTA and small interactive accents, while lime appears in the announcement badge and select graphic details. The headline uses a clean, lightly tracked sans serif with regular-weight display text and selective bold emphasis. A narrow monospace face is reserved for code-like product details. The page moves from an expansive hero with an oversized geometric gradient illustration into compact product cards, testimonials, statistics, a long dark technical section, and customer-facing content. Layouts align to a centered, wide content frame, with two- and three-column groupings balanced by broad vertical breathing room. Product imagery is mostly interface mockups and diagrams, not lifestyle photography. Fine borders and restrained shadows separate interactive surfaces without making the page feel raised or ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and light content sections; also frames the hero illustration and customer content. |
| Midnight Ledger | `#151e29` | `--color-midnight-ledger` | brand | Large dark technical section and footer backgrounds, creating strong contrast with the white page. |
| Ledger Mint | `#31f2bf` | `--color-ledger-mint` | accent | Primary Contact sales CTA, links, and small interface highlights, typically paired with dark text. |
| Deep Ink | `#1d2a36` | `--color-deep-ink` | neutral | Primary heading and body text; also dark card surfaces and foreground text on bright accents. |
| Slate Copy | `#657482` | `--color-slate-copy` | semantic | Muted copy and secondary interface text, with occasional subdued borders. |
| Cloud Panel | `#f5f6f7` | `--color-cloud-panel` | surface | Light-gray product cards and media panels that softly distinguish interface examples from the white canvas. |
| Badge Cobalt | `#112e7a` | `--color-badge-cobalt` | semantic | Small S-mark badges in product or partner UI; a minor interface detail, not a defining brand colour. |
| Mist Hairline | `#edf1f5` | `--color-mist-hairline` | neutral | Fine separators around sections, navigation, and cards on light surfaces. |
| Pale Slate | `#c0c9d1` | `--color-pale-slate` | semantic | Low-emphasis text and secondary information, particularly within dense or subdued UI details. |
| Harbor Slate | `#334352` | `--color-harbor-slate` | neutral | Secondary link and navigation text, plus copy inside light product cards. |
| Steel Haze | `#8995a1` | `--color-steel-haze` | semantic | Subdued supporting text and minor detail in interface-oriented content. |
| Signal Lime | `#e4ff33` | `--color-signal-lime` | accent | Bright announcement badge and occasional graphic or button detail; use sparingly beside mint. |
| Sky Current | `#34bcff` | `--color-sky-current` | accent | Blue component of the hero and technical gradients, mainly within geometric or interface visuals. |
| Soft Alloy | `#a6b0ba` | `--color-soft-alloy` | semantic | Low-priority links and supporting text in muted UI contexts. |
| Lemon Tint | `#fcffeb` | `--color-lemon-tint` | surface | Pale tinted card surface, notably the testimonial treatment; not a page-wide background. |
| Electric Blue | `#02a7ff` | `--color-electric-blue` | accent | Bright blue gradient and illustration detail; use for visual energy rather than general text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#151e29` (Midnight Ledger) · `--color-surface-2` → `#f5f6f7` (Cloud Panel) · `--color-surface-3` → `#1d2a36` (Deep Ink) · `--color-surface-4` → `#fcffeb` (Lemon Tint) · `--color-text` → `#1d2a36` (Deep Ink) · `--color-text-muted` → `#657482` (Slate Copy) · `--color-text-subtle` → `#c0c9d1` (Pale Slate) · `--color-border` → `#edf1f5` (Mist Hairline) · `--color-accent` → `#31f2bf` (Ledger Mint) · `--color-accent-2` → `#34bcff` (Sky Current) · `--color-accent-3` → `#02a7ff` (Electric Blue) · `--color-on-accent` → `#1d2a36` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d2a36` | `#ffffff` | 14.62:1 | AAA |
| `#1d2a36` | `#151e29` | 1.15:1 | fail |
| `#1d2a36` | `#f5f6f7` | 13.51:1 | AAA |
| `#657482` | `#ffffff` | 4.8:1 | AA |
| `#657482` | `#151e29` | 3.5:1 | AA-large |
| `#657482` | `#f5f6f7` | 4.44:1 | AA-large |
| `#657482` | `#1d2a36` | 3.04:1 | AA-large |
| `#c0c9d1` | `#ffffff` | 1.68:1 | fail |
| `#c0c9d1` | `#151e29` | 10.02:1 | AAA |
| `#c0c9d1` | `#f5f6f7` | 1.55:1 | fail |

### Gradients

- `radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, rgba(0, 0, 0, 0) 1.5px)`
- `linear-gradient(90deg, rgb(69, 244, 188), rgb(51, 223, 223))`
- `linear-gradient(90deg, rgb(222, 255, 52), rgb(140, 249, 124))`
- `linear-gradient(90deg, rgb(52, 200, 244), rgb(52, 188, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TT Interphases Pro-c98a05336328a01f | `--font-body` | webfont | 400, 500, 600, 700 | Primary interface, navigation, headings, buttons, and body copy | Inter |
| Input Mono-4c4a0ba0f7fa02b9 | `--font-mono` | webfont | 400 | Code samples and technical or data-like interface details | IBM Plex Mono |

- **TT Interphases Pro-c98a05336328a01f:** Use clean sans-serif forms with regular display headings, medium subheads and controls, and selective stronger emphasis; avoid all-caps styling.
- **Input Mono-4c4a0ba0f7fa02b9:** Monospaced, regular-weight text for compact technical content; keep it subordinate to the main sans-serif.

### Type scale — Perfect Fourth (ratio ≈ 1.3, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | -0.02em | — | TT Interphases Pro-c98a05336328a01f | Hero headline, set prominently with selective bold emphasis. |
| h2 | 32px | 400 | 1.2 | -0.01em | — | TT Interphases Pro-c98a05336328a01f | Major section introductions and broad product-story headlines. |
| h3 | 24px | 500 | 1.2 | -0.004em | — | TT Interphases Pro-c98a05336328a01f | Feature and customer-story headings. |
| h4 | 20px | 500 | 1.5 | 0 | — | TT Interphases Pro-c98a05336328a01f | Smaller card headings and supporting section labels. |
| body | 14px | 400 | 1.43 | 0 | — | TT Interphases Pro-c98a05336328a01f | Explanatory copy, testimonials, and product descriptions. |
| caption | 12px | 400 | 1.33 | 0 | — | TT Interphases Pro-c98a05336328a01f | Small annotations, dates, and secondary metadata. |
| button | 14px | 500 | 1.43 | 0 | — | TT Interphases Pro-c98a05336328a01f | CTA and action labels, medium weight. |
| nav | 14px | 500 | 1.43 | 0 | — | TT Interphases Pro-c98a05336328a01f | Primary navigation and footer link group labels. |
| link | 14px | 400 | 1.43 | 0 | — | TT Interphases Pro-c98a05336328a01f | Inline editorial links and content-feed headlines. |
| code | 14px | 400 | 1.43 | 0 | — | Input Mono-4c4a0ba0f7fa02b9 | API examples and technical UI snippets. |

OpenType features in use: `"ss01", "ss02", "ss12"`, `"lnum", "ss05", "ss16", "tnum"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 5, 6, 7, 8, 10, 12, 16, 24, 26, 32, 48, 64, 96 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1110px.

Use a centered content frame with a measured maximum width of 1110px and a comfortable density. The opening hero gives its text a clear left alignment while a large geometric illustration occupies the right and lower area. Subsequent content alternates between two-column product presentations and compact multi-column card or metric groups. Separate major stories with broad vertical breathing room; the long dark infrastructure section is a distinct, full-width band. Keep section edges and card grids aligned, with text blocks generally left-aligned.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `6px` · badge `5px` · nav `8px` · xs `2px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `12px` · pill `9999px`
- Shadow `md` (other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.03) 0px 5px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px, rgba(0, 0, 0, 0.05) 0px 14p`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(21, 30, 41, 0.05) 0px 1px 2px 0px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(12, 25, 39, 0.09) 0px 18px 22px 0px, rgba(12, 25, 39, 0.03)`
- Shadow `xl` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(12, 25, 39, 0.05) 0px 6px 8px 0px, rgba(12, 25, 39, 0.06) 0`
- Shadow `lg-3` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(12, 25, 39, 0.42) 0px 18px 34px -12px, rgba(12, 25, 39, 0.1`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: white and dark section bands do the primary layering. Use pale hairlines to define navigation and card edges, with soft shadows only where cards or navigation need separation. Product mockups sit within subtly contrasting panels; avoid heavy outlines, dramatic depth, or pervasive floating-card effects.

## Imagery

Lead with oversized, angular gradient artwork that suggests upward movement; it is graphic illustration, not photography. Product sections use realistic interface mockups, code panels, payment-flow diagrams, and data displays inside restrained cards. A small landscape image appears in the bank announcement panel. Keep visuals crisp and rectangular, with the dark technical section using diagrams and interface elements rather than decorative lifestyle imagery.

## Components

### Primary navigation

Compact horizontal header on white, with wordmark, muted navigation links, sign-in text, and a dark rounded Sign up control.

### Announcement badge

Small lime rounded link above the hero headline, using dark text and a compact arrow detail.

### Hero CTA pair

Mint Contact sales button with dark text beside a white outlined Sign up button; both have softened corners.

### Announcement card

Dark text panel paired with a landscape image, announcement description, and mint read-more link.

### Product capability cards

Light-gray panels with concise headings and embedded payment, card, account, compliance, or lending UI visuals.

### Dark infrastructure band

Full-width midnight section with left-aligned explanations and technical flow diagrams on a dark canvas.

### Latest updates feed

Compact multi-column editorial links with short headlines, muted summaries, and date metadata.

### Measured component styles

- **Primary button** (“Contact sales”): background #31f2bf · text #1d2a36 · radius 8px · padding 12px 16px · 500 16px TT Interphases Pro-c98a05336328a01f · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Introducing Increase Bank, Member FDIC”): background #e4ff33 · text #1d2a36 · radius 8px · padding 6px 12px · 600 16px TT Interphases Pro-c98a05336328a01f
- **Link** (“Increase adds real-time merchant data fr”): transparent background · text #334352 · radius 0px · padding 0px · 400 16px TT Interphases Pro-c98a05336328a01f
- **Card** (“Bare metal payments on every US rail ACH”): background #f5f6f7 · text #334352 · radius 16px · padding 0px · 400 16px TT Interphases Pro-c98a05336328a01f
- **Badge** (“S”): background #112e7a · text #ffffff · radius 5px · padding 0px · 700 10px TT Interphases Pro-c98a05336328a01f
- **Navigation item** (“Products Solutions Developers Pricing Cu”): transparent background · text #334352 · radius 0px · padding 0px · 400 16px TT Interphases Pro-c98a05336328a01f

## Do

- Use white as the default canvas and preserve broad areas of whitespace.
- Use Midnight Ledger for the technical story and footer bands.
- Make Ledger Mint the clearest primary action colour.
- Use Signal Lime sparingly for announcement emphasis.
- Align cards and text blocks to a consistent centered content frame.
- Render product visuals as crisp interface mockups and diagrams.

## Don't

- Do not fill the page with saturated accent colour.
- Do not use lifestyle photography as the main product visual.
- Do not add heavy borders or dramatic shadows to every card.
- Do not center all copy; preserve the page’s mostly left-aligned storytelling.
- Do not treat illustration-only blues as general text colours.
- Do not compress the major sections into a dense dashboard.

## Agent prompt

Build a fintech homepage in Increase’s restrained, technical visual style. Use Gallery White (#ffffff) as the main canvas, Deep Ink (#1d2a36) for headings, and Slate Copy (#657482) for secondary text. Reserve Midnight Ledger (#151e29) for a full-width infrastructure section and footer. Use Ledger Mint (#31f2bf) for the primary CTA and links, with Signal Lime (#e4ff33) as a sparse announcement highlight. Set a clean sans-serif hierarchy, with a narrow monospace face only for code and technical labels. Create a generous centered content frame, left-aligned copy, roomy section breaks, and balanced card grids. Use geometric gradient artwork in the hero, then realistic API, payments, and account interface mockups. Keep panels softly tinted, borders hairline-light, and shadows subtle; avoid decorative clutter and excessive accent colour.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Compact horizontal navigation across a white canvas. | Primary navigation, Sign-in and sign-up actions | Wordmark, Muted text links, Dark sign-up button |
| 2 | announcement | Wide announcement card pairing a dark text panel with an image. | Announcement link, Read-more action | Midnight panel, Landscape thumbnail, Mint link |
| 3 | product-showcase | Two-column product storytelling with a broad grid of capability cards. | Capability overview, Product-specific examples | Light-gray panels, Code and account mockups, Payment rail list |
| 4 | testimonials | Two-column customer quote with a softly tinted background treatment. | Customer proof, Attribution | Pale lemon panel, Compact quote text |
| 5 | team | Left-aligned text and supporting media within a single content column. | Team credibility, Read-more link | Bold opening statement, Muted quotation, Small attribution |
| 6 | stats | Three evenly spaced metrics in a horizontal row. | At-a-glance proof points | Large numeric values, Small muted labels |
| 7 | feature-split | Long full-width dark band with alternating explanatory copy and diagrams. | Technical narrative, Documentation and approach links | Midnight background, Mint links, Flow diagrams |
| 8 | feature-grid | White section with a three-column customer and use-case structure. | Audience segmentation, Customer proof | Left-aligned headings, Compact columns, Quote panel |
| 9 | announcement | Wide announcement card pairing a dark text panel with an image. | Announcement link, Read-more action | Midnight panel, Landscape thumbnail, Mint link |
| 10 | content-feed | Four-column editorial feed with a section heading and compact entries. | Browse updates, Article links | Headline and summary, Muted date metadata, Read-more action |
| 11 | footer | Full-width dark footer with grouped links and dense legal copy. | Grouped site navigation, Legal and compliance information | Midnight background, Column link groups, Fine separator |

## Source CSS custom properties (selected)

```css
--font-tt-interphases-pro: "TT Interphases Pro-c98a05336328a01f","TT Interphases Pro-c98a05336328a01f fallback: Arial",Arial,sans-serif;
--font-input-mono: "Input Mono-4c4a0ba0f7fa02b9","Input Mono-4c4a0ba0f7fa02b9 fallback: Courier New",monospace;
--font-mrz-mono: "MRZ Mono-0084637e854f3a9b","MRZ Mono-0084637e854f3a9b fallback: Courier New",monospace;
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--shiki-color-text: #bdc2c8;
--shiki-color-background: transparent;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/increase-com