{"id":"ed10ae04-24ec-4e42-9bf2-ea12a4b58d67","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","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":"Clerk","summary":"Developer's Prism. A system that refracts a single beam of brand identity into two distinct light and dark spectrums for different audiences.","description":"This design system operates on a principle of duality, presenting a bright, airy marketing facade that transitions into a dark, technical core. The light theme uses expansive white space and a singular, arresting violet accent for calls-to-action, creating focus and clarity. The dark theme, used for feature showcases, creates depth and a high-tech feel not with shadows, but with layered near-black surfaces and subtle, glowing inset highlights, giving components a 'pressed-into-glass' look. Typography is dominated by the geometric precision of Geist, with tight negative tracking on headlines to feel dense and technical. The system's identity is this shift from open and inviting to focused and sophisticated.","tags":["dual-theme","developer-focused","violet-accent","technical","geometric-sans","gradient-aurora","dark-mode-ui","inset-shadow"],"industry":"devtools","colorScheme":"both","colors":[{"name":"Clerk Violet","hex":"#6c47ff","role":"Primary CTAs, active states, key highlights — a single sharp point of interaction against neutral backgrounds.","group":"brand"},{"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%)"},{"name":"Neon Cyan","hex":"#5de3ff","role":"Accent color for code syntax highlighting and occasional illustrative details.","group":"accent"},{"name":"Lemon Glow","hex":"#fff963","role":"Accent color used within gradients and for code syntax highlighting.","group":"accent"},{"name":"Error Red","hex":"#ef4444","role":"Error messages and destructive action indicators.","group":"semantic"},{"name":"White","hex":"#ffffff","role":"Light theme backgrounds, text on dark backgrounds and buttons.","group":"neutral"},{"name":"Paper","hex":"#f7f7f8","role":"Off-white background for subtle section differentiation on the light theme.","group":"neutral"},{"name":"Ash","hex":"#eeeef0","role":"Light borders and subtle UI rule lines.","group":"neutral"},{"name":"Slate","hex":"#d9d9de","role":"Default border color for inputs and UI dividers in the light theme.","group":"neutral"},{"name":"Graphite","hex":"#9394a1","role":"Secondary text, placeholders, and icon fills on light backgrounds.","group":"neutral"},{"name":"Tungsten","hex":"#747686","role":"Tertiary text and subtle metadata.","group":"neutral"},{"name":"Iron","hex":"#5e5f6","role":"Text color on dark cards, designed for a lower-contrast, glowing feel.","group":"neutral"},{"name":"Charcoal","hex":"#42434d","role":"Secondary dark button backgrounds.","group":"neutral"},{"name":"Onyx","hex":"#212126","role":"Card and component surfaces in the dark theme.","group":"neutral"},{"name":"Deep Space","hex":"#131316","role":"Primary text on light backgrounds, and the base background color for the dark theme.","group":"neutral"},{"name":"Black","hex":"#000000","role":"Display headlines and high-contrast primary text.","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.54},{"role":"body-sm","size":15,"lineHeight":1.53},{"role":"subheading","size":18,"lineHeight":1.56},{"role":"heading","size":20,"lineHeight":1.4},{"role":"heading-lg","size":32,"lineHeight":1.25,"letterSpacing":-0.48},{"role":"display","size":64,"lineHeight":1.12,"letterSpacing":-2.24}],"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."]},"components":[{"name":"Primary CTA Button Group","role":""},{"name":"Create Account Auth Card","role":""},{"name":"Dark Feature Cards Grid — Authentication","role":""},{"name":"Primary CTA Button","role":"The main call to action."},{"name":"Dark Secondary Button","role":"Secondary action in dark contexts."},{"name":"Light Ghost Button","role":"Tertiary action or nav link."},{"name":"Pill Tag","role":"A tag or small status indicator."},{"name":"Login Modal Card","role":"Container for authentication forms."},{"name":"Light Input Field","role":"Standard text input for forms."},{"name":"Logo Cloud Item","role":"Displays a partner or customer logo."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Text (Light BG):** `Deep Space (#131316)`\n- **Text (Dark BG):** `White (#ffffff)`\n- **Background (Light):** `White (#ffffff)`\n- **Background (Dark):** `Deep Space (#131316)`\n- **CTA Button:** `Clerk Violet (#6c47ff)`\n- **Border:** `Slate (#d9d9de)`\n\n### Example Component Prompts\n1.  **Hero Section:** \"Create a hero section with a centered layout. The background should use the 'Hero Aurora' radial 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%)`. Use 'geistNumbers' font. Main headline is 64px, weight 700, color Black (#000000), letter-spacing -2.24px. Sub-headline is 20px, weight 400, color Iron (#5e5f6e). Add a Primary CTA Button below.\"\n2.  **Primary CTA Button:** \"Create a button with text 'Start building for free'. Use 'geistNumbers' font, weight 500, size 16px, color White (#ffffff). The button background is Clerk Violet (#6c47ff) with a 6px border-radius and 12px 24px padding.\"\n3.  **Dark Feature Card:** \"Create a card with a 12px border-radius and 24px padding. The background color is Onyx (#212126). Add an inset highlight using this box-shadow: `rgba(255, 255, 255, 0.024) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.024) 0px 0px 0px 1px inset`. Card heading is 'geistNumbers', 18px, weight 500, color White (#ffffff). Body text is 'ui-sans-serif', 15px, weight 400, color Iron (#5e5f6e).\""}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929031515-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775929031515-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67-1777556523825-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67-1777556523825-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67-1777556523825-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67-1777556523825-preview-detail-poster.jpg"},"similarStyleIds":["408a149c-702f-4442-99df-bea49d9c0d9b","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","e050061c-346d-44cc-92ba-6b22beb4a91f","c3ceca5c-d329-4559-b947-016172941ba2","8e9e585f-5ad4-4273-8418-e1f82cdb51cf","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","f24daf3a-d43f-4dec-85a9-8ac1d5148a03","80d7ef36-ed7e-48bb-b558-f772eb40106f","7b083729-e694-4b66-82a3-befb08451722","c81d2be0-05b7-4755-8046-f2d19fbc448c","86541d12-7870-4d51-8c47-0880fdb1ea01","b8ba443e-5d83-4f37-b8c6-a1acd7623d0c","cc38369a-41e3-4bcd-b619-230ccffe7e8e","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","c14bfde7-6f08-4b54-bd9b-39989d10cfef","8eb9c53e-d69c-497a-b640-610856cf3a60","32845f27-6b24-48be-af25-8e664f826b30","4d4772a3-e1da-415f-a6d7-658dcefdcecd","66eb1c37-a8e5-4e6c-b17f-a75385b462e7"],"exports":{"designMdUrl":"/references/refero/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67/design.md","tokensJsonUrl":"/references/refero/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67/tokens.json","tailwindV4Url":"/references/refero/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67/tailwind-v4.css","cssVariablesUrl":"/references/refero/ed10ae04-24ec-4e42-9bf2-ea12a4b58d67/tailwind-v4.css"}}