# Supabase — Marketing Site Design Spec

> Source: supabase.com (live DOM, computed styles), 2026-07-08 (desktop 1512px).
> Coverage: marketing home + nav + hero + feature cards. Dashboard: pending login (`needs-dashboard`). Responsive: breakpoints from stylesheets only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Dark-first developer aesthetic built on a near-black charcoal canvas with a single, iconic emerald-green accent. The chrome is almost entirely grayscale — near-white text on charcoal, with structure carried by ultra-low-alpha white hairline borders rather than shadows. Green appears sparingly: the logo mark, the primary CTA, one highlighted word in the hero headline, and inline code/terminal accents. A two-family type system (Manrope for headings, Inter for body/UI) keeps the surface engineered but slightly warmer than a pure-Inter dev tool. Everything is flat, dense, and terminal-adjacent. Feels: dark, technical, confident, open-source.

## 2. Color Palette & Roles

### Neutrals (dark theme)
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#131413` | Page background |
| surface-100 | `#181a19` | Raised panels, cards, code blocks |
| text-primary | `#edefee` | Body text, headings |
| text-muted | `#989a99` | Secondary/subhead text, captions |
| white | `#ffffff` | Rare pure-white highlights |
| border-default | `rgba(242,242,242,.07)` | Hairline borders (most-used color on page) |
| border-card | `rgba(243,243,243,.09)` | Card/panel dividers |
| border-strong | `rgba(240,240,240,.13)` | Secondary button border |
| surface-overlay | `rgba(255,255,255,.03)` | Secondary button fill, subtle hover |

### Accent (brand green)
| Token | Hex | Role / usage |
|---|---|---|
| brand-500 | `#3ecf8e` | Signature Supabase green: logo, links, highlighted headline word, code accents |
| brand-fill | `#006239` | Primary CTA background (deep green) |
| brand-border | `rgba(63,205,142,.30)` | Primary CTA border (lighter green top-light) |

### Semantic (from CSS vars, HSL)
| Token | Value | Role |
|---|---|---|
| success-border | `hsl(147 100% 12%)` | Success state |
| info-border | `hsl(223 100% 12%)` | Info state |
| warning-border | `hsl(60 100% 12%)` | Warning state |
| error-border | `hsl(357 89% 16%)` | Error state |

Rule: chrome is grayscale on charcoal; emerald green is reserved for brand, CTAs, links, and code.
Rule: structure comes from very-low-alpha white hairlines (~.07–.13 alpha), never shadows.

## 3. Typography Rules

- Heading stack: `Manrope, "Manrope Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif`
- Body/UI stack: `Inter, "Inter Fallback", system-ui, sans-serif`
- Body: 16px / 24px line-height / 400 / `#edefee`

| Role | Size/Line | Weight | Family |
|---|---|---|---|
| Display (h1) | 46 / 46 | 500 | Manrope |
| Section (h2) | ~32–36 | 500 | Manrope |
| Subhead | ~20 | 400 | Inter, `#989a99` |
| Body | 16 / 24 | 400 | Inter |
| UI / buttons | 14 | 450–500 | Inter |
| Nav items | 14 | 500 | Inter |

Patterns: Manrope headings at tight leading (46/46 — line-height equals size), weight capped at 500. Body/UI in Inter at 400–500. No bold 700 in chrome.

## 4. Component Stylings

### Buttons
- **Primary (brand)**: bg `#006239`, text `#edefee`, border 1px `rgba(63,205,142,.30)`, radius 6px, h 38px, 14px/450, padding `8px 16px`. The lighter green border over the deep-green fill creates a subtle top-lit bevel.
- **Secondary (outline)**: bg `rgba(255,255,255,.03)`, text `#edefee`, border 1px `rgba(240,240,240,.13)`, radius 6px, h 38px.
- **Ghost / nav**: transparent, text `#edefee`, radius 6px, h 34px, padding 8px, 14px/500.
- **Header "Dashboard" pill**: green-tinted, sits in top-right nav.

### Inputs
- Dark: bg `surface-100`, hairline white border, radius 6px, placeholder muted `#989a99`, monospace for code inputs. Focus: brand-green border.

### Cards / panels
- bg transparent-to-`#181a19`, border 1px `rgba(243,243,243,.09)`, radius 8px, no shadow. Feature cards are large bordered panels with an icon, heading, and muted body; embedded product previews (auth inputs, terminal, globe) live inside.

### Code / terminal
- Monospace, `surface-100` bg, green (`#3ecf8e`) command accents, hairline border, radius 8px.

## 5. Layout Principles

