Family — design system & UI screens
A friendly, light-mode crypto wallet landing led by a hero headline "Your favorite crypto wallet." flanked by chunky cartoon blob/creature mascots scattered with confetti-like emoji and token icons. The signature treatment is the extremely tall, screenshot-driven body: section after section pairs a left-aligned bold sans headline with realistic iPhone app mockups and small inline feature cards, all on near-white surfaces with soft pastel accents. Distinctive moments include the blue "asleep" mascot for "Relentless protection" and a multi-card transaction-detail collage in the "Details that matter" block.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/family.
Decoded design system
Family's decoded design system: background #FFFFFF, text #474645, accent #FF3E00, link #FF3E00, primary #1A88F8; type scale h1 68px / h2 44px / body 17px; 4px spacing base; 4px base radius. The single interactive/action color is #F6F4EF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F3F3F3 |
| border | #E3E3E3 |
| text | #474645 |
| text_muted | #8C8C8B |
| primary | #1A88F8 |
| accent | #FF3E00 |
| link | #FF3E00 |
| secondary | #00CA48 |
| button_bg | #F6F4EF |
| button_text | #121212 |
Using these colors
- Action color
#F6F4EF— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#FF3E00— one role, not several (the action color).- accent
#FF3E00— accent for emphasis — keep it rare on the page. - primary
#1A88F8— a brand color — but the call-to-action uses #F6F4EF, not this. - secondary
#00CA48— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Family (custom)
- Body: Inter
- h1: 68px
- h2: 44px
- body: 17px
Spacing
- base unit: 4px
- scale: 3px, 4px, 8px, 10px, 12px, 15px, 16px, 20px, 23px, 24px
Radii
- base: 4px
- button: 32px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.04) 0px 0px 0px 1px - card:
rgba(0, 0, 0, 0.1) 0px 3px 16px 0px - overlay:
rgba(0, 0, 0, 0.15) 0px 0px 24px 0px
Motion
Micro-interactions run at 200ms (dominant) with ease.
- durations: 200ms · 1000ms · 100ms
- easings:
ease·cubic-bezier(0.19, 1, 0.22, 1) - animated properties: opacity, transform, fill, background-color
Native design tokens
| Token | Value |
|---|---|
--app-green | color(display-p3 0.20392156862745098 0.7803921568627451 0.34901960784313724) |
--app-gray | color(display-p3 0.4549019607843137 0.4549019607843137 0.5176470588235295) |
--app-blue | color(display-p3 0.00392156862745098 0.5529411764705883 1) |
--app-pink | color(display-p3 0.9764705882352941 0.4 0.6745098039215687) |
--graphic-green | color(display-p3 0.26666666666666666 0.7764705882352941 0.4980392156862745) |
--graphic-blue | color(display-p3 0.49019607843137253 0.7686274509803922 1) |
--graphic-blue-alt | color(display-p3 0.30196078431372547 0.6862745098039216 1) |
--graphic-blue-pale | color(display-p3 0.5568627450980392 0.8 1) |
--graphic-blue-pale-alt | color(display-p3 0.42745098039215684 0.7411764705882353 1) |
--graphic-purple | color(display-p3 0.37254901960784315 0.36470588235294116 0.9058823529411765) |
…and 39 more measured on the page.
Button states (measured)
- primary hover: background
#EAE6DD
Layout (measured)
- container max-width:
1072px - nav: 94px relative
- common grid: 2 columns
Motion choreography (measured)
Load order: div.sc-gsFSXq×88 → div.Testimonials__RowContain×4 → span.sc-iGgWBj×66 → div.sc-gsFSXq×66 → g×2 → text×6
Responsive (measured)
- breakpoints: 580px · 720px · 768px · 880px
- mobile (390px): hero 44px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Screens
Sections (14)
- Hero — Mascot hero — 'Your favorite crypto wallet.'
- Feature — 'Explore Ethereum in a whole new way' card cluster
- Gallery / Showcase — 'Send, receive, swap. All in one place.' phone trio
- Feature — Two-column feature text grid (Easy / Fast / Self-Custody)
- Feature — 'The best way to experience NFTs' showcase
- Feature — 'Watch the wallets you care about' tracking
- Feature — 'Wallet activity you can understand' feed
- Feature — 'Relentless protection. Restful ease.' blue mascot
- Feature — 'Effortless onboarding. Masterful management.' phones
- Gallery / Showcase — 'The latest from Family' blog cards
- Feature — 'Details that matter' transaction collage
- Testimonial / Social Proof — 'Friends of Family' tweet wall
- FAQ — Frequently Asked Questions accordion
- CTA / Sign-up — 'Explore Family' download CTA + footer