# Safe · Design system migration spec

> Source: https://safe.global  ·  Curated by OpenDesign  ·  en

> The site perfectly exemplifies 'premium utility' by balancing a sterile, technical UI with high-impact visual elements and bold data presentation.

## 1. Identity DNA

The design language of Safe operates with the precision of an industrial-grade vault, its structure built not of steel but of pixels. Every element—from the monolithic type to the clinical surfaces—serves the singular purpose of conveying security and modular infrastructure. It is a system where visual restraint is the primary expression of trust.

**One-liner:** Secure, modular smart wallet infrastructure for onchain assets.
**Keywords:** security · infrastructure · multisig · smart wallet · onchain
**Analogy:** Industrial-grade vault for digital assets, expressed through a clean, clinical interface.

## 2. Color

The palette is defined by a clinical light-mode composition: a field of light grey and pure white, anchored by near-black text for maximum legibility. A single, high-chroma neon green acts as the sole accent, used with surgical precision to highlight critical actions and status.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#1A1A1A` | body text |
| `--ink-soft` | `rgba(26,26,26,0.6)` | secondary text |
| `--muted` | `#999999` | placeholder |
| `--accent` | `#12FF80` | single accent |
| `--line` | `rgba(26,26,26,0.1)` | divider |

**Color principle:** High-contrast light UI anchored by a neon green accent.

The principle is high-contrast legibility with a single, authoritative accent color.

## 3. Typography

Typography is set in a geometric sans-serif, its voice authoritative and technically precise. The system employs tight tracking on large display sizes to create a dense, impactful presence for headlines, establishing immediate visual scale.

- **Display:** geometric-sans
- **Body:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 500 | -2px | Hero headline |
| h2 | 40px | 1.2 | 400 | -0.5px | Section headers |
| body | 16px | 1.5 | 400 | 0px | Body copy |

**Type rules:**
- Primary font is a geometric sans-serif with tight tracking on large display sizes.
- Text color is almost pure black (#1A1A1A) against light backgrounds.
- Secondary text uses reduced opacity for visual hierarchy.

## 4. Spacing

Rhythm is established through generous vertical padding and a consistent 4px grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding and consistent 4px grid-based spacing.

## 5. Surfaces

Depth is communicated with extreme subtlety, using barely-there shadows and thin, 1px borders for structural separation. Surfaces remain intentionally flat and light, avoiding any sense of heavy skeuomorphism.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 4px 4px 0px rgba(0,0,0,0.06)
- **Borders:** Thin 1px borders in subtle black or white for structural separation.

## 6. Layout

The layout skeleton is a centered, fixed-width container that prioritizes vertical flow and massive typography. This structure transitions into full-width dark sections for data-rich content, creating a clear visual hierarchy of spaces.

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

**Skeleton:** Centered content with a maximum width, transitioning to full-width dark sections.

## 7. Motion & Interaction

Motion philosophy is one of subtlety and purpose, using brief micro-interactions to maintain a professional, non-distracting experience. Transitions are consistent and smooth, providing immediate feedback without theatrical flourish.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade-ins for UI elements
  - Smooth transitions on hover for buttons and links
  - Cascading animations for data presentation

- **Hover:** Background color shift for buttons; opacity change for text links.
- **Click:** Subtle scale or opacity adjustment.
- **Transition:** Consistent 0.2s cubic-bezier(0.4, 0, 0.2, 1) for most interactive states.
- **Keyboard:** Standard focus ring or outline for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative, secure, and technically precise, mirroring the system's visual rigor. Headlines are bold, declarative statements, and calls to action are direct and unadorned.

- **Tone:** Authoritative, secure, and technically precise.
- **Headline style:** Bold, declarative statements focusing on security and infrastructure.
- **CTA style:** Direct and action-oriented, often just 'Launch app' or 'Get started'.
- **Avoid:** Playful language / Vague marketing jargon / Overly technical without context

### Don'ts
- ❌ Don't use a dark theme for the primary hero section — the screenshot shows a light grey (#F5F5F5) background.
- ❌ Don't apply rounded corners to the main buttons — the screenshot shows pill-shaped (fully rounded) buttons.
- ❌ Don't use thin, light fonts for headlines — the screenshot shows a heavy, geometric sans-serif for display text.
- ❌ Don't use a multi-colored accent palette — the screenshot shows a single dominant neon green (#12FF80) accent.
- ❌ Don't use heavy box shadows on cards — the screenshot shows very subtle, almost flat surface depth.
- ❌ Don't use wide letter-spacing on headlines — the screenshot shows tight, negative tracking on large display text.

The system deliberately avoids playful language, vague marketing jargon, and any visual treatment that would compromise the feeling of secure infrastructure.

## System Prompt (paste into AI tool)

```
This design represents a secure, high-end fintech infrastructure platform (Safe). It uses a clean, light-colored UI (#F5F5F5 background) anchored by a vibrant neon green accent (#12FF80). Typography is a geometric sans-serif, used with tight tracking on large headlines to create a bold, authoritative feel. The layout is centered and spacious, transitioning from a bright hero into deeper, data-rich sections. Key constraints: never use a dark mode for the primary hero, always use the pill-shaped button style, and maintain the high-contrast pairing of black (#1A1A1A) and neon green.
```
