Skip to main content
Back to Gallery

Family · Full Page

Family

Apple-tier industrial-design discipline pointed at a crypto wallet — rare elegance in a category that usually looks like a spreadsheet in neon. Beige canvas, app-green accent, pillowy surfaces, zero gradients.

family.co/Added
Family Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Family is what happens when Apple-tier industrial design discipline is pointed at a crypto wallet — a category that almost universally looks like a spreadsheet wearing neon. We catalogued it because it proves consumer-grade warmth and self-custody seriousness can live in the same product: a soft beige canvas, a bespoke display typeface, and an award-winning motion language that makes moving money feel physical rather than transactional. If you are designing finance or crypto for humans rather than degens, this is the page you keep open while you work.

Design decisions observed

  • Warmth as a trust signal — Family rejects the dark-terminal crypto cliché entirely. The near-white beige canvas (#fbfaf9) and warm charcoal text (#494440 over pure black) read like a premium consumer app, not a trading desk. That softness is the whole positioning.
  • A bespoke display typeface carries the brand — the custom 'Family' font on headings (44px, -1.35px tracking, weight 500) does the identity work that most wallets dump onto a logo. Body and UI defer to LFE Sans and Inter, so the display face stays special.
  • Motion as the product's signature — an expressive, award-winning choreography built on one anchor curve, cubic-bezier(0.19, 1, 0.22, 1), a long ease-out 'expo' that makes drag-drop-done and card transitions feel weighted and physical. The motion is the demo.
  • A full graphic palette used like a paint set, not a gradient crutch — Family ships a deliberate named system (graphic-blue, graphic-green, graphic-gold, graphic-purple, pocket green) as flat fills. No gradients were observed at all; richness comes from color choice and motion, never from blur.
  • Generously rounded, pillowy surfaces — radii climb to 32 and 40px on hero cards, paired with inset 1px hairline borders and whisper-soft drop shadows. Everything feels touchable, like a physical object you could pick up.
  • Restraint in chrome, generosity in content — narrow bounded rails (392–540px) for reading clusters inside a wide 1072px frame keep the wallet's dense financial information calm and legible.

What to study

  • How Family makes crypto feel safe through warmth — steal the beige-over-black contrast and the consumer-app color temperature. The lesson: in a category defined by fear, softness is differentiation.
  • The single-anchor motion discipline — cubic-bezier(0.19, 1, 0.22, 1) appears 84 times across transforms. Learn how one expo-out curve, applied consistently to transform at 0.22s and 1s, becomes a brand fingerprint more recognizable than any logo.
  • The bespoke-display-plus-neutral-body pairing — a custom 'Family' face for headings, workhorse LFE Sans and Inter for everything else. Study how reserving the special font for display keeps it precious instead of exhausting.
  • High-radius surface choreography — radii of 32 and 40px combined with inset hairline borders (color(display-p3) 0 0 0 1px inset) instead of heavy shadows. The pillowy feel is engineered, not accidental.

What to avoid

  • Don't reach for gradients to chase the 'premium' feel — Family ships zero of them. Its richness comes from a curated flat palette and motion. Bolting on a hero gradient would betray the exact restraint that makes it read as expensive.
  • Don't apply Family's expressive 1s transform durations to small interactive affordances — the long expo curve is reserved for hero choreography and card reveals. Use it on a button hover and the UI feels sluggish, not luxurious.
  • Don't over-deploy the bespoke display font — Family confines it to headings. Spreading a characterful display face into body copy or UI labels collapses the hierarchy and kills the premium signal.

Taste notes

The page feels like a well-made physical object — warm to the touch, quietly confident, engineered to a tolerance you can sense but not see. Pillowy 40px radii, hairline inset borders, and a motion language tuned to a single expo-out curve give every interaction a sense of mass and consequence, which is exactly what you want when the thing being moved is someone's money. There are no gradients to hide behind; the richness is entirely in color choice, type, and timing. It is Apple's consumer-hardware sensibility translated to self-custody crypto, and it is almost alone in its category in feeling designed for people rather than traders.

Lineage & references

  • The consumer-design high-water mark of the self-custody wallet generation (Rainbow, Phantom, Zerion) — but where peers lean playful or dark, Family leans warm, restrained, and Apple-adjacent.
  • Sits in the lineage of award-winning motion-led product sites (Family's own app + the Family Bytes/Benji Taylor school of expressive iOS choreography) where the animation is the marketing.
  • Part of the Apple-tier consumer fintech cohort (Cash App's craft, Robinhood's early polish, Monzo's warmth) — products that treat money as an everyday consumer experience, not an institutional one.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Apple-tier consumer warmth applied to self-custody crypto. The canvas is warm near-white beige (#fbfaf9) over true-black accents; a bespoke 'Family' display typeface carries identity on headings with tight negative px tracking (-1.35px at 44px), while LFE Sans and Inter handle body and UI. Elevation is delivered through high pillowy radii (up to 40px), inset 1px hairline borders, and whisper-soft drop shadows — never gradients (zero were observed). A deliberate flat color palette supplies richness, and one anchor easing — cubic-bezier(0.19, 1, 0.22, 1) — gives every transform a sense of physical mass. Warmth over darkness, motion over decoration, craft over spectacle.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (warm beige #fbfaf9 canvas + warm charcoal text #494440/#343433 over true black + a curated FLAT brand palette of app-green #34c759, graphic-blue #4dafff, graphic-gold #f5b442, graphic-purple #5f5de7, yellow #ffbe4c — NO gradients), typographic system (bespoke 'Family' display face on headings with -1.35px tracking at 44px, LFE Sans + Inter for body/UI, weights 400/500/600), the 2px-based spacing scale, high pillowy radii (up to 40px) with inset 1px hairline borders and soft low-opacity drop shadows, and an expressive motion language anchored on cubic-bezier(0.19, 1, 0.22, 1) for transforms. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. Critically: do NOT introduce CSS gradients — Family's richness is flat color plus motion. When I ask you to build a page or component, enforce these rules by default and call out any deviation.

Overview

Layout
Modular
Content width
Bounded
Framing
Flat
Grid strength
Soft

Color philosophy

Warm-light-first canvas — beige #fbfaf9 background paired with warm charcoal text (#494440 body, #343433 heading) doing the dominant reading work, with true black #000000 and white #ffffff as the high-contrast poles. Richness comes from a deliberate FLAT brand palette: app-green #34c759, graphic-blue #4dafff, graphic-gold #f5b442 / yellow #ffbe4c, graphic-purple #5f5de7, and pocket-green #52cb58 — applied as solid fills, never as gradients (zero gradients observed in the capture).

Mode strategylight-first
  • Warm charcoal text #494440 (body) and #343433 (heading) over beige #fbfaf9 — the dominant reading layer, a deliberately warm alternative to neutral gray
  • Muted descenders #848281 (body-muted) and #747484 (gray) for captions, metadata and de-emphasized labels
  • Beige #fbfaf9 canvas + #f2f0ed (gray-light) panels keep the surface warm and calm; pure white #ffffff reserved for raised cards
  • Brand-tier accents app-green #34c759, graphic-blue-alt #4dafff and yellow #ffbe4c applied as FLAT fills for status, emphasis and product chrome — never blended
  • Semantic set: valid #00c454, invalid #ff4e4e, warning #f6c30f — solid, reserved for state, never decorative
  • True black #000000 used as a high-frequency accent/background pole for contrast moments (app screenshots, dark cards)

Typography rules

  • Display family: bespoke 'Family' (self-hosted, preloaded from /fonts/Family-{Regular,Medium,SemiBold}.woff2) — reserved for headings only. Weights 400/500/600.
  • Body/UI families: LFE Sans (self-hosted /fonts/LFESans-*.woff2, weights 400/500/600/700) and Inter as the workhorse for dense UI, controls and copy.
  • Heading signature: 44px / weight 500 / line-height 48px / letter-spacing -1.35px in the 'Family' face — tight negative px tracking is what makes display feel bound and premium.
  • Body tracking is subtly negative in px, not em: -0.22px on 17px body, -0.3px on 19px lead copy, -0.13px on 15px — constant optical correction, never zero on larger sizes.
  • Body line-height runs comfortable: 26px on 17px copy (~1.53), 27px on 19px lead, 22px on 15px. Display sits tighter at 48px on 44px (~1.09).
  • Weight ladder strictly 400 (reading) / 500 (UI labels, medium emphasis) / 600 (semibold emphasis); LFE Sans additionally offers 700 for rare heavy labels.
  • Reserve the 'Family' display face for headings only — never let it leak into body or dense UI, or the premium hierarchy collapses. Paragraph measure 45–60 ch at 17px body.

Spacing rules

  • 2px-based scale (observed: 1 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 24 / 26 px). 8px and 12px are the dominant rhythm (96 and 116 occurrences); 1px exists only as a hairline gap.
  • Container max-width 1072px is the primary frame. Narrow bounded reading rails at 392 / 476 / 540 px for content clusters; an occasional full-bleed 1904px band for hero media.
  • Gutter values for flex/grid: 8 / 10 / 11 / 12 / 15 / 16 / 20 / 24 px — the 11 and 15 variants appear for optical correction in dense rows.
  • Section padding leans on 24px (78 occurrences) as the standard block inset; cards use 12–24px. Always pick from the scale; no magic numbers.
  • Vertical rhythm stays generous and calm — bounded rails inside the wide frame prevent dense financial data from feeling cramped.

Design tokens

Palette, type, and space — all agent-readable.

18 colors · hex / rgb / hsl / oklch

Save PNG
  • foreground
    62%
    • HEX#474645
    • RGBrgb(71, 70, 69)
    • HSLhsl(30, 1%, 27%)
    • OKLCHoklch(39.48% 0.0021 67.76)
  • foreground
    30%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • backgroundwhite
    3%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • foreground
    2%
    • HEX#262626
    • RGBrgb(38, 38, 38)
    • HSLhsl(0, 0%, 15%)
    • OKLCHoklch(26.86% 0.0000 89.76)
  • foreground
    1%
    • HEX#808080
    • RGBrgb(128, 128, 128)
    • HSLhsl(0, 0%, 50%)
    • OKLCHoklch(59.99% 0.0000 89.76)
  • backgroundbeige
    1%
    • HEX#FBFAF9
    • RGBrgb(251, 250, 249)
    • HSLhsl(30, 20%, 98%)
    • OKLCHoklch(98.56% 0.0017 67.80)
  • accentgraphic-blue-alt
    0%
    • HEX#4DAFFF
    • RGBrgb(77, 175, 255)
    • HSLhsl(207, 100%, 65%)
    • OKLCHoklch(73.10% 0.1480 246.44)
  • background
    0%
    • HEX#999999
    • RGBrgb(153, 153, 153)
    • HSLhsl(0, 0%, 60%)
    • OKLCHoklch(68.30% 0.0000 89.76)
  • accent
    0%
    • HEX#FEBE44
    • RGBrgb(254, 190, 68)
    • HSLhsl(39, 99%, 63%)
    • OKLCHoklch(83.99% 0.1511 79.70)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 8 nodes captured; depth capped at 6 for readability.

  • body
  • ├─ div
  • │ └─ div
  • │ └─ div (×2)
  • │ └─ div
  • │ └─ Header
  • ├─ iframe
  • └─ div

Accessibility

WCAG contrast matrix.

248 combinations · 92 pass AA · 56 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FBFAF920.14AAAAAA+103foreground on background
Aa
#FBFAF9#00000020.14AAAAAA-105background on foreground
Aa
#000000#F0F6FE19.32AAAAAA+100foreground on background
Aa
#F0F6FE#00000019.32AAAAAA-102background on foreground
Aa
#000000#E6E6E616.83AAAAAA+91foreground on neutral
Aa
#E6E6E6#00000016.83AAAAAA-92neutral on foreground
Aa
#FFFFFF#26262615.13AAAAAA-105background on foreground
Aa
#262626#FFFFFF15.13AAAAAA+102foreground on background

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total30Lazy loaded0%png46jpg28
Page type
  • Full Page
Industry
  • fintech
  • saas
Theme
  • light
Added
  • 2026-06-24

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.