# Supabase — DESIGN.md

A near-white, low-contrast developer site with Manrope headings, Inter body text, hairline borders and a single green for primary actions.

Independent reference guide from headless-browser captures and computed styles. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-09-27

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Inter**. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light, low-contrast technical

### Observed palette
- Canvas: `oklch(0.995 0 34)`
- Card and secondary button surface: `oklch(1 0 34)`
- Primary text: `oklch(0.1 0 34)`
- Secondary text: `oklch(0.52065 0 34)`
- Muted strong text: `oklch(0.394455 0 34)`
- Primary button fill: `oklch(0.525 0.12 157.5)`
- Brand green (logo, icons): `#3ecf8e`
- Announcement bar: `#f8f3ef`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero heading (Manrope) | 46px / 46px | 500 | normal |
| Section heading, two-tone (Manrope) | 34px / 37.78px | 600 | normal |
| Pricing section heading (Manrope) | 28px / 33.6px | 600 | normal |
| Large quote (Database page) | 34px / 37.78px | 450 | -0.85px |
| Lead paragraph (Inter) | 16px / 24px | 450 | normal |
| Body and card text (Inter) | 14px / 20px | 450 | normal |
| Button label (Inter) | 14px / 20px | 500 | normal |

### Layout & hierarchy
- A 55px announcement bar sits above a 64px navigation bar (logo, five menu items, GitHub star count, Sign in and Start your project); the navigation bar stays pinned when scrolled and is shown only at the top of the stitched image.
- Content width is 1088px (x 176 to 1264) on the home and Database pages and 1120px on pricing; the FAQ narrows to 864px.
- Sections are divided by full-width 1px rules; feature sections on the Database page repeat at roughly 690–700px intervals (headings at y 2536, 3268, 3962, 4656, 5340).
- All three pages end with the same centred 'Build in a weekend, scale to millions' call to action, a compliance strip (SOC2 Type 2, HIPAA, ISO 27001) and a seven-column footer with a newsletter field.

### Components & behavior
- Primary action: 38px high, 9.29px radius, oklch(0.525 0.12 157.5) fill with a faint linear-gradient overlay, near-white 14px / 500 label, 8px 16px padding. Secondary action: same size on a white oklch(1 0 34) fill with dark label.
- Pricing plan buttons are 42px high with a 9.72px radius and a 15px / 500 label; Enterprise uses the white secondary style.
- Demo tabs (Table Editor, SQL Editor, RLS Policies) are fully rounded 38px pills with a 1px border; the active tab has a dark border.
- Cards use a white fill, hairline borders at oklch(0.1 0 34 / 0.0812725) and rounded corners; template and product cards pair a small icon, a 14px / 500 title and 14px grey description.
- FAQ rows are 56px disclosure buttons with 16px / 500 questions in oklch(0.394455 0 34), a chevron on the right and hairline dividers; all were closed at capture.

## Scope
The product interface was not captured: this collection covers logged-out marketing pages only, so there is no product context.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, stack multi-column sections on small screens and let comparison tables scroll horizontally.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: A two-column hero (headline left with the second line in green, summary right) sits over a bento grid of seven product cards, each with a small illustration. Below, full-width sections separated by hairline rules pair two-tone headings (grey first line, near-black second) with a tabbed dashboard demo, a framework code sample, template cards, a customer story carousel and a faded wall of social posts. The page closes on the open-source star count in dotted numerals, a repeated call to action, a compliance strip and a seven-column footer. Screenshot: `captures/supabase-marketing-home.jpg`.
- Pricing: Four plan columns (Free, Pro, Team, Enterprise) share one bordered container; Pro is raised with a dark outline and a Most Popular badge, and prices are set in a monospace face. A compute cost estimator, a compute size table, disk configuration table and add-on cards come before a long feature comparison table grouped by product with green check circles and a sticky plan header. A ten-question FAQ in a narrow 864px column precedes the shared closing call to action and footer. Screenshot: `captures/supabase-marketing-pricing.jpg`.
- Database: A product sub-navigation (Database, Auth, Storage, Edge Functions, Realtime) with an underlined active tab sits under the main header, and the hero leads into a full-width sample table in the Supabase table editor style. Each following section uses a two-tone heading on the left and a short paragraph on the right, then a feature list beside a framed UI or code sample (Table Editor, SQL Editor, API code). A grey band carries a single large customer quote with the closing phrase in green. Screenshot: `captures/supabase-marketing-database.jpg`.