{"id":"ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","name":"Clerk","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/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","originalSiteUrl":"https://clerk.com","capturedAt":"2026-04-11T17:38:21.939Z","colors":[{"name":"Clerk Violet","hex":"#6c47ff","role":"Primary CTAs, active states, key highlights — a single sharp point of interaction against neutral backgrounds.","group":"brand","cssVariable":"--color-clerk-violet"},{"name":"Hero Aurora","hex":"#6248f6","role":"Abstract background gradient for the hero section, creating a soft, ethereal atmosphere.","group":"brand","gradient":"radial-gradient(189.26% 126.1% at 49.27% 0%, rgba(108, 71, 255, 0) 10%, rgba(255, 249, 99, 0.15) 34%, rgba(98, 72, 246, 0.24) 67.53%, rgba(98, 72, 246, 0) 95.38%)","cssVariable":"--color-hero-aurora"},{"name":"Neon Cyan","hex":"#5de3ff","role":"Accent color for code syntax highlighting and occasional illustrative details.","group":"accent","cssVariable":"--color-neon-cyan"},{"name":"Lemon Glow","hex":"#fff963","role":"Accent color used within gradients and for code syntax highlighting.","group":"accent","cssVariable":"--color-lemon-glow"},{"name":"Error Red","hex":"#ef4444","role":"Error messages and destructive action indicators.","group":"semantic","cssVariable":"--color-error-red"},{"name":"White","hex":"#ffffff","role":"Light theme backgrounds, text on dark backgrounds and buttons.","group":"neutral","cssVariable":"--color-white"},{"name":"Paper","hex":"#f7f7f8","role":"Off-white background for subtle section differentiation on the light theme.","group":"neutral","cssVariable":"--color-paper"},{"name":"Ash","hex":"#eeeef0","role":"Light borders and subtle UI rule lines.","group":"neutral","cssVariable":"--color-ash"},{"name":"Slate","hex":"#d9d9de","role":"Default border color for inputs and UI dividers in the light theme.","group":"neutral","cssVariable":"--color-slate"},{"name":"Graphite","hex":"#9394a1","role":"Secondary text, placeholders, and icon fills on light backgrounds.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Tungsten","hex":"#747686","role":"Tertiary text and subtle metadata.","group":"neutral","cssVariable":"--color-tungsten"},{"name":"Iron","hex":"#5e5f6","role":"Text color on dark cards, designed for a lower-contrast, glowing feel.","group":"neutral","cssVariable":"--color-iron"},{"name":"Charcoal","hex":"#42434d","role":"Secondary dark button backgrounds.","group":"neutral","cssVariable":"--color-charcoal"},{"name":"Onyx","hex":"#212126","role":"Card and component surfaces in the dark theme.","group":"neutral","cssVariable":"--color-onyx"},{"name":"Deep Space","hex":"#131316","role":"Primary text on light backgrounds, and the base background color for the dark theme.","group":"neutral","cssVariable":"--color-deep-space"},{"name":"Black","hex":"#000000","role":"Display headlines and high-contrast primary text.","group":"neutral","cssVariable":"--color-black"}],"typography":[{"role":"The primary font for all headings and prominent UI text. Its geometric structure provides a technical, precise feel. The negative letter-spacing at display sizes is a signature choice, making headlines feel dense and authoritative.","sizes":"10px, 11px, 12px, 13px, 15px, 16px, 18px, 20px, 32px, 64px","family":"geistNumbers","weight":"400, 450, 500, 600, 700","lineHeight":"1.00, 1.12, 1.13, 1.23, 1.25, 1.33, 1.40, 1.45, 1.50, 1.53, 1.54, 1.56, 1.60, 1.64, 1.80, 1.82, 1.85","substitute":"Geist (Vercel)","letterSpacing":"-2.24px at 64px, -0.48px at 32px, normal at smaller sizes"},{"role":"Used for body copy and less prominent interface text where readability is prioritized over strong typographic character.","sizes":"10px, 11px, 12px, 13px, 16px, 17px","family":"ui-sans-serif","weight":"400, 500, 700","lineHeight":"1.27, 1.30, 1.33, 1.38, 1.40, 1.41, 1.45, 1.50, 1.82","substitute":"system-ui","letterSpacing":"-0.0100em, 0.0100em"},{"role":"A secondary sans-serif for UI components, likely within embedded widgets or third-party integrations.","sizes":"10px, 11px, 12px, 16px, 18px, 22px","family":"Inter","weight":"400, 500, 600, 700","lineHeight":"1.22, 1.27, 1.33, 1.40, 1.45, 1.50, 1.60, 1.64, 1.67, 1.82","substitute":"Inter (Google Fonts)"},{"role":"Monospace font for code snippets. The generous letter-spacing (0.1em) makes it feel open and clear.","sizes":"10px, 11px, 12px","family":"soehneMono","weight":"400, 500, 600","lineHeight":"1.33, 1.40, 1.45, 1.64, 1.82, 2.00","substitute":"Source Code Pro","letterSpacing":"+0.1em at all sizes"}],"spacing":{"radius":{"cards":"12px","pills":"9999px","inputs":"6px","buttons":"6px"},"elementGap":"","sectionGap":"96-128px","cardPadding":"24px","pageMaxWidth":"1280px"},"radius":{"cards":"12px","pills":"9999px","inputs":"6px","buttons":"6px"},"shadows":{"philosophy":"Elevation is achieved through two distinct methods, avoiding generic drop shadows. On light backgrounds, soft, multi-layered shadows create realistic depth. On dark backgrounds, elevation is inverted; components use subtle inset highlights (1px white at low opacity) to appear 'pressed in' or 'glowing from within', creating a sophisticated, technical surface texture."},"guidelines":{"do":["Use the dual theme structure: light for top-level marketing, dark for in-depth feature sections.","Apply negative letter-spacing to all `geistNumbers` headlines larger than 24px.","Reserve `Clerk Violet (#6c47ff)` exclusively for primary CTAs and interactive focus states.","On dark surfaces, use inset `box-shadow` with a subtle white color to create the signature 'pressed-in' highlight.","Use a `6px` radius for interactive elements like buttons and inputs, and a larger `12px` for container cards.","Maintain generous `96-128px` vertical spacing between page sections.","For dark theme cards, use `Onyx (#212126)` for the background and `Iron (#5e5f6e)` for text to achieve a lower-contrast, glowing effect."],"dont":["Don't use drop shadows in the dark theme; use inset highlights instead.","Don't apply `Clerk Violet` to large fields of color or body text.","Don't mix radii; stick to the `6px/12px/9999px` system.","Don't build pages using only one theme; the light/dark transition is a core part of the identity.","Don't use pure black (#000000) for dark theme backgrounds; use `Deep Space (#131316)` for the page background and `Onyx (#212126)` for cards.","Don't use photography; rely on UI mockups and abstract gradients.","Don't round the corners of top-level navigation, header, or footer containers."]}}