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

# Baselayer · Design System

> Editorial typography meets a precise, trust-first interface.

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

Baselayer pairs a deep navy canvas and oversized editorial headlines with finely ruled layouts and crisp product-interface imagery. The homepage balances a distinctive brand-led hero with practical, scannable sections explaining verification, risk, and fraud tools.

## North star

Pair editorial-scale headlines with an orderly, low-noise interface, using navy as the trust anchor and bright accents sparingly.

## Overview

The visual system opens with a deep navy hero that gives the white serif headline strong contrast and a confident editorial feel. A restrained electric-blue CTA and small mint news label provide the brightest accents; the product illustration adds luminous blue and green tones but should read as media, not as the core palette. Below the hero, broad white sections return to black text, generous breathing room, and hairline gray dividers. Season is used for expressive display headlines, while Uncut Sans carries navigation, body copy, and functional labels; mono typography marks compact uppercase metadata. Layouts alternate centered brand statements with left-aligned product explanations and modular grids. Product-interface imagery is framed as evidence of the platform, not decorative photography. Keep surfaces largely flat, use borders to define structure, and reserve dark bands for selected conversion or testimonial moments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, light section backgrounds, and reversed navigation or hero text. |
| Print Black | `#000000` | `--color-print-black` | neutral | Primary text and links across the white content sections. |
| Night Fade | `#050505` | `--color-night-fade` | surface | Gradient-only near-black tone; treat as a subtle image-overlay detail, not a primary surface. |
| Trust Navy | `#09234f` | `--color-trust-navy` | brand | Defining hero and navigation background, repeated in the prominent closing CTA band. |
| Soft Onyx | `#121012` | `--color-soft-onyx` | surface | Dark testimonial and customer-story section background. |
| Glacier Tint | `#c4f0ff` | `--color-glacier-tint` | semantic | Pale blue card and link treatment; use as a restrained cool highlight. |
| Rule Gray | `#e5e5e5` | `--color-rule-gray` | neutral | Fine borders and hairline separators on navigation, cards, and content links. |
| Slate Navy | `#223961` | `--color-slate-navy` | surface | Secondary dark blue found in section and media detailing, especially around the hero product artwork. |
| Signal Teal | `#1888a2` | `--color-signal-teal` | accent | Measured link accent; apply selectively rather than as a large surface. |
| Midnight Blue | `#081f47` | `--color-midnight-blue` | surface | Subtle deep-blue section tone supporting the main navy areas. |
| Mint Mist | `#eff5f0` | `--color-mint-mist` | semantic | Light green-gray metric card surface for a manual-review reduction statistic. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#09234f` (Trust Navy) · `--color-surface-2` → `#121012` (Soft Onyx) · `--color-surface-3` → `#000000` (Print Black) · `--color-surface-4` → `#c4f0ff` (Glacier Tint) · `--color-text` → `#000000` (Print Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#e5e5e5` (Rule Gray) · `--color-accent` → `#1888a2` (Signal Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#09234f` | 1.36:1 | fail |
| `#000000` | `#121012` | 1.11:1 | fail |
| `#ffffff` | `#09234f` | 15.39:1 | AAA |
| `#ffffff` | `#121012` | 18.94:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#1888a2` | `#ffffff` | 4.13:1 | AA-large |
| `#1888a2` | `#09234f` | 3.72:1 | AA-large |
| `#1888a2` | `#121012` | 4.58:1 | AA |
| `#1888a2` | `#000000` | 5.08:1 | AA |

### Gradients

