# Base · Design system migration spec

> Source: https://www.base.org  ·  Curated by OpenDesign  ·  en

> This site is a prime example of 'institutional minimalism' in the fintech space, using strict restraint and high-contrast typography to convey reliability.

## 1. Identity DNA

The design system for Base is built as foundational infrastructure—a clean, institutional platform where trust is the primary interface. Like the AWS of blockchain, the visual language is intentionally minimal and ubiquitous, allowing the underlying technology to speak without decorative interference.

**One-liner:** A minimalist, high-trust fintech platform for building on the blockchain.
**Keywords:** blockchain · global finance · infrastructure · open · institutional
**Analogy:** The AWS of blockchain — foundational, enterprise-grade, and ubiquitous.

## 2. Color

The color system is an exercise in absolute restraint: a stark white canvas, deep black text, and a single, high-chroma blue reserved for interactive moments. This high-contrast minimalism ensures maximum legibility and directs user focus to actionable elements with singular purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F8F8` | card background |
| `--ink` | `#171717` | body text |
| `--ink-soft` | `#000000` | secondary text |
| `--muted` | `#9A9A9A` | placeholder |
| `--accent` | `#0052FF` | single accent |
| `--line` | `rgba(229,231,235,1)` | divider |

**Color principle:** High-contrast minimalism: deep black text on stark white with a single, high-chroma blue for primary actions.

The principle is clear: one accent color for one function, against a neutral field that never competes for attention.

## 3. Typography

Typography operates on a dual-track system: BaseSans carries the geometric authority for UI and headlines, while Geist Mono provides technical precision for data and monospaced elements. The tight letter-spacing on large display headings creates a compressed, modern feel suited to an institutional voice.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.0 | 700 | -1.34px | Hero headline |
| body | 16px | 1.5 | 400 | normal | General text |
| small | 14px | 1.4 | 400 | normal | Metadata and labels |

**Type rules:**
- Use baseSans for UI and hero text
- Use Geist Mono for monospaced elements and data
- Maintain tight letter-spacing on large display headings

## 4. Spacing

Rhythm is governed by a strict 4px grid, with generous vertical padding applied to large sections to create breathing room within the hierarchy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous vertical padding for large sections.

## 5. Surfaces

Surface treatment is deliberately understated, relying on subtle 1px borders to define cards and inputs rather than heavy drop shadows. A single, soft shadow value is applied sparingly to lift key elements without introducing depth theatrics.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- **Borders:** 1px solid rgb(229, 231, 235) for cards and inputs

## 6. Layout

The layout skeleton is a centered content container with clear hierarchical spacing, creating a stable, grid-aligned column for information. This structure prioritizes clarity and institutional reliability over decorative arrangement.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content container with clear hierarchical spacing

## 7. Motion & Interaction

Motion philosophy is strictly functional: all transitions are confined to a 0.15s cubic-bezier curve, applying only to color, border-color, and transform properties. There is no decorative animation; motion exists solely to acknowledge interaction with immediate, smooth feedback.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade and color transitions for interactive elements
  - Transform transitions for hover states

- **Hover:** Color and border-color transitions on a 0.15s cubic-bezier curve
- **Click:** Immediate visual feedback with no delayed state change
- **Transition:** Consistent use of all-property transitions on 0.15s
- **Keyboard:** Standard focus management with visible focus rings

## 8. Voice & Don'ts

The editorial voice is confident, institutional, and forward-looking, matching the system's visual restraint. Language is bold and declarative in headlines, action-oriented in CTAs, and free of playful phrasing or complex jargon.

- **Tone:** Confident, institutional, and forward-looking
- **Headline style:** Bold, direct, and declarative
- **CTA style:** Action-oriented and clear
- **Avoid:** playful language / excessive jargon / complex sentence structures

### Don'ts
- ❌ don't use dark mode — screenshot shows a bright, white-background hero section
- ❌ don't use decorative serifs — screenshot shows a clean, geometric sans-serif for headlines
- ❌ don't use multi-color gradients — screenshot shows a single high-chroma blue for primary actions
- ❌ don't use heavy drop shadows — screenshot shows minimal or no visible shadows on main components
- ❌ don't use chaotic layouts — screenshot shows a strictly centered, grid-based hierarchical layout
- ❌ don't use small, cramped spacing — screenshot shows generous white space around core content

The system deliberately excludes dark mode, decorative serifs, multi-color gradients, and chaotic layouts to preserve its institutional, high-trust character.

## System Prompt (paste into AI tool)

```
Design a high-trust, institutional fintech platform. Use a stark white background with deep black text for maximum readability. The primary brand color is a vibrant, high-chroma blue used exclusively for interactive elements like buttons and links. Typography should be clean and geometric, using a sans-serif for headlines and body text, with tight letter-spacing for large display sizes to maintain a modern, technical feel. Avoid any dark mode, playful aesthetics, or multi-color gradients. Layouts must be centered, spacious, and strictly grid-aligned to convey stability and reliability. Components like buttons should be pill-shaped with high contrast. Critical donts: do not use dark backgrounds; do not use decorative serif fonts; do not use more than one primary accent color.
```
