{"id":"b458ca1a-70f0-4f85-b745-f879a4d08457","name":"Dia Browser","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/b458ca1a-70f0-4f85-b745-f879a4d08457","originalSiteUrl":"https://diabrowser.com","capturedAt":"2026-04-28T23:37:54.339Z","colors":[{"name":"Ink Black","hex":"#000000","role":"Primary text, headings, nav links, borders, icon fills — the sole chromatic anchor in an otherwise gray system","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Snow","hex":"#ffffff","role":"Card backgrounds (at 90% opacity), base fills, overlay surfaces","group":"neutral","cssVariable":"--color-snow"},{"name":"Canvas","hex":"#f8f8f8","role":"Page background (--background token), the overall canvas beneath frosted cards","group":"neutral","cssVariable":"--color-canvas"},{"name":"Fog","hex":"#efefef","role":"Header background, subtle section dividers","group":"neutral","cssVariable":"--color-fog"},{"name":"Pebble","hex":"#d9d9d9","role":"Filled button backgrounds (\"Download Dia\") — neutral gray buttons avoid competing with content; a deliberate anti-CTA that says 'ready when you are'","group":"neutral","cssVariable":"--color-pebble"},{"name":"Graphite","hex":"#636363","role":"Body text, secondary copy, subheadings beneath display type","group":"neutral","cssVariable":"--color-graphite"},{"name":"Slate","hex":"#959595","role":"Tertiary text, nav labels, metadata captions","group":"neutral","cssVariable":"--color-slate"},{"name":"Steel","hex":"#aeaeae","role":"Disabled states, carousel indicator dots, icon strokes","group":"neutral","cssVariable":"--color-steel"},{"name":"Ash","hex":"#7c7c7c","role":"Subtle borders, secondary body text","group":"neutral","cssVariable":"--color-ash"},{"name":"Spectrum Gradient","hex":"#fa3d1d","role":"The signature chromatic moment — ambient hero glow and decorative accent strip; this gradient IS the brand color, appearing where a logo mark would in other systems; Gradient stop — the red accent, available as --red token for error or emphasis states","group":"brand","gradient":"linear-gradient(90deg, rgb(198, 121, 196) 0%, rgb(250, 61, 29) 25%, rgb(255, 176, 5) 50%, rgb(225, 225, 254) 75%, rgb(3, 88, 247) 100%)","cssVariable":"--color-spectrum-gradient"},{"name":"Rose Quartz","hex":"#c679c4","role":"Gradient stop — pink/mauve tone at the warm edge of the spectrum","group":"accent","cssVariable":"--color-rose-quartz"},{"name":"Marigold","hex":"#ffb005","role":"Gradient stop — warm amber center of the spectrum, available as --yellow token","group":"accent","cssVariable":"--color-marigold"},{"name":"Signal Blue","hex":"#0358f7","role":"Gradient stop — the cool end of the spectrum, available as --blue token for links or informational highlights","group":"accent","cssVariable":"--color-signal-blue"},{"name":"Hot Pink","hex":"#fd02f5","role":"Available as --pink token for highlight or playful accent contexts","group":"accent","cssVariable":"--color-hot-pink"}],"typography":[{"role":"The sole typeface across the entire system — display headlines at weight 300 (72px, 54px), body at 400 (16px, 18px), nav/buttons at 500 (14px, 16px). Weight 300 for display is the signature: most browser/SaaS sites use 600+ for headlines, but Dia goes featherweight, making large type feel like ink drying on paper rather than commands carved in stone. The tight -0.04em tracking at display sizes compresses the airy letterforms just enough to hold together at scale.","sizes":"10px, 14px, 16px, 18px, 22px, 50px, 54px, 72px","family":"ABC Oracle","weight":"300, 400, 500","lineHeight":"1.11–1.50","substitute":"GT Super Display (weight 300) or DM Sans (lighter weights) for structure; for closer match, Instrument Serif light or Reckless Neue light","letterSpacing":"-0.04em at display sizes (50-72px), -0.02em at heading sizes (22px), normal at body (14-18px)","fontFeatureSettings":"none detected"}],"spacing":{"radius":{"cards":"30px","images":"10px","buttons":"30px","navItems":"16px","containers":"40px","pillButtons":"9999px"},"elementGap":"15-20px","sectionGap":"80-120px","cardPadding":"32px","pageMaxWidth":"1200px"},"radius":{"cards":"30px","images":"10px","buttons":"30px","navItems":"16px","containers":"40px","pillButtons":"9999px"},"shadows":{"philosophy":"The system uses a single, extremely subtle shadow (8px blur at 8% opacity) and relies primarily on backdrop-filter blur and semi-transparent white surfaces to create depth. Cards feel like frosted glass panels hovering over the canvas rather than lifted surfaces casting shadows. This is a deliberate choice — the frosted effect creates layering without weight.","surfaces":[{"hex":"#f8f8f8","name":"Canvas","level":0,"purpose":"Page-level background, the lightest layer"},{"hex":"#efefef","name":"Header","level":1,"purpose":"Sticky header bar with backdrop-blur(24px), semi-transparent"},{"hex":"#ffffff","name":"Card","level":2,"purpose":"Primary content cards at rgba(255,255,255,0.9) — frosted glass over gradient backgrounds"},{"hex":"#d9d9d9","name":"Button Fill","level":3,"purpose":"Filled button surfaces, slightly recessed against white cards"}]},"guidelines":{"do":["Use the spectrum gradient (pink → red → amber → lavender → blue) ONLY as ambient background glow or decorative strip — never as text color or button fill","Keep buttons neutral gray (#D9D9D9) or transparent; the system deliberately avoids chromatic CTAs to keep focus on content","Apply 30px border-radius consistently to cards and filled buttons; use 9999px pill radius only for ghost/tab buttons","Use ABC Oracle weight 300 for all display text (50px+) with -0.04em letter-spacing; weight 500 only for buttons and labels ≤16px","Apply backdrop-filter: blur(24px) with rgba(255,255,255,0.9) for any elevated surface to maintain the frosted-glass layering","Maintain the rgba(0,0,0,0.08) 0px 0px 8px 0px shadow on all floating cards — this is the only shadow in the system","Use #636363 for body text and #959595 for tertiary/metadata text against the #F8F8F8 canvas"],"dont":["Never use saturated colors (--red, --blue, --pink, --yellow) as solid backgrounds or button fills — they exist only within the gradient and as design tokens for rare micro-accents","Never use border-radius less than 10px on any element; the system has no sharp corners","Never use font weights above 500 — there is no bold (600/700/800) anywhere in this system","Never add drop shadows beyond the single 8px blur shadow; avoid layered or colored shadows","Never place dark backgrounds behind content sections; the system is exclusively light with the gradient as the only warm/dark element","Never use underlined links with color changes — links stay #000000 and only animate underline opacity on hover","Never introduce a second typeface; the entire system runs on a single family at three weights"]}}