- `linear-gradient(to top, oklab(0 0 0 / 0.7) 0px, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __uncutSans_592cd0 | `--font-body` | webfont | 400, 500 | Navigation, body copy, functional links, and compact interface text. | Inter |
| __modernEraMono_e11d9c | `--font-mono` | webfont | 500 | Uppercase metadata, captions, and technical-style labels. | IBM Plex Mono |
| __seasonVF_f6436e | `--font-display` | webfont | 515 | Display headlines and prominent section headings. | DM Serif Display |

- **__uncutSans_592cd0:** Mostly regular or medium weight; body copy uses slightly tight tracking, with sentence case for navigation and copy.
- **__modernEraMono_e11d9c:** Medium weight, uppercase labels, neutral tracking; keep this voice compact and secondary.
- **__seasonVF_f6436e:** Expressive serif, medium variable weight, close tracking, and restrained line spacing for large statements.

### Type scale — Perfect Fourth (ratio ≈ 1.292, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 515 | 1.02 | -0.005em | — | __seasonVF_f6436e | Large editorial statements, especially the centered hero headline. |
| h1 | 60px | 500 | 0.8 | -0.02em | — | __uncutSans_592cd0 | Primary page-level heading and major feature headline. |
| h2 | 56px | 515 | 1.02 | -0.005em | — | __seasonVF_f6436e | Large section titles across product and proof-point content. |
| h3 | 48px | 515 | 1.1 | -0.005em | — | __seasonVF_f6436e | Subsection titles and prominent customer or product statements. |
| h4 | 40px | 515 | 1.15 | -0.005em | — | __seasonVF_f6436e | Smaller feature titles and supporting content headings. |
| body | 20px | 400 | 1.4 | -0.009em | — | __uncutSans_592cd0 | Explanatory product copy, testimonials, and descriptive text. |
| caption | 16px | 500 | 1.15 | 0 | uppercase | __modernEraMono_e11d9c | Uppercase category labels and compact metadata. |
| nav | 15px | 500 | 0.8 | 0 | — | __uncutSans_592cd0 | Primary navigation labels and menu items. |
| code | 16px | 500 | 1.15 | 0 | uppercase | __modernEraMono_e11d9c | Technical or API-oriented labels and compact identifiers. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 48, 80, 164 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width 1312px.

Use a centered content frame with a measured maximum width of 1312px and a compact overall density. The hero is centered within a ruled, full-bleed navy stage; its product artwork sits below the headline. White content sections shift between centered introductions, two-column product explanations, and multi-column proof or editorial grids. Preserve generous vertical breathing room between major bands, while using fine dividers and aligned edges to keep the long page orderly.

## Shape & elevation

- Radius: button `4px` · card `4px` · nav `4px` · link `4px` · xs `3px` · sm `4px` · pill `9999px`
- Shadow `inset` (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, oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0p`
- Motion: standard transition `0.425s cubic-bezier(0.625, 0.05, 0, 1)` on interactive elements.

The page is predominantly flat, with no prominent drop-shadow system. Fine gray rules and inset navigation borders define edges; modest card outlines separate content without heavy containers. The hero illustration creates depth through overlapping interface panels and glow, rather than through reusable card shadows.

## Imagery

The hero uses a layered product-interface illustration: a bright verification panel floats in front of darker agent and business data panels. Keep its crisp UI surfaces, blue glow, and limited green verification cues; those vivid colors belong to the illustration rather than the core brand palette. Later imagery supports product features, customer stories, and articles. Favor framed interface and editorial media over generic decorative photography.

## Components

### Navy navigation

White wordmark and navigation on the navy surface, with a bordered sign-in control and contrasting white demo action.

### Hero announcement

Compact news line centered above the hero headline, with a pale mint label and small white supporting copy.

### Hero headline and CTA

Centered white serif statement on navy with a bright blue demo button immediately below.

### Ruled feature row

Product information separated by fine gray borders, paired with clear black copy and restrained link styling.

### Metric card

A light mint-gray surface with compact black metric content and a subtle rounded edge.

### Dark testimonial band

Customer proof on a near-black surface, contrasting with the otherwise white page and using restrained dividers.

### Measured component styles

