{"id":"b458ca1a-70f0-4f85-b745-f879a4d08457","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","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":"Dia Browser","summary":"Prism on white stationery — light refracts color from a nearly monochrome surface.","description":"Feels like holding a blank sheet of premium stationery up to warm morning light — the page is almost entirely achromatic, but a hidden spectrum bleeds through in concentrated gradient bursts that feel like sunlight refracting through a prism's edge. The warmth comes from translucent card surfaces (white at 90% opacity) floating on a #F8F8F8 canvas with backdrop-blur, creating frosted-glass depth without hard shadows. ABC Oracle at weight 300 for display text (72px, 54px) is the defining typographic gesture — impossibly thin letterforms with tight -0.04em tracking create an airy authority, like text etched into glass. The single rainbow gradient (pink → red → amber → lavender → blue) appears as a chromatic accent strip and ambient background glow, making what is otherwise a monochrome system feel alive. Buttons default to #D9D9D9 — deliberately muted, never demanding attention, letting the content hierarchy stay centered on the typography.","industry":"ai","colorScheme":"light","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"},{"name":"Snow","hex":"#ffffff","role":"Card backgrounds (at 90% opacity), base fills, overlay surfaces","group":"neutral"},{"name":"Canvas","hex":"#f8f8f8","role":"Page background (--background token), the overall canvas beneath frosted cards","group":"neutral"},{"name":"Fog","hex":"#efefef","role":"Header background, subtle section dividers","group":"neutral"},{"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"},{"name":"Graphite","hex":"#636363","role":"Body text, secondary copy, subheadings beneath display type","group":"neutral"},{"name":"Slate","hex":"#959595","role":"Tertiary text, nav labels, metadata captions","group":"neutral"},{"name":"Steel","hex":"#aeaeae","role":"Disabled states, carousel indicator dots, icon strokes","group":"neutral"},{"name":"Ash","hex":"#7c7c7c","role":"Subtle borders, secondary body text","group":"neutral"},{"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%)"},{"name":"Rose Quartz","hex":"#c679c4","role":"Gradient stop — pink/mauve tone at the warm edge of the spectrum","group":"accent"},{"name":"Marigold","hex":"#ffb005","role":"Gradient stop — warm amber center of the spectrum, available as --yellow token","group":"accent"},{"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"},{"name":"Hot Pink","hex":"#fd02f5","role":"Available as --pink token for highlight or playful accent contexts","group":"accent"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":0},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":0},{"role":"subheading","size":18,"lineHeight":1.33,"letterSpacing":0},{"role":"heading-sm","size":22,"lineHeight":1.25,"letterSpacing":-0.44},{"role":"heading","size":50,"lineHeight":1.18,"letterSpacing":-2},{"role":"heading-lg","size":54,"lineHeight":1.17,"letterSpacing":-2.16},{"role":"display","size":72,"lineHeight":1.11,"letterSpacing":-2.88}],"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"]},"components":[{"name":"Download CTA Button Group","role":""},{"name":"Testimonial Cards","role":""},{"name":"AI Prompt Search Bar","role":""},{"name":"Frosted Content Card","role":"Primary content container for feature descriptions, testimonials, and product showcases"},{"name":"Neutral Filled Button","role":"Primary download/action button (\"Download Dia\")"},{"name":"Ghost Pill Button","role":"Secondary actions and navigation toggles"},{"name":"Soft Fill Button","role":"Announcement banner and contextual actions"},{"name":"Sticky Header Bar","role":"Fixed navigation with frosted glass effect"},{"name":"Testimonial Card","role":"User quote display in horizontal carousel"},{"name":"Product Screenshot Showcase","role":"Feature demonstration with ambient gradient background"},{"name":"Category Tab Carousel","role":"Horizontal dot pagination and content category switcher"},{"name":"Video Thumbnail Button","role":"Watch the trailer CTA overlay"},{"name":"Footer Navigation Grid","role":"Multi-column link grid in footer"},{"name":"Privacy Section","role":"Trust/privacy messaging block"},{"name":"Inline Text Link","role":"Contextual links within body copy"}],"customSections":[{"title":"Gradient System","content":"The spectrum gradient is Dia's visual signature — it replaces a traditional brand color. CSS: linear-gradient(90deg, #c679c4 0%, #fa3d1d 25%, #ffb005 50%, #e1e1fe 75%, #0358f7 100%). It appears in three modes: (1) Full strip — a horizontal bar, often masked to reveal only a center portion. (2) Ambient glow — diffused behind product screenshots at low opacity with blur, creating warm light. (3) Chroma animation — the gradient sweeps or expands using named animations (chroma-expand-bidirectional, chroma-sweep) at ~0.85-0.9s with cubic-bezier(0.77, 0, 0.175, 1) easing. The gradient tokens also exist as individual --red, --blue, --pink, --yellow, --brown CSS variables with 50% and 10% opacity variants for potential use in badges or highlights, but the primary site uses them only within the gradient context."},{"title":"Motion Philosophy","content":"Expressive personality: 0.2s ease is the default micro-interaction (hover states on links, buttons, icons — transitions color, background-color, border-color, fill, stroke, opacity, text-decoration-color). The gradient animations are slower and more theatrical: 0.85-0.9s with cubic-bezier(0.77, 0, 0.175, 1) for sweeps. A marquee animation (diaMarqueeL) runs at extremely long duration (~2040s) for a slow-scrolling continuous loop. No spring/bounce physics — all easing is smooth curves."},{"title":"Agent Prompt Guide","content":"**Quick Color Reference:**\n- text: #000000 (primary), #636363 (secondary body), #959595 (tertiary/meta)\n- background: #F8F8F8 (canvas), rgba(255,255,255,0.9) (card surfaces)\n- border: none prominent — system uses shadow + frosted surfaces instead\n- accent: spectrum gradient (linear-gradient from #c679c4 → #fa3d1d → #ffb005 → #e1e1fe → #0358f7)\n- primary action: no distinct CTA color — buttons use neutral #D9D9D9 fill with #000000 text\n\n**Example Component Prompts:**\n\n1. **Hero Section:** #F8F8F8 background. Centered subtitle at 18px ABC Oracle weight 400, #636363. Display headline at 72px weight 300, #000000, letter-spacing -2.88px, line-height 1.11. Below: neutral button #D9D9D9 background, #000000 text, 30px radius, 14px weight 500. Below button: product UI mockup with 10px radius, spectrum gradient glow (low opacity, blurred) behind it.\n\n2. **Feature Card Grid:** 3-column grid of frosted cards — background rgba(255,255,255,0.9), backdrop-filter blur(24px), 30px radius, 32px padding, shadow rgba(0,0,0,0.08) 0px 0px 8px 0px. Card heading 22px weight 500 #000000, body 16px weight 400 #636363, 15px gap between elements.\n\n3. **Testimonial Carousel:** Horizontal scroll of frosted cards (same card styling as above). Each card: quote text 14px weight 400 #000000, 5px margin above attribution. Avatar 40px circle, name 14px weight 500 #000000, role 14px weight 400 #959595. Cards spaced 20px apart.\n\n4. **Sticky Navigation Bar:** Background #EFEFEF with backdrop-filter blur(24px). Height ~52px. Logo left. Nav links 14px weight 400 #000000, 20px horizontal gaps. Right side: announcement pill (rgba(0,0,0,0.04) background, 16px radius, 24px horizontal padding, 14px text), neutral Download button (#D9D9D9, 30px radius).\n\n5. **Privacy/Trust Section:** Centered layout. Icon (lock) at 24px, black. Headline 54px weight 300 #000000, letter-spacing -2.16px. Body text 16px weight 400 #636363. Inline link: #000000 with underline, hover transitions text-decoration-color 0.2s ease."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419352482-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777419352482-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b458ca1a-70f0-4f85-b745-f879a4d08457-1777555664260-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b458ca1a-70f0-4f85-b745-f879a4d08457-1777555664260-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b458ca1a-70f0-4f85-b745-f879a4d08457-1777555664260-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/b458ca1a-70f0-4f85-b745-f879a4d08457-1777555664260-preview-detail-poster.jpg"},"similarStyleIds":["3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","742b500d-3e10-4daa-bb89-d0d26272e5f6","e869e214-f672-4ac3-bfc2-bd25de7b003b","ca93daf1-daf3-41b7-8248-8f63082761e8","51752cfb-4fd4-464f-8b78-ecbc813830e1","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","d0f65d12-a8e6-4631-99f7-bb7cdcd5b6c5","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","90ce5883-bb24-4466-93f7-801cd617b0d1","2db41cd9-c898-4f59-b704-3042c0d87f45","a1b78a21-a304-482b-8ce5-f612d95d44fe","8ce08850-085e-4954-a2f0-16acfb8dce23","63bd1ed9-b161-45fd-8734-85282bd945ec","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","8401cb26-91a3-4b46-941e-1c75790821eb","c8c22958-ec50-47f1-aedc-a131d7aeb442","dc541737-8bf2-4b31-b729-0352f696e82f","08c8700c-f278-42bc-812e-f60dc6ce996e"],"exports":{"designMdUrl":"/references/refero/b458ca1a-70f0-4f85-b745-f879a4d08457/design.md","tokensJsonUrl":"/references/refero/b458ca1a-70f0-4f85-b745-f879a4d08457/tokens.json","tailwindV4Url":"/references/refero/b458ca1a-70f0-4f85-b745-f879a4d08457/tailwind-v4.css","cssVariablesUrl":"/references/refero/b458ca1a-70f0-4f85-b745-f879a4d08457/tailwind-v4.css"}}