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.
This 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.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Family’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
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.
Layout
Modular
Content width
Bounded
Framing
Flat
Grid strength
Soft
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)
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.
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.
Surface styleLayered
Primary surface delimiter is an inset 1px hairline border — `box-shadow: color(display-p3 0.94902 0.941176 0.929412) 0 0 0 1px inset` (a warm off-white ring). Reach for this before any drop shadow.
Drop shadows are soft and low-opacity: `rgba(0,0,0,0.04) 0 1px 6px`, `rgba(0,0,0,0.1) 0 3px 16px`, up to `rgba(0,0,0,0.15) 0 0 24px` for the most raised cards. Never harsh, never a halo.
Layering depth comes from radius + warm hairline border + a soft shadow stack, not from heavy elevation. Pillowy, not floating.
No gradients for depth — flat fills plus the hairline-border-and-soft-shadow recipe carry all elevation.
Techniques
Warm inset hairline ring
Cards and inputs default to `box-shadow: color(display-p3 0.94902 0.941176 0.929412) 0 0 0 1px inset` — a 1px warm off-white inset border that delimits the surface against the beige canvas without a hard edge. Combine with an 8–12px radius for standard surfaces.
Pillowy hero card
Hero/feature cards take a high 32–40px radius, the warm inset ring, and a soft drop shadow `rgba(0,0,0,0.1) 0 3px 16px` (or `rgba(0,0,0,0.15) 0 0 24px` for the most prominent). The combination of large radius and diffuse shadow makes the card read as a physical, pickup-able object.
Buttons default to 10–12px radius, chips/inputs 8px, cards 12px, hero cards and avatars 32–40px, pills `rounded-full` only for status dots and small badges.
Icons lean filled/soft (consumer-app, SF-Symbols-adjacent) rather than thin stroke — matches the warm, tactile personality. Pair with the brand color fills.
Tap targets minimum 44×44px on touch, 40×40 on pointer — consumer-app touch ergonomics.
Hoveropacity fade (0.2s on ease) — the most frequent transition (69×), all-property shift (0.2s on ease-out) for compound hover states (59×), box-shadow + background (0.1s on ease) for tactile press feedback
Scroll patterns
transform reveals on the anchor curve cubic-bezier(0.19, 1, 0.22, 1) at 0.22s (snappy) and 1s (expressive hero choreography) — the signature expo-out feel
fill transitions at 0.1s / 0.4s on ease for icon and illustration color shifts
ambient looping marquee at 120s linear (used sparingly, e.g. a logo/ticker rail)
No parallax beyond subtle translate — depth comes from weighted easing, not displacement
Primary easing: cubic-bezier(0.19, 1, 0.22, 1) — an expo-out curve applied to transform 84× across the capture. This single curve is the brand's motion fingerprint.
Supporting easings: ease and ease-out for opacity / all / fill keyword transitions; ease-in-out for short 0.1s micro-fades; linear ONLY for ambient loops (the 120s marquee).
Durations captured: 0.1s (micro press feedback), 0.18s / 0.2s / 0.22s (standard state change — 0.2s is dominant at 131×), 0.4s (fill / reveal), 1s (expressive hero transform choreography).
Reserve the long 1s transform duration for hero and card choreography only; keep interactive affordances (hover, press) at 0.1–0.22s, or the UI feels sluggish.
useReducedMotion mandatory: all animations collapse to opacity-only or disable.
Spring animations forbidden — deterministic cubic-bezier or keyword easings only.
No loop animations except the explicit ambient marquee (120s linear) and loaders.
Consumer-app affordances — large tactile buttons with active press-scale, not enterprise toggles. Money actions get weight and confirmation.
Segmented controls for binary/ternary switches (send/receive, asset filters); toggle switches reserved for settings.
Accordion: single-open for FAQ; multi-open only for nested settings or transaction detail.
Tooltips reveal on hover + focus; dismiss instantly on blur. Destructive crypto actions (send, sign) always use an explicit modal confirmation.
Form validation inline below field on blur; semantic colors (valid #00c454 / invalid #ff4e4e) plus text, never color-only.
Empty states: small filled icon + one-line copy + a primary 600-weight action. Warm, encouraging tone — never alarming.
Loading states: skeleton shimmer for content; inline spinner for buttons. No full-page blocking overlays.
Approachdesktop-first
Desktop-first marketing frame (primary container 1072px) that reflows the same warm, calm language into a single column on mobile — Family's app is iOS-native, so the marketing site mirrors that touch-friendly ergonomic. Observed media queries cluster tightly around 390–420px (phone) and 720–920px (tablet), confirming a phone-and-tablet-aware reflow rather than a separate mobile architecture.
Container max-width scales through 392 → 476 → 540 → 1072 px bounded rails; an occasional 1904px full-bleed band for hero media.
Hide-on-mobile is discouraged — reflow controls into the single column instead of hiding them.
Tap target minimum 44×44 on touch; 40×40 on pointer.
Typography scales down proportionally; display 'Family' face drops from 44px while negative tracking eases toward zero at smaller sizes.
focus-visible: a 2px accent ring at graphic-blue #4dafff on every interactive element — replaces the default browser ring. Mandatory.
All interactive elements reachable via Tab in logical reading order; never rely on hover to expose actions.
Color contrast: #494440 body on #fbfaf9 beige ≈ 8.9:1 (AAA); #343433 heading on #fbfaf9 ≈ 11:1 (AAA). Muted #848281 on beige ≈ 3.8:1 — use for large/secondary text only, never small body.
Never signal state with color alone — pair semantic valid/invalid/warning fills with an icon and text (especially critical for financial confirmations).
ARIA labels on icon-only buttons; aria-expanded on collapsibles; aria-live='polite' on balance updates, toasts and transaction status.
Motion respects prefers-reduced-motion — the expressive 1s transforms reduce to opacity-only or disable entirely.
Tap targets minimum 44×44 on touch; 40×40 on pointer.
Form errors announced via aria-describedby on the associated input; never color-only signaling.
Framer MotionNext/ImageLottie
The motion profile (transform transitions at 0.22s and 1s on cubic-bezier(0.19, 1, 0.22, 1), opacity fades at 0.2s) matches a Framer-Motion-class library; the award-winning hero choreography and app demo loops are consistent with Lottie or video-backed playback (background images at /videos/*.png confirm video poster frames). Imagery is PNG/JPG with effectively no native lazy-loading observed — the marketing page eager-loads its emoji and product art deliberately.
Framer Motion `motion.div` with `whileInView` + `viewport={{ once: true, margin: '-10%' }}` for scroll reveals
Transitions use `ease: [0.19, 1, 0.22, 1]` with `duration: 0.22` (snappy) or `duration: 1` (hero choreography) — constants only, no springs
useReducedMotion guard wraps every animation primitive — no exceptions
Next/Image with explicit `sizes`; `priority` on the LCP hero. NOTE: source eager-loads most art, but project rules still require lazy on non-LCP
Lottie or muted autoplay video for app-demo choreography (send/receive/swap/drag-drop-done); static poster frame fallback (/videos/*.png) for reduced-motion
No CSS gradients — richness is flat brand-palette fills plus weighted motion
Keep the canvas warm — beige #fbfaf9 plus warm charcoal text #494440/#343433. Resist the urge to go neutral-gray or dark.
Use the curated FLAT brand palette (app-green #34c759, graphic-blue #4dafff, gold #f5b442, purple #5f5de7, yellow #ffbe4c) for accents and product chrome — solid fills only.
Anchor all transform motion on cubic-bezier(0.19, 1, 0.22, 1); reserve the long 1s duration for hero/card choreography.
Reach for the warm inset 1px hairline ring before any drop shadow; keep drop shadows soft and ≤ 0.15 opacity.
Reserve the bespoke 'Family' display face for headings; use LFE Sans / Inter for body and UI.
Use high pillowy radii (32–40px) on hero cards and avatars to signal tactile, physical warmth.
Pass every page through useReducedMotion before shipping — the 1s expressive transforms must degrade gracefully.
Never introduce CSS gradients — the capture has zero. Family's richness is flat color plus motion; a gradient betrays the brand's restraint.
Never apply the long 1s transform duration to small affordances (button hover, toggles) — it feels sluggish. Keep interactive feedback at 0.1–0.22s.
Never substitute 450/700 weights into the display ladder — 'Family' headings use 400/500/600 only.
Never let the bespoke 'Family' display face leak into body or dense UI — it collapses the premium hierarchy.
Never use harsh or high-opacity drop shadows (> 0.15) — elevation is soft, warm, and inset-border-led.
Never signal financial state with color alone — always pair semantic fills with icon + text.
Never introduce a sixth easing or a duration outside the captured set {0.1, 0.18, 0.2, 0.22, 0.4, 1}s.
Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
Spacing base 2px, scale 1/4/6/8/10/12/14/16/18/20/24/26.
Spacing grep: no values outside the 1/4/6/8/10/12/14/16/18/20/24/26 ladder.
Font-family grep: 'Family' appears only on headings; body/UI uses LFE Sans or Inter. Weights limited to 400/500/600 (700 only on LFE Sans labels).
Tracking audit: display heading uses -1.35px at 44px; body uses px negative tracking (-0.22 / -0.3 / -0.13), not em.
Transition easing grep: values draw from {cubic-bezier(0.19, 1, 0.22, 1), ease-out, ease, ease-in-out, linear}; the expo curve carries transform transitions.
Transition duration grep: values draw from {0.1, 0.18, 0.2, 0.22, 0.4, 1}s; the 1s tier appears only on hero/card transforms.
Shadow audit: every elevation reaches for the warm inset 1px ring first; drop shadows ≤ 0.15 opacity, soft blur.
Radius audit: hero/avatar surfaces use 32–40px; UI surfaces 8–12px; nothing outside the {4,6,8,9.6,10,12,32,40} set.
Contrast audit: body text on beige ≥ 4.5:1 (WCAG AA); muted #848281 confined to large/secondary text.
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 8 nodes across 6 levels, shallow to deep by color.
body3
div1
div1
div (×2)1
div1
Header
iframe
div
Accessibility
Contrast matrix
248 combinations - 92 pass AA - 56 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox20.14
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FBFAF9
APCA Lc
+103
Use
foreground on background
AaThe quick brown fox20.14
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FBFAF9
bg
#000000
APCA Lc
-105
Use
background on foreground
AaThe quick brown fox19.32
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#F0F6FE
APCA Lc
+100
Use
foreground on background
AaThe quick brown fox19.32
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#F0F6FE
bg
#000000
APCA Lc
-102
Use
background on foreground
AaThe quick brown fox16.83
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E6E6E6
APCA Lc
+91
Use
foreground on neutral
AaThe quick brown fox16.83
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#E6E6E6
bg
#000000
APCA Lc
-92
Use
neutral on foreground
AaThe quick brown fox15.13
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#262626
APCA Lc
-105
Use
background on foreground
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
