Sequence

Sequence establishes a sunlit, architectural clarity with a predominant white canvas, delicate grays, and precise monochrome elements. Subtle background gradients add depth without overwhelming the product's clean functionality. Typography is compact and confident, grounding the interface with a technical yet approachable feel. The visual system emphasizes functional directness, using soft elevation and a single, vivid violet accent for key interactions and brand highlights. Use twkLausanne font family for all body text, navigation, and most headings, employing its various weights to establish visual hierarchy. Apply moderatSerif for signature large display headings between 40px and 46px at weights 300 or 400 with -0.0250em letter spacing. Reserve Sequence Violet (#a565ff) exclusively for primary calls to action, brand highlights, and decorative icon accents. Implement Canvas White (#ffffff) as the dominant background for all major sections and elevated cards to maintain an airy, expansive feel. Define UI element borders with Stone Grey (#e5e7eb) at 1px thickness for a delicate, crisp separation. Apply a 9999px border-radius to all buttons for a friendly, pill-shaped aesthetic. Employ Cloud Gray (#f7f7f7) for subtle background shifts to differentiate sections without heavy visual dividers. Avoid using multiple accent colors; keep Sequence Violet (#a565ff) as the singular chromatic highlight for interactive elements. Do not introduce strong, opaque background gradients on interface elements, instead opt for subtle, near-transparent washes or blurred effects. Do not use heavy, dark drop shadows; maintain a light elevation style with minimal offset and transparency, referencing the existing shadow tokens. Refrain from using excessively bold weights for body text; prioritize clarity and a compact information display with twkLausanne at weights 400 or below. Do not deviate from the established spacing scale; maintain a compact density, relying on 4px and 8px increments for element gaps and small paddings. Avoid sharp, angular corners on cards; use 8px or 16px radius to align with the slightly softer visual style. Do not introduce complex color patterns or highly saturated hues outside of the defined brand and accent colors.