# Family · Design system migration spec

> Source: https://family.co  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in making fintech feel approachable through playful illustrations while maintaining premium restraint in the UI itself.

## 1. Identity DNA

Family positions itself as a friendly companion navigating complex crypto waters—a system built on playful approachability, trust, innovation, and clarity. The design achieves this through a whimsical, character-driven language that makes Ethereum feel accessible to everyone.

**One-liner:** A whimsical, character-driven crypto wallet designed to make Ethereum feel approachable and simple for everyone.
**Keywords:** playful · approachable · trust · innovation · clarity
**Analogy:** A friendly companion navigating complex crypto waters

## 2. Color

Clean whitespace is the foundation, punctuated by vibrant, characterful accents. The palette relies on a white base with warm gray text and blue highlights, reserving expressive color for illustrative elements rather than structural UI.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f2f0ec` | card background |
| `--ink` | `#474645` | body text |
| `--ink-soft` | `#7a7876` | secondary text |
| `--muted` | `#a0a0a0` | placeholder |
| `--accent` | `#0080e8` | single accent |
| `--line` | `rgba(71, 70, 69, 0.2)` | divider |

**Color principle:** Clean whitespace punctuated by vibrant, characterful accents

The principle is restraint: let the whitespace breathe and the illustrations provide the personality.

## 3. Typography

Typography pairs a geometric sans-serif for display headlines—set tight and confident—with a humanist sans-serif for body copy. Both maintain a comfortable weight range of 400–500, avoiding bold treatments to keep the tone conversational rather than declarative.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 500 | -1.5px | Hero headline |
| heading-2 | 44px | 1.1 | 500 | -1px | Section headings |
| body | 16px | 1.6 | 400 | -0.1px | General content |
| caption | 14px | 1.5 | 400 | -0.09px | Small labels and captions |

**Type rules:**
- 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

## 4. Spacing

The spatial rhythm follows a consistent 8px base grid, with generous whitespace between sections that gives each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px base with generous whitespace between sections

## 5. Surfaces

Depth is communicated through subtle inset shadows and soft drop shadows rather than hard edges. Cards and surfaces use light warm tones with rounded corners and gentle borders to create layered, tactile hierarchy.

- **Radius:** sm 6px · md 10px · lg 16px · pill 40px
- **Shadows:**
  - 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)
- **Borders:** Subtle 1px borders using inset shadows for depth

## 6. Layout

The layout is a centered single-column structure with generous padding at every level. Sections are spaced generously—64 to 96px apart—allowing content to unfold in a clear, linear narrative without visual competition.

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

**Skeleton:** Centered single-column layout with generous padding

## 7. Motion & Interaction

Motion follows a philosophy of smooth, natural-feeling transitions using cubic-bezier easing. Every interaction—hover, click, page transition—flows with consistent 0.2s timing, creating a sense of gentle responsiveness rather than abrupt reaction.

- **Durations:** micro 220ms · small 400ms · medium 1000ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Transform and opacity transitions for hover states
  - Smooth cubic-bezier easing for page transitions
  - Micro-interactions with 0.2s duration

- **Hover:** Subtle color change and slight transform on interactive elements
- **Click:** Immediate visual feedback with transform scale
- **Transition:** All transitions use 0.2s ease-out for consistency
- **Keyboard:** Standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is friendly, approachable, and reassuring. Short, confident headlines carry a playful twist, while calls to action remain direct and action-oriented without resorting to technical jargon or formal corporate language.

- **Tone:** Friendly, approachable, and reassuring
- **Headline style:** Short, confident statements with a playful twist
- **CTA style:** Direct and action-oriented ('Get Started', 'Watch the Video')
- **Avoid:** Technical jargon / Formal corporate language / Exclamation points

### Don'ts
- ❌ Don't use dark backgrounds — screenshot shows predominantly white (#ffffff) and light warm (#f2f0ec) surfaces
- ❌ Don't use sharp corners — screenshot shows rounded buttons (40px pill radius) and cards (10px radius)
- ❌ Don't use bold font weights — screenshot shows weights 400-500 only, no 700+
- ❌ Don't use dense layouts — screenshot shows generous whitespace (64-96px) between major sections
- ❌ Don't use aggressive shadows — screenshot shows subtle inset borders and soft drop shadows only
- ❌ Don't use multiple accent colors simultaneously — screenshot uses black as primary action color with colorful illustrations as secondary decoration

Family deliberately avoids dark backgrounds, sharp corners, bold font weights, dense layouts, aggressive shadows, and simultaneous accent colors—the restraint itself defines the brand.

## System Prompt (paste into AI tool)

```
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.
```