---
title: "Family design system"
variant: extended
source: https://family.co/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/family-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Family · Design System

> A calm canvas for a friendly crypto wallet.

**Theme:** light · **Industry:** crypto · **Source:** https://family.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Family pairs a bright, spacious canvas with approachable wallet illustrations and detailed product screens. The page balances a playful welcome with clear feature explanations, user testimonials, FAQs, and a direct iOS download path.

## North star

Keep the interface quiet and spacious so friendly illustrations and product details—not decoration—carry the story.

## Overview

The visual strategy starts with an almost entirely white canvas, using warm gray text and fine pale borders to keep the interface quiet and legible. A restrained blue appears in link text and select headings, while green, orange, and other vivid hues are mostly contained in product screens and character illustrations rather than treated as core interface colours. Custom Family display lettering gives the hero and major headlines a soft, distinctive voice; Inter handles navigation, body copy, labels, and controls with compact, highly readable forms. The centered hero combines a large two-line headline, concise supporting copy, and pill-shaped actions, framed by friendly illustrated characters. Below, the page alternates feature grids and split product showcases with roomy white intervals and a warm off-white information band. Subtle inset hairlines and low-contrast card shadows separate interface examples without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the white ground behind the hero, feature showcases, testimonials, and footer. |
| Soft Graphite | `#474645` | `--color-soft-graphite` | neutral | Primary body copy, card text, and many standard links; softer and warmer than pure black. |
| Warm Hairline | `#f2f0ed` | `--color-warm-hairline` | neutral | Measured thin borders and inset card or button edges; keeps separation low contrast. |
| Wallet Blue | `#1a88f8` | `--color-wallet-blue` | accent | Blue link and heading accents; use sparingly for interface emphasis. |
| Headline Ink | `#121212` | `--color-headline-ink` | neutral | Strong headings and dark button text, including the light Log In control. |
| Quiet Gray | `#848281` | `--color-quiet-gray` | neutral | Muted navigation and secondary text where contrast should recede from primary copy. |
| Stone Gray | `#7d7c7a` | `--color-stone-gray` | neutral | Low-frequency secondary text; a subdued gray captured in page text rather than a major surface. |
| Mockup Black | `#000000` | `--color-mockup-black` | semantic | Small measured dark areas inside cards, likely product mockup content rather than a defining page colour. |
| Bright Link Blue | `#0090ff` | `--color-bright-link-blue` | accent | Rare brighter blue accent in text or small interface details; not a broad background colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#474645` (Soft Graphite) · `--color-text-muted` → `#121212` (Headline Ink) · `--color-text-subtle` → `#848281` (Quiet Gray) · `--color-border` → `#f2f0ed` (Warm Hairline) · `--color-accent` → `#1a88f8` (Wallet Blue) · `--color-accent-2` → `#0090ff` (Bright Link Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#474645` | `#ffffff` | 9.42:1 | AAA |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#848281` | `#ffffff` | 3.82:1 | AA-large |
| `#1a88f8` | `#ffffff` | 3.55:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, buttons, links, labels, and most feature-section headings. | Inter |
| Family | `--font-display` | webfont | 500 | Custom display lettering for the hero headline and primary page heading. | Inter |

- **Inter:** Use measured 400–600 weights; compact negative tracking, with sentence case and clear size contrast.
- **Family:** Measured at medium weight with tight tracking and a close, distinctive display feel; avoid uppercase styling.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 500 | 1.1 | -0.02em | — | Family | Oversized centered hero headline. |
| h1 | 44px | 500 | 1.09 | -0.031em | — | Family | Primary page headline and prominent feature statements. |
| h2 | 23px | 500 | 1.09 | -0.019em | — | Inter | Section headings and feature titles. |
| body | 17px | 400 | 1.53 | -0.013em | — | Inter | Explanatory copy, product descriptions, and testimonial text. |
| caption | 15px | 600 | 1.47 | -0.009em | — | Inter | Compact labels, metadata, and small emphasized notes. |
| button | 17px | 500 | 1 | -0.013em | — | Inter | Pill CTA labels and secondary action text. |
| nav | 15px | 500 | 1.47 | -0.009em | — | Inter | Header navigation and compact menu labels. |
| link | 17px | 500 | 1.53 | -0.013em | — | Inter | Inline links and standalone text actions. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 4, 6, 7, 8, 10, 11, 12, 15, 16, 20, 23, 24, 32, 48 px.
- Section rhythm 104px · element gap 8px · card padding 32px · max content width 1024px.

Use a centered content frame capped at the measured 1024px maximum, with a spacious 12-column structure for broad sections and two-column feature bands. The hero is centered; later feature copy and product imagery alternate sides, while cards and testimonials align in tidy grids. Preserve generous vertical separation, a measured 104px section gap, and light content density. The feature-information band uses warm off-white to distinguish a dense block without introducing a strong divider.

## Shape & elevation

