{"id":"1bcae895-2245-4d33-aa43-1c1e80719554","name":"Family","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","colors":[{"name":"Warm Canvas","hex":"#fbfaf9","role":"Page background, nav background, light button fill","group":"neutral","cssVariable":"--color-warm-canvas"},{"name":"Stone Surface","hex":"#f2f0ed","role":"Card inset border color, secondary button background, subtle dividers","group":"neutral","cssVariable":"--color-stone-surface"},{"name":"Parchment Card","hex":"#f8f7f4","role":"Feature card backgrounds (display-p3 0.984 0.980 0.976 approximation)","group":"neutral","cssVariable":"--color-parchment-card"},{"name":"Graphite","hex":"#474645","role":"Body text, nav links, card body copy — the dominant text color across the entire page","group":"neutral","cssVariable":"--color-graphite"},{"name":"Charcoal Primary","hex":"#343433","role":"Nav text, headings at smaller sizes, links — mapped to --color-primary and --color-text","group":"neutral","cssVariable":"--color-charcoal-primary"},{"name":"Midnight","hex":"#121212","role":"Primary CTA button background, high-contrast heading text","group":"neutral","cssVariable":"--color-midnight"},{"name":"Obsidian","hex":"#000000","role":"Dark card background (phone mockup cards), icon fills","group":"neutral","cssVariable":"--color-obsidian"},{"name":"Ash","hex":"#848281","role":"Muted body text, secondary nav labels","group":"neutral","cssVariable":"--color-ash"},{"name":"Fog","hex":"#c6c6c6","role":"Footer text, inactive borders, dividers","group":"neutral","cssVariable":"--color-fog"},{"name":"Smoke","hex":"#a7a7a7","role":"Disabled states, placeholder text, tertiary labels","group":"neutral","cssVariable":"--color-smoke"},{"name":"Pepper","hex":"#282624","role":"Dark nav overlay text, deep secondary labels","group":"neutral","cssVariable":"--color-pepper"},{"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","cssVariable":"--color-ember-orange"},{"name":"Meadow Green","hex":"#00ca48","role":"Secondary brand accent — success indicators, illustration fills, receive/confirmation states","group":"brand","cssVariable":"--color-meadow-green"},{"name":"Sky Blue","hex":"#0090ff","role":"Tertiary brand accent — links in body, illustration fills, Ethereum-related UI elements","group":"brand","cssVariable":"--color-sky-blue"},{"name":"Sunburst Yellow","hex":"#ffbb26","role":"Quaternary brand accent — coin illustrations, star motifs, card highlights","group":"brand","cssVariable":"--color-sunburst-yellow"},{"name":"Deep Amber","hex":"#d48f00","role":"Yellow shadow/stroke in illustrations, icon outlines on yellow elements","group":"accent","cssVariable":"--color-deep-amber"},{"name":"Ocean Blue","hex":"#0086fc","role":"Link color in body copy, stroke on blue illustration elements","group":"accent","cssVariable":"--color-ocean-blue"},{"name":"Ice Blue","hex":"#64c6ff","role":"Illustration fill — lighter blue tones on characters and graphics","group":"accent","cssVariable":"--color-ice-blue"},{"name":"Spearmint","hex":"#00c978","role":"Illustration stroke and fill variant for green characters","group":"accent","cssVariable":"--color-spearmint"},{"name":"Flamingo","hex":"#ff58ae","role":"Illustration accent — pink character fills, occasional badge backgrounds","group":"accent","cssVariable":"--color-flamingo"},{"name":"Violet Pop","hex":"#9f4fff","role":"Illustration accent — purple character/NFT badge backgrounds","group":"accent","cssVariable":"--color-violet-pop"},{"name":"Coral Red","hex":"#ff2b3a","role":"Error state background, destructive action indicator","group":"semantic","cssVariable":"--color-coral-red"},{"name":"Valid Green","hex":"#00c454","role":"Success/valid input state — mapped to --background-valid","group":"semantic","cssVariable":"--color-valid-green"}],"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"}],"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."]}}