- Max content width ~1280px, centered; hero is left-aligned (headline left, subhead + CTAs), not centered.
- Spacing: 4px base grid; generous vertical section rhythm.
- Nav: h 65px, transparent with `backdrop-filter: blur(4px)`, hairline bottom border `rgba(242,242,242,.07)`; logo left, center dropdown links (Product/Developers/Solutions/Pricing/Docs/Blog), right actions (GitHub stars + green Dashboard pill).
- Hero: two-column — left headline (46px Manrope, one word in green) + dual CTA (green primary + outline secondary); right muted subhead paragraph.
- Feature grid: 3-column bordered cards with icon + heading + body + embedded live product preview.

## 6. Depth & Elevation

- Radii: buttons/inputs/ghost `6px`, cards/panels/code `8px` (`--border-radius: 8px`), avatars full.
- Control heights: buttons/inputs `38px`; ghost nav items `34px`.
- Elevation: flat — hairline white-alpha borders instead of shadows. Signature primary button uses a lighter border over a darker fill for a bevel effect.

## 7. Motion

- Micro-transitions only: dominant `color / background-color / border-color / outline-color / fill / stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)` (Tailwind default), plus `opacity 0.15s` and staggered `opacity 0.4s 0.22s` scroll reveals.
- No heavy animation library detected; product previews animate content (terminal typing, globe rotation) inside static bordered frames.

## 8. Backgrounds, Effects & WebGL

- Flat charcoal `#131413` canvas overall; no background video.
- `backdrop-filter: blur(4px)` on the sticky nav.
- Embedded product previews include a subtle wireframe globe/network graphic (Edge Functions card) and terminal panels; green is the only saturated color.
- Very rare low-alpha green washes (e.g. `rgba(212,255,212,.02)`); otherwise no large gradients — the canvas stays a flat dark neutral.

## 9. Do's and Don'ts

### Do
- Use a near-black charcoal canvas `#131413` with raised `#181a19` panels.
- Keep near-white text `#edefee`; muted `#989a99` for secondary copy.
- Reserve emerald green `#3ecf8e` for the logo, links, one highlighted headline word, CTAs, and code accents.
- Build the primary CTA as deep green `#006239` with a lighter `rgba(63,205,142,.30)` border.
- Use very-low-alpha white hairlines (~.07–.13) for all structure instead of shadows.
- Pair Manrope headings (weight ≤500, tight 46/46 leading) with Inter body/UI.
- Keep controls 38px tall at radius 6px; cards at radius 8px.
- Limit motion to 150ms color/bg/border micro-transitions plus subtle opacity scroll reveals.

### Don't
- Don't use shadows for elevation — hairline alpha borders do the work.
- Don't introduce a second accent color; green is the only saturated hue.
- Don't set green on large surfaces — it's an accent, not a fill (except the deep `#006239` CTA).
- Don't use font weights above 500 in chrome.
- Don't center the hero — the headline is left-aligned.
- Don't add large scroll/parallax animations.

## 10. Responsive Behavior

- Tailwind-based; standard breakpoints (sm 640, md 768, lg 1024, xl 1280).
- Nav collapses to a hamburger on mobile; hero stacks to a single column.
- Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#131413` · Surface `#181a19` · Text `#edefee` · Muted `#989a99` · Border `rgba(242,242,242,.07)` · Accent `#3ecf8e`
- Fonts: Manrope (headings) + Inter (body/UI) · Body: 16px · Radius: 6px control / 8px card · Control height: 38px
- Primary CTA: bg `#006239`, border `rgba(63,205,142,.30)` · Secondary: bg `rgba(255,255,255,.03)`, border `rgba(240,240,240,.13)`

<supabase_design_language>
Use the Supabase design language: dark-first, near-black charcoal canvas #131413 with raised #181a19 panels. Near-white text #edefee, muted #989a99. Manrope for headings (weight 500, tight leading — 46px display at 46px line-height, one keyword highlighted in green), Inter for body and UI at 16/24 weight 400–500. Single emerald accent #3ecf8e reserved for the logo, links, code accents and one hero word. Primary CTA is deep green #006239 with a lighter rgba(63,205,142,.30) border for a top-lit bevel; secondary button is rgba(255,255,255,.03) with a rgba(240,240,240,.13) hairline. All structure comes from very-low-alpha white borders (~.07–.13), never shadows — the surface is flat. Controls 38px tall at radius 6px, cards radius 8px. Sticky nav is transparent with backdrop-blur(4px) and a hairline bottom border. Motion is 150ms color/bg/border micro-transitions plus subtle opacity scroll reveals; product previews (terminal, wireframe globe) animate inside static bordered frames. Feels: dark, technical, confident, open-source. Avoid: shadows for elevation, a second accent color, green on large fills, font weights above 500, or a centered hero.
</supabase_design_language>