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

# Base · Design System

> Open finance, expressed with clarity and electric blue.

**Theme:** light · **Industry:** crypto · **Source:** https://www.base.org/ · **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._

Base presents its blockchain through a bright, restrained homepage built around a clear headline, concise proof points, and vivid blue calls to action. Airy spacing and geometric illustrations balance the technical subject matter with an approachable, polished feel.

## North star

Use an open white canvas and restrained typography, letting precise electric-blue accents organize the journey rather than decorate every surface.

## Overview

The visual system is anchored by a white canvas (#ffffff), with pale gray surfaces such as #f8f8f8 reserved for selected cards and a full-width metrics band. Saturated blue (#0000ff) provides the strongest brand signal: it marks primary buttons, small decorative accents, and the large lower-page CTA band. Typography is clean, rounded sans serif, set mostly at regular weight; the display headline is large and tightly tracked, while supporting copy and captions use muted grays for hierarchy without heavy contrast. The page alternates broad, open sections with compact, modular content: centered hero, partner logos, feature cards, metrics, illustrated explanations, release cards, CTA, and a multi-column footer. Illustrations use fine geometric lines and small bursts of blue, while release thumbnails add localized color rather than redefining the brand palette. Borders are subtle and corners rounded; the overall treatment stays flat and spacious.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and header background; keeps the hero and content sections open and bright. |
| Soft Divider | `#efefef` | `--color-soft-divider` | semantic | Subtle card outlines and hairline separators, including lightly bordered content elements. |
| Quiet Gray | `#787878` | `--color-quiet-gray` | neutral | Muted supporting text, especially explanatory copy and secondary descriptions. |
| Base Electric | `#0000ff` | `--color-base-electric` | brand | Primary CTA fill, navigation accent, decorative details, and the full-width lower CTA band. |
| Cloud Surface | `#f8f8f8` | `--color-cloud-surface` | surface | Soft card backgrounds and the pale statistics section band. |
| Slate Copy | `#6f6f6f` | `--color-slate-copy` | neutral | Secondary text and subdued copy across content and footer areas. |
| True Black | `#000000` | `--color-true-black` | neutral | Strong headline and navigation contrast; used sparingly for primary text. |
| Pale Stone | `#e5e5e5` | `--color-pale-stone` | surface | Light footer and button surface detail; a secondary neutral rather than a major section color. |
| Footer Gray | `#7f7f7f` | `--color-footer-gray` | neutral | Minor muted footer text; not a defining brand color. |
| Bright Cobalt | `#3333ff` | `--color-bright-cobalt` | accent | Alternate blue button fill, notably for the Contact Us action. |
| Mid Gray | `#9a9a9a` | `--color-mid-gray` | neutral | Occasional subdued text detail; visually secondary to the main gray text colors. |
| Near Ink | `#171717` | `--color-near-ink` | neutral | Dark card copy, link labels, and navigation text against white or pale surfaces. |
| Blue Haze | `#b3b3ff` | `--color-blue-haze` | accent | Light blue text accent; a supporting tint, not the primary CTA color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f8f8` (Cloud Surface) · `--color-surface-2` → `#e5e5e5` (Pale Stone) · `--color-surface-3` → `#efefef` (Soft Divider) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#787878` (Quiet Gray) · `--color-text-subtle` → `#6f6f6f` (Slate Copy) · `--color-border` → `#efefef` (Soft Divider) · `--color-accent` → `#0000ff` (Base Electric) · `--color-accent-2` → `#3333ff` (Bright Cobalt) · `--color-accent-3` → `#b3b3ff` (Blue Haze) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f8f8` | 19.77:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#787878` | `#ffffff` | 4.42:1 | AA-large |
| `#787878` | `#f8f8f8` | 4.16:1 | AA-large |
| `#787878` | `#e5e5e5` | 3.5:1 | AA-large |
| `#787878` | `#efefef` | 3.84:1 | AA-large |
| `#6f6f6f` | `#ffffff` | 5.02:1 | AA |
| `#6f6f6f` | `#f8f8f8` | 4.73:1 | AA |

### Gradients

- `radial-gradient(52% 40%, rgb(255, 255, 255) 31.73%, rgba(255, 255, 255, 0) 100%)`
- `linear-gradient(to right, rgb(0, 0, 255) 30%, rgba(0, 0, 0, 0) 70%)`
- `linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgb(255, 255, 255), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| baseSansText | `--font-body` | webfont | 400 | Body copy and longer explanatory text | Inter |
| baseSans | `--font-display` | webfont | 400 | Display headings, navigation, buttons, and captions | Inter |
| baseSansMono | `--font-mono` | webfont | 400 | Code and technical labels | IBM Plex Mono |

- **baseSansText:** Regular-weight sans serif with neutral tracking; use for readable paragraph copy.
- **baseSans:** Regular weight throughout; display and headings use tight negative tracking, with no forced uppercase.
- **baseSansMono:** Small, regular monospace; measured code role uses uppercase labels.

### Type scale — Augmented Fourth (ratio ≈ 1.456, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.03 | -0.04em | — | baseSans | Oversized centered hero headline. |
| h1 | 32px | 400 | 1.25 | -0.04em | — | baseSans | Primary section headings and major content titles. |
| h2 | 28px | 400 | 1.29 | -0.025em | — | baseSans | Subsection titles, including feature and release areas. |
| h3 | 20px | 400 | 1.4 | -0.025em | — | baseSans | Feature-card and smaller content headings. |
| body | 16px | 400 | 1.4 | 0 | — | baseSansText | Paragraphs, descriptions, and supporting statements. |
| caption | 14px | 400 | 1.43 | -0.01em | — | baseSans | Small labels, footnotes, and subdued metadata. |
| button | 16px | 400 | 1.4 | -0.01em | — | baseSans | Primary and secondary CTA labels. |
| nav | 16px | 400 | 1.4 | 0 | — | baseSans | Header navigation and footer link labels. |
| code | 12px | 400 | 1.67 | 0 | uppercase | baseSansMono | Compact uppercase technical or metric labels. |

## Spacing & layout

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

Use a centered content frame with a measured maximum width of 1136px and comfortable density. The hero is centered and surrounded by generous white space; logo marks sit in a horizontal strip, while feature and release content shifts into multi-column grids. A pale full-width statistics band and blue CTA band create clear section breaks. Keep alignment disciplined, allow large vertical pauses between major blocks, and use compact gaps within cards and navigation. Responsive layouts should stack grids while preserving the same open rhythm.

## Shape & elevation

- Radius: button `9999px` · card `12px` · nav `3px` · link `12px` · xs `1px` · sm `2px` · md `8px` · lg `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with no measured shadows. Use subtle #efefef hairlines to define selected cards and controls, and pale #f8f8f8 fills for gentle separation. Rounded cards and pill-shaped buttons provide shape without relying on layered effects or heavy outlines.

## Imagery

The page favors diagrammatic geometric illustrations over photography: thin lines, modular shapes, and small blue or pale-colored accents explain infrastructure and product concepts. The hero remains typographic, with restrained abstract marks near the edges. Partner logos form a grayscale trust strip. Release thumbnails are more colorful and belong to their individual cards, rather than defining the site-wide palette.

## Components

### Top announcement

A slim, light announcement strip with concise text, a blue Learn More link, and a close control.

### Primary navigation

Logo mark at the left, grouped navigation links through the center, and a blue pill-shaped Get Started action.

### Hero

Centered, large tightly tracked headline, muted supporting sentence, and paired primary and secondary actions.

### Trust strip

Short trust statement above a horizontal row of partner logos, mostly rendered in subdued monochrome.

### Feature and release cards

Modular feature content and release previews use restrained surfaces, rounded corners, concise labels, and subtle borders.

### CTA band

Full-width #0000ff section with white headline and copy, contrasting pill buttons, and decorative geometric artwork.

### Footer

White multi-column link layout with operational status, grouped navigation, and subdued secondary details.

### Measured component styles

- **Primary button** (“Get Started”): background #0000ff · text #ffffff · radius 9999px · padding 0px 12px 1px 12px · 400 16px googleSansFlex
- **Secondary button** (“Contact Us”): background #3333ff · text #ffffff · border 1px solid · radius 9999px · padding 0px 20px · 400 16px baseSans
- **Link** (“Explore Ecosystem”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px baseSans
- **Card** (“Introducing Base Azul Azul makes Base mo”): background #f8f8f8 · text #171717 · radius 12px · padding 0px · 400 16px baseSans
- **Navigation item** (“Base b a s e b a s e Solutions Ecosystem”): transparent background · text #171717 · radius 0px · padding 0px · 400 16px googleSansFlex

## Do

- Keep the main canvas white and uncluttered.
- Reserve saturated blue for primary actions and deliberate emphasis.
- Use large, centered display type for the hero.
- Separate major content blocks with generous whitespace.
- Use pale surfaces and hairlines instead of heavy card treatments.
- Treat illustration colors as local accents, not global brand colors.

## Don't

- Do not fill every section with blue or gray.
- Avoid dense layouts and tightly packed navigation.
- Do not use heavy shadows or thick card outlines.
- Avoid bold, all-caps display typography.
- Do not let colorful thumbnails overpower the restrained page palette.
- Avoid adding gradients where the measured sections use flat color.

## Agent prompt

Build a new page in Base’s restrained blockchain style. Use Gallery White (#ffffff) as the dominant canvas, Near Ink (#171717) or True Black (#000000) for strong text, and Quiet Gray (#787878) or Slate Copy (#6f6f6f) for secondary copy. Apply Base Electric (#0000ff) to primary actions and selected emphasis; use Cloud Surface (#f8f8f8) and Soft Divider (#efefef) for gentle section separation and hairlines. Set clean regular-weight sans-serif typography, with a large centered, tightly tracked headline and concise supporting text. Use a centered content frame, broad section spacing, modular grids, rounded cards, and pill-shaped buttons. Favor geometric explanatory illustrations and restrained partner marks over decorative photography. Keep surfaces flat, shadows absent, and the overall page airy and legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy below a compact announcement and navigation header. | primary and secondary CTA, announcement dismissal | white canvas, large centered type, blue pill button, subtle geometric accents |
| 2 | logo-cloud | Compact trust statement above a horizontal row of partner marks. | social proof | monochrome logos, open white background |
| 3 | stats | Full-width pale-gray band with centered introduction and four metric columns. | at-a-glance metrics | #f8f8f8 background, four-column data row, small uppercase labels |
| 4 | cta | Full-width blue band with left-aligned copy and actions, balanced by decorative artwork. | build-oriented CTA, paired actions | #0000ff background, white copy, pill buttons, geometric illustration |
| 5 | footer | White footer with operational status and several columns of grouped links. | grouped navigation, status indicator | multi-column links, subdued text, open white surface |

## Source CSS custom properties (selected)

```css
--color-text-primary: #111;
--color-text-secondary: #6f6f6f;
--color-text-tertiary: #b8b8b8;
--color-text-inverse: #fff;
--color-text-brand: #00f;
--color-bg-primary: #fff;
--color-surface: #f8f8f8;
--color-surface-hover: #efefef;
--color-border-subtle: #efefef;
--color-border-strong: #111;
--color-brand-light: #00f;
--color-brand-dark: #224bff;
--background: #fff;
--foreground: #171717;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-ring-color: #3b82f680;
```

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