# Solana · Design system migration spec

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

> The design effectively blends the high-stakes world of finance with the cutting-edge aesthetic of modern developer tools.

## 1. Identity DNA

Solana's design language operates like a high-frequency trading terminal cross-pollinated with a sci-fi command center. It is a system built for the relentless pace of blockchain infrastructure, where performance is the primary aesthetic. The identity is forged from a tension between absolute dark backgrounds and vibrant, energetic accents, creating a digital environment that feels both authoritative and technologically advanced.

**One-liner:** A premium dark-mode crypto platform with bold geometric typography and vibrant purple accents.
**Keywords:** Blockchain · High Performance · Financial Infrastructure · Speed · Scale
**Analogy:** A high-frequency trading terminal meets sci-fi infrastructure

## 2. Color

The color system is one of stark, high-contrast drama. A near-black ground provides a deep, infinite space for content, while vibrant purple acts as the sole, energetic signal against a field of crisp white for essential text. This strict hierarchy ensures maximum readability and a focused, futuristic atmosphere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#0B0A10` | main background |
| `--bg-soft` | `#121212` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `rgba(255,255,255,0.70)` | secondary text |
| `--muted` | `#848895` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.55)` | weak hint |
| `--accent` | `#D06BF8` | single accent |
| `--line` | `rgba(255,255,255,0.10)` | divider |

**Color principle:** Deep, absolute dark backgrounds with vibrant purple highlights and crisp white typography for maximum readability and futuristic feel.

The guiding principle is contrast for clarity: dark recesses, bright information, and singular chromatic punctuation.

## 3. Typography

Typographic voice is carried by a clean, geometric sans-serif, chosen for its technical precision and cohesion across scales. Display text uses tight, negative letter-spacing for impactful, condensed headlines, while a monospaced face is reserved exclusively for code and data.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | -2.5px | Hero headline |
| heading | 40px | 1.1 | 500 | -1px | Section title |
| body | 21px | 1.4 | 400 | 0 | Main content |
| small | 16px | 1.5 | 400 | 0 | Secondary text |

**Type rules:**
- Use geometric-sans for all headings and body text to maintain a cohesive, technical feel.
- Apply tight negative letter-spacing to large display text for impact.
- Ensure monospace is strictly reserved for code snippets or technical data representations.

## 4. Spacing

Rhythm is established on a strict 4px base unit, creating a mathematical grid for all dimensions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit with generous whitespace to allow the dark UI to breathe.

## 5. Surfaces

Surfaces derive depth from light, not layering. Shadows are primarily inset effects or subtle glows that suggest illumination from within the interface, avoiding traditional drop shadows.

- **Radius:** sm 4px · md 12px · lg 16px · pill 9999px
- **Shadows:**
  - 0 1px 2px rgba(0,0,0,0.05)
  - rgb(54, 27, 64) 0px -4px 12px 0px inset
  - rgb(195, 124, 224) 0px 1px 0px 0px inset
- **Borders:** 1px solid rgba(255,255,255,0.10)

## 6. Layout

The layout skeleton is a spacious, full-viewport hero section that establishes scale. Content below flows into a structured 12-column grid, providing a disciplined framework for data and partner showcases.

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

**Skeleton:** Full-width dark hero with a 12-column grid for content and partner showcases.

## 7. Motion & Interaction

Motion philosophy is minimalist and purposeful, designed to reinforce a feeling of high-performance efficiency. Transitions are quick and standardized, using subtle color shifts and transforms to communicate interactive states without distraction.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background color transitions on hover
  - Smooth color and border-color transitions for interactive elements
  - Transform scaling for button interactions

- **Hover:** Subtle background color shifts and icon transforms.
- **Click:** Slight scale-down effect for primary action buttons.
- **Transition:** Standardized 0.2s or 0.3s cubic-bezier transitions for all interactive states.
- **Keyboard:** Standard focus ring behavior with subtle outlines.

## 8. Voice & Don'ts

Editorial voice is authoritative, technical, and visionary. It favors bold, impactful statements that emphasize scale and performance, paired with direct, action-oriented language.

- **Tone:** Authoritative, technical, and visionary.
- **Headline style:** Bold, impactful statements that emphasize scale and performance.
- **CTA style:** Direct, action-oriented language like 'Get started' or 'Learn More'.
- **Avoid:** Playful or overly casual language / Technical jargon without context / Visual clutter or excessive gradients

### Don'ts
- ❌ don't use bright, saturated backgrounds — screenshot shows a deep dark (#0B0A10) theme.
- ❌ don't use decorative or serif fonts — screenshot shows a clean geometric-sans typeface.
- ❌ don't use rounded squares for primary buttons — screenshot shows pill-shaped (9999px radius) buttons.
- ❌ don't use complex drop shadows on UI elements — screenshot shows subtle inset glows or flat borders.
- ❌ don't use small, cramped typography — screenshot shows large, airy display text with negative letter-spacing.
- ❌ don't use a wide variety of colors — screenshot shows a strictly limited palette of dark, white, and purple.

The system deliberately forgoes visual clutter, playful language, and decorative typography, maintaining a strict, performance-oriented aesthetic.

## System Prompt (paste into AI tool)

```
Solana's design DNA is a premium, dark-mode developer and fintech platform. It uses a deep, near-black background (#0B0A10) contrasted with crisp white typography and vibrant purple (#D06BF8) accents. The layout is spacious, following a 12-column grid. Typography is centered around clean geometric-sans fonts (Diatype, DSemi) with large, tightly-spaced display headings. Critical design rules: never use bright backgrounds, avoid serif fonts, and maintain the high-contrast dark aesthetic with generous whitespace. Components like buttons and cards utilize pill shapes and subtle inset shadows to create depth without clutter.
```
