---
version: alpha
name: Family
description: Playful crypto craft — an inky near-black canvas lit by glossy chromatic gradients (violet → blue → green), buttery-rounded cards, and a tactile, animation-forward personality. Family treats an Ethereum wallet like a toy that takes fun seriously.

colors:
  # Canvas + ink
  background: "#0a0a0c"
  surface: "#16161a"
  surface-soft: "#1f1f24"
  surface-raised: "#27272e"
  ink: "#ffffff"
  ink-secondary: "#a8a8b3"
  ink-muted: "#6e6e78"

  # Brand chromatic accents (the glossy gradient family)
  primary: "#7c5cff"        # violet — primary brand
  accent-blue: "#4d8dff"
  accent-cyan: "#3ed6ff"
  accent-green: "#3ddc97"
  accent-pink: "#ff6fb5"

  # Functional
  success: "#3ddc97"
  warning: "#ffb547"
  danger: "#ff5a5f"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#0a0a0c"

  # Borders + hairlines (flattened over canvas)
  border: "#2a2a31"
  border-soft: "#202026"
  divider: "#1c1c22"

  # Tints / fills
  primary-tint: "#1a1530"     # violet at low alpha over canvas
  green-tint: "#13241d"
  overlay-scrim: "#000000"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.4px
  sub-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.2px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  2xl: 40px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  badge:
    backgroundColor: "{colors.primary-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"

  card-token:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
    borderColor: "{colors.divider}"

  pill-amount:
    backgroundColor: "{colors.green-tint}"
    textColor: "{colors.success}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
---

# Family Design System

## Overview

Family is a self-custody Ethereum wallet built around a single conviction stated plainly on the site: "Family takes fun seriously." The visual system is the proof. Where most crypto products reach for cold institutional blue or aggressive neon, Family sits on an inky near-black canvas (`{colors.background}`) and lights it with glossy, candy-bright chromatic gradients — violet bleeding into blue into cyan into green. The result is a wallet that feels less like a bank terminal and more like a beautifully machined toy.

