# Alchemy · Design system migration spec

> Source: https://www.alchemy.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a modern, trustworthy B2B SaaS design for developer tools, balancing technical credibility with clean aesthetics.

## 1. Identity DNA

Alchemy's design system is built as reliable digital plumbing for the blockchain economy. It establishes a foundation of trust and clarity, mirroring the robust infrastructure it represents for developers and fintechs.

**One-liner:** The complete blockchain developer platform trusted by leading fintechs.
**Keywords:** blockchain · infrastructure · developer · scale · fintech
**Analogy:** Reliable digital plumbing for the blockchain economy.

## 2. Color

The palette is deliberately restrained, using a crisp white background and deep ink to create clean, high-contrast surfaces. A single vibrant blue accent is reserved for primary actions, ensuring functional clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFF4F9` | card background |
| `--bg-quiet` | `#E2E8F0` | quiet area |
| `--ink` | `#020617` | body text |
| `--ink-soft` | `#374151` | secondary text |
| `--muted` | `#64748B` | placeholder |
| `--muted-soft` | `#94A3B8` | weak hint |
| `--accent` | `#363FF9` | single accent |
| `--line` | `rgba(226, 232, 240, 1.0)` | divider |

**Color principle:** Clean, high-contrast surfaces with a vibrant blue accent for primary actions.

The guiding principle is function over decoration, using color to direct user attention, not to embellish.

## 3. Typography

Typographic voice is split between geometric authority for headlines and humanist legibility for body text. The system uses ppNeue for display, Public Sans for UI, and Roboto Mono for code blocks.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1.44px | Main hero headline |
| h1 | 40px | 1.2 | 500 | -1px | Section titles |
| body | 16px | 1.5 | 400 | 0 | Primary body text |
| caption | 12px | 1.33 | 400 | 0 | Small text and labels |

**Type rules:**
- Use display font (ppNeue) for headings and large emphasis
- Use body font (Public Sans) for paragraphs and UI elements
- Use mono font (Roboto Mono) for code blocks

## 4. Spacing

A consistent 4px base grid provides the foundational rhythm for all spatial decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with generous padding in hero sections.

## 5. Surfaces

Depth is communicated through minimal means: soft shadows and a consistent 1px border. Surfaces remain flat and unobtrusive, allowing content hierarchy to take precedence.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  - 0 10px 15px -3px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid #E2E8F0

## 6. Layout

The structural skeleton is a centered container with a 12-column grid. Generous whitespace around the core content defines the layout's spacious, focused character.

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

**Skeleton:** Centered container with generous whitespace around content.

## 7. Motion & Interaction

Motion is minimal and purposeful, designed to enhance usability without distraction. Smooth fades on scroll and subtle hover feedback reinforce the system's professional, composed character.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-in for elements on scroll
  - Subtle hover states on buttons and cards

- **Hover:** Subtle color shift or scale change on interactive elements.
- **Click:** Immediate visual feedback on press.
- **Transition:** Smooth transitions for modals and menu expansions.
- **Keyboard:** Focus states visible for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and developer-focused. Language is bold, concise, and benefit-driven, avoiding casual slang or unexplained jargon.

- **Tone:** Professional, authoritative, and developer-focused.
- **Headline style:** Bold, concise, and benefit-driven.
- **CTA style:** Direct and action-oriented (e.g., 'Get your API key').
- **Avoid:** Overly casual or slang language / Technical jargon without explanation / Passive voice

### Don'ts
- ❌ don't use decorative scripts — screenshot shows clean geometric sans-serif
- ❌ don't use cluttered layouts — screenshot shows generous white space
- ❌ don't use complex gradients — screenshot uses solid colors and subtle background tints
- ❌ don't use small, hard-to-read text — screenshot maintains high legibility
- ❌ don't hide primary actions — screenshot clearly highlights CTAs
- ❌ don't use excessive color variety — screenshot sticks to a limited palette

The system deliberately avoids decorative scripts, cluttered layouts, and excessive color variety to maintain its core promise of trustworthy clarity.

## System Prompt (paste into AI tool)

```
This is a high-end developer tools platform for blockchain infrastructure. It positions itself as the trusted backend for serious fintech applications. Key colors are a crisp white background (#FFFFFF), a deep ink (#020617), and a vibrant primary blue (#363FF9). Typography uses a geometric sans for display (ppNeue) and a humanist sans for body (Public Sans). Critical donts: avoid decorative fonts, maintain generous white space, keep color palette limited and professional. The layout is a standard centered container with 12 columns.
```