- **Primary button** (“Business Verification 01”): transparent background · text #000000 · radius 0px · padding 24px 0px · 400 16px __uncutSans_592cd0
- **Link** (“READ ALL CUSTOMER STORIES”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px __uncutSans_592cd0
- **Card** (“Business Verification 01 Instantly verif”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 0px · padding 0px · 400 16px __uncutSans_592cd0
- **Navigation item** (“Products AGENTIC IDENTITY NEW Know Your ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px __uncutSans_592cd0

## Do

- Anchor the opening viewport with Trust Navy (#09234f).
- Use Season-style serif headlines for the highest-impact statements.
- Keep body copy and navigation clean and sans-serif.
- Use mono type for short uppercase metadata only.
- Separate white content modules with fine gray rules.
- Let product UI imagery carry its own blue and green glow.

## Don't

- Do not turn illustration colors into broad page backgrounds.
- Do not add heavy shadows to otherwise flat cards.
- Do not crowd the hero headline with supporting copy.
- Do not use all-caps mono for long passages.
- Do not round every content block into a pill or panel.
- Do not make every section dark; preserve the white content rhythm.

## Agent prompt

Build a new Baselayer-style page as a polished financial-risk SaaS experience. Use Trust Navy (#09234f) for a confident opening or conversion band, Gallery White (#ffffff) for the main canvas, and Print Black (#000000) for readable copy. Set large editorial headlines in a Season-like serif, with clean sans-serif body and navigation, and compact mono uppercase labels for metadata. Organize content in a centered frame with ruled edges, alternating centered statements and practical two-column feature blocks. Use Rule Gray (#e5e5e5) for quiet separators; reserve Signal Teal (#1888a2) and Glacier Tint (#c4f0ff) for small accents. Feature product UI panels as evidence, with illustration-only glow and verification colors. Keep cards mostly flat, spacing breathable, and conversion actions unmistakable without adding visual clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and news note above a demo action, within a full-width navy hero and layered product artwork. | Announcement link, Primary demo CTA | Navy canvas, Serif display headline, Ruled hero frame, Layered product interface |
| 2 | testimonials | Centered trust statement and customer proof arranged in a light multi-column band. | Customer logos, Read all stories link, Featured testimonial | White canvas, Centered heading, Logo grid, Hairline dividers |
| 3 | feature-grid | Centered section heading followed by a three-column presentation of platform capabilities. | Capability overview, Scannable modules | White canvas, Centered serif heading, Three-column grid |
| 4 | other | Single centered statement on a white background with minimal surrounding content. | Benefit statement | Open white space, Centered headline |
| 5 | feature-split | Left-aligned identity heading with two-column product explanation and supporting media. | Product links, Numbered features | Category eyebrow, Feature list, Product imagery, Hairline separation |
| 6 | feature-split | Two-column credit section with product capabilities organized as numbered entries. | Feature discovery, Learn more links | Uppercase category label, Numbered rows, Product visuals |
| 7 | feature-split | Left-aligned fraud proposition paired with broad supporting product media. | Fraud capability overview, Learn more link | Section eyebrow, Text-and-media split, Full-bleed media |
| 8 | feature-split | Compact two-column monitoring feature with text and a supporting visual. | Monitoring overview, Learn more link | Category eyebrow, Text-and-image pairing |
| 9 | product-showcase | Single-column media-led interlude between product features and the conversion band. | Visual product proof | Standalone media, White surrounding space |
| 10 | cta | Two-column conversion band on navy with a prominent statement and demo link. | Demo conversion | Navy surface, Large headline, High-contrast CTA |
| 11 | feature-grid | Left-aligned introduction followed by three-column explanatory product modules. | Capability overview, Supporting bullet points | White canvas, Three-column grid, Product illustrations |
| 12 | testimonials | Customer story and proof modules arranged in a dense multi-column dark band. | Browse customer stories, Customer quote cards | Near-black surface, High-contrast text, Divided modules |
| 13 | integrations | Left-aligned introduction with dashboard, API, and integration options in a spacious white section. | Choose an access path, Integration discovery | Large section statement, Product media, Tabbed or grouped options |
| 14 | content-feed | Left-aligned editorial heading above a two-column set of article cards. | Read article links, Topic labels | Editorial card grid, Article imagery, Compact metadata |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--font-modern-era-mono: '__modernEraMono_e11d9c', '__modernEraMono_Fallback_e11d9c';
--font-uncut-sans: '__uncutSans_592cd0', '__uncutSans_Fallback_592cd0';
--font-season-vf: '__seasonVF_f6436e', '__seasonVF_Fallback_f6436e';
```

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