Relume

Relume uses a productivity-focused design vocabulary, built on a light, airy canvas with soft, rounded surfaces. Typography is compact and precise, maintaining clarity even at smaller scales. A vibrant purple serves as the primary accent, signaling interactive elements and brand presence against an otherwise subtle neutral palette. Components are lightweight with minimal elevation, emphasizing functionality over heavy visual ornamentation, often featuring a blend of pixel and percentage units for fluid responsiveness. Prioritize Relume's Primary Purple (#6248ff) for all key interactive elements, including primary CTA buttons and critical icons. Use Charcoal Text (#161616) as the default for all headings and primary body content, ensuring high readability. Apply a consistent 16px border-radius to all card-like surfaces and larger content containers. Maintain a clear visual hierarchy using the typography scale, with Relative Faux 96px for display and Relative 56px for primary headlines, employing their specified negative letter-spacing. Employ the Canvas (#f1f0ee) for primary page backgrounds, contrasting with Surface White (#ffffff) for card and elevated component backgrounds. Use the predefined soft shadow (rgba(0, 0, 0, 0.08) 0px 8px 10px -4px, rgba(0, 0, 0, 0.05) 0px 2px 10px 2px) selectively for cards and key components to provide subtle depth. Structure page sections with a vertical spacing of 80px for ample breathing room. Avoid introducing new primary colors; limit the palette to the defined brand and neutral tones. Do not use sharp 0px corners on interactive elements or cards, as the design uses rounded edges (8px or 16px) consistently. Do not vary letter-spacing for body text; apply negative tracking only to large headings and display text as specified. Avoid heavy or complex gradients for backgrounds of primary interactive elements; reserve them for decorative elements or specific brand moments. Do not use dark gray or black as primary background colors; the system is fundamentally light-themed. Do not overload pages with excessive box shadows, as the system relies on subtle elevation for focal elements. Avoid using default system fonts; always specify 'Relative' or 'Relative Faux' (with Inter as a substitute) for all text elements.