Sequence

Sequence maintains a developer-centric aesthetic with a bright, spacious canvas that contrasts sharply with structured, card-based content. A cool-toned purple gradient defines its brand identity, appearing as accents and functional elements that draw attention. Typography is direct and legible, supporting a system built for clarity and quick information processing. Components are lightweight with subtle shadows, prioritizing functionality over heavy ornamentation. Prioritize Canvas White (#ffffff) as the dominant background color for most page areas and content cards. Use Deep Space Gradient (linear-gradient(to right in oklab, rgb(108, 0, 246) 0%, rgb(79, 70, 229) 100%)) for primary calls-to-action to highlight interactive elements. Apply a 20px border-radius consistently to all content cards to maintain a soft, approachable aesthetic. Implement the subtle shadow oklab(0.554391 -0.00887066 -0.039739 / 0.1) 0px 0px 24px 0px for cards to provide minimal depth and separation. Utilize Inter font family for all text elements, leveraging its various weights (400, 500, 600, 700) to establish clear typographic hierarchy. Maintain a default element gap of 8px to ensure comfortable spacing between interactive components and text blocks. Use Outline Gray (#e5e7eb) for all neutral borders and dividers to maintain a light and crisp interface. Avoid using highly saturated colors for large background areas; reserve them for accents, icons, and illustrations only. Do not deviate from the Inter font family; introducing other typefaces will disrupt the established visual identity. Do not apply heavy or complex shadows; the design system favors subtle elevation for cards and components. Avoid arbitrary border-radius values; stick to the defined 8px for buttons and 20px for cards to maintain shape consistency. Do not clutter layouts with dense information; maintain comfortable spacing with a 40px section gap and 8px element gap. Do not use dark-themed backgrounds on Canvas White (#ffffff) unless for a dedicated, high-contrast section like the Dark Overlay Gradient (linear-gradient(to right bottom in oklab, rgb(50, 30, 72) 0%, rgb(28, 16, 43) 100%)). Avoid decorative gradients on text; gradients are reserved for larger background elements and interactive components.