The defining move is depth-through-darkness. Surfaces are not flat black but a quiet ladder of charcoals (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`), each step lifting a card slightly further off the canvas. Borders are barely-there hairlines (`{colors.border}`), so elevation reads from value contrast and generous rounding rather than from drop shadows. Corners are buttery — cards round to `{rounded.xl}` and `{rounded.2xl}`, buttons go fully pill — giving every element a soft, tactile, squeezable quality that matches the brand's micro-animation obsession.

Color is used with restraint against the dark. The chromatic accents (`{colors.primary}` violet, `{colors.accent-blue}`, `{colors.accent-cyan}`, `{colors.accent-green}`, `{colors.accent-pink}`) appear as gradients on hero art, token glyphs, and the primary CTA — never as flat UI chrome. Text holds to a clean three-step scale of white and grays (`{colors.ink}` / `{colors.ink-secondary}` / `{colors.ink-muted}`) in Inter, set tight with negative tracking at display sizes for a modern, confident headline voice.

**Key Characteristics:**
- Inky near-black canvas (`{colors.background}`) — not pure black, a hair of warmth
- Glossy chromatic gradient family (violet → blue → cyan → green) reserved for hero art and accents
- Depth from a charcoal surface ladder, not drop shadows
- Buttery-rounded geometry — pill buttons, `{rounded.2xl}` feature cards
- Inter with tight negative tracking at display sizes
- "Fun taken seriously" — tactile, animation-forward personality
- Green success/amount pills (`{colors.success}`) for money-positive moments

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-black page canvas everything floats on.
- **Surface** (`{colors.surface}`): Base card fill, one step off the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Feature cards, inputs.
- **Surface Raised** (`{colors.surface-raised}`): Token rows, secondary buttons — the top of the elevation ladder.
- **Ink** (`{colors.ink}`): Primary white text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, metadata.

### Brand Chromatic Accents
- **Primary Violet** (`{colors.primary}`): The brand anchor — primary CTA, links, focus.
- **Accent Blue** (`{colors.accent-blue}`): Gradient mid-stop, hover state.
- **Accent Cyan** (`{colors.accent-cyan}`): Gradient highlight.
- **Accent Green** (`{colors.accent-green}`): Gradient terminus, also success.
- **Accent Pink** (`{colors.accent-pink}`): Playful gradient accent.

### Functional
- **Success** (`{colors.success}`): Received amounts, positive deltas.
- **Warning** (`{colors.warning}`): Caution states.
- **Danger** (`{colors.danger}`): Errors, destructive actions.

### Borders & Tints
- **Border** (`{colors.border}`): Primary hairline on cards and inputs.
- **Border Soft** (`{colors.border-soft}`): Lighter divider on feature cards.
- **Primary Tint** (`{colors.primary-tint}`): Violet-on-dark badge fill.
- **Green Tint** (`{colors.green-tint}`): Amount-pill background.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif`
- **Monospace**: `JetBrains Mono` for addresses and technical labels

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — tight tracking, confident |
| `section-heading` | Section titles |
| `sub-heading` | Sub-section headings |
| `card-title` | Feature and card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, token names |
| `body-small` | Supporting copy |
| `button-ui` | Buttons and CTAs |
| `caption` | Metadata, badges |
| `mono-label` | Wallet addresses, hashes |

### Principles
- **Negative tracking at display**: Headlines tighten to -2px at 56px for a modern, engineered feel; tracking relaxes toward 0 at body sizes.
- **Three ink steps**: White → secondary gray → muted gray. Color text is rare and reserved for amounts/links.
- **Weight discipline**: 400 (read), 500/600 (UI + emphasis), 700 (display only).

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base unit is 8px; the scale opens generous gaps (`{spacing.3xl}`, `{spacing.4xl}`) between marketing sections so dark cards breathe.

### Grid & Container
- Max content width approximately 1100–1200px, centered
- Hero: phone-mockup visual paired with single-column headline + CTA
- Feature sections: 1–3 column card grids on the dark canvas
- Cards stack to single column on mobile

### Whitespace Philosophy
- **Dark gallery**: The black canvas IS the negative space; cards are islands of slightly-lifted charcoal.
- **Generous rounding rhythm**: Large radii plus generous internal padding (`{spacing.xl}`–`2xl`) keep the tactile, soft feel consistent.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` | Page canvas |
| Card (Level 1) | `{colors.surface}` + 1px `{colors.border}` | Standard cards |
| Soft (Level 2) | `{colors.surface-soft}` | Feature cards, inputs |
| Raised (Level 3) | `{colors.surface-raised}` | Token rows, secondary buttons |
| Focus | `{colors.primary}` 2px ring | Keyboard focus on interactive elements |

**Depth Philosophy**: Family builds elevation almost entirely from value steps in the charcoal ladder, not from shadows. Each surface token is a visible rung; pairing a rung with a hairline `{colors.border}` and a large radius makes a card read as gently lifted off the inky canvas.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline elements |
| `md` | 14px | Inputs, token rows |
| `lg` | 20px | Token cards |
| `xl` | 28px | Standard cards |
| `2xl` | 40px | Feature cards, large containers |
| `pill` | 9999px | Buttons, badges, amount pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Violet (`{colors.primary}`), white text, full pill. The default CTA; hover shifts toward `{colors.accent-blue}`.
- **`button-secondary`** — Raised charcoal surface with hairline border, full pill.
- **`button-ghost`** — Quiet surface, secondary-ink text for tertiary actions.

### Badges & Pills
- **`badge`** — Violet-tint fill, violet text, full pill for labels.
- **`pill-amount`** — Green-tint fill, success text — the money-positive moment.

### Cards
- **`card`** — Base charcoal surface, `{rounded.xl}`, hairline border.
- **`card-feature`** — Softer surface, `{rounded.2xl}`, generous 32px padding.
- **`card-token`** — Raised surface token row, `{rounded.lg}`, for asset lists.

### Inputs
- **`input`** — Soft surface, `{rounded.md}`. Focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Black canvas header, white text, hairline `{colors.divider}` at the bottom.

### Distinctive Components
- **Glossy gradient art**: Hero and feature imagery use the violet→blue→cyan→green gradient family — the brand's signature glossy, candy-bright sheen against the dark.
- **Amount pills**: Received/positive values appear as green-tint pills, turning balances into delightful, readable moments.

## Do's and Don'ts

### Do
- Keep the canvas inky near-black (`{colors.background}`), not pure `#000`
- Build elevation from the charcoal surface ladder + hairline borders
- Reserve chromatic gradients for hero art, glyphs, and the primary CTA
- Use full pills for buttons and badges
- Set headlines tight with negative tracking
- Use green (`{colors.success}`) only for money-positive moments

### Don't
- Don't introduce drop shadows for depth — use value steps
- Don't flatten brand gradients into solid UI chrome backgrounds
- Don't use sharp corners — the system is buttery-rounded
- Don't set body text in violet — color text is for amounts/links
- Don't let multiple bright accents compete in one card
- Don't put white text on a bright gradient without checking contrast

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, full-width CTAs |
| Tablet | 600–1024px | 2-column feature grids |
| Desktop | 1024–1280px | Full multi-column layout, phone mockup beside copy |
| Large | >1280px | Centered, generous side margins |

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable taps
- Token rows are full-width tap targets
- Badges keep 12px horizontal padding

### Collapsing Strategy
- Hero: side-by-side mockup + copy → stacked
- Feature cards: 3-column → 2 → single
- Section spacing: 96px → ~48px on mobile
- Nav: horizontal links → menu toggle

### Image Behavior
- Glossy gradient art maintains its sheen at all sizes
- Phone mockups scale proportionally and lead on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: near-black `{colors.background}`
- Card surface: `{colors.surface}`
- Primary CTA: violet `{colors.primary}`
- Heading text: white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Success/amount: `{colors.success}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 56px Inter weight 700, letter-spacing -2px, white `{colors.ink}`. Subtitle 20px weight 400 in `{colors.ink-secondary}`. Violet pill CTA (`{colors.primary}`, full pill, 14px 28px padding)."
- "Design a feature card: `{colors.surface-soft}` background, `{rounded.2xl}` radius, 32px padding, 1px `{colors.border-soft}` border. Title 22px Inter weight 600, body 17px in `{colors.ink-secondary}`."
- "Build a token row: `{colors.surface-raised}` background, `{rounded.lg}`, 16px padding, token name 17px weight 500, amount shown as a green-tint pill (`{colors.green-tint}` bg, `{colors.success}` text)."

### Iteration Guide
1. Start from the inky canvas and build up the charcoal surface ladder — never flat black-on-black
2. Reserve chromatic gradients for art and the primary CTA; UI chrome stays neutral charcoal
3. Everything rounds generously — pills for actions, large radii for cards
4. Depth comes from value steps + hairline borders, not shadows
5. Inter, tight negative tracking up top, relaxing toward body

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Family. Brand names and trademarks belong to their respective owners.