---
title: "SafePal design system"
variant: extended
source: https://www.safepal.com/en/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/safepal-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SafePal · Design System

> Crypto security in a vivid, cosmic product world

**Theme:** light · **Industry:** crypto · **Source:** https://www.safepal.com/en/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SafePal pairs a deep-space visual world with vivid violet sections and mint accents to present its wallet ecosystem. Oversized headlines, illustrated devices, and clear download actions guide visitors from product discovery to trust and conversion.

## North star

Build a vivid crypto product journey by alternating deep-space illustration with bold violet bands, keeping mint actions and oversized white headlines unmistakable.

## Overview

The page alternates between dark, star-speckled product scenes and saturated violet content bands, with white and near-white surfaces reserved for contrast and the large safe illustration. The measured palette’s #4a21ef is the defining section colour; #0d0b33 and #1d1d1d provide the inky depth seen in the hero and feature panel. Mint #79efbd highlights actions and small emphasis, while #bfffe4 appears as part of the soft mint-to-violet gradient treatment. AlibabaPuHuiTi-2 drives the full hierarchy: exceptionally heavy, large display headings contrast with readable regular-weight copy. The layout is spacious and modular, moving from a centered hero into three wallet choices, partner marks, feature areas, and a final download call to action. Product imagery is primarily bespoke 3D illustration rather than conventional photography, with devices and crypto symbols floating against decorative space motifs. Rounded buttons and cards soften the bold, high-contrast composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Canvas and high-contrast headings; also used for the light product showcase and bright button faces. |
| Graphite Ink | `#1d1d1d` | `--color-graphite-ink` | neutral | Primary text and dark feature-section surface, anchoring copy against vivid violet and pale cards. |
| Lavender Chalk | `#f7f6ff` | `--color-lavender-chalk` | surface | Pale card and button surface, subtle border colour, and muted text on dark navigation. |
| Mint Signal | `#79efbd` | `--color-mint-signal` | accent | Primary Learn More action and selected link emphasis; echoes mint details in product artwork. |
| Electric Violet | `#4a21ef` | `--color-electric-violet` | brand | Signature full-width bands for wallet choices, Web3 features, trust content, and footer call to action. |
| Cloud Silver | `#c4c4c4` | `--color-cloud-silver` | surface | Measured opening section background; screenshot shows the hero rendered as a deep illustrated scene instead. |
| Deep Cosmos | `#0d0b33` | `--color-deep-cosmos` | semantic | Inky text and button foreground, plus dark space tones and gradient endpoints in the hero artwork. |
| Glacier Mint | `#bfffe4` | `--color-glacier-mint` | accent | Gradient transition colour and mint highlights, including product illustration details. |
| Indigo Shift | `#4b3ed3` | `--color-indigo-shift` | accent | Secondary violet hue used within section gradients, rather than as a dominant flat surface. |
| Lilac Mist | `#e3ddfe` | `--color-lilac-mist` | surface | Pale gradient tint in decorative backgrounds, not a primary page canvas colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#c4c4c4` (Cloud Silver) · `--color-surface-2` → `#1d1d1d` (Graphite Ink) · `--color-surface-3` → `#f7f6ff` (Lavender Chalk) · `--color-text` → `#1d1d1d` (Graphite Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#f7f6ff` (Lavender Chalk) · `--color-border` → `#f7f6ff` (Lavender Chalk) · `--color-accent` → `#79efbd` (Mint Signal) · `--color-accent-2` → `#4a21ef` (Electric Violet) · `--color-accent-3` → `#4b3ed3` (Indigo Shift) · `--color-on-accent` → `#0d0b33` (Deep Cosmos)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1d` | `#ffffff` | 16.86:1 | AAA |
| `#1d1d1d` | `#c4c4c4` | 9.67:1 | AAA |
| `#1d1d1d` | `#f7f6ff` | 15.72:1 | AAA |
| `#ffffff` | `#c4c4c4` | 1.74:1 | fail |
| `#ffffff` | `#1d1d1d` | 16.86:1 | AAA |
| `#ffffff` | `#f7f6ff` | 1.07:1 | fail |
| `#f7f6ff` | `#ffffff` | 1.07:1 | fail |
| `#f7f6ff` | `#c4c4c4` | 1.63:1 | fail |
| `#f7f6ff` | `#1d1d1d` | 15.72:1 | AAA |
| `#79efbd` | `#ffffff` | 1.41:1 | fail |

### Gradients

