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

# Basis Theory · Design System

> Quiet monochrome, punctuated by bright payment signals

**Theme:** light · **Industry:** fintech · **Source:** https://basistheory.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._

A spacious fintech homepage pairs oversized, tightly set headlines with crisp payment-product illustrations. Mostly white content gives way to near-black proof points and product panels, while mint and lime accents mark actions and technical details.

## North star

Keep the page predominantly white and editorial, using dark product panels and restrained mint or lime only to direct attention.

## Overview

The visual system is anchored by white canvas and near-black typography, with near-black bands used selectively for merchant proof and a testimonial. Pale gray panels and cards separate content without relying on prominent borders. Mint and lime provide the strongest action cues; blue, lavender, and other measured accent tones appear sparingly and should not be promoted over the screenshot’s restrained palette. Large, compact sans-serif headlines establish hierarchy, while monospace labels and supporting copy give the page a developer-oriented texture. The hero aligns a stacked headline and concise benefits on the left with a floating payment-stack illustration on the right. Subsequent feature stories alternate text and product mockups, then transition into a dark implementation panel, a light security panel, and a dark closing CTA. Soft shadows, rounded card silhouettes, and generous whitespace keep the technical content approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, light content sections, and white security certification cards. |
| Graphite Panel | `#272729` | `--color-graphite-panel` | surface | Dark product mockup and card surfaces; supports inverse content without making the whole page dark. |
| Ink Black | `#18181b` | `--color-ink-black` | brand | Primary text and the full-width merchant proof and testimonial section backgrounds. |
| Soft Fog | `#f4f4f5` | `--color-soft-fog` | surface | Subtle neutral card and supporting surface tone against the white canvas. |
| Citrus Green | `#acd157` | `--color-citrus-green` | accent | Accent text and small technical highlights; use sparingly within product-led content. |
| Mint Signal | `#94faf0` | `--color-mint-signal` | accent | Primary hero demo button and small, high-visibility interaction accents. |
| Sky Tint | `#99c9ff` | `--color-sky-tint` | accent | Measured accent text used in small supporting details, not a dominant page color. |
| Muted Slate | `#71717a` | `--color-muted-slate` | semantic | Secondary descriptions and subdued supporting copy on light backgrounds. |
| Cool Gray | `#858591` | `--color-cool-gray` | semantic | Low-emphasis text details; keep subordinate to primary copy. |
| Lime Flash | `#bff660` | `--color-lime-flash` | accent | Bright lime button accent, notably the Developer Docs action. |
| Charcoal Edge | `#323235` | `--color-charcoal-edge` | surface | Supporting dark card and link surfaces within the dark component palette. |
| Lilac Note | `#dbb8ff` | `--color-lilac-note` | accent | Rare measured text accent; do not use as a major section or CTA color. |
| Slate Charcoal | `#3f3f46` | `--color-slate-charcoal` | semantic | Small text detail in the dark-neutral range. |
| Silver Mist | `#d1d1d1` | `--color-silver-mist` | semantic | Subtle supporting text or illustration detail; not a defining brand color. |
| Moss Shadow | `#3e4534` | `--color-moss-shadow` | semantic | Rare muted detail, likely in technical or illustrated content rather than core UI. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f5` (Soft Fog) · `--color-surface-2` → `#18181b` (Ink Black) · `--color-surface-3` → `#272729` (Graphite Panel) · `--color-surface-4` → `#323235` (Charcoal Edge) · `--color-text` → `#18181b` (Ink Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#71717a` (Muted Slate) · `--color-accent` → `#acd157` (Citrus Green) · `--color-accent-2` → `#94faf0` (Mint Signal) · `--color-accent-3` → `#99c9ff` (Sky Tint) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#18181b` | `#ffffff` | 17.72:1 | AAA |
| `#18181b` | `#f4f4f5` | 16.12:1 | AAA |
| `#18181b` | `#272729` | 1.19:1 | fail |
| `#ffffff` | `#f4f4f5` | 1.1:1 | fail |
| `#ffffff` | `#18181b` | 17.72:1 | AAA |
| `#ffffff` | `#272729` | 14.91:1 | AAA |
| `#71717a` | `#ffffff` | 4.83:1 | AA |
| `#71717a` | `#f4f4f5` | 4.4:1 | AA-large |
| `#71717a` | `#18181b` | 3.67:1 | AA-large |
| `#71717a` | `#272729` | 3.09:1 | AA-large |

### Gradients

