{"id":"f24daf3a-d43f-4dec-85a9-8ac1d5148a03","name":"Vercel","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","colors":[{"name":"Cloud Canvas","hex":"#fafafa","role":"Page backgrounds, elevated surfaces like cards, modal backgrounds — the foundational white that ensures contrast.","group":"neutral","cssVariable":"--color-cloud-canvas"},{"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","cssVariable":"--color-storm-gray-wash"},{"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","cssVariable":"--color-text-primary"},{"name":"Text Secondary","hex":"#4d4d4d","role":"Secondary text, descriptive paragraphs, helper text, and subtle icon fills; a softer contrast than Text Primary.","group":"neutral","cssVariable":"--color-text-secondary"},{"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","cssVariable":"--color-graphite-accent"},{"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","cssVariable":"--color-border-light"},{"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","cssVariable":"--color-border-neutral"},{"name":"Text Muted","hex":"#7d7d7d","role":"Less prominent text, captions, and disabled states; provides a low contrast for tertiary information.","group":"neutral","cssVariable":"--color-text-muted"},{"name":"Sky Blue Accent","hex":"#52aeff","role":"Decorative highlights, very subtle background fills, borders in secondary contexts – a soft visual cue.","group":"accent","cssVariable":"--color-sky-blue-accent"},{"name":"Vivid Crimson","hex":"#e5484d","role":"Decorative highlights and borders.","group":"accent","cssVariable":"--color-vivid-crimson"},{"name":"Vivid Teal","hex":"#45dec5","role":"Decorative highlights and borders.","group":"accent","cssVariable":"--color-vivid-teal"},{"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","cssVariable":"--color-electric-blue"},{"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)","cssVariable":"--color-conic-gradient"}],"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\""}],"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."]}}