# Supabase

## Overview
A clean, open-source developer-platform aesthetic. Light-first — a near-white canvas (oklch 0.995) with near-black text — but the site ships a genuine dark-native mode, so a measured dark set is included. The whole system is organized around a single signature emerald green used sparingly for brand actions. Hierarchy comes from thin borders, rounded cards, and a clear Manrope/Inter type split — not from color or shadow. Trustworthy and functional, never decorative.

## Colors & Roles
Foundation is a green-tinted neutral scale: grays carry a whisper of hue ~159 (measured dark bg `#131413`, muted `#989a99`), so they read as one family with the brand rather than as flat gray. The signature is one **emerald brand green** `oklch(0.762 0.154 159.4)` (#3ecf8e), assigned to `primary` = `accent` = `ring` = `chart-1`. It appears only on the main CTA ("Start your project"), focus rings, and emphasis. Crucially, text on green buttons is **near-black** (`primary-foreground`), not white — a Supabase signature. Measured secondary brand colors — purple `#8e4ec6` and blue `#0070f3` — are demoted to `chart-2/3`: chart/diagram signals only, never brand accents. Light `border`/`input` are the measured near-black hairlines (~8% alpha) flattened to a light gray (0.92); dark borders are white-8% flattened to 0.285.

## Typography Rules
Three families, all on Google Fonts: **Manrope** for headings (measured display/H1 46px/500, section headers 34px/600), **Inter** for body and UI (16px/450 body, 14px/500 buttons), **Source Code Pro** for code. Only three weights: 450 / 500 / 600. Body weight 450 is a Supabase tell — slightly heavier than the usual 400. Large headings tighten tracking to ≈ −0.02em for density. Modular scale ratio ≈ 1.25.

## Layout Principles
Centered 12-column / 24px-gutter container, max width 1280px. Hero is a two-part split: a large left headline (with the second line set in brand green) plus right-aligned subtext. Feature sections use a 3-up card grid (Postgres Database / Authentication / Edge Functions …), each block wrapped in a rounded, bordered card. Vertical rhythm is generous — section gaps `clamp(4rem, 9vw, 8rem)` — with density built inside cards.

## Depth & Elevation
Mostly flat. Section cards have no shadow — division is done with 1px hairline borders. Soft shadows (`0 10px 15px -3px rgba(0,0,0,.1)`) are reserved for genuinely floating elements (dropdowns, popovers, floating panels). The sticky top nav uses a light backdrop-blur. Dark sections may carry a very low-opacity emerald radial glow behind the hero.

## Shapes
Rounded but restrained: fields/buttons 6px, selectors 8px, cards 12–16px (measured cards use 16px). Corners are soft, never pill-round for containers.

## Component Stylings
- **Button**: primary = emerald `--primary` fill + near-black `--primary-foreground`, radius 6px, 14px/500 Inter, padding 8px 16px. Hover brightens the green a step. Focus = 2px emerald ring. Secondary = transparent/`--secondary` with 1px `--border` ("Request a demo"). Ghost = nav-link style.
- **Card**: `--card` background, 1px `--border` hairline, radius 12–16px, padding 24px, no shadow. In dark, `card` sits a step lighter than `background`.
- **Input**: translucent surface `--input`, 1px `--border`, radius 6px, padding 8px 12px, 14px/450; focus goes to `--ring`. Placeholder `--muted-foreground`.
- **Nav**: sticky, light backdrop-blur, 1px bottom hairline. Left wordmark, center dropdown links, right "Sign in" ghost + "Start your project" green primary.
- **Badge**: small version/status pills, 12px text; status colors from `chart-*` (purple/blue/amber) as low-alpha tint + matching text. Brand green only for "New"/emphasis.

## Motion
Quick and restrained. Opacity fade + 8–12px slide; hover does subtle background/border transitions. Green CTAs brighten or gain a faint glow on hover. Durations 120–400ms, standard easing. No bounce, spring overshoot, or heavy parallax.

## Responsive Behavior
The 12-column grid collapses to a single column on mobile; the 3-up feature grid stacks. Display type scales via `clamp()`. Nav condenses to a menu on narrow widths.

## Agent Prompt Guide
> Build this in the 'Supabase' style: light-first (near-white oklch 0.995 0.002 159, near-black green-tinted text) with a genuine measured dark mode (oklch 0.19 0.003 159). One signature emerald brand green (oklch 0.762 0.154 159 / #3ecf8e) as primary/accent/ring, reserved for main CTAs, focus, and emphasis — with near-black (not white) text on green buttons. Neutrals subtly green-tinted (hue ~159). Headings in Manrope, body/UI in Inter, code in Source Code Pro; weights 450/500/600. Separate surfaces with 1px hairline borders and rounded cards (fields 6px, cards 12–16px), not heavy shadows. Purple (#8e4ec6) and blue (#0070f3) are chart signals only.

## Known Gaps / Confidence
Colors, typography, and radii are **computed-css** (Playwright walk of both the light and native-dark renders — both sets are measured, not synthesized). Color-role assignment, taxonomy, motion, and layout are **vision-inferred** from the screenshots. The chart palette is vision-inferred: chart-1 (green), chart-2 (purple), chart-3 (blue) are measured brand hues re-roled as data signals; chart-4 (amber) and chart-5 (gray) are tuned for legibility, not directly measured. `border`/`input` values are opaque approximations of measured semi-transparent hairlines. Measured card radii range 6–16px; `box` is set to 12px as a representative middle.