- `radial-gradient(43% 108%, rgba(255, 255, 255, 0.01) 54.8758%, rgba(171, 171, 171, 0.1) 100%)`
- `radial-gradient(50% 75%, rgba(255, 255, 255, 0.01) 31.9996%, rgba(171, 171, 171, 0.1) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Kode Mono | `--font-mono` | webfont | 400, 600 | Dominant monospace labels, captions, and code-like UI details. | IBM Plex Mono |
| Chivo Mono | `--font-chivo-mono` | webfont | 400 | Monospaced body copy and supporting technical text. | IBM Plex Mono |
| Inter | `--font-inter` | webfont | 500, 600, 700 | Smaller interface headings and utility text. | Inter |
| Neo Grotesk Medium | `--font-display` | webfont | 500, 400 | Display headlines and major section headings. | Space Grotesk |

- **Kode Mono:** Use for compact technical labels; measured captions and code use regular weight with lightly open tracking.
- **Chivo Mono:** Regular-weight mono gives descriptions a developer-facing texture; keep copy readable and avoid all-caps body text.
- **Inter:** Medium to bold weights provide a clean contrast to mono copy; reserve for concise UI labels.
- **Neo Grotesk Medium:** Use compact line spacing and negative tracking on large headlines; preserve the measured medium-to-regular weight character.

### Type scale — Augmented Fourth (ratio ≈ 1.417, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 0.8 | -0.04em | — | Neo Grotesk Medium | Oversized hero or campaign-style display headlines. |
| h1 | 64px | 500 | 0.9 | -0.03em | — | Neo Grotesk Medium | Primary hero headline, stacked into short lines. |
| h2 | 56px | 400 | 1 | -0.04em | — | Neo Grotesk Medium | Major feature and section headings. |
| h3 | 32px | 500 | 1.2 | -0.03em | — | Neo Grotesk Medium | Feature-story headlines and prominent subheads. |
| h4 | 18px | 500 | 1.5 | -0.006em | — | Inter | Compact panel and card headings. |
| body | 14px | 400 | 1.5 | 0 | — | Chivo Mono | Technical supporting paragraphs and explanatory copy. |
| caption | 12px | 400 | 1 | 0.02em | — | Kode Mono | Eyebrows, certification labels, and compact metadata. |
| code | 12px | 400 | 1 | 0.02em | — | Kode Mono | Code samples and developer-oriented interface labels. |

OpenType features in use: `"salt"`, `"salt", "ss01", "ss03", "ss04", "tnum"`, `"cv10", "cv11", "cv12", "cv13", "salt", "ss01", "ss02", "ss03", "ss04"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 2, 4, 8, 10, 12, 16, 22, 24, 30, 32, 40, 56 px.
- Section rhythm 32px · element gap 8px · card padding — · max content width 1200px.

The page uses a centered, roughly 1200px maximum-width content frame and a compact spacing scale, but the composition feels airy because hero and feature sections have substantial open space. The hero is a two-column split with left-aligned copy and right-side illustration. Feature stories alternate media and text alignment down a single broad column; later panels sit as large rounded cards. Full-width dark bands interrupt the white sequence. Keep headings left-aligned except for the centered security statement.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `9999px` · link `4px` · xs `4px` · sm `8px` · md `12px` · lg `15px` · xl `16px` · 2xl `32px` · pill `9999px`
- Shadow `inset` (button, link): `rgba(255, 255, 255, 0.13) 0px 0px 0px 2px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.18) 0px 0.602187px 2.52919px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 9.61184px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 42px -3.75px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.18) 0px 0.602187px 2.28831px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 8.69643px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 38px -3.75px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0.02) 0px 2.76726px 2.21381px 0px, rgba(0, 0, 0, 0.03) 0px 6.6501px 5.32008px 0px`
- Shadow `xl-3` (card): `rgba(0, 0, 0, 0.01) 0px 0.796192px 3.66248px 0px, rgba(0, 0, 0, 0.02) 0px 2.41451px 11.1067px 0px, rgba(0, 0, 0, 0.05) 0px 6.38265px 29.3602px 0px, rgba(0, 0, 0, 0.16) 0px 20px 92px 0px, rgba(0, 0, 0,`
- Shadow `xl-4` (card): `rgba(0, 0, 0, 0.17) 0px 0.706592px 3.53296px -0.583333px, rgba(0, 0, 0, 0.17) 0px 1.80656px 9.03281px -1.16667px, rgba(0, 0, 0, 0.16) 0px 3.62176px 18.1088px -1.75px, rgba(0, 0, 0, 0.15) 0px 6.8656px `

Most page regions stay flat and white, while product mockups and certification cards lift through soft, diffuse shadows. Dark product surfaces layer behind light interface previews to suggest depth. Use rounded corners and subtle edge definition rather than visible heavy borders; reserve the inset highlight treatment for interactive buttons or links.

