Better Stack

Better Stack employs a 'deep space console' aesthetic, built on a dark, near-black canvas layered with subtly differentiated dark gray surfaces. Typography is compact and precise, maintaining excellent contrast. A single vivid violet hue provides functional accents for interactive elements and brand highlights, creating moments of focus within the muted interface. Components are lightweight with large border radii, suggesting touch-friendly forms on a data-dense, technical interface. Maintain a clear visual hierarchy by layering neutral background colors: Midnight Abyss (#0f101a) for base, Graphite Panel (#151621) for cards, and Steel Overlay (#1f2433) for borders. Use Focus Violet (#98a4f7) sparingly and strategically for brand accents, links, and active states to guide user attention within the dark UI. Adopt the rounded, pill-shaped '9999px' border radius for all actionable buttons to ensure a consistent, friendly form. Apply Helvetica Now Text font with a -0.01em letter-spacing consistently across all body and UI elements for a compact, technical feel. Center-align primary headlines and section titles, especially in full-width hero sections, to create a strong focal point. Utilize a base spacing unit of 4px to maintain consistent density and alignment across all components and layouts. Implement the linear blue-violet gradient (linear-gradient(353deg, rgb(91, 99, 211) 17.51%, rgb(124, 135, 247) 183.08%)) only for major decorative elements like hero backgrounds or section separators to prevent visual noise. Avoid using saturated chromatic colors other than Focus Violet (#98a4f7) unless those colors are explicitly for semantic status indicators. Do not introduce strong drop shadows; rely on subtle inset shadows (rgba(255, 255, 255, 0.25) 0px 1px 3px 0px inset) or border differences for elevation. Do not deviate from the established type scale; maintain the precise letter-spacing and line heights for a consistent typographic rhythm. Do not use sharp 0px border radii on interactive elements or cards; the system prioritizes soft, rounded shapes. Avoid large, impactful photos or illustrations that break the product's dark, UI-focused aesthetic; prioritize product screenshots and abstract visuals. Do not use generic, default blue link colors; ensure all links are styled with Focus Violet (#98a4f7) or Cloud Whisper (#c9d3ee) for consistent branding. Refrain from using complex, multi-color decorative gradients casually; reserve them for impactful moments where their presence enhances, not distracts.