Skip to content
Browse
Library

Family. Sticker mascots on a linen tray.

  • Crypto
  • Light theme
  • 16 colors
  • 2 typefaces

Family is a white-canvas crypto wallet page that hands its personality to a cast of sticker-style mascots: a sky-blue flower creature, a green blob, a butter-yellow cheese wedge, scattered coins, stars and hearts. Everything around them is restrained. Headlines are set in the custom Family face at 44–68px, weight 500, with roughly -1.35px tracking, so they read soft and friendly rather than loud; body copy is Inter 17px/400 in warm Graphite #474645. Product phones sit in pale Canvas #fbfaf9 panels with 12px corners, and each feature section borrows one accent (Signal Orange #ff3e00, Ether Blue #0086fc, Honey Gold #d48f00, Mint Green #00c978) for its eyebrow and tick list. Conversion lives in Wallet Black #171717 pills.

Visit family.co
Screenshot of Family
Captured from family.co on October 17, 2026

Family design system

Family

Brand1

  • Get Started and Download on iOS pill fills — a soft black that lets the mascots own every bit of colour on the page

Accent6

  • FAQ plus icons, See More FAQs link, Understandable eyebrow and tick list, plus tomato dots in the illustrations

  • Secure and Details eyebrows, tick lists and the Download for iOS text link — the most-used accent text colour

  • Onboarding and Receive captions, Back Up Now and Transaction Safe states — the positive, done-it colour

  • Seamless NFT eyebrow and its media-type list (Images, Video, 3D Models), plus coin outlines in the illustrations

  • Petals of the flower mascot, clouds and puddles — the largest illustrated colour field on the page

  • Coins, stars, padlocks and the cheese-wedge character — the warm yellow sticker fill across the hero clusters

Neutrals9

  • Family-face headlines, feature titles, nav pill labels and FAQ questions

  • Mascot limbs, faces and outline strokes in the illustrations, and the occasional dark interface label

  • Paragraph copy under every headline and in testimonials — a warm brown-grey rather than a cold neutral

  • Published dates, Watch the demo sublabels, tweet handles and other quiet metadata

  • Footer link lists and the copyright line — the footer deliberately fades almost to nothing

  • Header hairline, FAQ dividers and the 1px inset ring around tweet cards and demo links

  • Log In and Watch the Video secondary pills — a warm grey fill that sits one step quieter than Wallet Black

  • Phone-mockup panels, article image wells and the closing Explore Family band

  • Page canvas, header, tweet cards, floating transaction cards and Wallet Black pill labels

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Wallet Black

17.93 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.