# Block · Design system migration spec

> Source: https://block.xyz  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in corporate minimalism and high-contrast, low-noise design.

## 1. Identity DNA

Block's design system operates like a quiet, expansive library of financial and creative tools—every element is placed with deliberate precision, leaving only the essential visible. The identity is one of empowerment through restraint, where an ecosystem of services speaks not through volume but through measured authority.

**One-liner:** A premium, ultra-minimalist corporate portal for a fintech and creative ecosystem.
**Keywords:** minimalist · empowerment · ecosystem · precision
**Analogy:** A quiet, expansive library of financial and creative tools.

## 2. Color

The palette is defined by extreme restraint: near-black ink on a warm off-white canvas. This monochromatic duality eliminates visual noise, directing all attention to content and structure.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fbfbfb` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Extreme restraint using near-black ink on a warm off-white canvas.

The principle is absolute clarity through chromatic discipline; the color exists to support, never to distract.

## 3. Typography

Typography is the primary voice, set in a clean humanist-sans category. Its expression is deliberately understated, with hero text rendered in lowercase and a uniform 400 weight to maintain calm consistency.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 30px | 1.26 | 400 | 0.2px | Main hero statement |
| nav | 12px | 1.4 | 400 | 1px | Top navigation links |

**Type rules:**
- All navigation and secondary links use uppercase with 1px letter-spacing
- Hero text uses a standard 400 weight, no bolding
- Body text defaults to 16px with a tight 16.8px line-height

## 4. Spacing

Spacing establishes the system's quiet rhythm through flexible padding and generous horizontal isolation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Flexible spacing with large 100px horizontal padding for container isolation.

## 5. Surfaces

Surfaces are flat and depthless, defined not by shadows but by the precise relationship between ink and ground. Structural separation is achieved through minimal, solid lines.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal 1px solid black lines used sparingly for structural separation.

## 6. Layout

The layout skeleton is a highly symmetrical, centered single-column composition for the hero. This geometry, anchored by a 3x3 grid logo, creates a focal point of calm authority.

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

**Skeleton:** A highly symmetrical, center-aligned single-column layout for the hero.

## 7. Motion & Interaction

Motion philosophy favors subtlety and sequence. Smooth opacity fades stagger the reveal of elements, providing a sense of deliberate progression without theatrical flourish.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - opacity fade-ins for staggered reveal of hero elements

- **Hover:** Simple opacity transitions on navigation links.
- **Click:** Standard pointer cursor interaction.
- **Transition:** Smooth opacity changes over 0.3s-0.4s durations.
- **Keyboard:** Standard focusable link navigation.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and understated. Headlines are lowercase and declarative, while calls-to-action are purely functional and informative.

- **Tone:** Confident, professional, and understated.
- **Headline style:** Lowercase, declarative, and expansive.
- **CTA style:** Functional and informative.
- **Avoid:** Excessive punctuation / Loud call-to-action buttons / Marketing jargon

### Don'ts
- ❌ don't use drop shadows — screenshot shows completely flat surfaces
- ❌ don't use uppercase for hero headlines — screenshot shows lowercase text
- ❌ don't use bright accent colors — screenshot shows a strict black and off-white palette
- ❌ don't use bold font weights — screenshot shows uniform 400 weight across all text
- ❌ don't use rounded containers — screenshot shows strict geometric square shapes
- ❌ don't use decorative gradients — screenshot shows solid, flat color fills

What this system deliberately avoids—drop shadows, bold weights, accent colors, and rounded forms—is as critical to its identity as what it includes.

## System Prompt (paste into AI tool)

```
This site is a premium, minimalist corporate portal for a fintech and creative ecosystem. The design DNA relies on extreme restraint, utilizing a pure monochromatic palette of black (#000000) ink on a warm off-white (#fbfbfb) background. Typography uses a clean humanist-sans category, with the hero display set in lowercase at 30px. Navigation is highly structured, using 12px uppercase text with 1px letter-spacing. Critical constraints include avoiding any bright accent colors, bypassing bold font weights entirely, and refusing to use drop shadows or decorative gradients. All surfaces are flat, edges are sharp, and the layout is deeply centered to project a sense of calm authority and precision.
```
