
Preview image. Unlock full-res
Codebase blueprint on frosted glass
Lightdash employs a precise, tech-forward aesthetic using a monochromatic palette punctuated by a single vibrant accent. Typography is a key identifier, balancing strong, impactful sans-serif headlines with clean, readable body text. Components favor soft curves and subtle elevation, appearing lightweight yet defined, maintaining a sense of digital clarity and focused productivity. The overall design feels robust and intelligent, reflecting its AI/BI platform nature. Use Electric Violet (#5e4cff) exclusively for primary calls-to-action and critical interactive highlights. Apply Britti Sans Trial Semibold for all primary headings, using the specified letter-spacing for each size. Maintain a clear visual hierarchy by limiting saturated colors to Electric Violet and its softer accent tints. Utilize Canvas White (#ffffff) as the dominant page background and primary card surfaces for visual breathability. Implement 8px border-radius for all buttons and 12px for cards to maintain consistent soft-edged elements. Differentiate UI surfaces using Charcoal Slate (#272835) for darker elements and Lava Cloud (#eceff3) for subtle background variations. Employ IBM Plex Mono for all code blocks or technical data displays to ensure typographic distinction and readability. Do not introduce new saturated hues outside of the established Electric Violet and its related accent shades. Avoid using drop shadows on functional UI elements unless it's a card from the 'Elevated Feature Card' component. Do not vary letter-spacing for Britti Sans headlines from the specified -0.025em for large sizes and -0.020em for smaller sizes. Never use generic system fonts for branding or primary content where Britti Sans or Inter are specified. Do not use Electric Violet (#5e4cff) for body text or large blocks of content; it is reserved for action and accent. Avoid excessive use of very dark backgrounds; the system leans heavily on light mode with dark neutral accents. Do not apply large, rounded corners (e.g., 20px) to anything other than the specific Elevated Feature Card and pill-shaped elements.









