CURATED · OPEN · FREE

Family

A whimsical, character-driven crypto wallet designed to make Ethereum feel approachable and simple for everyone.

CryptoWalletMotion
Family screenshot
↓ Download design system (12 MB)Open in OpenDesign

Visit: https://family.co

📦 Browse pack contents →

01

Identity DNA

playfulapproachabletrustinnovationclarity

A friendly companion navigating complex crypto waters

02

Color

#0080e8Accent
#474645Ink
#7a7876Ink soft
#ffffffBG
#f2f0ecBG soft
#a0a0a0Muted
rgba(71, 70, 69, 0.2)Line

Clean whitespace punctuated by vibrant, characterful accents

03

Typography

geometric-sans · humanist-sans

Display text uses tight line-height (1.05) and negative letter-spacing (-1.5px) · Body text maintains comfortable 1.6 line-height for readability · All text uses font-weight 400-500 range, no bold weights · Letter-spacing is slightly negative across all sizes for cohesion

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Consistent 8px base with generous whitespace between sections

05

Surfaces

sm · 6px
md · 10px
lg · 16px
pill · 40px

Subtle 1px borders using inset shadows for depth

0px 0px 0px 1px inset rgba(242, 240, 236, 1) · 0px 3px 16px rgba(0, 0, 0, 0.1) · 0px 0px 24px rgba(0, 0, 0, 0.15)

06

Layout

1200container
12columns
24pxgutter
768 / 1024breakpoints

Centered single-column layout with generous padding

07

Motion & Interaction

220msmicro
400mssmall
1000msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

Transform and opacity transitions for hover states · Smooth cubic-bezier easing for page transitions · Micro-interactions with 0.2s duration

Subtle color change and slight transform on interactive elements · Immediate visual feedback with transform scale

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Family — 桌面首屏（hero）
桌面首屏（hero）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Family — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Design system for Family, an approachable Ethereum crypto wallet. Uses a clean white (#ffffff) base with warm off-white (#f2f0ec) for cards and surfaces. Primary text is warm gray (#474645) with blue (#0080e8) for key accents. Typography features geometric sans-serif for display (tight tracking, 500 weight) and humanist sans-serif for body (400 weight). Buttons are pill-shaped with 40px border-radius. Key critical donts: never use dark backgrounds (site is light-themed), avoid sharp corners (everything uses 10-40px radius), skip bold font weights (max 500), maintain generous whitespace (64-96px gaps), and use subtle shadows only (no hard drop shadows). The design emphasizes playful illustrations and characters to make crypto feel friendly and accessible, not intimidating.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko