The visual approach
Supabase runs light. The palette centers on #3ECF8E for brand moments—CTAs, active states, success indicators—while the rest of the interface holds to #FFFFFF and #F8F9FA backgrounds with #E5E7EB borders. Text follows a three-tier hierarchy: #1F1F1F for headings, #6B7280 for body, #9CA3AF for supporting labels. Code blocks invert the scheme with #1F1F1F backgrounds and syntax highlighting that keeps readability high without chromatic noise.
Typography uses a custom sans or Inter across a seven-stop scale. Display XL hits 72px at weight 700, H1 drops to 48px, H2 to 32px, H3 to 24px at 600 weight. Body text sits at 16px / 400, small variants at 14px. Monospace code inherits the 14px size. The spacing system runs on multiples of four: 4, 8, 12, 16, 24, 32, 48, 64, 96px. Corner radii range from 4px (small UI) through 6px (buttons), 8px (cards), 12px (larger containers), to full-round for avatars.
The navigation bar locks at 64px height with a white background. Primary buttons carry the brand green with 12px vertical and 24px horizontal padding, 6px radius. Secondary buttons stay white with a subtle border. Cards use white fills, 8px radius, and #E5E7EB strokes. Tabs combine icons and text in a horizontal layout with an animated underline that slides via translateX() over 250ms ease-out.
Motion is surgical. Tab content cross-fades at 300ms ease-out when switching between Database, Auth, and Storage sections—opacity 0 to 1, no lateral slides. Hero and feature cards reveal with fade-in-up: opacity: 0; transform: translateY(16px) to visible over 400ms cubic-bezier(0.4, 0.0, 0.2, 1). Primary CTAs lift on hover with translateY(-2px) and shadow expansion over 200ms ease-out. Icon cards scale to 1.02, social provider icons hit 1.1 with a color shift, all at sub-250ms durations.
What works
The restraint pays off. By keeping motion to fades and single-axis transforms, Supabase avoids the jank that plagues dashboard UIs under load. The 300ms tab transition gives enough feedback without stalling navigation. The fade-in-up on scroll—16px of vertical travel, 400ms timing—reads as purposeful rather than decorative.
The green works harder than most brand colors. At #3ECF8E, it sits bright enough to command attention on white but never vibrates. It marks the primary action, the active tab, the success state—always the thing you're looking for. The rest of the palette stays out of the way. #F8F9FA as a secondary background creates just enough contrast to section content without introducing visual weight. The three-tier text system (#1F1F1F / #6B7280 / #9CA3AF) handles hierarchy without requiring bold weights or size jumps at every turn.
The code block treatment earns its keep. Dark background at #1F1F1F with syntax highlighting keeps code legible in a UI that otherwise runs light. It's a contextual shift—when you hit a code fence, the interface acknowledges you're switching modes. No need to squint at gray-on-white monospace.
The component vocabulary is narrow: nav, hero, CTA, card, form. That's it. Tabs and dropdowns extend the grammar slightly, but the system doesn't proliferate variants. A card is a white rectangle with an 8px radius and a 1px border at #E5E7EB. The predictability makes it easy to scan, easy to build against.
What a builder can borrow
Start with the spacing scale. Supabase's 4px increments (4, 8, 12, 16, 24, 32, 48, 64, 96) cover the range most UIs need without introducing decision fatigue. If you're reaching for a 20px margin, round to 16 or 24 and move on. The constraint speeds up both design and implementation.
Lift the hover pattern for primary actions: translateY(-2px) with a shadow bump over 200ms ease-out. It's tactile enough to register, fast enough not to lag perceived interaction. Pair it with the fade-in-up reveal—opacity: 0; transform: translateY(16px) to visible over 400ms cubic-bezier(0.4, 0.0, 0.2, 1)—for scroll-triggered content. The 16px offset is subtle; anything beyond 24px starts to feel like a slide deck.
The three-tier text palette (#1F1F1F, #6B7280, #9CA3AF) maps cleanly to semantic roles: primary content, secondary content, metadata. Pin those values as CSS custom properties and you'll stop mixing hex codes per component. Similarly, the border color (#E5E7EB) and the two background tones (#FFFFFF, #F8F9FA) cover almost every surface decision. Five color tokens handle 90% of the interface.
For dashboards or developer tools, the inverted code block pattern is worth adopting wholesale. Light UI, dark code sections. It mirrors the environment your users work in and makes syntax easier to parse than light-background alternatives. Pair it with a 14px monospace at 400 weight and call it done.
The navigation underline animation—horizontal slide via translateX() over 250ms ease-out—is a clean alternative to color-only active states. It gives the eye a target to track and works without requiring color contrast that competes with your brand accent.