beehiiv

This design system presents a digital command center aesthetic, utilizing a deep navy background contrasted with vibrant magenta and electric blue accents. The visual tension comes from the interplay of sharp 6px radii for general elements and soft 9999px pill shapes for interactive components. Subtle gradients are layered on dark surfaces, creating depth and a sophisticated, tech-forward atmosphere, ensuring the platform feels powerful yet accessible for creators. Use Midnight Ink (#060419) as the primary page background to establish the dark theme. Apply Electric Blue (#2f39ba) for all primary interactive elements and crucial call-to-actions, ensuring high contrast. Employ the 9999px radius (pill shape) for all buttons and tags to maintain a consistent interactive element style. Reserve Clash Grotesk for headings (sizes 48px, 60px, 72px) and Satoshi for all body text, links, and navigation items. Group related content within cards using Shadow Violet (#0d0b28) as the background with a 6px border-radius. Utilize the Indigo Fusion gradient (linear-gradient(90deg, rgb(47, 57, 186) 0%, rgb(255, 94, 196) 100%)) as a prominent eye-catcher for hero elements or major announcements. Do not use white backgrounds directly on dark content sections; instead, use Shadow Violet (#0d0b28) or similar dark neutral tones for surface differentiation. Avoid using radii other than 6px for non-interactive containers and 9999px for buttons/tags to maintain shape consistency. Do not introduce strong drop shadows on internal components unless it's a specific testimonial card, to maintain a largely flat aesthetic. Refrain from mixing non-Clash Grotesk fonts for headlines or non-Satoshi fonts for body text. Do not use highly saturated colors for large text blocks; primarily use Starfield White (#ffffff) or Ghost White (#f7f5ff) for readability on dark backgrounds. Avoid excessive use of the Cosmic Magenta (#ff5ec4) accent; reserve it for specific highlights to maintain its impact.