Supabase

Supabase embodies a technical, deeply functional aesthetic like a high-performance terminal where every element serves a clear purpose. Dark, layered surfaces create a sense of depth and focus, akin to illuminated code on a dark screen. The primary green accent color, Supabase Green, acts as a confident highlight, drawing attention to interactive elements without being overwhelming. Typography prioritizes clarity and a dense information hierarchy, ensuring readability even with intricate data displays. Use 'Circular' font at weight 400 or 500 for all UI text, except code blocks. Adopt #fafafa for primary text and headings against dark backgrounds to ensure AAA contrast. Apply #3ecf8 ('Supabase Green') exclusively for active states, primary links, and key brand affirmations. Maintain a clear visual hierarchy by utilizing #121212 as the base surface and #2e2e2 for elevated cards and modals. Utilize 6px radius for interactive elements like buttons and inputs, transitioning to 16px for larger content cards. Employ the 9999px radius sparingly, only for 'Pill Buttons' that act as prominent announcements or unique navigational elements. Ensure all interactive elements have a clear visual feedback using either a color change to 'Glow Green' or a subtle border change to 'Deep Sea Green'. Avoid arbitrary color usage; every color should map to a defined role in the palette. Do not use shadows for elevation; rely on background color changes from #121212 to #2e2e2 to differentiate surface levels. Do not apply Source Code Pro for general body text or headlines; reserve it specifically for code or data display. Refrain from using mixed color backgrounds or gradients unless explicitly defined as a brand graphical element. Do not break the established spacing scale; maintain 8px increments or derived values (e.g., 24px, 32px) for consistency. Avoid excessive text decoration; links are identified by color ('Supabase Green') rather than underlines or heavy styling.