{"id":"f24daf3a-d43f-4dec-85a9-8ac1d5148a03","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/f24daf3a-d43f-4dec-85a9-8ac1d5148a03","originalSiteUrl":"https://vercel.com","capturedAt":"2026-04-29T00:17:50.092Z","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":"Vercel","summary":"Advanced schematic on white canvas — every element precisely placed, every line deliberate.","description":"Vercel's design embodies a technical precision, like an advanced schematic unfolded on a clean, bright canvas. The interplay of crisp, near-achromatic grays for backgrounds and text creates a serious, developer-focused atmosphere, punctuated by strategic accents of rich, vivid hues. Nearly-monochromatic elements and a tight typographic scale prioritize information density, while subtly rounded corners and soft drop shadows prevent the interface from feeling clinical. The overall impression is one of high performance and controlled complexity.","industry":"devtools","colorScheme":"light","colors":[{"name":"Cloud Canvas","hex":"#fafafa","role":"Page backgrounds, elevated surfaces like cards, modal backgrounds — the foundational white that ensures contrast.","group":"neutral"},{"name":"Storm Gray Wash","hex":"#f0fbff","role":"Subtle background for UI elements, hover states, or secondary container fill, providing a soft lift from the main canvas.","group":"neutral"},{"name":"Text Primary","hex":"#171717","role":"Primary text, prominent headings, solid button fills for main actions – the dominant dark shade on light backgrounds.","group":"neutral"},{"name":"Text Secondary","hex":"#4d4d4d","role":"Secondary text, descriptive paragraphs, helper text, and subtle icon fills; a softer contrast than Text Primary.","group":"neutral"},{"name":"Graphite Accent","hex":"#000000","role":"Observed in nav fill, icon fill, other stroke. Extracted usage does not support a distinct primary control color.","group":"neutral"},{"name":"Border Light","hex":"#ebebeb","role":"Observed in other borderColor, nav borderColor, card borderColor. Extracted usage does not support a distinct primary control color.","group":"neutral"},{"name":"Border Neutral","hex":"#666666","role":"Observed in nav borderColor, nav color, nav fill. Extracted usage does not support a distinct primary control color.","group":"neutral"},{"name":"Text Muted","hex":"#7d7d7d","role":"Less prominent text, captions, and disabled states; provides a low contrast for tertiary information.","group":"neutral"},{"name":"Sky Blue Accent","hex":"#52aeff","role":"Decorative highlights, very subtle background fills, borders in secondary contexts – a soft visual cue.","group":"accent"},{"name":"Vivid Crimson","hex":"#e5484d","role":"Decorative highlights and borders.","group":"accent"},{"name":"Vivid Teal","hex":"#45dec5","role":"Decorative highlights and borders.","group":"accent"},{"name":"Electric Blue","hex":"#0070f3","role":"Observed in nav borderColor, nav backgroundColor, nav color. Extracted usage does not support a distinct primary control color.","group":"accent"},{"name":"Conic Gradient","hex":"#eeca2d","role":"Hero section backgrounds, prominent visual accents – used to create dynamic, colorful focal points.","group":"brand","gradient":"conic-gradient(from 180deg at 50% 70%, rgba(250, 250, 250, 0) 0deg, rgb(238, 195, 45) 72deg, rgb(236, 75, 75) 144deg, rgb(112, 154, 185) 216deg, rgb(77, 255, 191) 288deg, rgba(250, 250, 250, 0) 360deg)"}],"typography":[{"role":"The primary typeface for all UI elements, headings, body text, and interactive components. Its distinct 'ss05' stylistic set contributes to the brand's unique typographic identity.","sizes":"12px, 13px, 14px, 16px, 18px, 20px, 24px, 32px, 40px, 48px","family":"Geist","weight":"400, 500, 600, 700","weights":["400","500","600","700"],"lineHeight":"1.00, 1.17, 1.20, 1.25, 1.33, 1.43, 1.50, 1.52, 1.56, 1.80","substitute":"Inter","letterSpacing":"-0.72, -0.65, -0.56, -0.32","fontFeatureSettings":"\"liga\", \"ss05\""},{"role":"Used for code snippets, technical information, and elements requiring fixed-width alignment, offering clarity and a distinct developer-centric feel.","sizes":"8px, 10px, 12px, 13px, 14px, 16px","family":"Geist Mono","weight":"400, 500, 600","weights":["400","500","600"],"lineHeight":"1.00, 1.20, 1.43, 1.54, 1.67","substitute":"SFMono-Regular","letterSpacing":"normal","fontFeatureSettings":"\"liga\""}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":-0.32},{"role":"body","size":14,"lineHeight":1.56,"letterSpacing":-0.32},{"role":"heading-sm","size":18,"lineHeight":1.43,"letterSpacing":-0.32},{"role":"heading","size":24,"lineHeight":1.33,"letterSpacing":-0.48},{"role":"heading-lg","size":32,"lineHeight":1.25,"letterSpacing":-0.65},{"role":"display","size":40,"lineHeight":1.2,"letterSpacing":-0.72},{"role":"display-lg","size":48,"lineHeight":1.17,"letterSpacing":-0.72}],"spacing":{"radius":{"large":"12px","pills":"100px","buttons":"9999px","default":"6px","minimal":"6px"},"elementGap":"12px","sectionGap":"48px","cardPadding":"12px"},"radius":{"large":"12px","pills":"100px","buttons":"9999px","default":"6px","minimal":"6px"},"shadows":{"surfaces":[{"hex":"#fafafa","name":"Cloud Canvas","level":0,"purpose":"Base page background and default container surface."},{"hex":"#f0fbff","name":"Storm Gray Wash","level":1,"purpose":"Subtle background for UI elements, hover states, or secondary container fill."},{"hex":"#ffffff","name":"Elevated Surface","level":2,"purpose":"Cards and interactive elements that require a distinct lift from the background with a subtle shadow."}]},"guidelines":{"do":["Use Geist font for all text elements with 'liga' and 'ss05' font feature settings enabled.","Apply #171717 for primary text content and #fafafa for page backgrounds to maintain strong contrast.","Round corners of all interactive elements like buttons and tags with `borderRadius: 9999px` for a continuous pill shape when content allows, or `borderRadius: 100px` for less extreme pill shapes.","Maintain a clear visual hierarchy using #171717 for headings and primary actions, and #4d4d4d for supporting text.","Introduce elements elevation using `box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 2px 2px 0px, rgb(250, 250, 250) 0px 0px 0px 1px` for cards and interactive components.","Use Electric Blue (#0070f3) exclusively for critical interactive states, active navigation, or significant accents.","Keep element spacing tight, using `12px` for gaps between related elements."],"dont":["Avoid using multiple chromatic colors for primary UI elements; reserve them for decorative highlights or specific branding.","Do not use generic system fonts; always utilize Geist and Geist Mono for maintaining brand consistency.","Refrain from heavy, diffused shadows; prefer crisp, subtle box shadows with minimal offset.","Do not use letter spacing on body or paragraph text; apply negative letter spacing only to display and larger headings as specified.","Avoid arbitrary border radii; stick to the defined 6px, 64px, 100px, or 9999px tokens.","Do not rely on opaque solid backgrounds for content cards when a transparent or border-defined card variant is more appropriate.","Do not use a large number of distinct background colors; focus on the primary `Cloud Canvas` and `Storm Gray Wash` neutrals."]},"components":[{"name":"Filled Primary Button","role":"Main call-to-action button, dark background, light text."},{"name":"Outlined Secondary Button Flexible","role":"Secondary action button, transparent background, dark text, flexible border radius."},{"name":"Outlined Muted Button","role":"Tertiary action button, transparent background, muted gray text and border, large pill radius."},{"name":"Ghost Button","role":"Low-prominence or navigation item button, dark text on transparent background."},{"name":"Elevated Content Card","role":"Primary content container, featuring a subtle shadow for depth."},{"name":"Transparent Card","role":"Simple content grouping without a background or shadow, relying on layout alone."},{"name":"Subtle Inset Card","role":"Card with minimal visual difference from the background, often used for form elements or groups."},{"name":"Text Input Minimal","role":"Basic text input field."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #171717\nbackground: #fafafa\nborder: #ebebeb\naccent: #0070f3\nprimary action: #171717 (filled action)\n\nExample Component Prompts:\n1. Create a primary call-to-action button: background #171717, text #ffffff, border-radius 100px, padding 0px 14px, using Geist font weight 400.\n2. Create a main page section: background #fafafa. Headline 'Build and deploy' using Geist font weight 700 at 48px, color #171717, letter-spacing -0.72px. Body text 'Vercel provides...' using Geist font weight 400 at 18px, color #4d4d4d.\n3. Create an outlined secondary button: transparent background, text color #000000, border 1px solid #000000, border-radius 64px, padding 0px 16px, using Geist font weight 400.\n4. Create an Elevated Content Card: background #ffffff, border-radius 6px, box-shadow rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px 0px, rgb(250,250,250) 0px 0px 0px 1px, padding 12px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421846591-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421846591-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f24daf3a-d43f-4dec-85a9-8ac1d5148a03-1777555762751-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f24daf3a-d43f-4dec-85a9-8ac1d5148a03-1777555762751-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f24daf3a-d43f-4dec-85a9-8ac1d5148a03-1777555762751-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/f24daf3a-d43f-4dec-85a9-8ac1d5148a03-1777555762751-preview-detail-poster.jpg"},"similarStyleIds":["50aa2b8e-4760-4379-a3c1-59b65d8576a7","b5fdba21-fd4d-427e-b551-1e22c51e42db","80d7ef36-ed7e-48bb-b558-f772eb40106f","7b083729-e694-4b66-82a3-befb08451722","8efa9029-b39c-48db-a8ec-c97c645a7a58","ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","e050061c-346d-44cc-92ba-6b22beb4a91f","1c1d3939-8d82-4907-aa3c-c9b2fcfbab4f","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","dfe5faa4-a108-45a8-a68c-ed19be2db766","48e5de76-05d5-4c4e-a269-c7c245b291ec","1b44386e-31a8-40b0-a577-27c088b51264","c3ceca5c-d329-4559-b947-016172941ba2","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","c14bfde7-6f08-4b54-bd9b-39989d10cfef","9cc537fc-97d8-4632-8703-f9aa296c2206","75fdb89f-ca64-41b3-af36-7a78bd09448e","12255b63-e506-4bc1-a4cd-d05487de32f3"],"exports":{"designMdUrl":"/references/refero/f24daf3a-d43f-4dec-85a9-8ac1d5148a03/design.md","tokensJsonUrl":"/references/refero/f24daf3a-d43f-4dec-85a9-8ac1d5148a03/tokens.json","tailwindV4Url":"/references/refero/f24daf3a-d43f-4dec-85a9-8ac1d5148a03/tailwind-v4.css","cssVariablesUrl":"/references/refero/f24daf3a-d43f-4dec-85a9-8ac1d5148a03/tailwind-v4.css"}}