CaptionShroud Design System

Overview

CaptionShroud's authentication interface presents as a cinematic dark-mode environment where depth is achieved not through layered backgrounds but through controlled elevation of surfaces against a void-like canvas ({colors.canvas}). The visual language is restrained yet intentional: an electric cyan ({colors.primary}) appears exactly once per view—the primary CTA—creating a voltage point that draws the eye unerringly toward the conversion action. Everything else exists in a grayscale spectrum of whites at varying opacities, allowing typography weight to carry almost all hierarchical responsibility.

The typeface, Inter via Plus Jakarta Sans fallback, operates across a narrow band of sizes (11–17px in this view) with weight doing the heavy lifting: {typography.display-lg} lands at 700 weight for headings while body text settles into a neutral 400. This creates a system that feels modern without being loud—a tool aesthetic appropriate for an AI video captioning product that positions itself as professional infrastructure rather than consumer entertainment.

Shape language defaults to {rounded.DEFAULT} (6px radius), applied uniformly across inputs, buttons, and the main auth card itself (which graduates to {rounded.lg}). The overall impression is of a polished SaaS utility: no gratuitous decoration, no gradient hero bands, just clear information architecture floating in controlled darkness.

Key Characteristics

• Dark-first canvas ({colors.canvas} — #26262b) with elevated card surface ({colors.surface-elevated})
• Single brand voltage point: electric cyan CTA ({colors.primary} — #00d4ff)
• Inter typeface carrying hierarchy through weight differentiation, not size explosions
• Consistent {rounded.DEFAULT} radius language across all interactive elements
• Multi-layered box shadows creating tactile elevation on the {component.auth-card}
• Opacity-based text hierarchy: {colors.muted} at 65%, {colors.muted-tertiary} at 41%
• Clerk-powered auth componentry with custom theming
• Subtle {colors.hairline} borders (11% white) defining input boundaries without harshness
• 200ms transition timing across all interactive states

Colors

Brand & Accent

• Primary ({colors.primary} — #00d4ff): Electric cyan used exclusively on the primary action button ({component.button-primary}) and its associated focus ring/glow effects.
• Primary Active ({colors.primary-active} — #00b8e0): Darkened cyan for pressed/active states on the primary button.
• Primary Glow ({colors.primary-glow} — rgba(0, 212, 255, 0.15)): Ambient glow effect for decorative emphasis around the brand color (observed in button shadow layering).

Surface

• Canvas ({colors.canvas} — #26262b): The page-level background—a cool dark gray that reads as nearly black but retains warmth.
• Surface Elevated ({colors.surface-elevated} — #212126): The main authentication card background, slightly darker than canvas to create lift through value contrast.
• Surface Deep ({colors.surface-deep} — #09090b): Deepest surface tone, used for extreme background contexts or nested panels.
• Surface Input ({colors.surface-input} — #26262b): Input field fill matching the canvas, creating visual continuity between page and form controls.
• Surface Overlay ({colors.surface-overlay} — rgba(255, 255, 255, 0.07)): Subtle white tint for hover states on transparent-background elements like ghost buttons and social sign-in options.

Text

• Ink ({colors.ink} — #ffffff): Pure white for primary headings and high-emphasis text.
• Body ({colors.body} — #010101): Near-black, used for text rendered on the primary cyan button (max contrast).
• Muted ({colors.muted} — rgba(255, 255, 255, 0.65)): Standard secondary text—subtitles, descriptions, placeholder content.
• Muted Secondary ({colors.muted-secondary} — rgba(255, 255, 255, 0.62)): Tertiary text for social button labels ("Continue with Google").
• Muted Tertiary ({colors.muted-tertiary} — rgba(255, 255, 255, 0.41)): Quaternary text for utility elements like password toggle icons and footer attribution.
• On Primary ({colors.on-primary} — #000000): Black text for legibility atop the cyan primary button.
• Link ({colors.link} — #00d4ff): Cyan-colored inline links (sign-up prompt), matching the brand primary.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.11)): Default border for input fields and structural dividers—visible but never harsh.
• Hairline Strong ({colors.hairline-strong} — rgba(255, 255, 255, 0.15)): Emphasized border variant for focus states or highlighted containers.
• Border Subtle ({colors.border-subtle} — rgba(255, 255, 255, 0.07)): Faintest boundary, used in shadow compositions and minimal separators.

Semantic

• Error ({colors.error} — #ef4444): Red for validation failures and destructive actions (not observed in screenshot, inferred).
• Success ({colors.success} — #22c55e): Green for confirmation states (not observed, standard semantic assignment).
• Warning ({colors.warning} — #f59e0b): Amber for caution states (not observed, standard semantic assignment).

Typography

Font Family

The entire interface relies on Inter (with "Plus Jakarta Sans" as the immediate fallback, then system sans-serif). This is a geometric humanist sans-serif optimized for screen rendering at small sizes, chosen here for its excellent legibility at the 11–13px range that dominates this auth flow. The font stack includes multiple weight imports (300–800) from Google Fonts, though this particular view only exercises weights 400 (body), 500 (buttons/labels), and 700 (headings). A notable inclusion in the font loading list is Instrument Serif Italic, which suggests the broader brand may employ serif accents in marketing surfaces—even though this auth modal stays strictly sans-serif.

Inter plays both headline and body roles; there is no contrasting display face within this component scope.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 24px | 700 | 1.3 | -0.01em | Page-level titles (not present in this auth view, reserved for landing pages) | | {typography.display-lg} | 17px | 700 | 1.41 | 0 | Auth card heading ("Sign in to Caption Shroud") | | {typography.title-md} | 15px | 600 | 1.4 | 0 | Section titles in multi-step flows (inferred) | | {typography.body-md} | 13px | 400 | 1.38 | 0 | Body copy, subtitles, placeholder text | | {typography.body-sm} | 12px | 400 | 1.4 | 0 | Secondary metadata, small links | | {typography.caption} | 11px | 400 | 1.36 | 0 | Divider labels ("or"), footer attribution | | {typography.button} | 13px | 500 | 1.25 | 0 | All button labels, CTAs | | {typography.label} | 13px | 500 | 1.38 | 0 | Form field labels ("Email address") |

Principles

The typography system demonstrates remarkable restraint. With only a 6-pixel spread between the largest text in view (17px heading) and the smallest (11px caption), hierarchy is communicated almost entirely through weight and color. The heading at {typography.display-lg} is bold (700) and pure white, while the subtitle beneath it drops to regular weight (400) and 65% white opacity—that combination creates sufficient separation without inflating the heading size beyond what feels comfortable in a centered modal.

Button text sits at the same 13px size as body copy but bumps to medium weight (500), giving it a micro-distinction that reads as "interactive" without requiring larger tap targets. Form labels use the same treatment (13px/500), establishing a visual kinship between labels and buttons as "interface chrome" versus "content."

No uppercase transformations are applied anywhere in this view. Letter spacing remains at normal (0) across the board, indicating trust in Inter's native metrics. The only negative letter-spacing is reserved for the hypothetical {typography.display-xl} (24px) role, where -0.02em would tighten large headlines—standard practice not exercised in this compact auth context.

Note on Font Substitutes

Inter is freely available via Google Fonts under the SIL Open Font License. No proprietary substitution is required. If Inter must be swapped, DM Sans offers the closest geometric-humanist match at comparable weights. Define the substitution via CSS variable:

--font-sans: 'Inter', 'Plus Jakarta Sans', 'DM Sans', system-ui, -apple-system, sans-serif;

Layout

Spacing System

• Base unit: 4px (all spacing tokens derive from multiples of 4).
• Tokens: {spacing.xxs} (4px — icon gaps, tight internal padding), {spacing.xs} (6px — button vertical padding, input padding), {spacing.sm} (8px — minor gaps between related elements), {spacing.md} (12px — standard element gap, button horizontal padding), {spacing.lg} (16px — section-internal gaps), {spacing.xl} (24px — major group separation), {spacing.xxl} (32px — block-level separation like subtitle-to-form distance), {spacing.section} (40px — outer margins), {spacing.card-padding} (68px — horizontal padding inside the auth card).
• Section padding (vertical): {spacing.section} — used as minimum breathing room around the centered card.
• Card internal padding: {spacing.card-padding} horizontal, variable vertical stacking via {spacing.md} through {spacing.xxl} depending on element proximity.
• Gutters: Not grid-based; this layout uses flexbox centering with the card auto-margined. Internal gutter between form groups is {spacing.lg}.

Grid & Container

This authentication view does not employ a traditional grid system. Instead, it follows a centered single-column modal pattern: the {component.auth-card} is horizontally centered via flex items-center justify-center on the viewport, with a max-width constrained implicitly by its content (approximately 420px visible width). The page container allows up to 1440px width but the auth card floats independently of that constraint.

For the broader CaptionShroud product (editor surfaces implied by URL structure), expect a transition to a 12-column grid or dashboard-style panel layout—but those surfaces are outside this spec's scope.

Whitespace Philosophy

Whitespace in this auth flow is generous vertically, constrained horizontally. The card enjoys 68px of horizontal padding (creating a wide, breathable interior), while vertical rhythm alternates tightly between closely-related elements (label-to-input: {spacing.xs}) and loosely between distinct sections (subtitle-to-social-button: {spacing.xxl}). The overall feeling is one of calm spaciousness—not airy editorial whitespace, but deliberate "room to think" spacing appropriate for a credential-entry task.

Header Architecture

This view contains no top navigation header—it is a standalone auth modal. For reference, if a nav were present in the broader product, it would likely follow this pattern:

[Logo]                    [Menu Items]              [User/Settings]

Hero Section

Not applicable—this is an authentication modal, not a landing page. The equivalent "hero" area is the auth card itself:

+-----------------------------------------------------+
|                                                     |
|            Sign in to Caption Shroud                 |  <- {component.auth-header}
|     Welcome back! Please sign in to continue         |  <- {component.auth-subtitle}
|                                                     |
|      [G]  Continue with Google                      |  <- {component.button-google-signin}
|                                                     |
|                  — or —                              |  <- {component.divider-or}
|                                                     |
|          Email address                               |  <- {component.form-label}
|   +---------------------------------------+         |
|   | Enter your email address               |         |  <- {component.text-input}
|   +---------------------------------------+         |
|                                                     |
|        [  Continue ▸  ]                             |  <- {component.button-primary}
|                                                     |
|     Don't have an account?  Sign up                 |  <- {component.link-signup}
|                                                     |
|        Secured by Ⓒ clerk                           |  <- {component.footer-attribution}
|                                                     |
+-----------------------------------------------------+

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, solid {colors.canvas} | Page background | | 1 — Input | {extensions.shadows.input-default} — subtle dark drop + hairline ring | Text inputs, focused elements | | 2 — Button Secondary | {extensions.shadows.button-secondary} — hairline border + micro-drop | Social sign-in, ghost buttons | | 3 — Card Modal | {extensions.shadows.card-modal} — layered dark shadows + hairline ring | Auth card container | | 4 — Button Primary | {extensions.shadows.button-primary} — cyan glow ring + inset highlight + dual drop | Primary CTA button | | 5 — Focus Ring | {extensions.shadows.focus-ring} — double hairline glow | Any element receiving keyboard focus |

The elevation philosophy here is layered realism with a dark-mode twist. Unlike light-mode systems that use opaque drop shadows to suggest objects floating above white surfaces, CaptionShroud's dark theme employs semi-transparent black shadows combined with white hairline rings (the 0px 0px 0px 1px rgba(255,255,255,x) construction). This technique ensures edges remain visible against dark backgrounds while still conveying physical separation. The primary button adds a cyan-tinted ring that matches its background color, creating a "glowing edge" effect unique to the brand moment.

Shadows are cool-toned (black-based, no warm brown tints), consistent with the blue-gray character of {colors.canvas}.

Decorative Depth

No gradient washes, noise textures, or photographic backgrounds appear in this view. All depth is achieved through the shadow/ring system described above. If the broader brand uses gradient hero treatments (common in AI-tool marketing), those would exist outside this auth component's scope.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Tight corners for badges, tags (not observed, available for extension) | | {rounded.DEFAULT} | 6px | Standard radius: inputs, buttons, toggle areas | | {rounded.md} | 8px | Medium rounding for cards in denser layouts (available) | | {rounded.lg} | 12px | Large rounding: the main auth card container | | {rounded.pill} | 9999px | Fully rounded: avatar circles, status pills (available) |

The shape vocabulary is intentionally limited. Every interactive element shares the same {rounded.DEFAULT} 6px radius, creating visual cohesion. Only the containing card breaks from this with a more generous 12px curve, signaling its role as a "container" rather than a "control." There are no sharp-right-angle elements in this interface—everything has some softening.

Photography Geometry

Not applicable to this authentication view. No images, avatars, or illustrations appear in the captured surface.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Authentication Container

{component.auth-card} — The central modal container housing all sign-in content. Background {colors.surface-elevated}, rounded {rounded.lg}, padded generously at {spacing.card-padding} horizontally. Carries the heaviest shadow treatment ({extensions.shadows.card-modal}) to float visibly above {colors.page-canvas}. This component establishes the visual boundary of the authentication interaction zone.

{component.page-canvas} — The full-viewport background layer behind the card. Background {colors.canvas} with {spacing.section} padding ensuring the card never touches viewport edges. Uses flexbox centering to position the auth card.

Typography Elements

{component.auth-header} — The "Sign in to Caption Shroud" heading. Pure {colors.ink}, set in {typography.display-lg} (17px/700 weight). Centered alignment, with {spacing.md} bottom margin separating it from the subtitle. This is the only bold-weight text in the view and serves as the primary visual anchor.

{component.auth-subtitle} — "Welcome back! Please sign in to continue." Set in {typography.body-md} at {colors.muted} (65% white). Provides context without competing with the header. Generous {spacing.xxl} margin below pushes the first interactive element (Google button) into clear territory.

{component.form-label} — Field labels like "Email address." Weight 500 ({typography.label}), pure white, positioned {spacing.xs} above their associated input. Small but deliberate weight bump distinguishes labels from placeholder text.

{component.divider-or} — The "— or —" separator between social and email sign-in paths. Rendered in {typography.caption} (11px) at {colors.muted} opacity, centered with {spacing.lg} vertical padding on each side. Likely implemented as a flex row with pseudo-element lines on either side.

{component.footer-attribution} — "Secured by Ⓒ clerk" at the card bottom. Smallest text in view ({typography.caption}, {colors.muted-tertiary} at 41% opacity), communicating security trust signals without drawing attention.

Buttons

{component.button-google-signin} — The "Continue with Google" social authentication option. Transparent background with {colors.muted-secondary} text. Rounded {rounded.DEFAULT}, padded {spacing.xs} {spacing.md}. Shadow {extensions.shadows.button-secondary} provides the hairline border definition. Contains a Google (G) icon (custom SVG or image) alongside text. On active/pressed state, transitions to {component.button-google-signin-active} with {colors.surface-overlay} background and full-white text.

{component.button-primary} — The "Continue ▸" submit button. Background {colors.primary} (electric cyan), text {colors.on-primary} (black for maximum contrast). Same dimensions as the Google button but visually dominant due to saturated color. Shadow {extensions.shadows.button-primary} is a complex four-layer composition: a 1px cyan ring matching the background, an inset white highlight simulating a glossy top-edge, plus two drop shadows at different blur radii for realistic depth. Includes a right-arrow/triangle icon (▸) after the label text. Active state ({component.button-primary-active}) darkens to {colors.primary-active}. Disabled state ({component.button-primary-disabled}) reduces opacity significantly.

{component.button-icon-ghost} — Utility button for password visibility toggle (eye icon). Transparent background, {colors.muted-tertiary} text (barely visible until interacted), sized at 28px square. Absolutely positioned over the right side of password inputs. Active state reveals with {colors.surface-overlay} background.

Inputs & Forms

{component.text-input} — Standard text/email input field. Background {colors.surface-input} matching canvas, {colors.ink} text, rounded {rounded.DEFAULT}. Padding {spacing.xs} {spacing.md}. Border is defined entirely via shadow ({extensions.shadows.input-default}) rather than CSS border property—a 1px hairline ring plus two subtle dark drop layers. Placeholder text inherits {colors.muted} opacity.

{component.text-input-with-icon} — Password input variant with modified right padding ({spacing.xs} {spacing.md} {spacing.xs} 40px) accommodating the {component.button-icon-ghost} toggle. Identical visual treatment otherwise. Focus state ({component.text-input-focus}) would enhance the ring opacity (transitioning from {colors.hairline} toward {colors.hairline-strong}).

Navigation & Links

{component.link-signup} — "Sign up" inline link in the "Don't have an account?" sentence. Color {colors.link} (matching primary cyan), set in {typography.body-sm}. Underlined on hover per convention. Active state shifts to {colors.primary-active}.

Toast/Notification System

{component.toast-container} — Observed in DOM as a Toastify section (React-Toastify library). Positioned fixed, carries notification toasts for auth errors/successes. Typography {typography.body-sm}. Specific styling of toast variants (error, success) not captured in static screenshot but would use {colors.error} / {colors.success} backgrounds respectively.

Do's and Don'ts

Do

• Use {colors.primary} exclusively for the single primary conversion action—never for headers, borders, or decorative elements.
• Maintain the {colors.muted} / {colors.muted-secondary} / {colors.muted-tertiary} opacity stack (65% → 62% → 41%) for all non-primary text; this creates the characteristic "dark-mode fade" hierarchy.
• Apply {extensions.shadows.button-primary}'s four-layer shadow composition to the primary button—it's the most distinctive depth treatment in the system.
• Keep the auth card at {rounded.lg} (12px) while all child controls stay at {rounded.DEFAULT} (6px)—this radius differential signals containment.
• Use {typography.button} (13px/500) for both button labels and form labels—they share the same "chrome" typographic voice.
• Center-align all content within the auth card; left-alignment should be reserved for the editor/dashboard surfaces outside this flow.
• Reserve {colors.on-primary} (pure black) for text rendered on the cyan button only—never use it elsewhere.
• Implement the Clerk attribution footer at reduced opacity ({colors.muted-tertiary}) when using Clerk authentication components.

Don't

• Don't introduce gradient backgrounds, rainbow accents, or neon glow effects beyond the primary button's existing shadow treatment—the brand voice is restrained utility, not cyberpunk.
• Don't increase heading size beyond {typography.display-lg} (17px) within the auth card—this modal lives in compact scale; save {typography.display-xl} for landing pages.
• Don't replace the shadow-defined borders with solid CSS border properties—the hairline-ring-via-box-shadow technique is essential for the soft-edge dark-mode aesthetic.
• Don't use {colors.link} for anything except inline navigation links (like "Sign up"); it should never serve as a UI control color.
• Don't add visible focus rings in a color other than {colors.hairline-strong} (or {colors.primary} for the button)—the double-hairline glow is the established focus language.
• Don't reduce the {spacing.card-padding} (68px) horizontal padding—the card's generous internal width is critical to its uncluttered feel.
• Don't mix font families within the auth flow—Inter handles every role; serif faces belong in marketing contexts only.

Motion & Animation

Transition Tokens

--transition-interactive: background-color 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, fill 0.2s ease, stroke 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
--transition-instant: background-color 0.1s ease, background 0.1s ease, border-color 0.1s ease, color 0.1s ease, fill 0.1s ease, stroke 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;
--transition-all: all;

Two explicit timing tiers were extracted: 200ms for standard interactive transitions (button presses, input focus) and 100ms for instant feedback states. Both use ease (equivalent to ease-in-out approximated). An all transition declaration was also detected on certain elements—this should be narrowed to specific properties in production to avoid performance pitfalls on composite-layer properties like box-shadow.

Keyframe Animations

• Toastify__bounceInRight — Toast notification entrance animation (slides in from right with bounce easing).
• Toastify__bounceOutRight — Toast exit animation (exits rightward).
• Toastify__zoomIn / ZoomOut — Alternative toast scale-based entrance/exit.
• animation-148r1a6 / animation-16i29iq — Unnamed animations (likely Clerk internal spinners or micro-loading states).

The presence of React-Toastify keyframes indicates a toast notification system is integrated. These animations follow a snappy, functional aesthetic—no slow cinematic fades, just purposeful 300-500ms entrances/exits with slight elastic overshoot.

Interaction Patterns

• Button press-down: Background color shift (transparent → {colors.surface-overlay} for secondaries; {colors.primary} → {colors.primary-active} for primary) with 200ms transition.
• Input focus: Shadow ring intensifies from 11% → ~18% white opacity, potentially accompanied by a subtle {colors.primary} tint on the ring for brand-aligned focus indication.
• Social button hover: Background fills with {colors.surface-overlay} (7% white), text brightens toward {colors.muted} or {colors.ink}.
• Password toggle: Ghost icon button reveals with opacity/color shift on hover/press.
• Toast notifications: Slide in from viewport edge with bounce easing, auto-dismiss after timeout with slide-out exit.

Imagery Style

• This authentication surface contains zero imagery—no photography, illustration, 3D renders, or gradient decorations.
• The broader CaptionShroud product (per meta description) involves video caption generation, suggesting the editor surfaces likely contain video preview thumbnails, timeline scrubbers, and possibly AI-generated style previews.
• Based on the dark-mode palette, any future imagery would likely adopt dark-background-first treatment: screenshots/videos with translucent dark overlays, or imagery composited directly onto {colors.canvas}-tone backgrounds.
• Brand logo (favicon referenced as /favicon.png) is presumably a wordmark or icon in {colors.ink} or {colors.primary} on transparent/dark ground.

Icon System

• Library: Custom SVG / Inline SVG (no external icon library detected in class names or font references).
• Specific icons observed:
  • Google "G" brand icon (inside {component.button-google-signin}) — colored (standard Google red/yellow/green/blue) or monochrome white version.
  • Right arrow/triangle (▸) — inside {component.button-primary} label, indicating continuation.
  • Eye / eye-off icon (implied) — inside {component.button-icon-ghost} for password visibility toggle.
  • Clerk lock/shield icon (Ⓒ) — inside {component.footer-attribution} before "clerk" text.
• Treatment: Icons appear to use currentColor for monochrome instances (arrow, lock), sized approximately 16–18px to align with 13px button text. The Google icon is exceptional as a branded multicolor asset.
• Alignment: Icons are vertically centered with adjacent text, with {spacing.sm} (8px) gap between icon and label in button contexts.

Recommended Frontend Stack

- Framework:      Next.js (App Router) or Remix — React-based, given Clerk + Toastify presence
- Styling:        Tailwind CSS v3/v4 (dark mode class strategy) or CSS Modules with CSS custom properties
- Fonts:          Inter via Google Fonts <link> tag or next/font (already loaded in source)
- Animation:      CSS transitions (documented above); Framer Motion for toast/auth transitions if needed
- Icons:          Custom SVG components (Lucide icons acceptable for utility icons if needed)
- Component lib:  Clerk Pre-built Components (React) for auth UI — heavily customized via theming props
- Notifications:  React-Toastify (detected in DOM)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Card expands to near-full-width, padding reduces, font sizes may stay same (already minimal) | | Tablet | 640–1024px | Card maintains fixed width (~420px), increased canvas padding | | Desktop | > 1024px | Current captured layout: centered card on expansive dark canvas | | Wide | > 1440px | Canvas may introduce maximum-width constraints |

Touch Targets

• {component.button-primary}: 36px height × ~220px width (full-width within card padding) — exceeds 44×44px WCAG AAA requirement comfortably in the width dimension; height is slightly under but acceptable for form-submit context.
• {component.button-google-signin}: 36px height × full card-content width — same dimension profile as primary.
• {component.text-input}: 36px height — meets minimum touch target for input fields.
• {component.button-icon-ghost}: 28px × 28px — below 44px recommendation; consider expanding to 36–40px for mobile touch accessibility, or ensuring adequate invisible hit-area expansion.

Collapsing Strategy

• Auth card: Maintains centered position at all breakpoints; horizontal padding may reduce from {spacing.card-padding} (68px) to {spacing.xl} (24px) on mobile to prevent excessive side margins.
• Form elements: Remain stacked vertically; no multi-column layout to collapse.
• Typography: Sizes are already minimal (11–17px); no further scaling down needed on small screens—this prevents illegibility.
• Footer attribution: May hide on very small screens or move below fold.
• Clerk components: Handle responsive behavior internally; test social-button icon+text stacking on <360px viewports.

Image Behavior

Not applicable to this authentication view. No responsive image considerations for the captured surface.

Iteration Guide

1. Build the authentication page using Next.js (or your React framework) with Tailwind CSS configured for dark mode strategy. Import Inter from Google Fonts via next/font/google or <link> tag.
2. Extract every color, font size, radius, and spacing value from this DESIGN.md's YAML frontmatter using the {section.token} path references. Never hard-code a hex or pixel value that has a defined token—for example, always use {colors.primary} instead of writing #00d4ff.
3. Implement state variants (hover, focus, active, disabled) as separate CSS classes or Tailwind variants, referencing the -active, -focus, and -disabled component entries in the frontmatter. The spec documents Default and Active/Pressed explicitly; infer hover from active patterns.
4. When extending the system beyond this auth view (landing pages, dashboard, editor surfaces), decide which sub-system you're designing for: Auth Dialect (this spec), Marketing Dialect (likely introduces {typography.display-xl}, gradients, imagery), or Editor Dialect (dense panels, timeline UI, video previews). Each dialect shares the core tokens but applies different component compositions.
5. New component variants live as separate top-level entries in components: (e.g., pricing-tier-card-featured)—never nest variants inside a parent entry.
6. Run npx @google/design.md lint DESIGN.md after any edits. Watch for broken-ref (token doesn't resolve), contrast-ratio (accessibility failure), and orphaned-tokens (defined but unused) warnings.
7. When in doubt about visual emphasis: weight before size (use bolder text rather than larger text for hierarchy), single brand color (only {colors.primary} gets saturation), and shadow-defined borders (use box-shadow for the hairline look, not border property).
8. Match the Clerk component library's customization API to these tokens—Clerk accepts elements theming objects that map closely to our CSS custom property structure.

Font Setup

/* In your global stylesheet or Tailwind config */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* If Instrument Serif is needed for marketing surfaces */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@1&display=swap');

:root {
  --font-serif: 'Instrument Serif Italic', Georgia, serif;
}

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover styles (background tints, shadow lifts) for buttons, links, and inputs are inferred from active states but not captured from the static screenshot.
• Loading/pending states: No spinner, skeleton, or disabled-intermediate state observed. Recommend adding a spinner using {colors.primary} or {colors.muted} at 50% opacity.
• Form validation states: Error message styling (red text, input border change, shake animation) not visible in the successful/sign-in-initiation state captured. Map to {colors.error} when implementing.
• Password strength indicator: Not present in email-only initial step; unknown whether subsequent steps (password creation) include strength meters.
• OAuth provider variations: Only "Continue with Google" observed; Apple, GitHub, or other social providers would need additional button variants following {component.button-google-signin} patterns.
• Multi-step flow transitions: This captures Step 1 (email entry) only. Subsequent steps (OTP verification, password entry, MFA setup) are not documented.
• Dark/light mode toggle: The system is dark-only in this view; unknown whether the broader product offers theme switching.
• Clerk-specific CSS variables: Several cl-internal-* class names were detected—these are Clerk's scoped internals and may conflict with custom theming if overridden carelessly.
• Exact shadow values for new components: The five shadow compositions extracted cover existing elements; novel components (dropdowns, modals, tooltips) will need new shadow derivations following the established "dark drop + white ring" formula.