---
name: Family
description: "Worth including as a masterclass in making fintech feel approachable through playful illustrations while maintaining premium restraint in the UI itself."
version: alpha

colors:
  background: "#ffffff"
  primary: "#474645"
  secondary: "#7a7876"
  tertiary: "#0080e8"
  neutral: "#a0a0a0"
  bg-soft: "#f2f0ec"
  line: "rgba(71, 70, 69, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"
  heading-2:
    fontFamily: humanist-sans
    fontSize: 44px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "-0.1px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.09px"

rounded:
  sm: 6px
  md: 10px
  lg: 16px
  pill: 40px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A friendly companion navigating complex crypto waters*

## Colors

Clean whitespace punctuated by vibrant, characterful accents

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#474645`)** — uses `ink` token
- **Secondary text (`#7a7876`)** — uses `ink-soft` token
- **Accent (`#0080e8`)** — uses `accent` token
- **Muted (`#a0a0a0`)** — uses `muted` token
- **Borders (`rgba(71, 70, 69, 0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** 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

## Layout

Centered single-column layout with generous padding

*Rhythm:* Consistent 8px base with generous whitespace between sections

## Elevation & 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)
- Borders: Subtle 1px borders using inset shadows for depth

## Shapes

- `sm`: 6px
- `md`: 10px
- `lg`: 16px
- `pill`: 40px

## Components

- **button:** Pill-shaped buttons with high contrast; primary is black with white text, secondary is ghost with border
- **card:** Soft rounded corners (10px) with subtle inset border shadow on light backgrounds
- **chip:** Small pill-shaped labels with icon prefix and muted text color
- **input:** Minimal with subtle background and no visible border by default
- **hero:** Centered headline with playful floating illustrations surrounding the text

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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