Clerk

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. 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. 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.