Signal Violet
#4a21efPage backgrounds, section bands, gradient anchor — the dominant chromatic field that defines brand presence across mid-page sections; Hero atmospheric gradient bridging mint into violet — sets the cosmic mood
Safepal
safepal.comWebsite preview
The design language
SafePal speaks in a cosmic violet vernacular: deep indigo canvases recede into atmospheric space while mint-green punctuation snaps focus back to the surface. The visual system rides on a vivid electric violet (#4a21ef) that saturates mid-page sections, paired with a luminous mint (#79efbd) that functions as the sole chromatic accent for headings, tags, and outlined action borders. Typography is monumental and assertive — the display headline at 80px with weight 800 demands ownership of the viewport, while body copy sits at a calm 16px. The 100px pill radius on buttons is the most recognizable shape signature, creating a soft contrast against the 24px card radius and the angular isometric illustrations of hardware wallets and phones that float in deep space. Surfaces stack from white cards over violet fields, with almost no shadows — depth is communicated through color contrast and illustrative floating elements rather than elevation.
Color palette
brand
Mint Pulse
#79efbdHeadline text on violet fields, outlined action borders, pill button fills, accent highlights — the sole warm punctuation against the cool violet
accent
Terminal Green
#18d26eGreen accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color
neutral
Deep Indigo
#0d0b33Hero background, darkest surface layer, text on light surfaces, gradient terminus; Dark section backgrounds, depth gradient behind illustrations
Carbon
#1d1d1dBody text, heading text on light surfaces, high-contrast typography color
Lavender Mist
#f7f6ffLight card surfaces, subtle tints, nav backgrounds, gentle surface lift over white
Paper White
#ffffffCard surfaces, text on dark backgrounds, footer surfaces, badge fills
Steel Gray
#666666Muted body text, secondary labels, dividers, icon strokes at rest
Typography
Type scale
Minor Third (1.2) · 16px basetext-137
137px · 1000 · 1The quick brown fox jumps
display
80px · 900 · 1The quick brown fox jumps
heading-lg
48px · 900 · 1.17The quick brown fox jumps
heading
32px · 800 · 1.2The quick brown fox jumps
heading-sm
24px · 900 · 1.5The quick brown fox jumps
subheading
18px · 400 · 1.56The quick brown fox jumps
body
16px · 400 · 1.57The quick brown fox jumps
body-sm
14px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
AlibabaPuHuiTi-2
- Weights
- 400, 700, 800, 900, 1000
- Sizes
- 12px, 14px, 16px, 18px, 24px, 32px, 48px, 80px, 137px
- Line height
- 1.00–1.60
- Fallback
- Inter, DM Sans, or Poppins at matching weights
All interface text — custom geometric sans with extreme weight range. Display uses 800 for assertive headlines; body sits at 400 with comfortable 1.5+ line-height. The 137px size enables wall-scale hero typography. Heavy weights (800–1000) are used sparingly to avoid visual fatigue.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-113px
- Card padding
- 24px
- Element gap
- 12-16px
Border radius
nav
12pxcards
24pxother
48pxbuttons
100pxSpacing scale
4px5px6px10px11px12px13px16px18px20px24px25px30px32px36px39px40px43px46px48px50px53px80px90px93px100px113px130px134px160px180px200px313pxGuidelines
Do
- Use 100px border-radius on all buttons and tags — the pill shape is the system's most recognizable signature
- Set hero headlines at 80px weight 800 in white over Deep Indigo (#0d0b33) or mint (#79efbd) over violet — never dilute the display weight below 700
- Use #4a21ef as the dominant mid-page section background — let violet breathe across large vertical bands rather than appearing as small accents
- Pair mint (#79efbd) exclusively as accent text or outlined actions on violet fields — mint should never appear on white surfaces as a fill
- Maintain 80-113px between major sections to preserve the cosmic spaciousness — dense stacking breaks the atmospheric rhythm
- Use isometric illustrations of wallet hardware and phones as floating objects in space, not grounded product shots
- Keep all surfaces shadowless — communicate depth through color contrast and illustration layering only
- Center-align section headings and hero text — asymmetric layouts break the poster-like clarity
Don’t
- Never use #4a21ef as a small accent — it must dominate sections or not appear
- Do not apply drop shadows to cards or buttons — the system is flat by design
- Avoid body text below 14px — the scale starts at 12px for captions only
- Never use the mint (#79efbd) as a large background fill for content sections — reserve it for accents and pill buttons
- Do not mix multiple gradient directions in one screen — each gradient should anchor one atmospheric moment
- Avoid outlined rectangular buttons — all interactive elements must use 100px pill radius
- Do not place white text on #f7f6ff — the contrast fails at that combination
- Never use weight 400 for headlines — the system demands 700+ for any heading level
Components
Pill Primary Button
Main call-to-actionFully rounded 100px radius, mint (#79efbd) fill, Deep Indigo (#0d0b33) text, weight 700, 16px size, 12px 24px padding. The pill shape is the most recognizable interaction element.
Pill Ghost Button
Secondary or navigation action100px radius, transparent or white fill, mint (#79efbd) border at 1-2px, white or mint text. Used for download CTAs in nav.
Hero Headline
Display-level section heading80px size, weight 800, white or Deep Indigo text depending on field, line-height 1.0. Sets the monumental, ownership-staking tone of the brand.
Section Heading
Mid-page section title48px size, weight 800, white text on violet or mint text on dark. Centered alignment with generous above-spacing.
Wallet Card
Product showcase card24px radius, white (#ffffff) fill, no visible shadow, 24px padding. Contains product imagery with floating illustration treatment.
Testimonial Card
Social proof card24px radius, white fill, 24-32px padding, no border, no shadow. Contains quote text, avatar circle, and attribution with role label.
Navigation Bar
Top-level site navigationTransparent over hero, white surface on scroll. 12px radius on dropdown elements. Logo left, links centered, language selector and pill download button right.
Announcement Bar
Site-wide news stripViolet (#4a21ef) fill, white text, centered, thin height. Link text underlined with mint accent.
Isometric Illustration Set
Decorative hero and section visualsAngular isometric renders of hardware wallets, phones, and crypto objects. Deep indigo outlines with mint and white fills. Float in space at varied scales with no ground plane.
Feature Card
Product feature highlight24px radius, lavender (#f7f6ff) or white fill, generous padding, icon at top, heading + body text below. Minimal decoration.
Badge Tag
Category or status labelPill or 12px radius, mint fill with dark text, small 12px size, 4-8px padding. Used for token tags and status indicators.
Footer Surface
Bottom site navigationWhite or dark surface, multi-column link grid, logo, social icons. Generous 48-64px padding top and bottom.
Surfaces & elevation
Level 0
Cosmic Canvas
#0d0b33Hero and dark section base — deepest surface
Level 1
Signal Field
#4a21efPrimary brand section backgrounds — mid-page bands
Level 2
Mint Accent
#79efbdHighlight surfaces, pill button fills, accent zones
Level 3
Lavender Lift
#f7f6ffSubtle card tint over white
Level 4
Paper
#ffffffTop-level card and content surfaces
Elevation is communicated through color contrast and floating isometric illustrations rather than drop shadows. Surfaces separate by hue and saturation step — white cards sit on violet fields, mint pills sit on indigo — with no visible shadow stacks. This flat-elevation approach keeps the visual system graphic and poster-like.
Layout & imagery
Layout
Full-bleed sections with no max-width constraint on backgrounds — only text and content containers are constrained to ~1200px. Hero is dark with centered headline over isometric illustration cluster. Mid-page sections alternate between solid violet (#4a21ef) bands and lighter treatments with centered headings. Card grids are 3-column for testimonials and product showcases, with generous gutters (24-32px). Navigation is a fixed top bar with transparent-on-hero behavior. Sections flow seamlessly with no visible dividers — transitions are marked by color field changes. Content rhythm is spacious: 80-113px between sections creates breathing room for the cosmic atmosphere.
Imagery
Illustration-driven with strong isometric perspective. Hardware wallets, smartphones, and crypto coins are rendered as angular 3D objects with deep indigo outlines, white faces, and mint-green accent details. Objects float in space without ground planes, scattered at varied scales and rotations. No photography of people or environments. The treatment is graphic-poster style — think vector illustration meets product render. Sparkle marks and small star shapes add cosmic atmosphere around larger objects. Decorative purple gradient orbs appear behind some compositions to add depth.
Design notes
Agent Guide
## Quick Color Reference - background (dark): #0d0b33 - background (brand): #4a21ef - surface (light): #ffffff - accent/text on violet: #79efbd - body text: #1d1d1d - primary action: #79efbd (filled action) ## Example Component Prompts 1. **Hero Section**: Full-bleed Deep Indigo (#0d0b33) background. Centered headline at 80px AlibabaPuHuiTi-2 weight 800 in white, line-height 1.0. Subtext at 18px weight 400 in #79efbd. Floating isometric illustration of a hardware wallet and phone below the headline. 80-113px vertical padding. 2. **Pill Outline Button**: 100px border-radius, transparent fill, 2px #79efbd border, #79efbd text, 16px size weight 700, 12px 24px padding. Used for download or secondary actions. 3. **Violet Section Banner**: Full-bleed #4a21ef background, 113px vertical padding. Centered section heading at 48px weight 800 in white. Centered body text at 16px weight 400 in white with 0.8 opacity. 3-column card grid below with white cards at 24px radius and 24px padding. 4. **Testimonial Card**: White (#ffffff) fill, 24px border-radius, 32px padding, no shadow. Quote text at 16px weight 400 in #1d1d1d. Attribution block at bottom with 40px circular avatar, name in 14px weight 700 #1d1d1d, role in 14px weight 400 #666666. 5. **Navigation Bar**: Transparent background over hero, 12px radius on dropdown elements. Logo left (white), nav links centered in 16px weight 400 white, language globe icon + 'English' label, and a ghost pill button (100px radius, white border, white text) on the far right.
Similar brands
Ledger
Same dark cosmic crypto-wallet visual language with hardware product illustrations and a single brand color dominating sections
Phantom Wallet
Similar violet-and-dark crypto branding with pill-shaped CTAs and bold display headlines
Trust Wallet
Dark hero sections with floating 3D product illustrations and vibrant gradient transitions
MetaMask
Crypto product showcase style with monochromatic hero and illustration-driven product pages
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
