{"id":"1bcae895-2245-4d33-aa43-1c1e80719554","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/1bcae895-2245-4d33-aa43-1c1e80719554","originalSiteUrl":"https://family.co","capturedAt":"2026-04-14T15:22:01.694Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Family","summary":"Pixar storyboard on cream paper — playful illustrated characters inhabit a warm off-white world where fintech feels like an adventure game.","description":"Family lands like a children's book dropped into a fintech dashboard — warm off-white canvas (#fbfaf9) littered with expressive flat-illustrated characters in vivid primary colors (electric orange, grass green, sky blue, bright yellow) while the typography stays grounded and authoritative. The custom 'Family' typeface at 68px with tight -0.031em tracking carries the hero weight, while Inter handles everything else with progressively tighter letter-spacing as sizes increase. Cards use an inset warm-stone border (a single 1px shadow at #f2f0ed) instead of drop shadows, keeping surfaces flat and tactile. The only dark surface is the 'Get Started' pill button in near-black #121212 against the warm cream background — a single moment of contrast in an otherwise light, airy layout. The illustration vocabulary — wobbly blob creatures with stick legs and expressive faces — is the real identity system, not the color palette alone.","industry":"crypto","colorScheme":"light","colors":[{"name":"Warm Canvas","hex":"#fbfaf9","role":"Page background, nav background, light button fill","group":"neutral"},{"name":"Stone Surface","hex":"#f2f0ed","role":"Card inset border color, secondary button background, subtle dividers","group":"neutral"},{"name":"Parchment Card","hex":"#f8f7f4","role":"Feature card backgrounds (display-p3 0.984 0.980 0.976 approximation)","group":"neutral"},{"name":"Graphite","hex":"#474645","role":"Body text, nav links, card body copy — the dominant text color across the entire page","group":"neutral"},{"name":"Charcoal Primary","hex":"#343433","role":"Nav text, headings at smaller sizes, links — mapped to --color-primary and --color-text","group":"neutral"},{"name":"Midnight","hex":"#121212","role":"Primary CTA button background, high-contrast heading text","group":"neutral"},{"name":"Obsidian","hex":"#000000","role":"Dark card background (phone mockup cards), icon fills","group":"neutral"},{"name":"Ash","hex":"#848281","role":"Muted body text, secondary nav labels","group":"neutral"},{"name":"Fog","hex":"#c6c6c6","role":"Footer text, inactive borders, dividers","group":"neutral"},{"name":"Smoke","hex":"#a7a7a7","role":"Disabled states, placeholder text, tertiary labels","group":"neutral"},{"name":"Pepper","hex":"#282624","role":"Dark nav overlay text, deep secondary labels","group":"neutral"},{"name":"Ember Orange","hex":"#ff3e00","role":"Primary brand accent — CTA text links, icon highlights, illustration character color — the single most prominent chromatic color site-wide, heat against the cream canvas","group":"brand"},{"name":"Meadow Green","hex":"#00ca48","role":"Secondary brand accent — success indicators, illustration fills, receive/confirmation states","group":"brand"},{"name":"Sky Blue","hex":"#0090ff","role":"Tertiary brand accent — links in body, illustration fills, Ethereum-related UI elements","group":"brand"},{"name":"Sunburst Yellow","hex":"#ffbb26","role":"Quaternary brand accent — coin illustrations, star motifs, card highlights","group":"brand"},{"name":"Deep Amber","hex":"#d48f00","role":"Yellow shadow/stroke in illustrations, icon outlines on yellow elements","group":"accent"},{"name":"Ocean Blue","hex":"#0086fc","role":"Link color in body copy, stroke on blue illustration elements","group":"accent"},{"name":"Ice Blue","hex":"#64c6ff","role":"Illustration fill — lighter blue tones on characters and graphics","group":"accent"},{"name":"Spearmint","hex":"#00c978","role":"Illustration stroke and fill variant for green characters","group":"accent"},{"name":"Flamingo","hex":"#ff58ae","role":"Illustration accent — pink character fills, occasional badge backgrounds","group":"accent"},{"name":"Violet Pop","hex":"#9f4fff","role":"Illustration accent — purple character/NFT badge backgrounds","group":"accent"},{"name":"Coral Red","hex":"#ff2b3a","role":"Error state background, destructive action indicator","group":"semantic"},{"name":"Valid Green","hex":"#00c454","role":"Success/valid input state — mapped to --background-valid","group":"semantic"}],"typography":[{"role":"Hero and section display headlines only. The 68px/500 weight with -0.031em tracking is the signature move — a custom typeface that reads as a friendly geometric serif hybrid, warmer than Inter but less precious than a display serif. Used sparingly: 2-3 instances per page maximum.","sizes":"44px, 68px","family":"Family","weight":"500","lineHeight":"1.09–1.10","substitute":"Fraunces or Playfair Display at weight 500","letterSpacing":"-2.11px at 68px, -0.88px at 44px"},{"role":"All UI text: nav (14px/500), body copy (15-17px/400), card labels (13px/500), buttons (14-15px/500-600), captions (12px/400). Letter-spacing tightens with size — large Inter (44px) gets -0.026em to match the display font's density.","sizes":"12px, 13px, 14px, 15px, 16px, 17px, 19px, 23px, 44px","family":"Inter","weight":"400, 500, 600","lineHeight":"1.00–1.58","substitute":"System UI stack or IBM Plex Sans","letterSpacing":"-1.14px at 44px, -0.44px at 23px, -0.25px at 19px, -0.22px at 17px, -0.16px at 16px, -0.20px at 15px, -0.18px at 14px, -0.17px at 13px, -0.12px at 12px","fontFeatureSettings":"normal"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.58,"letterSpacing":-0.14},{"role":"body","size":15,"lineHeight":1.47,"letterSpacing":-0.2},{"role":"heading-sm","size":19,"lineHeight":1.38,"letterSpacing":-0.25},{"role":"heading","size":23,"lineHeight":1.2,"letterSpacing":-0.44},{"role":"heading-lg","size":44,"lineHeight":1.09,"letterSpacing":-1.14},{"role":"display","size":68,"lineHeight":1.09,"letterSpacing":-2.11}],"spacing":{"radius":{"tags":"6px","cards":"10px","icons":"40px","inputs":"10px","buttons":"32px","cardsLarge":"24px","buttonsPill":"32px","illustrations":"72px"},"elementGap":"8-12px","sectionGap":"120-180px","cardPadding":"32px","pageMaxWidth":"1200px"},"radius":{"tags":"6px","cards":"10px","icons":"40px","inputs":"10px","buttons":"32px","cardsLarge":"24px","buttonsPill":"32px","illustrations":"72px"},"shadows":{"philosophy":"Elevation is expressed through warm inset borders rather than drop shadows — the 1px inset stone-colored ring (display-p3 0.949 0.941 0.929) on white cards creates definition without casting any light. Drop shadows appear only at two moments: the dark phone mockup (0.15 opacity, 24px blur — a cinematic spotlight) and subtle hover states. This keeps the page feeling paper-flat except where product is being spotlit.","surfaces":[{"hex":"#fbfaf9","name":"Canvas","level":1,"purpose":"Page background — warm off-white with a faint cream cast, not pure white"},{"hex":"#ffffff","name":"Card Surface","level":2,"purpose":"White card faces with a warm inset stone border — floats 1px above canvas visually"},{"hex":"#f8f7f4","name":"Recessed Panel","level":3,"purpose":"Screenshot and demo container backgrounds — slightly warmer than white, sits below card level"},{"hex":"#f2f0ed","name":"Stone Tint","level":4,"purpose":"Button backgrounds (secondary), inset border reference color, hover states on cream"},{"hex":"#000000","name":"Dark Shell","level":5,"purpose":"Phone mockup cards — full inversion for product showcase moments"}]},"guidelines":{"do":["Use #fbfaf9 as page background — never pure white (#ffffff) at canvas level; the warm cream cast is the foundation of the tactile feel.","Apply the inset stone border (box-shadow: color(display-p3 0.949 0.941 0.929) 0px 0px 0px 1px inset) on all white cards instead of a CSS border property — keeps cards off-layout-flow.","Use border-radius 32px for all pill buttons (both #121212 dark and #f6f4ef light variants) — the pill shape is non-negotiable for interactive elements.","Apply tight negative letter-spacing to all large text: -2.11px at 68px display, -1.14px at 44px heading-lg, scaling to near-zero at body sizes.","Restrict the Family custom typeface to display and large section headings only (44px and 68px) — Inter handles all UI text regardless of weight.","Use Ember Orange (#ff3e00) exclusively for text-link CTAs and illustration accents — never as a button background fill; its power is as an inline pop against cream.","Space illustration characters asymmetrically around hero text — overlap the headline bounding box with characters to create depth through layering, not z-index stacking."],"dont":["Don't use drop shadows on content cards — the inset warm-stone border is the only surface definition mechanism; shadows appear only on the dark phone mockup and hover-elevated states.","Don't use pure #ffffff as a page background — it breaks the warm cream identity; #fbfaf9 is the minimum warmth threshold.","Don't use the illustration characters as pure decoration at small sizes — below 60px they lose their expressive faces and become abstract blobs.","Don't mix Inter weight 700+ with the Family display typeface — the site uses Inter max weight 600; heavier weights fight the custom font's personality.","Don't apply Ember Orange (#ff3e00) to more than one UI element per viewport — its rarity is what creates urgency; overuse collapses the hierarchy.","Don't use border-radius below 10px on cards — the minimum card radius is 10px; anything sharper breaks the soft-edged system.","Don't use the Violet Pop (#9f4fff), Flamingo (#ff58ae), or Coral Red (#ff2b3a) colors in UI chrome — these are illustration-only accents and have no role in buttons, nav, or body text."]},"components":[{"name":"Primary CTA Button (Pill Dark)","role":"Main conversion action — 'Get Started', 'Download on iOS'"},{"name":"Secondary CTA Button (Pill Light)","role":"Alternative actions — 'Log In', 'Watch the Video'"},{"name":"Ghost Text Link Button","role":"Inline navigation links — 'Watch the demo', section CTAs"},{"name":"Outlined Navigation Button","role":"Tertiary actions in nav or contextual contexts"},{"name":"Feature Card (White)","role":"Primary content cards — feature descriptions, testimonials"},{"name":"Feature Card (Warm Cream)","role":"Secondary content panels — screenshot containers, demo previews"},{"name":"Dark Phone Mockup Card","role":"Product screenshot showcase — wallet UI demonstrations"},{"name":"Testimonial Card","role":"Social proof — Twitter/X quotes in 'Friends of Family' section"},{"name":"Illustration Character","role":"Decorative brand mascots — blob creatures, emoji animals scattered in hero"},{"name":"Navigation Bar","role":"Sticky top navigation"},{"name":"Section Heading","role":"Page section titles"},{"name":"Colored Action Badge","role":"Transaction type labels inside wallet UI mockups — Send, Receive, Purchase"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- Page background: #fbfaf9 (warm cream, never pure white)\n- Primary text: #474645 (Graphite)\n- Heading text: #343433 (Charcoal Primary)\n- CTA button (dark): #121212 background, #ffffff text\n- CTA button (light): #f6f4ef background, #121212 text\n- Brand accent / link: #ff3e00 (Ember Orange)\n- Card border: box-shadow inset ~#f2f0ed 1px\n- Muted text: #848281\n\n**Example Component Prompts**\n\n1. **Hero Section**: Background #fbfaf9. Center-aligned headline in Family typeface 500 at 68px, color #343433, letter-spacing -2.11px, line-height 1.09. Subtext at 16px Inter 400, color #474645, max-width 480px. Two pill buttons below: dark (#121212 background, #ffffff text, 32px radius, 0px 14px padding) and light (#f6f4ef background, #121212 text, 32px radius, 0px 14px padding). Surround headline with flat illustrated characters in orange, green, blue, yellow at sizes 60-120px positioned asymmetrically.\n\n2. **Feature Card Grid (3-column)**: Each card: background #ffffff, box-shadow color(display-p3 0.949 0.941 0.929) 0px 0px 0px 1px inset, border-radius 10px, padding 32px. Heading in Inter 600 19px #343433. Body in Inter 400 15px #474645 line-height 1.47. Product screenshot or illustration inside card on #f8f7f4 panel with border-radius 12px.\n\n3. **Testimonial Card**: Background #ffffff, inset stone border same as Feature Card, border-radius 10px, padding 32px. Top-right: X/Twitter icon in #474645. User row: circular avatar 40px, name in Inter 500 14px #343433, handle in Inter 400 13px #848281. Quote in Inter 400 15px #474645 letter-spacing -0.20px. Arrange in horizontally scrolling row with 12px gap.\n\n4. **Navigation Bar**: Background #fbfaf9, height 64px, box-shadow rgba(0,0,0,0.04) 0px 0px 0px 1px. Logo (square icon + 'Family' wordmark) at left in #343433 Inter 500 15px. Center links: Inter 500 14px #343433 with dropdown chevrons. Right: 'Log In' light pill + 'Get Started' dark pill (#121212, 32px radius).\n\n5. **Section Heading Block**: Inter 600 at 44px, color #121212, letter-spacing -1.14px, line-height 1.09. Optional orange accent word in same size but color #ff3e00. Supporting body text below at Inter 400 17px #474645, letter-spacing -0.22px, max-width 560px. Section gap above: 120-180px."},{"title":"Illustration System","content":"The illustration system IS the brand identity — not a decoration layer. Key rules:\n\n**Character vocabulary**: Organic blob shapes (no hard geometric forms) with stick limbs, expressive dot eyes, and simple mouth curves. Each character uses one dominant brand color (Ember Orange, Meadow Green, Sky Blue, Sunburst Yellow) with a darker shade for depth stroke.\n\n**Object vocabulary**: Coins (gold #ffbb26 with amber stroke #d48f00), hearts (red #ff2b3a), stars (yellow), lock icons (gold), magnifying glass (blue), arrows (teal/green). All flat-filled, no gradients.\n\n**Placement rule**: Hero characters bleed INTO the headline bounding box — the blue blob character's arm overlaps the 'Y' of 'Your'. This intentional overlap is the signature composition move.\n\n**Color usage in illustration**: Maximum 4-5 brand colors per scene. Each character claims one color family. Avoid two characters of the same hue adjacent.\n\n**CSS token reference for illustration colors**: --graphic-orange, --graphic-green, --graphic-blue, --graphic-yellow, --graphic-gold, --graphic-purple — all defined as display-p3 for wide-gamut screens."},{"title":"Motion Philosophy","content":"Motion personality is 'expressive' with 0.2s ease as the base duration (123 instances). Key patterns:\n\n**Micro-interactions**: 0.1-0.2s ease for hover states on buttons (background color, box-shadow). Buttons likely scale or lighten slightly.\n\n**Illustration animation**: 1s duration with cubic-bezier(0.19, 1, 0.22, 1) — the 'snappy overshoot' easing suggests characters bounce or spring into position on scroll entry.\n\n**Transition properties**: Transform (103×) and opacity (44×) dominate — elements slide or fade in rather than recoloring. Box-shadow transitions (33×) animate card hover elevations.\n\n**Named animation 'hdKGda'**: Custom keyframe animation, likely the floating/bobbing motion on hero illustration characters.\n\n**Rule**: Never use linear easing on visible UI — the brand is expressive, and linear motion reads as mechanical. Default to ease or the cubic-bezier(0.19, 1, 0.22, 1) spring curve."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776179975855-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776179975855-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bcae895-2245-4d33-aa43-1c1e80719554-1777557570386-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bcae895-2245-4d33-aa43-1c1e80719554-1777557570386-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bcae895-2245-4d33-aa43-1c1e80719554-1777557570386-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1bcae895-2245-4d33-aa43-1c1e80719554-1777557570386-preview-detail-poster.jpg"},"similarStyleIds":["75c06591-34d2-493a-bd49-70551b5e4a53","c8c22958-ec50-47f1-aedc-a131d7aeb442","3da7b444-ded8-406b-90b7-96851604b92b","c60a19c1-259a-4001-95d9-6a3826f5c06e","2b6642d9-fa66-4c06-9804-30f56e544a6d","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","15f0809b-b7e0-4824-844f-286c39f4accf","3677bc04-7461-4aa4-aec7-5291bac41b0b","c5326639-873a-4257-ad1a-7da9111e9286","9342e89b-c2fe-4acf-9993-53b44e0c13b5","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","ad529e8a-3427-4152-bed9-6ec5097f25b6","5ec4eb4f-a37c-4787-b4c1-de49e01770e7","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","c363a216-873c-4112-b960-8e823db76f74","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","6b2a0513-df80-4140-87a8-38b1fef34313","3e5c272b-8d68-40d8-9726-b4d6914b4b16","742b500d-3e10-4daa-bb89-d0d26272e5f6"],"exports":{"designMdUrl":"/references/refero/1bcae895-2245-4d33-aa43-1c1e80719554/design.md","tokensJsonUrl":"/references/refero/1bcae895-2245-4d33-aa43-1c1e80719554/tokens.json","tailwindV4Url":"/references/refero/1bcae895-2245-4d33-aa43-1c1e80719554/tailwind-v4.css","cssVariablesUrl":"/references/refero/1bcae895-2245-4d33-aa43-1c1e80719554/tailwind-v4.css"}}