- Radius: button `9999px` · card `10px` · media `50%` · nav `6px` · link `12px` · xs `4px` · sm `6px` · md `8px` · lg `10px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `inset` (card): `color(display-p3 0.94902 0.941176 0.929412) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `color(display-p3 0.94902 0.941176 0.929412) 0px 0px 0px 0px inset`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0.04) 0px 0px 0px 1px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.15) 0px 0px 24px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.04) 0px 1px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 24px 0px`
- Motion: standard transition `0.2s ease-out` on interactive elements.

The page is mostly flat: white and warm off-white bands provide the main structure. Cards use subtle inset hairlines and restrained soft shadows, while navigation has a faint hairline edge. Keep layering limited to product mockups and cards; avoid heavy outlines, deep shadows, or dramatic floating panels.

## Imagery

Use friendly, colourful character illustrations around the hero and in the closing CTA, with product UI and phone mockups as the main evidence for wallet features. Screens show real interface states, tokens, and transaction details; keep them on clean, pale grounds. Use product imagery as contained compositions, not full-bleed photography. Vivid colours belong chiefly to these illustrations and UI examples.

## Components

### Header navigation

Compact horizontal brand and link row on white; 15px Inter navigation, with a softly rounded light Log In button and dark Get Started pill.

### Hero actions

Centered copy followed by adjacent pill actions; the 17px Inter iOS download action is dark with white text, alongside a lighter video action.

### Product feature cards

Wallet capabilities presented with product screenshots and copy; measured cards use 10px corners, 32px padding, and subtle inset hairlines.

### Feature band

Two-column feature descriptions on a #fbfaf9 surface, using small blue labels and warm, low-contrast separation from the white canvas.

### Product showcase

Alternating split layouts pair phone or wallet UI imagery with a headline, short explanation, and compact feature links or checks.

### Testimonials

A spacious Friends of Family section with a heading, follow link, and compact multi-column social quotes on the white canvas.

### FAQ list

Simple question rows with small plus markers and a warm-accented more-FAQs link; keep the presentation quiet and uncluttered.

### Closing CTA

Warm off-white Explore Family band pairs concise wallet copy and a blue download link with a small, friendly character illustration.

### Measured component styles

- **Primary button** (“Log In”): background #f6f4ef · text #121212 · radius 32px · padding 0px 14px · 500 15px Inter
- **Secondary button** (“Get Started”): background #171717 · text #ffffff · radius 32px · padding 0px 14px · 500 15px Inter
- **Link** (“Follow Family”): transparent background · text #474645 · radius 0px · padding 0px · 500 16px Inter
- **Card** (“floguo @floguo One of the best mobile ap”): transparent background · text #474645 · radius 10px · padding 32px · 400 16px Inter · shadow color(display-p3 0.94902 0.941176 0.929412) 0px 0px 0px 1px inset
- **Navigation item** (“Developers ConnectKit Connecting a walle”): transparent background · text #474645 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the canvas bright and predominantly white.
- Use blue sparingly for links and selected labels.
- Let wallet screenshots explain the product features.
- Keep hero copy centered with clear action buttons.
- Use generous whitespace between major content blocks.
- Reserve vivid colours mainly for illustrations and mockups.

## Don't

- Do not introduce large saturated colour backgrounds.
- Do not make cards look heavy or deeply elevated.
- Do not crowd feature copy against product imagery.
- Do not use generic gradients as decorative fills.
- Do not turn the character art into interface decoration everywhere.
- Do not replace the restrained palette with mockup colours.

## Agent prompt

Build a new page in Family’s friendly crypto-wallet style. Use Gallery White (#ffffff) as the dominant canvas, Soft Graphite (#474645) for readable copy, and Warm Hairline (#f2f0ed) for subtle borders. Reserve Wallet Blue (#1a88f8) and Bright Link Blue (#0090ff) for sparse links or labels; use Headline Ink (#121212) for strong type and dark CTAs. Set major display headlines in a distinctive rounded display face, with Inter for navigation, body, and controls. Create a centered hero with short supporting copy and pill actions, then alternate spacious feature grids and split layouts pairing product UI with concise explanations. Use playful character illustrations selectively; keep other vivid colours inside mockups. Add warm off-white feature or CTA bands, fine inset card edges, and restrained shadows. Keep everything crisp, approachable, and uncluttered.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with a large two-line headline, compact supporting copy, paired actions, and surrounding character illustrations; product feature content follows. | Primary iOS download action, Secondary video action, Feature discovery below hero | Centered display headline, Pill buttons, Illustrated framing, White canvas |
| 2 | feature-grid | Warm off-white, two-column feature descriptions within a broad section; related product showcases continue around the band. | Scan feature summaries, Explain wallet capabilities | Warm pale section surface, Blue labels, Two-column copy, Low-contrast separation |
| 3 | testimonials | White section with a left-aligned heading, follow link, and multi-column collection of social quotes. | Read peer feedback, Follow Family | Social quote cards, Compact profile details, Open white spacing |
| 4 | cta | Warm off-white closing band with text on one side, character artwork on the other, then a compact multi-column footer. | Download for iOS, Explore footer links | Small blue text link, Friendly character art, Pale CTA surface, Minimal footer navigation |

## Source CSS custom properties (selected)

```css
--color-anchor: #6187FE;
--color-primary: #343433;
--color-text: #343433;
--color-border: #E8E8E8;
--color-valid: #00C454;
--background-valid: rgba(0,196,84,0.1);
--color-invalid: #FF4E4E;
--background-invalid: #fff0f0;
--color-warning: #F6C30F;
--background-warning: #fefae6;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/family-co