- `url("https://www.safepal.com/assets/img/streamline.svg"), url("https://www.safepal.com/assets/img/stand-out-bg.svg"), url("https://www.safepal.com/assets/img/stand-out-bg-3.svg"), url("https://www.safepal.com/assets/img/`
- `linear-gradient(154.24deg, rgb(191, 255, 228) 11.19%, rgb(74, 33, 239) 62.38%), none`
- `linear-gradient(109.75deg, rgba(117, 84, 252, 0) 35.1%, rgba(117, 84, 252, 0.2) 99.39%), linear-gradient(162.15deg, rgba(13, 11, 51, 0) 1.61%, rgb(13, 11, 51) 71.13%), none`
- `linear-gradient(rgba(74, 33, 239, 0) 8.84%, rgb(191, 255, 228) 47.44%, rgba(74, 33, 239, 0) 90.39%, rgba(14, 3, 58, 0) 83.88%), linear-gradient(0deg, rgb(74, 33, 239), rgb(74, 33, 239)), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| AlibabaPuHuiTi-2 | `--font-body` | webfont | 400, 700, 900, 1000, 800 | Site-wide display, headings, body copy, navigation, links, and buttons. | Noto Sans |

- **AlibabaPuHuiTi-2:** Use exceptionally heavy weights for display and headings, regular weights for copy, and bold for buttons; measured tracking is neutral.

### Type scale — Perfect Fifth (ratio ≈ 1.501, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 137px | 1000 | 1 | 0 | — | AlibabaPuHuiTi-2 | Oversized hero and feature display headlines. |
| h1 | 80px | 1000 | 1 | 0 | — | AlibabaPuHuiTi-2 | Primary hero headline and major page title. |
| h2 | 48px | 900 | 1 | 0 | — | AlibabaPuHuiTi-2 | Section headings such as product and feature introductions. |
| h3 | 32px | 800 | 1 | 0 | — | AlibabaPuHuiTi-2 | Wallet card titles and smaller feature headings. |
| h4 | 24px | 900 | 1.6 | 0 | — | AlibabaPuHuiTi-2 | Compact strong headings in cards and footer groups. |
| body | 18px | 400 | 1.6 | 0 | — | AlibabaPuHuiTi-2 | Product explanations and supporting feature copy. |
| caption | 16px | 400 | 1.6 | 0 | — | AlibabaPuHuiTi-2 | Small labels, eyebrow text, and secondary descriptions. |
| button | 18px | 700 | 1.6 | 0 | — | AlibabaPuHuiTi-2 | Download and product-purchase action labels. |
| nav | 16px | 400 | 1.56 | 0 | — | AlibabaPuHuiTi-2 | Header navigation and footer navigation links. |
| link | 18px | 400 | 1.2 | 0 | — | AlibabaPuHuiTi-2 | Inline calls to action and text links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 10, 12, 13, 16, 20, 24, 30, 36, 39, 43, 48, 50, 53, 90, 120 px.
- Section rhythm 100px · element gap 20px · card padding 53px · max content width 1200px.

A spacious, vertically sequenced page uses a centered hero, a three-column wallet selection area, wide partner strip, split feature content, and broad conversion sections. The measured maximum content width is 1200px, with a 100px section gap and a 20px element gap. Align large headings centrally for the opening and selected conversion blocks, while feature copy and footer groups use left alignment. The overall density is spacious, with generous breathing room around media and text.

## Shape & elevation

- Radius: button `9999px` · card `24px` · nav `9999px` · xs `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The measured interface has no prominent shadows, so rely on colour blocks and illustration layering instead of generic drop shadows. Cards use a pale #f7f6ff surface with a measured 24px radius; pill buttons and navigation use fully rounded ends. Decorative stars, gradients, and overlapping devices create depth without adding heavy borders.

## Imagery

Use bespoke 3D-style product illustrations rather than generic stock photography: hardware wallets, phone screens, crypto coins, and security motifs. Frame devices as floating objects against star fields and atmospheric gradients, with crisp outlines and mint highlights. Product cards may use screenshots or device renders; preserve clear separation between artwork and readable copy.

## Components

### Pill action

Fully rounded button shape; primary Learn More uses #79efbd with #0d0b33 text. Download variants may be outlined in #f7f6ff or appear as dark text on a light face.

### Wallet choice card

Three-column App, Extension, and Hardware product choices with device imagery, concise copy, and download or purchase actions.

### Pale content card

Measured #f7f6ff card with #1d1d1d text, a 24px radius, and generous internal padding.

