# Arbitrum · Design system migration spec

> Source: https://arbitrum.io  ·  Curated by OpenDesign  ·  en

> A strong example of a modern, premium fintech identity that uses bold typography and high contrast to convey authority and innovation.

## 1. Identity DNA

The Arbitrum system draws its character from the high-contrast clarity of a fintech dashboard, where every element must be legible and authoritative. It is built for an infrastructure layer of the programmable economy, translating blockchain complexity into a crisp, geometric visual language.

**One-liner:** A premium, bold, and high-contrast fintech platform identity.
**Keywords:** blockchain · infrastructure · finance · programmable economy
**Analogy:** A bold, high-contrast fintech dashboard with a futuristic, geometric edge.

## 2. Color

The palette is a strict study in high contrast: a deep navy grounds the interface, stark white provides clarity, and a vivid cyan accent directs attention to critical actions and highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--bg-quiet` | `#05163D` | quiet area |
| `--ink` | `#05163D` | body text |
| `--ink-soft` | `rgba(0, 0, 0, 0.5)` | secondary text |
| `--muted` | `#F2F2F2` | placeholder |
| `--muted-soft` | `rgba(255, 255, 255, 0.8)` | weak hint |
| `--accent` | `#10E1FF` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast, bold typography dominates, with a primary blue-cyan accent against deep navy and stark white.

This contrast principle ensures information hierarchy and readability remain paramount, even in a dense technical environment.

## 3. Typography

Typography is the system's primary voice, exclusively set in uppercase and using a bold grotesque for hero statements and a geometric sans-serif for body text. Weights are confined to medium (500) and semibold (600), creating a consistently assertive typographic presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1px | Hero headline |
| h2 | 40px | 1.1 | 500 | -0.5px | Section headline |
| body | 16px | 1.5 | 500 | 0px | Body text |
| small | 14px | 1.5 | 500 | 0px | Card text |
| caption | 12px | 1.5 | 500 | 0px | Navigation labels |

**Type rules:**
- All text is uppercase by default
- Body text uses a geometric sans-serif
- Hero text uses a bold grotesque sans-serif

## 4. Spacing

The spatial rhythm is defined by generous padding and consistent gaps, establishing a generous, unhurried pace across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding (40px) and gaps (16px) create a spacious feel.

## 5. Surfaces

Surfaces are treated with minimal, sharp geometry. Depth is suggested through a precise, low-opacity shadow and thin, high-contrast borders rather than soft gradients or rounded forms.

- **Radius:** sm 5px · md 5px · lg 20px · pill 40px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
- **Borders:** 1px solid rgba(0, 0, 0, 0.1)

## 6. Layout

The layout skeleton is a clean, responsive grid that favors generous whitespace and a strong, left-aligned visual hierarchy. This structure provides a stable, predictable framework for complex technical content.

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

**Skeleton:** A clean, grid-based layout with generous whitespace and a strong left-aligned hero.

## 7. Motion & Interaction

Motion is functional and refined, applied consistently to all interactive elements for immediate feedback. The system relies on smooth, 300ms transitions using a standard easing curve to connect states without distraction.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements
  - Background color and fill transitions

- **Hover:** Subtle background-color or opacity changes
- **Click:** Immediate feedback with slight opacity reduction
- **Transition:** All elements transition over 0.3s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focus rings

## 8. Voice & Don'ts

The editorial voice is confident, direct, and forward-looking, mirroring the system's visual authority. It avoids passive language and casual playfulness, opting for bold, declarative headlines and clear calls to action.

- **Tone:** Confident, authoritative, and forward-looking
- **Headline style:** Bold, uppercase, and declarative
- **CTA style:** Direct and action-oriented
- **Avoid:** Passive or hesitant language / Overly casual or playful tone / Complex jargon without context

### Don'ts
- ❌ Don't use lowercase for navigation — screenshot shows all-uppercase labels like 'SOLUTIONS' and 'BUILDERS'
- ❌ Don't use thin or light font weights — screenshot shows exclusively medium (500) and semibold (600) weights
- ❌ Don't use rounded corners on primary buttons — screenshot shows pills (40px) for buttons, but sharp (5px) or small (20px) radius for other elements
- ❌ Don't use a soft or pastel color palette — screenshot shows high-contrast navy, white, and a vivid cyan accent
- ❌ Don't use serif fonts — screenshot shows exclusively sans-serif typefaces for all text
- ❌ Don't use a cluttered layout — screenshot shows generous whitespace and a clear, left-aligned hierarchy

The system deliberately does not accommodate lowercase navigation, serif typography, or soft pastel palettes, as these would undermine its core principle of high-contrast authority.

## System Prompt (paste into AI tool)

```
Arbitrum's design is a premium, high-contrast fintech identity defined by bold, uppercase typography and a stark navy-and-white palette. The primary accent is a vivid cyan (#10E1FF), used for emphasis against a deep navy (#05163D) background. The typography is exclusively sans-serif, with a grotesque-sans display font for hero sections and a geometric-sans for body text, all set in medium (500) or semibold (600) weights and uppercase by default. Layouts are spacious and grid-based, with generous padding and clear hierarchy. Key donts: do not use lowercase navigation, do not use light font weights, do not use a pastel palette, do not use serif fonts, do not use cluttered layouts, and do not use thin borders or outlines without sufficient contrast.
```