## Imagery

Use clean, softly lit 3D-style product illustrations: floating payment cards, vault interfaces, and layered dashboard mockups. Keep them predominantly white and pale gray with fine outlines, restrained shadows, and small dark or mint interface marks. The illustrations sit beside copy rather than filling the canvas. Security credentials are presented as simple certification cards; avoid lifestyle photography or decorative imagery unrelated to payments.

## Components

### Primary demo button

Mint surface (#94faf0) with blue measured text (#0000ee), rounded shape, and a small right-arrow cue; shown prominently in the hero.

### Developer docs button

Lime accent (#bff660) button placed inside the dark implementation card for a clear developer action.

### Hero benefit row

Three compact benefit labels with small dark square icons, aligned under the hero description and before the CTA pair.

### Product mockup card

Layered dark code header behind a pale interface preview, with rounded corners and soft shadow; reused alongside alternating feature copy.

### Dark proof band

Full-width near-black section with merchant logos and concise social proof, creating a strong break in the white page rhythm.

### Security credentials

Light rounded panel with a centered security heading and a row of white PCI, SOC 2, HIPAA, and ISO cards.

### Closing CTA panel

Large near-black rounded card with a headline, short reassurance, and contrasting mint and dark action buttons.

### Measured component styles

- **Primary button** (“Request a demo”): background #94faf0 · text #0000ee · radius 16px · padding 12px 16px 12px 22px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.13) 0px 0px 0px 2px inset
- **Secondary button** (“Get a demo”): background #27272a · text #0000ee · radius 12px · padding 8px 16px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.13) 0px 0px 0px 2px inset
- **Link** (“Universal Form Elements”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“import { basistheory } from '@basis-theo”): background #27272a · text #000000 · radius 16px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.18) 0px 0.602187px 2.52919px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.

## Do

- Keep white as the dominant canvas.
- Use near-black bands as deliberate section breaks.
- Set large headlines in compact, tightly tracked sans serif.
- Use monospace for technical labels and supporting copy.
- Alternate feature text and product mockups.
- Reserve mint and lime for clear interaction cues.

## Don't

- Do not turn the page into a uniformly dark interface.
- Do not use bright accents as large background fields.
- Do not add lifestyle photography in place of product mockups.
- Do not crowd the hero or feature sections with extra decoration.
- Do not use heavy borders where soft shadows and whitespace suffice.
- Do not make supporting copy as prominent as the headline.

## Agent prompt

Build a fintech SaaS page with Basis Theory’s quiet, developer-oriented visual language. Use Gallery White (#ffffff) as the main canvas and Ink Black (#18181b) for strong text and selected full-width bands. Give the hero a left-aligned stacked headline, short explanatory copy, compact benefit row, and mint demo action in Mint Signal (#94faf0); place a layered payment-vault illustration alongside it. Use Neo Grotesk-style display headings and monospace supporting labels. Alternate feature copy with pale product mockups, then use a dark implementation panel, a light security-card panel, and a dark rounded closing CTA. Keep the layout broad, airy, and centered, with soft shadows, restrained rounded surfaces, and Citrus Green (#acd157) or Lime Flash (#bff660) as occasional technical or action accents. Avoid unnecessary ornament and photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White canvas, left-aligned headline and benefits beside a large right-side payment illustration. | primary demo CTA, secondary implementation CTA, benefit highlights | large stacked headline, mint button, floating product artwork |
| 2 | logo-cloud | Full-width near-black band with introductory copy and merchant logos arranged in one horizontal row. | merchant trust proof | inverse surface, logo row, compact copy |
| 3 | feature-split | White section with a large left-aligned heading and explanatory text distributed across a broad row. | capability overview, use-case labels | large section heading, compact descriptive copy, small category markers |
| 4 | feature-split | Long white feature sequence with alternating copy and product mockups across repeated rows. | use-case exploration, feature benefits | alternating media and text, product mockup cards, dark pill actions |
| 5 | testimonials | Full-width near-black band with a centered quotation and attribution. | customer testimonial | centered quote, inverse surface, small attribution |
| 6 | product-showcase | Large dark rounded product panel with copy and action above a horizontal set of platform capabilities. | developer documentation CTA, capability navigation | dark product surface, lime action button, technical illustration |
| 7 | other | Centered heading and supporting text above a horizontal row of four certification cards in a light rounded panel. | security proof, explore details CTA | centered copy, white credential cards, soft shadows |
| 8 | cta | Dark rounded CTA panel with text and actions, followed by a multi-column footer and narrow legal strip. | sales contact CTA, free-start CTA, footer navigation | inverse rounded panel, mint action, dense link columns |

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