### Partner strip

A compact, full-width violet band with a small centered label and a horizontal row of partner marks.

### Illustrated feature panel

Dark, rounded feature surface combining centered headline copy with paired crypto illustrations and lower explanatory text.

### Space-themed CTA

Centered white headline and mint download action over a deep violet star field, followed by grouped footer links.

### Measured component styles

- **Primary button** (“Learn More”): background #79efbd · text #0d0b33 · radius 100px · padding 16px 24px · 700 18px AlibabaPuHuiTi-2
- **Secondary button** (“Download”): transparent background · text #f7f6ff · border 1px solid #f7f6ff · radius 100px · padding 16px 24px · 700 18px AlibabaPuHuiTi-2
- **Link** (“Download”): transparent background · text #18d26e · radius 0px · padding 0px · 400 16px AlibabaPuHuiTi-2
- **Card** (“SafePal is a successful company incubate”): background #f7f6ff · text #1d1d1d · radius 24px · padding 53px · 400 16px AlibabaPuHuiTi-2
- **Navigation item** (“Products”): transparent background · text #f7f6ff · radius 0px · padding 0px · 400 16px AlibabaPuHuiTi-2

## Do

- Alternate deep-space scenes with saturated violet sections.
- Use #79efbd sparingly to make primary actions easy to spot.
- Set display headings in very heavy white type.
- Pair wallet content with distinctive device illustrations.
- Keep product cards and buttons generously rounded.
- Preserve spacious vertical rhythm between major blocks.

## Don't

- Do not replace the vivid violet bands with generic corporate blue.
- Do not use stock photography in place of product illustrations.
- Do not let decorative gradients reduce text contrast.
- Do not crowd the page with dense copy or tight spacing.
- Do not scatter mint accents across every surface.
- Do not add heavy shadows or sharp-edged card styling.

## Agent prompt

Create a new SafePal-style crypto page with a spacious, product-led layout and a cosmic visual atmosphere. Use Electric Violet (#4a21ef) for bold full-width content bands, Deep Cosmos (#0d0b33) for starry dark scenes, and Gallery White (#ffffff) for strong headline contrast. Apply Mint Signal (#79efbd) selectively to primary actions and small emphasis; use Lavender Chalk (#f7f6ff) for pale cards. Use a Noto Sans-like sans serif, with very heavy oversized headlines and regular, readable supporting copy. Build generous vertical sections, a clear max-width content area, rounded pill buttons, and soft-corner cards. Favor bespoke 3D-style wallet, phone, and crypto illustrations, layered with subtle stars and gradients. Keep navigation and footer links understated, and make download actions clear without adding heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered oversized headline above a broad illustrated wallet scene. | Brand navigation, Announcement link | Deep-space background, Large white headline, Floating wallet illustration |
| 2 | product-grid | Introductory copy followed by three wallet columns. | Compare wallet types, Download and buy actions | Three product cards, Device imagery, Rounded action buttons |
| 3 | logo-cloud | Narrow full-width band with a horizontal partner mark row. | Partner discovery | Violet band, Compact label, Logo strip |
| 4 | feature-split | Dark, broad panel with centered introduction and two lower feature columns. | Explore earning, Discover trading | Rounded dark panel, Paired crypto illustrations, White headings |
| 5 | feature-grid | Violet section with introductory copy, capability points, and standout feature tiles. | Explore decentralized apps, Review wallet benefits | Saturated violet canvas, Small icon illustrations, Gradient transitions |
| 6 | product-showcase | Bright, largely image-led section focused on a central hardware wallet illustration. | Explore the hardware product | White canvas, Large 3D safe illustration, Floating crypto coins |
| 7 | testimonials | Centered heading and testimonial or recognition content in a wide violet area. | Review social proof, Build trust | Violet background, Centered typography, Recognition imagery |
| 8 | cta | Centered headline and single prominent download action. | Download wallet | Starry violet background, White headline, Mint pill button |
| 9 | footer | Multi-column link groups above a compact brand and social row. | Browse site links, Open social channels | Dark violet surface, Small muted link text, Social icons |

## Source CSS custom properties (selected)

```css
--animate-duration: 1s;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-primary-rgb: 13,110,253;
--bs-secondary-rgb: 108,117,125;
--bs-body-color-rgb: 33,37,41;
--bs-body-bg-rgb: 255,255,255;
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-color: #212529;
--bs-body-bg: #fff;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/safepal-com