Increase — design system & UI screens

Fintech · 1 screen · 12 sections · https://increase.com/

Light hero with sharp blue-green geometry, an ACH-transfer code block and a send-transfer UI.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/increase.

Decoded design system

Increase's decoded design system: background #FFFFFF, text #1A2B3B, accent #1A2B3B, link #1A2B3B, primary #687887; type scale h1 16px / h2 16px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #1A2B3B — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F1F2F3`
border	`#DCDFE1`
text	`#1A2B3B`
text_muted	`#717B85`
primary	`#687887`
accent	`#1A2B3B`
link	`#1A2B3B`
secondary	`#1F2937`
button_bg	`#1A2B3B`
button_text	`#FFFFFF`

Using these colors

Action color #1A2B3B — the single interactive color; only on things you click or must notice, never large fills.
accent #1A2B3B, link #1A2B3B, secondary #1F2937, button_bg #1A2B3B are visually the same color (Δ11) — treat as one role (the action color).
accent #1A2B3B — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #687887 — a brand color — but the call-to-action uses #1A2B3B, not this.

Typography

Heading: Untitled Sans
Body: Untitled Sans
Mono: Input Mono-4c4a0ba0f7fa02b9
h1: 16px
h2: 16px
body: 16px

Spacing

base unit: 4px
scale: 4px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px

Radii

base: 0px
button: 8px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 500ms · 180ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0.25, 0.46, 0.45, 0.94)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--shiki-color-text`	`#bdc2c8`
`--shiki-token-constant`	`#df3`
`--shiki-token-string`	`#31f2cc`
`--shiki-token-comment`	`#8995a1`
`--shiki-token-keyword`	`#3bf`
`--shiki-token-parameter`	`#bdc2c8`
`--shiki-token-function`	`#31f2cc`
`--shiki-token-string-expression`	`#31f2cc`
`--shiki-token-punctuation`	`#8995a1`
`--shiki-token-link`	`#31f2cc`

…and 13 more measured on the page.

Button states (measured)

primary hover: background #F5F6F7

Layout (measured)

nav: 65px fixed

Motion choreography (measured)

Load order: div.animate-slideFadeOverlay → div.absolute×8 → div.absolute×6

Scroll reveal: 3 elements rest at opacity 0, animate in over 1s cubic-bezier(0.23, 1, 0.32, 1).

Responsive (measured)

breakpoints: 450px · 640px · 768px · 960px · 1160px · 1280px
mobile (390px): nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Enterprise-grade banking APIs