# Clerk Soft Futurism 밝은 오프화이트 캔버스 위에 정제된 보라 브랜드 액센트와 부드러운 그라디언트·글로우를 얹은 개발자 인증 SaaS 스타일 — 새까만 헤딩과 은은한 미래감이 공존한다. - taxonomy: soft-futurism · soft-gradient, purple-accent, product-saas, developer-tool, high-contrast-heading, light-first, polished-ui, alternating-dark-sections · complexity=medium - page types: landing, marketing, app, docs - best for: 개발자·인증·API 프로덕트 랜딩 페이지, 폴리시된 SaaS 마케팅 사이트, 인증/온보딩 UI와 대시보드, 스타트업 브랜드 히어로 - avoid for: 따뜻한 종이 질감의 에디토리얼 사이트, 장난스러운 맥시멀리즘 소비자 앱, 고밀도 데이터 대시보드(색으로 위계를 만드는 경우), 럭셔리 세리프 브랜드 - provenance: website (Clerk | Authentication and User Management) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, effects=vision-inferred, light=computed-css, dark=vision-inferred ## Design rules # Clerk Soft Futurism ## Overview A light-first developer/SaaS aesthetic extracted from Clerk's marketing site. An off-white canvas carries near-black, tightly-tracked display headings, white cards, and a single refined purple brand accent. Gentle futurism lives in the details — soft pastel gradients on product cards, a low-opacity cyan/purple glow behind the hero, and near-black full-bleed sections stacked in rhythm against the light ones. Hierarchy comes from type size, weight, and brightness steps, not color. ## Colors & Roles Off-white `background` (oklch 0.976 / #f7f7f8) with pure-white `card` surfaces separated by a faint tonal step and a 1px hairline `border` (#d9d9de). `foreground` is a near-black (oklch 0.188 / #131316), used for the bold headings. The one chromatic brand color is a purple (`primary` = `accent` = `ring`, oklch 0.557 0.254 283.7 / #6c47ff) — measured as the hero CTA — reserved for primary buttons, focus rings, category labels, and emphasis. `muted-foreground` is a cool gray (#5e5f6e) for body/secondary text. Chart/status slots hold cyan (from the hero glow), red (destructive #ef4444), and green — signals only, never brand. Dark mode is authored on the measured near-black section background (#131316) with the measured dark border (#2f3037), keeping the same purple slightly brightened for contrast. ## Typography Rules One sans family, Suisse Int'l (Inter fallback), display included. Signature move: oversized headings with tight negative tracking — measured H1 64px / 700 / −1.6px ≈ −0.025em, applied to display and H1. Weights are the measured 400 body / 500 labels & small headings / 600 headings / 700 display. Body sits at 1rem / 1.6 line-height with neutral tracking. Mono (Soehne → JetBrains Mono) is for code, API snippets, and numeric badges only. Modular scale ≈ 1.25. ## Layout Principles Max content width ~1200px on a 12-column / 24px-gutter grid. Hero is centered — large heading, short subtext, purple CTA — then feature sections in a left-copy / right-product-mockup pattern. The defining structure is full-bleed sections alternating between light (off-white) and near-black. Vertical rhythm is large: section gaps `clamp(5rem, 10vw, 9rem)`. ## Depth & Elevation Soft, not flat. Floating surfaces (auth card, popovers, dropdowns) get layered low-opacity shadows (0 1px 3px + 0 5px 15px, ~8%). Section cards rely on 1px borders and tonal steps instead. Product cards and the hero carry soft pastel radial gradients and a low-opacity (~10–20%) cyan/purple aurora glow with a faint circuit-line pattern; the base background stays flat off-white. ## Shapes Medium radii: 8px on fields and buttons, 16px on cards and larger panels. Nav and pills go fully rounded (9999px). No sharp-corner rule — everything is gently rounded. ## Component Stylings - **Button**: primary = solid purple fill, white text, 8px radius, 14–15px / 500, padding ~11px 19px. Hover shifts fill one step + optional translateY(−1px). Focus = 2px purple ring, 2px offset. Secondary = white/transparent fill, 1px border, near-black text. Ghost = transparent nav link, muted→foreground on hover. - **Card**: white fill, 1px border, 16px radius, 24–32px padding, optional soft shadow. Demo/product cards may use pastel gradient backgrounds. - **Input**: white fill, 1px border, 8px radius, 10–12px padding; focus border → purple + 2px ring. - **Nav**: sticky, backdrop-blurred translucent white pill container with a thin border. Wordmark left, dropdown links center (muted → foreground), `Sign in` text + purple `Start building` pill right. - **Badge**: 8px or pill, 12–13px. Category labels use purple text; status badges tint chart colors (cyan/red/green) at ~10% with matching text. ## Motion Smooth and restrained: opacity fades + 8–12px slides, 150–250ms standard easing; hover does subtle background/border transitions and tiny translateY. Gradient glows drift slowly at low opacity. No bounce, spring overshoot, or heavy parallax. ## Responsive Behavior The 12-column grid collapses to a single column on mobile; display type scales via `clamp()`. Left-copy/right-mockup feature blocks stack vertically. The sticky pill nav condenses to a hamburger on narrow widths. ## Agent Prompt Guide > Build this in the 'Clerk Soft Futurism' style: light-first off-white canvas (#f7f7f8) with near-black headings, white cards, and a single purple brand accent (#6c47ff) for primary CTAs, focus rings, category labels, and emphasis. Suisse/Inter throughout with tight −0.025em tracking on large headings (weights 400/500/600/700). Medium radii (8px fields, 16px cards), thin 1px borders (#d9d9de), soft low-opacity shadows. Add pastel gradients on product cards and a low-opacity cyan/purple glow behind the hero; alternate light and near-black full-bleed sections. Cyan/red/green are status signals only. Restrained fades, no bounce. Author a dark mode on near-black (#131316) keeping the purple. ## Known Gaps / Confidence Colors, typography metrics, and radii are `computed-css` (measured, light mode). Color-role assignment, taxonomy, motion, layout, and effects are `vision-inferred` from the screenshots. **Family judgment call:** Clerk blends `corporate-clean` structure (high-contrast black headings, clean white marketing layout) with genuinely soft-futurist accents (purple brand, pastel gradients, cyan/purple hero glow, circuit pattern, alternating dark sections). `soft-futurism` was chosen as the honest primary because those gradient/glow/purple traits are the site's distinguishing signature; a `corporate-clean` reading is defensible. The site had **no native dark mode** — the dark set is synthesized from the measured near-black section (#131316) and dark border (#2f3037), so treat dark tokens as approximate. Fonts (Suisse Int'l, Soehne Mono) are commercial; Google-Fonts fallbacks (Inter, JetBrains Mono) are the practical reproduction defaults. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Clerk Soft Futurism — theme.css (generated, do not edit) */ :root { --radius: 16px; --radius-selector: 8px; --radius-field: 8px; --font-sans: "Suisse Int'l", "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Soehne Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --font-display: "Suisse Int'l", "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --spacing: 8px; --shadow: 0px 5px 15px 0px color-mix(in oklab, oklch(0.188 0.006 285.8) 8%, transparent); --ks-display-weight: 700; --ks-display-tracking: -0.025em; --background: oklch(0.976 0.001 286.4); --foreground: oklch(0.188 0.006 285.8); --card: oklch(1 0 0); --card-foreground: oklch(0.188 0.006 285.8); --popover: oklch(1 0 0); --popover-foreground: oklch(0.188 0.006 285.8); --primary: oklch(0.557 0.254 283.7); --primary-foreground: oklch(0.99 0.002 286); --secondary: oklch(0.955 0.002 286.4); --secondary-foreground: oklch(0.311 0.013 279.2); --muted: oklch(0.965 0.002 286.4); --muted-foreground: oklch(0.490 0.024 282.5); --accent: oklch(0.557 0.254 283.7); --accent-foreground: oklch(0.99 0.002 286); --destructive: oklch(0.637 0.208 25.3); --destructive-foreground: oklch(0.99 0.002 286); --border: oklch(0.887 0.007 286.3); --input: oklch(0.887 0.007 286.3); --ring: oklch(0.557 0.254 283.7); --chart-1: oklch(0.557 0.254 283.7); --chart-2: oklch(0.700 0.130 214.0); --chart-3: oklch(0.637 0.208 25.3); --chart-4: oklch(0.650 0.160 160.0); --chart-5: oklch(0.490 0.024 282.5); } .dark { --background: oklch(0.188 0.006 285.8); --foreground: oklch(0.970 0.002 286.4); --card: oklch(0.221 0.008 285.5); --card-foreground: oklch(0.970 0.002 286.4); --popover: oklch(0.240 0.008 285.5); --popover-foreground: oklch(0.970 0.002 286.4); --primary: oklch(0.620 0.235 283.7); --primary-foreground: oklch(0.99 0.002 286); --secondary: oklch(0.270 0.009 285.0); --secondary-foreground: oklch(0.900 0.004 286.4); --muted: oklch(0.250 0.008 285.0); --muted-foreground: oklch(0.670 0.019 282.4); --accent: oklch(0.620 0.235 283.7); --accent-foreground: oklch(0.99 0.002 286); --destructive: oklch(0.650 0.200 25.3); --destructive-foreground: oklch(0.99 0.002 286); --border: oklch(0.311 0.013 279.2); --input: oklch(0.311 0.013 279.2); --ring: oklch(0.620 0.235 283.7); --chart-1: oklch(0.620 0.235 283.7); --chart-2: oklch(0.760 0.130 214.0); --chart-3: oklch(0.700 0.190 25.3); --chart-4: oklch(0.720 0.150 160.0); --chart-5: oklch(0.670 0.019 282.4); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

User authentication

More than authentication.

Full-stack auth and user management — so you can launch faster, scale easier, and stay focused on building your business.

Start building for free Build with agents

Pixel-perfect UIs

Drop-in components for authentication and profile management, embedded in minutes.

Multi-tenancy

Onboard organizations and manage roles and permissions out of the box.

B2B ready

Subscription billing

Add subscriptions to your B2C or B2B app without custom UI or webhook wrangling.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/clerk.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `