
Preview image. Unlock full-res
Analytical canvas vibrant spectrum
The Visitors design system employs a crisp, analytical aesthetic with a playful edge. It balances substantial negative space and achromatic surfaces with a vibrant, gradient-infused purple as its primary brand color, punctuated by a suite of vivid secondary accents. Typography is compact and precise, maintaining readability while maximizing information density. Interactive elements often manifest as ghost buttons or subtle, rounded containers, giving a lightweight feel until the accent color 'switches on' for primary actions. The pervasive use of rounded corners softens the otherwise direct, functional presentation.
Use Radiant Violet (#918df6) exclusively for primary action backgrounds and brand-aligned interactive elements; avoid using it for decorative purposes.
Apply OpenRunde with specific letter-spacing values: -0.013em for 48px headlines, scaling down to -0.05em for 12px caption text.
Maintain comfortable visual distance between elements using a base unit of 4px; common elementGap is 16px, and cardPadding is 16px.
Utilize 1.67772e+07px (effectively 9999px) border-radius for all pill-shaped buttons and tags to create a consistent soft, rounded edge.
Implement the soft box shadow rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px sparingly for interactive buttons.
Use Slate Ink (#181925) for all high-contrast, structural text, including main headings and primary body content, ensuring readability on light backgrounds.
Separate sections with a substantial 64px vertical sectionGap unless content dictates a continuous flow.
Do not use saturated colors for large background areas or extensive text; reserve them for accents and actionable components.
Avoid sharp corners; ensure all interactive elements and content containers have a minimum border-radius of 8px.
Do not introduce new typefaces; OpenRunde is the sole family for all textual content.
Do not use heavy, opaque shadows; leverage the prescribed subtle shadows for depth or rely on background color changes for hierarchy.
Do not clutter layouts; prioritize negative space and clear visual hierarchy on a bright, minimalist canvas.
Do not apply letter-spacing: normal to display or large heading sizes; always use the specified negative tracking for OpenRunde.
Do not use multiple instances of distinct purple hues for primary actions; Radiant Violet (#918df6) is the definitive choice for filled buttons.









