# Supabase: brand book and build spec

One green bolt on near-white or near-black grays; Manrope two-tone headlines over Inter, with Source Code Pro as a real third voice; hairline cards, gray line drawings with green dots, and real code as imagery. Copy that is direct and specific, never salesy.

From unfairly.ai/brand-guidelines/supabase, checked 2026-10-30. Unofficial study; not affiliated with Supabase.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** A developer tool that shows its work. Supabase keeps everything neutral and technical (hairlines, line drawings, real code) so the single green reads as 'live', and its copy says exactly what happens. Based on: From the published rules: green is the logo color and grays are the grounds; the copywriting guide bans marketing language; and the homepage builds its imagery from code and line diagrams.

## Purpose

Story: Supabase is an open source company, built in the open on Postgres and existing open source tools, which it sponsors. It is fully remote, with a strong affinity for open source maintainers and ex-founders, and describes itself as one of the world's fastest growing open source developer communities. (observed)

| Value | What it means in the work | Source |
|---|---|---|
| Open by default | Great developer tools should be transparent, inspectable and owned by the community (paraphrase of the homepage open source band). | observed: https://supabase.com/ |
| No lock-in | Read, contribute, self-host; every project is portable Postgres (paraphrase). | observed: https://supabase.com/ |
| Respect developer time | Copy and UI help developers complete tasks quickly (paraphrase). | published: https://supabase.com/design-system/docs/copywriting |

## Fixed and flexible

Never changes:
- The green bolt, never repainted
- Supabase, one word, capital S
- Neutral gray grounds with one green
- Sentence-case, specific copy

The one thing that varies: Light or dark: the site follows the visitor's system theme and both are first-class. The guide sets no level of color; customer story cards may take the customer's own colors.

## Positioning

- **Statement**: The Postgres development platform: start with a Postgres database and add Auth, Data APIs, Edge Functions, Realtime, Storage and Vector. (observed)
- **Category**: Postgres development platform (backend as a service on Postgres); press has called it the open source Firebase alternative (observed)
- **Audience**: Developers and builders from beginners, vibe coders and AI builders to startups, agencies and enterprises in B2B SaaS, finserv and healthcare (paraphrase of the Solutions navigation). (observed)
- **Problem**: Building and scaling a backend means stitching together a database, auth, APIs, storage and servers, and risking lock-in (paraphrase). (our reading)
- **Promise**: Build in a weekend, scale to millions, on open Postgres you can take with you. (observed)
- **Differentiators**: Every project is a full Postgres database, 100% portable.; Open source from day one; self-hostable, no lock-in.; One platform of best-of-breed products you can adopt one at a time.; Row Level Security built into Auth.; SOC2 Type 2, HIPAA and ISO 27001.
- **Alternatives**: Firebase (the footer offers 'Switch from Firebase').; Neon (the footer offers 'Switch from Neon').; MongoDB (a homepage story migrates off it).

## Messaging

Boilerplate (observed): Supabase is the Postgres development platform: every project is a full Postgres database with Authentication, instant Data APIs, Edge Functions, Realtime, Storage and Vector embeddings. It is built in the open, and developers can self-host it.

Taglines:
- Build in a weekend, scale to millions (Homepage hero (two lines, second in green) and the closing band on every marketing page, including the brand page)
- The Postgres Development Platform (Homepage title)
- Use one or all. Best of breed products. Integrated as a platform. (Under the product grid)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Just Postgres | Every project is a full Postgres database: portable, extensible, with Row Level Security built in. | 100% portable; built-in Auth with RLS; easy to extend (Postgres card); 100,000+ GitHub stars (nav counter showed 114.3K on 2026-10-30) | observed |
| Use one or all | Auth, Data APIs, Edge Functions, Realtime, Storage and Vector, each best of breed, integrated as one platform. | Chatbase scaled from zero to $10M ARR on a single Postgres-backed platform; Rally went from first line of code to licensed fintech in three months | observed |
| Weekend to millions | Start fast, and the same stack carries you to scale. | Lovable powers millions of AI-generated apps on a Supabase backend; eXp Realty: 2,000+ employees building production software with AI; 10,000,000+ registered developers | observed |
| Open source from day one | Built in the open, never locked in, and you can self-host. | 100,000+ GitHub stars (nav counter showed 114.3K on 2026-10-30); More than $250,000 paid in open source sponsorships (PostgREST, pgroonga, pgsodium, OrioleDB, Elixir) | observed |
| Enterprise-ready trust | Security and compliance credentials for regulated and enterprise work. | SOC2 Type 2 certified, HIPAA compliant, ISO 27001 certified; Phoenix Energy migrated critical infrastructure from MongoDB with zero downtime | our reading |

They never claim:
- Use the Supabase logos only to refer to Supabase; never imply partnership or endorsement.
- The Connect Supabase button only starts the OAuth 2.0 flow of a Supabase integration; it is never a logo.
- Under the customer terms, neither party uses the other's name or logo without prior written approval.
- Quote stats with their date; the star count on the nav moves daily.

## Voice

Tone words: Direct, Action-oriented, Technical without jargon, Pragmatic.

Traits:
- Direct, but not Promotional (published)
- Action-oriented, but not Self-regarding (published)
- Technical, but not Jargon-heavy (published)
- Pragmatic, but not Overpromising (published)
- Open, but not Locked-in (observed)

- Write so a developer can finish the task without reading more; respect developer time (paraphrase of the copywriting intro).
- Say what something does, not what it enables; focus on what happens, not what was built.
- Acknowledge tradeoffs and limitations when relevant.
- The published copywriting guide is for product UI. Homepage marketing copy is looser (it says 'Easily write custom code'), but keeps the same plainness: short claims, product names, a developer quote wall.
- Marketing headlines are two-part: a muted setup and a dark payoff ('Build in a weekend / Scale to millions').
- Customer quotes and community posts are verbatim and exempt from every rule here; never edit them.

Rules a copy check enforces:
- Sentence case headlines
- Title case only for page names in global navigation and document titles (e.g. Database Settings)
- Say "Supabase", not "SupaBase" or "Supa Base" or "supabase (outside code)"
- Say "Postgres", not "PostgreSQL"
- Say "Sign in / Sign out / Sign up", not "Login" or "Log in" or "Logout" or "Log out"
- Never: easily, simply, powerful. Say state the action: Create tables instead
- Never: manage, handle, work with. Say name the actions: Create, edit, or delete tables instead
- Never: sorry, oops, something went wrong, an error occurred. Say State what went wrong, then how to fix it instead
- Never: enables you to, allows you to. Say say what it does instead
- No exclamation marks
- No italics for emphasis; bold only when necessary
- Inline code for technical terms: RLS, API key, supabase init
- Buttons use specific verbs that match the action: Create table, Delete project, Revoke access; never Submit or Configure
- Present tense: Stores connection pool settings, not Will store
- Active voice in confirmations: Deleting this project will remove all data
- Sentences of 20 words or fewer
- Errors state the problem and the fix: Invalid API key. Check your project settings.
- Success messages confirm what happened, briefly: Backup restored
- Empty states say what's missing, then how to add it, with the action button
- Loading states match the action verb: Deleting project..., not Processing...
- Page descriptions are declarative fragments without a trailing period
- Headings name the page, not the task: API keys, not Manage your API keys
- Product names capitalized: Database, Auth, Storage, Edge Functions, Realtime, Vector
- Alt text describes the image objectively, not its context
- American spelling
- Write as "we", to "you"
- On a landing page rebuilt from spec.page, every line given there (headlines, card copy, quotes, posts) is kept verbatim even where it uses a word the UI rules ban (easily, manage, logins). The banned list governs new UI strings only

Their words: Postgres, Database, Auth, Edge Functions, Realtime, Storage, Vector, Data APIs, RLS.
Never: SupaBase, Supa Base, PostgreSQL (say Postgres), easily / simply / powerful (UI copy), Sorry / Oops, Submit (as a button label), italics for emphasis.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Supabase green | #3ECF8E | accent_secondary | The logo symbol and explicitly branded surfaces; bright green ink on dark grounds. |
| Primary green (light) | #0E7E4E | accent | Buttons, links and the green hero line in light mode; AA-safe text green. |
| Dark gray | #1C1C1C | night | Published background behind the logo on dark. |
| Light gray | #F8F8F8 | surface | Published background behind the logo on light. |
| Page ground | #FDFDFD | paper | Light homepage ground (measured). |
| Ink | #030303 | ink | Headlines and lifted phrases on light (measured). |
| Muted ink | #696969 | ink_muted | First line of two-tone headlines, card copy (measured). |
| Gray dark 1200 | #EDEDED | on_night | Text on dark grounds. |
| Logo gradient stop | #249361 | logo | Inside the official symbol only. |
| Destructive | #E54D2E | status | Errors only, sparingly. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Manrope | Open (SIL OFL 1.1), Google Fonts | Manrope | Manrope, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif |
| body | Inter | Open (SIL OFL 1.1) | Inter | Inter, "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif |
| mono | Source Code Pro | Open (SIL OFL 1.1), Adobe | Source Code Pro | "Source Code Pro", "Office Code Pro", ui-monospace, Menlo, monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 | --text-display-* | Manrope | 46px | 34px | 46px | 0px | 500 |
| Section H2/H3 (two-tone) | --text-heading-* | Manrope | 34px | 22px | 37.78px | 0px | 600 |
| Story quote | --text-quote-* | Manrope | 22px | 18px | 30.25px | 0px | 450 |
| Bento closing line | --text-lead-l-* | Inter | 22px | 18px | 29.33px | -0.16px | 450 |
| Card title | --text-title-* | Manrope | 16px | 16px | 24px | 0px | 600 |
| Footer column heading | --text-footer-heading-* | Manrope | 15px | 15px | 22.5px | 0px | 600 |
| Template title | --text-title-s-* | Manrope | 14px | 14px | 20px | 0px | 500 |
| Hero lead / community lead | --text-lead-* | Inter | 16px | 16px | 24px | 0px | 450 |
| Tweet text | --text-body-tweet-* | Inter | 15px | 15px | 22.5px | 0px | 450 |
| Body / card copy / links | --text-body-* | Inter | 14px | 14px | 20px | 0px | 450 |
| Button label (38px buttons) | --text-button-* | Inter | 14px | 15px | 20px | 0px | 500 |
| Nav item | --text-nav-* | Inter | 14px | 15px | 16px | 0px | 500 |
| Small button / pill / caption | --text-small-* | Inter | 12px | 12px | 16px | 0px | 500 |
| Code | --text-code-* | Source Code Pro | 13px | 13px | 22.1px | 0px | 500 |
| Menu eyebrow | --text-eyebrow-* | Source Code Pro | 12px | 12px | 16px | 0px | 400 |

## Layout

Measured on https://supabase.com/brand-assets: Supabase publishes no PDF guide. Read from supabase.com/brand-assets (logos, 3 colors, name and usage rules), the design system docs at supabase.com/design-system/docs (color usage, typography, icons, copywriting, accessibility, theming, Tailwind classes, layout pattern), the homepage stylesheet's theme tokens, packages/config/typography.css on GitHub, and the homepage and company pages, all fetched 2026-10-30..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 176px | 24px |
| Section padding | 96px | 64px |
| Container max width | 1280px | full |
| Grid columns | 12 | 1 |
| Gutter | 12px | 16px |
| Card gap | 12px | 12px |
| Navigation height | 65px | 65px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Supabase's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 1440x65 sticky, content x 176-1264
   - Phone: 390x65: wordmark + hamburger
   - 1px bottom hairline rgba(3,3,3,0.08)
   - Small 26px buttons in the bar, 38px buttons everywhere else
2. Hero
   - Desktop: y 65-451; 2 columns 536/536, bottom-aligned
   - Phone: y 65-395; stacked, 24px gutter
   - H1 Manrope 46/46 500
   - Lead Inter 16/24 450 #696969
3. Product bento
   - Desktop: y 451-1400; 12-col grid, 12px gaps, 400px cards
   - Phone: 1 column, illustrations hidden
   - Gradient 1px card border, radius 16px
   - Line illustrations in greys with sparse green
4. Logo wall
   - Desktop: y 1400-1670; 6x2
   - Phone: 3x4
   - Hairline open frame band
5. Dashboard tabs
   - Desktop: y 1670-2533; frame clipped at section bottom
   - Phone: y 1818-2269
   - Active pill has a #030303 border
6. Framework code
   - Desktop: y 2533-3229; 2 columns 544/544
   - Phone: stacked
   - Source Code Pro 13/22.1 500 code
7. Templates
   - Desktop: y 3229-4127
   - Phone: stacked
   - Drawn browser mockups in the large cards
8. Customer stories
   - Desktop: y 4126-4938; 752/76x4 columns
   - Phone: stacked, 64px closed bars
   - Only saturated colour on the page
9. Community wall
   - Desktop: y 4938-5847
   - Phone: 2 columns
   - Radius 21.33px cards
   - mask fades bottom and sides
10. Open source
   - Desktop: y 5847-6220
   - Phone: centred, matrix below
   - radial mask on the matrix
11. Closing CTA
   - Desktop: y 6220-6595
   - Phone: 2-line H2 25.6px
   - centred
12. Footer
   - Desktop: y 6595-7692
   - Phone: y 7835-9876, 2-column link grid
   - Same ground as the page; hairline rule above the bottom bar

## Page anatomy

How Supabase's own landing pages are built, part by part (observed; https://supabase.com/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: Sticky 65px light bar: green-and-black supabase wordmark at left, three dropdown menus and three links, then a GitHub star count, Sign in and a small green Start your project at right. Phone: wordmark left, hamburger right.
- ground: Layered: absolute fill #FDFDFD at 90% alpha (bg-background/90) + nav backdrop-filter blur(4px); renders #FDFDFD over the page. Bottom border 1px solid rgba(3,3,3,0.08) (token border-default; renders #E9E9E9 on #FDFDFD, #EBEBEB on #FFFFFF).
- height: 65px (64px row + 1px bottom border), desktop and phone
- border: 1px bottom, 1px solid rgba(3,3,3,0.08) (token border-default; renders #E9E9E9 on #FDFDFD, #EBEBEB on #FFFFFF)
- logo: variant full wordmark: green bolt symbol (#3ECF8E with #249361 gradient lower half) + black "supabase" lettering (#1F1F1F); px 124x24 inside a 140x48 link (padding 12px 8px, radius 8px); position desktop x 176 y 20 (link x 168 y 8); phone x 24 y 20; file the official wordmark for light backgrounds, https://supabase.com/brand-assets/supabase-logo-green-black-transparent.svg
- links: count 6; labels Product, Developers, Solutions, Pricing, Docs, Blog; dropdowns Product, Developers and Solutions are buttons with a 12px chevron-down (#030303) 6px after the label; when open the label and chevron turn #0E7E4E and the chevron flips up; size 14px/16px Inter (links 14px/19.25px); weight 500; color #030303; hover no colour change (only the open menu label goes #0E7E4E); alignment left group starting x 332 right after the logo: Product x 332 (91x64), Developers x 423 (114), Solutions x 536 (100), Pricing x 637 (67), Docs x 703 (54), Blog x 758 (50); each item is a 64px-tall hit area with padding 8px 10px, radius 8px
- menus: Product mega panel about 958px wide under the bar (x 241-1199, top y 70; measured from the 2x screenshot), #FFFFFF, rounded corners, hairline border, soft shadow, three columns. FEATURES (Source Code Pro 12px uppercase, wide tracking, #696969): Database / Fully portable Postgres database; Authentication / User Management out of the box; Storage / Serverless storage for any media; Edge Functions / Deploy code globally on the edge; Compute [PRIVATE ALPHA pill] / Sandboxes and backend services; Realtime / Synchronize and broadcast events. MODULES: Vector / AI toolkit to manage embeddings; Cron / Schedule and manage recurring Jobs; Queues / Durable Message Queues with guaranteed delivery; Features / Explore everything you can do with Supabase. Right column (hairline divider): CUSTOMER STORIES > with a Lingo.dev card (How Lingo.dev clears enterprise security reviews without a single database question); COMPARE SUPABASE: Supabase vs Firebase, Supabase vs Heroku Postgres, Supabase vs Auth0. Item = about 40px icon tile (#FDFDFD, hairline, radius 8px, 19px line icon) + title 14px/450 #030303 + description 12px/450 #696969; Developers link list Documentation, Contribute, Supabase Library, Changelog, Support | Open Source, Become a Partner, Partner Catalog, Careers (64), Events & Webinars (14px/450 #464646 with 16px icons, 40px row pitch) | a Blog column with the two latest posts (16px/450 #464646 title + 14px #696969 excerpt); Solutions AI Builders, No Code, Beginners, Developers, Postgres Devs, Vibe Coders | Hackathon Contestants, Startups, Agencies, Enterprise, Innovation Teams | Hosted Postgres, B2B SaaS, FinServ, Healthcare, Agents | Switch from Firebase, Switch from Neon (15px/500 #030303 feature links)
- actions:
  - GitHub stars: 24px GitHub mark + "114.3K" 12px/16px Inter 500 #464646, ghost button 87x26 at x 983 y 19 (padding 4px 10px, radius 8px, transparent); live count, animation only
  - Sign in: secondary small button 59x26 at x 1077 y 19: #FFFFFF fill, #030303 12px/16px 500 label, radius 8px, padding 4px 10px, no CSS border, shadow 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(0,0,0,0.027), inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 -1px 0 rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.067)
  - Start your project: primary small button 120x26 at x 1144 y 19 (ends x 1264): #0E7E4E fill + linear-gradient(rgba(255,255,255,0.016), rgba(0,0,0,0.01)), #FAFCFB 12px/16px 500 label, radius 8px, padding 4px 10px, shadow 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(0,0,0,0.027), inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.067)
  - gap 8px between Sign in and Start your project; 8px between stars and Sign in
- sticky: position sticky, top 0, z-index 40; the same #FDFDFD/90 + blur(4px) at rest and when scrolled (no state change)
- phone: shows wordmark 124x24 at x 24 y 20; hamburger button 40x40 at x 326 y 12 (24px Lucide menu icon, #696969, radius 8px). No CTA in the bar.; menu full-screen #FDFDFD sheet: wordmark top left, 24px close X top right; rows Product, Developers, Solutions (chevron-down right, expand inline), Pricing, Docs, Blog: 15px/22.5px Inter 500 #030303, 39px row pitch at x 16-374 with 1px solid rgba(3,3,3,0.08) (token border-default; renders #E9E9E9 on #FDFDFD, #EBEBEB on #FFFFFF) dividers; bottom-pinned pair of buttons: Sign in (secondary) and Start your project (primary), each about 171x32, 12px/500 labels, 16px apart, 16px from the edges; cta Start your project only inside the open menu and in the hero

**Hero**
- summary: Plain light hero, no media: a two-line Manrope headline left (ink setup + green payoff), a muted Inter lead right, bottom-aligned with the headline, then a primary + secondary button pair under the headline. The product bento starts immediately under it.
- desktop: band header y 65-451 (386px), ground #FDFDFD, no border; column split 2 equal columns (grid lg:grid-cols-2, gap 16px, items-end) inside x 176-1264: headline column x 176-712 (536px), lead column x 728-1264 (536px); vertical anchors H1 line 1 top y 225 (160px below the nav bottom), line 2 y 271, H1 bottom y 317; lead y 245-317 (3 lines, bottom-aligned with H1); buttons y 349-387 (32px under H1); bento starts y 451 (64px under the buttons); text max width H1 536px column, each line is its own block span (line 1 "Build in a weekend", line 2 "Scale to millions", forced break); lead 536px wraps as "Start your project with a Postgres database. / Add Authentication, Data APIs, Edge Functions, / Realtime Data, Storage, and Vector embeddings."; media none; cta size primary 149x38 at x 176, secondary 140x38 at x 333 (8px gap)
- phone: order H1 (2 lines), lead, buttons, then product cards; alignment left, 24px gutter; sizes header y 65-395; H1 34px/37.78px 500, line 1 y 113, line 2 y 151; lead 16px/24px 4 lines y 205-301 (16px under H1); buttons y 325 (157x38 primary at x 24, 148x38 secondary at x 189, labels 15px/22.5px 500); first card y 395
- at rest: Static. No animation in the hero itself.
- type: H1 Manrope 46px/46px weight 500, tracking normal; line 1 #030303, line 2 #0E7E4E. Lead Inter 16px/24px weight 450 #696969.
- cta: Start your project = primary (#0E7E4E, #FAFCFB label 14px/20px 500, 38px tall, padding 8px 16px, radius 9.29px); Request a demo = secondary (#FFFFFF, #030303 label, same size). Phone labels 15px.
- proof: none in the hero; the logo wall comes after the bento

**Product bento**
- summary: Seven product cards in a 12-column grid: Postgres Database wide (6 cols) + Authentication + Edge Functions (3 cols each) on row 1; Storage, Realtime, Vector, Data APIs (3 cols each) on row 2; a one-line two-tone Inter line under it.
- ground: #FDFDFD section; cards #FFFFFF
- desktop: band section y 451-1400, padding 0 96px 96px; grid 12 columns of 79.66px with 12px gaps (x 176-1264); row 1 y 451-851, row 2 y 863-1263, all cards 400px tall; cards Postgres Database 538x400 at x 176; Authentication 263x400 at x 726; Edge Functions 263x400 at x 1001; Storage x 176, Realtime x 451, Vector x 726, Data APIs x 1001, each 263x400; closing line "Use one or all." #030303 + " Best of breed products. Integrated as a platform." #696969, Inter 22px/29.33px 450, -0.16px, one line at x 176 y 1275 (12px under the grid); the two parts are inline spans of one paragraph (never display:block)
- phone: band section y 395-1389, padding 0 24px 64px; grid 1 column 342px, 16px gap, cards shrink to their copy (no illustrations): card heights Postgres 126, Authentication 106, Edge Functions 106, Storage 106, Realtime 106, Vector 106, Data APIs 86 (tops y 395/537/659/781/903/1025/1147); radius 10.67px outer / 9.67px inner, padding 16px; closing line One continuous paragraph: "Use one or all." (#030303) and " Best of breed products. Integrated as a platform." (#696969) are inline spans in the same paragraph, 18px/25.2px -0.16px, wrapping naturally to 3 lines at y 1249. Never set the spans display:block or force a break after a sentence
- anatomy:
  - Card frame: outer link/div radius 16px desktop (10.67px phone), padding 1px, background #FFFFFF + linear-gradient(rgba(3,3,3,0.08) 0, rgba(3,3,3,0.04) 100%) as a 1px gradient border (darker at the top, fading at the bottom); inner panel radius 15px desktop (9.67px phone), #FFFFFF, overflow hidden, padding exactly 24px 16px desktop and 16px phone. Never use 16px corners on phone
  - Card header: 18px line icon (#030303, stroke 1.5) + title Manrope 16px/24px 600 #030303, 8px apart. Desktop: the header row top is card top +25 (inner padding 24 + 1px border): Authentication / Edge Functions titles y 476, row-2 titles y 888; the copy block of the narrow cards has an extra 8px left padding, so icon x = card x +25 (751 for Authentication). Postgres Database: copy column x 201 (card +25), title y 484. Phone: icon x 41, title x 67, title top = card top +17
  - Card copy: Inter 14px/20px 450 #696969 with the doing-phrase in <strong> at the SAME weight 450 but #030303 (no bold): Postgres "Every project is [a full Postgres database], the world's most trusted relational database."; Auth "[Add user sign ups and logins], securing your data with Row Level Security."; Edge "Easily write custom code [without deploying or scaling servers.]"; Storage "[Store, organize, and serve] large files, from videos to images."; Realtime "[Build multiplayer experiences] with real-time data synchronization."; Vector "Integrate your favorite ML-models to [store, index and search vector embeddings]."; Data APIs "Instant ready-to-use [REST APIs]." Copy column 221-250px wide
  - Postgres card (wide): copy column left (x 201, 250px), checklist pinned to the bottom-left: 16px check + "100% portable", "Built-in Auth with RLS", "Easy to extend" (14px/20px #030303, 24px pitch, y 742/766/790); illustration right: database-light.png elephant line drawing in a rounded square, object-contain in a 256x398 box at x 457 y 452
  - Authentication: auth-light.svg fills the lower card (object-cover, 261x398 at the card origin): two columns of hairline rounded cells with monospace emails (blurred rows between); a hover state swaps to auth-active-light.svg (animation only)
  - Edge Functions: edge-functions-light.svg globe linework (light grey meridians, black route lines and 6px black dots) fills the lower card; over it at y 631 a command pill 200x30, #FFFFFF, 1px rgba(3,3,3,0.15) border (#DADADA), radius full, padding 6px 10px: "$ supabase" 12px/16px #696969 + "functions deploy" #0E7E4E (Inter, not mono)
  - Storage: a 3-row tile grid at the bottom-left (rows y 1044/1114/1184, 70px pitch, columns 70px pitch from x 185, cropped by the card at about 3.7 tiles): tiles 62x62, #FDFDFD, 1px rgba(3,3,3,0.08) border, radius 10.67px, a 24px #696969 line icon centred: row 1 image, row 2 file, row 3 video. At rest the rows sit still (any hover motion is animation only). Construction is CSS; icons are storage-tile-*.svg; elshot-card-storage-2x.png is a last-resort reference shot
  - Realtime: realtime-light.svg faint 1px grid fills the card; a 30x38 cursor (#FFFFFF fill, #696969 stroke) near the centre-left with a 67x33 typing pill to its upper right (#FFFFFF, 1px #696969 border, radius full, three 6px #696969 dots); a second small 16x22 cursor lower right. Dots pulse (animation only); rest = three solid dots
  - Vector: vector-light.svg (grey wireframe cube with scattered #3ECF8E/#16B674 dots) centred in a 325x358 box; two provider rows at the bottom-left: 24px OpenAI logo + "OpenAI", 24px Hugging Face logo + "Hugging Face" (14px/20px #030303, 29px pitch, y 1171/1200)
  - Data APIs: data-apis-light.svg table-to-endpoint diagram (left: hairline table chips with icons countries, continents, cities, states, country_codes, oceans; right: pills ".../v1/countries" etc.) fills the lower card at 261x398; data-apis-lines-light.svg repeats as faint horizontal rules behind it
  - Hover (all cards): no lift, no shadow; the illustration swaps to an active/animated variant (animation only). Whole card is one link
- components:
  - product card
  - gradient hairline border
  - two-tone copy

**Logo wall**
- summary: A muted caption line, then a full-bleed hairline band holding 12 monochrome customer wordmarks in 2 rows of 6.
- ground: #FDFDFD; logos #696969 at opacity 0.7
- desktop: band section y 1400-1670; caption "Trusted by fast-growing companies worldwide" Inter 14px/20px 450 #696969 at x 176 y 1424; logo band y 1468-1670 with 1px solid rgba(3,3,3,0.08) (token border-default; renders #E9E9E9 on #FDFDFD, #EBEBEB on #FFFFFF) top and bottom, full width, and an inner container x 80-1360 with 1px hairline left and right (border-x) and padding 40px 96px; grid 6 columns of 161px (column-gap 24px). Each logo sits in a 40px-tall flex cell (h-10) with row-gap 40px, so rows pitch 80px (cell tops y 1509 and 1589); the SVG is 48px tall (lg:h-12) and overflows its 40px cell by 4px top and bottom, centred (logo tops y 1505 and 1585), width auto; order row 1 Lovable, Mozilla, PwC, Figma, v0, Bolt; row 2 GitHub, Betashares, Mobbin, Resend, LangChain, 1Password
- phone: band caption y 1412 (342px wide); band y 1456-1818, inner padding 40px 24px with border-x; grid 3 columns of 97px, column gap 24px; 40px cells with 40px row gap (80px pitch), 4 rows, logo tops y 1501/1581/1661/1741; logos 32px tall (h-8); same opacity 0.7
- anatomy:
  - Logos are flat single-colour fills #696969 (currentColor = foreground-lighter) inside a wrapper with opacity 0.7, so they read as a pale grey on #FDFDFD: a pale supporting texture. No hover colour
  - The band's hairlines (top, bottom, and the two vertical container edges at x 80 and 1360) form an open frame; nothing else in the band
  - Static: no marquee at rest
- components:
  - logo wall

**Dashboard tabs**
- summary: Two-tone H3 at left, three pill tabs, then a large browser-style frame with a looping product video that is cut off by the section's bottom hairline.
- ground: #FDFDFD
- desktop: band section y 1670-2533 (border-bottom hairline, overflow hidden), padding 40px 96px 16px; inner header block has padding-top 48px, so the H3 top sits at y 1758; h3 "Stay productive and manage your app" #030303, then a hard <br>, then " without leaving the dashboard" #696969. Manrope 34px/37.78px 600, exactly 2 lines (76px tall) at y 1758. The H3 has NO max-width: it spans the full 1088px content width, so line 1 never wraps; the break is the <br>, not the measure; tabs y 1866: Table Editor (145x38), SQL Editor (136x38), RLS Policies (147x38), 8px gaps, pills radius 9999px, padding 8px 32px, #FDFDFD fill, label Inter 14px/20px 450 #030303; active tab border 1px #030303, inactive 1px rgba(3,3,3,0.08); hover inactive border #696969; frame y 1936, 1088x644, #FDFDFD, 1px rgba(3,3,3,0.08) border, radius 21.33px, padding 8px, flex column, overflow hidden, shadow 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1). Inside, a 24px top bar (padding 4px 8px 12px) holds three 8px round dots rgba(3,3,3,0.08) (#E9E9E9 on the frame) with 8px gaps, at x 193/209/225, y 1949 (frame +17, +13); then the video 1070x602 at x 185 y 1969 (radius 10.67px). The section clips the frame at y 2533: only its top 597px shows
- phone: band y 1818-2268 (450px, overflow hidden), padding 40px 24px 16px; header block padding-top 48px; h3 22px/29.33px 600, 3 lines (88px) at y 1906, 342px wide; tabs y 2026, 105/96/107 x 34, padding 6px 12px, 8px gaps; frame 342x224 at y 2092, padding 8px, radius 21.33px; top bar 24px with three 8px dots at x 41/55/69 (6px gaps), y 2105; video 324x182 at y 2125. Frame bottom (2316) is clipped by the band end at 2268
- anatomy:
  - Resting state: Table Editor tab active and the table-editor video (dashboard-table-editor-light.webm, poster/reduced-motion image dashboard-table-editor-light.png 2421x1365). The video shows the Supabase dashboard (light): left icon rail, Table Editor list panel, a "Table Editor / There are no tables available in this schema. / Create a new table" dialog. Use the PNG for a static build
  - Switching tabs swaps to SQL Editor / RLS Policies videos (animation only)
- components:
  - pill tabs
  - browser frame

**Framework code**
- summary: Two columns: a two-tone H3 that names the selected framework at left; at right a hairline code panel with six framework icon tabs over a syntax-highlighted React snippet and a small Read docs pill.
- ground: #FDFDFD; code panel transparent with hairline border
- desktop: band section y 2533-3229 (border-bottom hairline), padding 96px; grid 2 columns 544px + 544px, no gap (x 176 and x 720); h3 "Use Supabase with" #696969 + line break + "React" #030303, Manrope 34px/37.78px 600, y 2629; panel x 720 y 2629, 544x503, 1px rgba(3,3,3,0.08) border, radius 8px, overflow clip; tab row 61px tall, 6 cells of 90px with hairline right borders and a hairline bottom; active cell (React) #FFFFFF, others transparent; 28px brand-mono icons #030303: React, Next.js, Flutter, Svelte, Vue, Nuxt; code Source Code Pro 13px/22.1px weight 500, starting x 745 y 2717 (24px inset); tokens: keywords #6B35DC (import, from, const, export, default, function, return, =, =>), identifiers/functions #15593B (supabase, createClient, SUPABASE_URL, useState, useEffect, from, select, then, setTodos, TodoList, items), strings #B45309, punctuation #A0A0A0, plain #525252; docs pill "Read docs for React" + 12px arrow-up-right, absolute bottom 16px right 16px of the panel: 159x30, #FFFFFF, 1px rgba(3,3,3,0.08) border, radius 9999px, padding 6px 12px, Inter 12px/16px 450 #464646
- phone: band y 2269-2954, padding 64px 24px; order H3 one line (22px/29.33px, "Use Supabase with React") then the panel 342x503 at y 2387; tab cells 56.7px; code overflows to the right and is clipped (no wrap); docs pill x 190 y 2843
- anatomy:
  - Code at rest (verbatim, React): import { createClient } from '@supabase/supabase-js' / const supabase = createClient( / process.env.SUPABASE_URL, / process.env.SUPABASE_ANON_KEY / ) / export default function App() { / const [todos, setTodos] = useState([]) / useEffect(() => { / supabase.from('todos').select('*') / .then(({ data }) => setTodos(data)) / }, []) / return <TodoList items={todos} /> / }
  - Blank lines between the import, the client, and the component; 2-space indents
  - Selecting another tab swaps the H3 payoff word and the snippet (animation only)
- components:
  - code panel
  - framework tabs
  - pill link

**Templates**
- summary: Two-tone H3 with a right-aligned underlined link, two large template cards with a drawn browser mockup each, then four small template cards.
- ground: #FDFDFD; cards #FFFFFF
- desktop: band section y 3229-4127 (border-bottom hairline), padding 96px; header H3 "Kickstart your next project" #696969 / "with production ready templates" #030303, Manrope 34px/37.78px 600, y 3325; "View all examples" Inter 14px/20px 450 #464646 underlined, right-aligned at x 1145, baseline-aligned with the H3 bottom (y 3380). The H3 has max-width 576px and a hard <br> after "project": line 1 "Kickstart your next project" (#696969), line 2 "with production ready templates" (#030303), 527px wide; large 2 cards 538x375 at y 3464 (12px gap): #FFFFFF, 1px rgba(3,3,3,0.08) border, radius 10.67px, overflow hidden; body padding 20px 24px, gap 10px: 20px logo (Stripe wordmark 48x20 / Next.js disc 20x20), title Manrope 14px/20px 500 #030303, description Inter 14px/20px 450 #696969 clamped to 2 lines; mockup mockup wrapper: card body area starts at card y +134 (y 3599) with padding 16px 24px 0, overflow hidden; browser frame 488x272 at y 3615 (card +150), radius 10.67px top only, 1px border rgba(3,3,3,0.09) without bottom, shadow 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); title bar 486x31 #FFFFFF, padding 10px 12px, three 10px dots #D2D2D2 with 6px gaps (dots x frame+13/+29/+45, y frame+11), hairline bottom; body 486x240 #FDFDFD. The card bottom crops the frame (card ends y 3839, frame would end 3887); small 4 cards 263x178 at y 3851, 12px gaps: same card, padding 40px 24px; 20px logo (OpenAI, LangChain, Flutter, Expo), title 14px/20px 500 Manrope at y +73, 2-line description
- phone: band y 2955-4868, padding 96px 24px; header H3 22px/29.33px 2 lines, link below it at y 3125 (left); cards 1 column 342px, 12px gap: large cards 342x395 with the mockup 292 wide; small cards 342x178
- anatomy:
  - Stripe mockup (1440): inside the 240px body a flex row of three 96x171 columns (9:16), total 288px, centred horizontally (first column x = body x +99) with its top at body top +51 (y 3698) and margin-bottom -32px so the bottom of the columns is cropped by the card. Columns have 1px rgba(3,3,3,0.08) borders, shared edges (border-left 0 on columns 2 and 3); the middle column is filled #635BFF at 5%. Each column, top padding 8px: a 32x10 bar (y +9), 8px gap, a 64x10 bar (y +27), both radius 5.33px #EEEEEE (middle column #BE93E4 then #8E4EC6), then 16px lower an 80x80 radius-5.33 #EEEEEE block (y +61)
  - Next.js mockup (1440): body split into a 96px sidebar (border-right 1px rgba(105,105,105,0.1), padding 12px) and the main area (padding 12px). Sidebar: 12x12 #0070F3 square radius 5.33 at (12,12); 12px lower a stack of four 8px-tall bars with 6px gaps: 71px #F6F6F6, 56px #EEEEEE, 71px #EEEEEE, 40px #EEEEEE. Main: 64x10 #F6F6F6 bar at (12,12), then 8px below a FOUR-column by THREE-row grid with 6px gaps filling the rest: cells 87x62 at 1440 (38x62 at 390), radius 5.33px; cells are #EEEEEE except row 1 col 2, row 2 col 3 and row 3 col 2, which are #F8F8F8
  - Mockups are DOM drawings; elshot-template-stripe-2x.png / elshot-template-nextjs-2x.png are last-resort reference shots
  - Hover: card fill stays #FFFFFF (hover:bg-surface-100 resolves to the same white); no lift
- components:
  - template card
  - browser mockup
  - underlined text link
- template cards:
  - large card: title "Stripe Subscriptions Starter" | description (verbatim, 2 lines): The all-in-one subscription starter kit for high-performance SaaS applications, powered by Stripe, Supabase, and Vercel.
  - large card: title "Next.js Starter" | description (verbatim, 2 lines): A Next.js App Router template configured with cookie-based auth using Supabase, TypeScript and Tailwind CSS.
  - small card: title "AI Chatbot" | description (verbatim, 2 lines): An open-source AI chatbot app template built with Next.js, the Vercel AI SDK, OpenAI, and Supabase.
  - small card: title "LangChain + Next.js Starter" | description (verbatim, 2 lines): Starter template and example use-cases for LangChain projects in Next.js, including chat, agents, and retrieval.
  - small card: title "Flutter User Management" | description (verbatim, 2 lines): Get started with Supabase and Flutter by building a user management app with auth, file storage, and database.
  - small card: title "Expo React Native Starter" | description (verbatim, 2 lines): An extended version of create-t3-turbo implementing authentication on both the web and mobile applications.
  - Every description is 2 lines (40px) at both widths. Titles at y 3515 (large) and 3924 (small) at 1440.

**Customer stories**
- summary: Two-tone H3 with a right-aligned link, then a 480px horizontal accordion: one wide gradient story panel open and four narrow brand-colour panels closed.
- ground: #FDFDFD; panels are saturated brand grounds
- desktop: band section y 4126-4938, padding 96px 0; header row as Templates: H3 "How industry leaders" #696969 / "are building with Supabase" #030303 y 4222; "More customer stories" 14px #464646 underlined right at x 1114; grid y 4362, x 176-1264, grid-template-columns 752px 76px 76px 76px 76px, gap 8px, height 480px; every panel radius 8px, overflow hidden, cursor pointer; open panel Lovable, 752x480, padding 32px, background linear-gradient(180deg, #FD49A8 0%, #FD2980 10%, #FC1A58 20%, #FA1F41 30%, #FA2733 40%, #FB3D26 50%, #FC541F 60%, #FE6A1E 70%, #FE771D 80%, #FF861B 90%, #FF8F1B 100%). Content column 560px: 32px white logo (y 4394); name "Lovable" Inter 14px/20px 500 #FFFFFF (y 4458); subline Inter 12px/19.5px 450 rgba(255,255,255,0.6) (y 4482); quote Manrope 22px/30.25px 450 #FFFFFF, 3 lines, bottom-anchored (y 4627); attribution: 28px round avatar with 1px white ring + "Bryan Byrne, Product Manager, Lovable" 12px/16px rgba(255,255,255,0.65) (y 4740); "Read the story →" 12px/16px rgba(255,255,255,0.7) underlined (y 4794, 32px from the bottom); closed panels 76x480, padding 32px 22px, only the 32px white logo at the top: eXp Realty #0C0F24, Phoenix Energy #002533, Chatbase #000000, Rally linear-gradient(to left bottom, #444ED4, #1A2DCC)
- phone: band y 4868-5856; H3 22px 2 lines y 4964, link below y 5039; stack 1 column 342px from y 5123: Lovable open 342x350 (padding 20px, radius 10.67px, quote Manrope 18px/24.75px, 5 lines); then closed bars 342x64 (padding 20px, logo only) at y 5480/5552/5624/5696 for eXp Realty, Phoenix Energy, Chatbase, Rally (#1A2DCC), 8px gaps
- anatomy:
  - Resting state: Lovable open. Hovering or clicking a closed panel opens it and closes the others (grid column widths animate, text fades with opacity 0.15s): animation only
  - Logos are the supplied customer SVGs rendered white with CSS filter brightness(0) invert(1); Rally's file is already white
  - Quotes are verbatim customer quotes; never edit them
- components:
  - story accordion panel
- story text:
  - name: Lovable
  - subline: Powering millions of AI-generated apps with a complete Supabase backend.
  - quote (verbatim, no quotation marks): Lovable is about unlocking creativity for anyone. Only 1% of the population knows how to code. Lovable has unlocked that ability for the other 99%.
  - attribution: Bryan Byrne, Product Manager, Lovable
  - link: Read the story →
  - layout 1440: name y 4458 (1 line), subline y 4482 (1 line, 560px wide), quote y 4627 560x91 (3 lines, NO quotation marks around it on the site), attribution row y 4740 (avatar 28px + name text x +38), link y 4794
  - layout 390: name y 5183, subline y 5205 (2 lines, 302px wide), quote y 5249 302x124 (5 lines at 18px/24.75px), attribution y 5388, link y 5436
  - Closed panels carry their own subline/quote at opacity 0 (shown only when opened: animation only). At rest show the logo only.
  - Never put a proof point or house claim in the quote slot, never add a "Customer story" label, never rephrase the attribution.
  - source: observed 2026-10-30 on https://supabase.com/ (light, 1440 and 390, re-measured for r2)

**Community wall**
- summary: Centred H3, one-line lead and a secondary button, then a 620px-tall wall of five staggered columns of tweet cards fading out at the bottom and both sides.
- ground: #FDFDFD; cards #FFFFFF
- desktop: band section y 4938-5847 (border-bottom hairline). Header block padding 80px 24px, centred, 12px gaps: H3 "Join the community" Manrope 34px/37.78px 600 #030303 (y 5018); lead "Discover what our community has to say about their Supabase experience." Inter 16px/24px 450 #696969 (y 5068); "Join us on Discord" secondary button 148x34 (padding 8px 12px, radius 8.86px, 14px/16px 500) at y 5112; wall y 5226, height 620px, overflow hidden, mask-image linear-gradient(#000 50%, transparent 100%) combined with linear-gradient(to right, transparent, #000 10%, #000 90%, transparent): cards fade out over the lower half and the outer 10% each side. Grid 5 columns of 288px, gap 8px, bleeding 16px past both edges (x -16 to 1456); columns start at different heights: column tops y 5226 / 5286 / 5326 / 5286 / 5226 (offsets 0 / 60 / 100 / 60 / 0 from the wall top); cards in a column stack with 8px gaps (see posts.cards for every card top and height); card 288 wide, height from content (125-395px), #FFFFFF, 1px rgba(3,3,3,0.08) border, radius 21.33px, padding 24px; header row: 40px round avatar (1px rgba(3,3,3,0.15) ring) with a 20px #000000 disc at its top-left (-4px,-4px) holding a 12px white X logo; handle "@nerdburn" Inter 14px/20px 500 #030303 8px right of the avatar; text Inter 15px/22.5px 450 #696969 starting 16px under the header
- phone: band y 5856-6780; header y 5936 (22px/29.33px H3, 2-line lead centred), button 157x34; wall 620px tall, 2 columns of 207px with 8px gap, bleeding 16px past both edges; same cards (text wraps to 157px)
- anatomy:
  - Card order and verbatim text: see posts.cards (column 1-5, top to bottom). Columns 1 and 5 hold 3 cards each, as do 2, 3 and 4; the wall clips the last cards at y 5846 (620px) under the fade
  - Posts are verbatim and exempt from the voice rules ("supabse" typo kept)
  - Hover: card border darkens toward the foreground colour (group-hover border-foreground); static at rest
- components:
  - tweet card
  - secondary button
- posts rule: Set every post exactly as given (line breaks shown as \n are paragraph breaks with 0 margin, i.e. a blank line between). Card heights come from this text at 288px wide; the listed heights are the measured ones, so check yours against them. Never shorten, paraphrase or replace a post with a link line. (verbatim, observed 2026-10-30 on https://supabase.com/ (light, 1440 and 390, re-measured for r2))
- posts:
  - column 1 | @nerdburn | card top y 5226, height 192px | text: "It’s fun, feels lightweight, and really quick to spin up user auth and a few tables. Almost too easy! Highly recommend."
  - column 1 | @adeelibr | card top y 5426, height 215px | text: "@supabase shout out, their MCP is awesome. It's helping me create better row securities and telling me best practises for setting up a supabase app"
  - column 1 | @SteinlageScott | card top y 5648, height 215px | text: "I love @supabase's built-in Advisors. The security and performance linters improve everything and boost my confidence in what I'm building!"
  - column 2 | @patrickc | card top y 5286, height 215px | text: "Very impressed by @supabase's growth. For new startups, they seem to have gone from \"promising\" to \"standard\" in remarkably short order."
  - column 2 | @TyronBache | card top y 5508, height 237px | text: "Really impressed with @supabase's Assistant.\n\nIt has helped me troubleshoot and solve complex CORS Configuration issues on Pinger."
  - column 2 | @BowTiedQilin | card top y 5753, height 350px | text: "Working with @supabase has been one of the best dev experiences I've had lately.\n\nIncredibly easy to set up, great documentation, and so many fewer hoops to jump through than the competition.\n\nI definitely plan to use it on any and all future projects."
  - column 3 | @shadcn | card top y 5326, height 125px | text: "Supabase is really good. ⚡"
  - column 3 | @MinimEditor | card top y 5458, height 395px | text: "I’ve always used Supabase just as a database.\n\nYesterday, I helped debug a founder’s vibe-coding project built with React + React Router — no backend server.\nThe “backend” was entirely Supabase Edge Functions as the API.\nFirst time using Supabase this way.\nImpressive."
  - column 3 | @adm_lawson | card top y 5861, height 170px | text: "Love supabse edge functions. Cursor+Supabase+MCP+Docker desktop is all I need"
  - column 4 | @Aliahsan_sfv | card top y 5286, height 282px | text: "Okay, I finally tried Supabase today and wow... why did I wait so long? 😅 Went from 'how do I even start' to having auth + database + real-time updates working in like 20 minutes. Sometimes the hype is actually justified! #Supabase"
  - column 4 | @orlandopedro_ | card top y 5576, height 192px | text: "Love @supabase custom domains\n\nmakes the auth so much better"
  - column 4 | @gokul_i | card top y 5776, height 170px | text: "First time running @supabase in local. It just works. Very good DX imo."
  - column 5 | @yatsiv_yuriy | card top y 5226, height 305px | text: "Supabase is the best product experience I've had in years.\nNot just tech - taste.\nFrom docs to latency to the URL structure that makes you think \"oh, that's obvious\"\nFeels like every other platform should study how they built it\n@supabase I love you"
  - column 5 | @sdusteric | card top y 5538, height 237px | text: "Loving #Supabase MCP. Claude Code would not only plan what data we should save but also figure out a migration script by checking what the schema looks like on Supabase via MCP."
  - column 5 | @dadooos_ | card top y 5783, height 192px | text: "Run supabase locally and just wow in silence! I am impressed! This is the kind of tooling I would want for my team."

**Open source**
- summary: Left: H2, a muted paragraph and a View on GitHub button. Right half: a green dot-matrix rendering of the GitHub star count over a pale dot field, faded by a radial mask.
- ground: #FDFDFD
- desktop: band section y 5847-6220 (373px, border-bottom hairline, overflow hidden); text x 176, 512px column: H2 "Open source from day one" Manrope 34px/37.78px 600 #030303 (y 5943, one line); paragraph Inter 14px/22.75px 450 #696969, 3 lines (y 5997); "View on GitHub" secondary button 154x34 with an 18px GitHub mark, padding 8px 12px (y 6089); media absolute right half x 720-1440, full band height 372px: opensource-stars-dotmatrix.svg (720x372) with mask-image radial-gradient(70% 80%, #000 25%, transparent 75%)
- phone: band y 6781-7440; order H2 34px/37.78px centred on 2 lines (y 6877), paragraph centred 5 lines (y 6968), button 161x34 centred (y 7106), then the dot matrix 342x171 (2:1) at y 7172 with the same radial mask
- anatomy:
  - Dot field: about 1,300 small #EEEEEE squares on a regular grid; the digits "114.3K" are drawn from 61 solid dots (#097C4F, #16B674, #3FCF8E) with a halo of the same greens at 8-12% alpha (#72E3AD/0.08, #16B674/0.1, #3FCF8E/0.12, #097C4F/0.12)
  - The number is live GitHub stars (animation/data only); rest = "114.3K"
- components:
  - secondary button with icon
  - dot matrix
- paragraph text: verbatim: Supabase is built in the open because we believe great developer tools should be transparent, inspectable, and owned by the community. Read, contribute, self-host. You're never locked in, and always in control. | 512x68 at y 5997 (3 lines) on desktop; 342x114 at y 6968 (5 lines, centred) on phone

**Closing CTA**
- summary: Centred one-line two-tone H2 and the same primary + secondary button pair as the hero.
- ground: #FDFDFD
- desktop: band section y 6220-6595 (375px), content block y 6348-6467 centred, gap 24px; h2 "Build in a weekend," #696969 + " scale to millions" #030303, Manrope 34px/40.8px 600, one line centred (x 434-1006), y 6345; buttons Start your project 149x38 primary at x 572 + Request a demo 140x38 secondary at x 728, y 6429
- phone: band y 7440-7835; h2 25.6px/30.72px 600, two lines ("Build in a weekend," / "scale to millions") centred at y 7565; buttons y 7677, labels 15px
- anatomy:
  - Note the comma and lower-case "scale": the closing line is one sentence, unlike the two-line hero
  - No background treatment, no border
- components:
  - primary button
  - secondary button

**Footer**
- summary: Light footer on the page ground: a security strip, then the wordmark, six social icons and a newsletter form at left with six link columns at right, and a hairline bottom bar with the copyright and a theme toggle.
- ground: #FDFDFD (bg-alternative, same as the page)
- anatomy:
  - Security strip (y 6595-6695, padding 40px 96px, 2-column grid with 112px gap): "We protect your data." 14px/20px 450 #030303 + "More on Security" 14px #0E7E4E link; right: SOC2 Type 2 Certified, HIPAA Compliant, ISO 27001 Certified, each a 16px #030303 check + label #030303 + qualifier #696969, inline at x 639 / 849 / 1022
  - Main block y 6792: grid 7 columns (141.7px, 16px gap); left 2 columns: wordmark 160x30 (footer-wordmark.svg) at x 176; social icons 22px #696969 at y 6854, 42px pitch (X, GitHub, Discord, YouTube, TikTok, Instagram; sr-only labels Twitter, GitHub, Discord, Youtube, TikTok, Instagram); "Get product updates and news from Supabase." 14px/20px #696969 (y 6908, 299px); email input 240x35 (#F9F9F9 fill, 1px rgba(3,3,3,0.15) border = #DADADA, radius 8px, padding 8px, placeholder "Your email" 12px) at y 6956; Subscribe primary small button 78x26 (12px/16px 500) at y 6999
  - Six link columns at x 491, 623, 754, 886, 1017, 1149 (115px wide, 131.5px pitch): heading Manrope 15px/22.5px 600 #030303; links Inter 14px/20px 450 #696969, 28px pitch (two-line items wrap at 115px); hover #030303
  - Product: Pricing, Database, Auth, Functions, Compute, Realtime, Storage, Vector, Cron, Feature Catalog, Launch Week
  - Solutions: AI Builders, No Code, Beginners, Developers, Postgres Devs, Vibe Coders, Hackathon Contestants, Startups, Agencies, Enterprise, Innovation Teams, Hosted Postgres, B2B SaaS, FinServ, Healthcare, Agents, Switch from Firebase, Switch from Neon
  - Resources: Blog, Support, System Status, Become a Partner, Partner Catalog, Knowledge Base, FAQs, Brand Guidelines, Security & Compliance, Regions, SOC2, HIPAA
  - Developers: Documentation, Supabase Library, Changelog, RSS
  - Community: Events & Webinars, SupaSquad, Contributing, Open Source, DevTo
  - Company: Company, Careers, General Availability, Legal Hub, Privacy Policy, Privacy Settings (a button), Acceptable Use Policy, Humans.txt, Lawyers.txt, Security.txt, Contact Us
  - Bottom bar y 7534: 128px under the columns, 1px 1px solid rgba(3,3,3,0.08) (token border-default; renders #E9E9E9 on #FDFDFD, #EBEBEB on #FFFFFF) top rule, padding-top 32px: "© Supabase Inc" Inter 12px/16px 450 #696969 left (no year); 20px sun icon theme toggle #464646 right (aria "Toggle theme")
  - No street address or phone number on the homepage; legal entity in the copyright is "Supabase Inc"
- phone: Footer y 7835-9876. Security strip as a 2-column grid (155px each, 32px gap): left "We protect your data." over "More on Security"; right the three certifications stacked (28px pitch, qualifiers hidden). Then wordmark, socials (22px, 42px pitch at y 8085), newsletter text, full-width input 342x33 and Subscribe; link columns in a 2-column grid (163px, 16px gap x, 48px gap y): Product | Solutions (y 8283), Resources | Developers (y 8866), Community | Company (y 9280); bottom bar y 9751 with the hairline rule, copyright left and sun icon right.

**On dark grounds**
- context: The light homepage has no dark band; its only dark grounds are the customer story panels (#0C0F24, #002533, #000000, the Rally blue gradient and the Lovable gradient). Rules there:
- secondary button: none used on dark panels
- link: "Read the story →" 12px/16px rgba(255,255,255,0.7), underlined
- muted text: rgba(255,255,255,0.6) for the subline, rgba(255,255,255,0.65) for the attribution; primary text #FFFFFF
- hairline: 1px #FFFFFF ring around the 28px avatar; no other rules
- logo variant: customer logos forced white with filter brightness(0) invert(1). Supabase's own mark on dark (dark theme) is the green-and-white wordmark (supabase-logo-green-white-transparent.svg); in the dark theme the payoff green becomes #4ACD8B on #131413

## Components

- **button primary** (observed): fill #0E7E4E, text #FAFCFB, radius 9.29, height 38, padding 8px 16px, text style 14px/20px Inter 500 (15px/22.5px phone), shadow 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(0,0,0,0.027), inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.067), example Start your project (149x38), small 26px tall, radius 8px, padding 4px 10px, 12px/16px 500 (nav Start your project 120x26, footer Subscribe 78x26), fill overlay linear-gradient(rgba(255,255,255,0.016), rgba(0,0,0,0.01)), padding x 16, font size 14, weight 500, face body
  - hover (observed): fill #007243
  - active (observed): scale 0.97
  - transition (observed): 
- **button secondary** (observed): fill #FFFFFF, text #030303, border none: the edge is drawn by inset shadows, radius 9.29, height 38, padding 8px 16px, text style 14px/20px Inter 500, shadow 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(0,0,0,0.027), inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 -1px 0 rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.067), example Request a demo (140x38), sizes 38px (hero, CTA); 34px with padding 8px 12px radius 8.86px (Join us on Discord, View on GitHub); 26px small (Sign in), padding x 16, font size 14, weight 500, face body
  - hover (observed): fill #F8F8F8 (rgba(3,3,3,0.027) over white)
  - active (observed): scale 0.97
- **pill tab** (observed): fill #FDFDFD, border 1px #030303 active; 1px rgba(3,3,3,0.08) inactive; hover inactive 1px #696969, radius 9999, padding 8px 32px desktop, 6px 12px phone, height 38px desktop, 34px phone, text style 14px/20px Inter 450 #030303
- **text link** (observed): color #464646, text style 14px/20px 450, underline, hover #030303, underline, example View all examples, More customer stories, inline green links #0E7E4E (More on Security)
- **product card** (observed): frame radius 16px, 1px gradient border rgba(3,3,3,0.08) to rgba(3,3,3,0.04) top to bottom (padding-box trick), inner #FFFFFF radius 15px, padding 24px 16px (16px phone), height 400px desktop, radius 16, radius phone 10.67
- **card** (observed): fill #FFFFFF, border 1px rgba(3,3,3,0.08), radius 10.67, shadow none (only browser mockups/frames carry shadow-lg), radius variants 10.67px templates; 21.33px tweet cards and the dashboard frame; 8px code panel and story panels
- **input** (observed): fill #F9F9F9, border 1px rgba(3,3,3,0.15) (#DADADA), radius 8, height 35, padding 8px, text 12px placeholder #696969
- **focus** (published rule; ring not measured): style focus-visible ring from the shared focus-ring utility; colour and width not measured on the homepage, rule Never animate the focus indicator (published accessibility rule)

## Icon tokens

Grid 24x24 frame, content optically centered at about 18x18, stroke 1.5 by default; 1 at 16px in the usage sample (published).
| Name | Size | Use |
|---|---|---|
| default | 24px |  |
| inline (usage sample) | 16px |  |

## Signature moves

### Two-tone headline

Where: hero and every section H2 on the homepage and the brand page's closing band.
Do: a Manrope headline in two parts: the setup in muted gray (#696969), the payoff in ink (#030303), on two lines or one. In the hero the payoff is the green primary #0E7E4E instead ('Build in a weekend' / 'Scale to millions'). Sentence case, medium weight, normal tracking. One per section heading.
Don't: bold it up, underline the payoff, or set the payoff in the bright #3ECF8E on a light ground (it fails text contrast; the light theme darkens green for text).
Example: "Build in a weekend Scale to millions", with "Scale to millions" set as color.

### Dark words inside muted copy

Where: product cards and the 'Use one or all.' line.
Do: card body copy is set muted gray, and the phrase that says what the product does is lifted to ink: 'Store, organize, and serve' dark, 'large files, from videos to images.' muted. Same weight, color only. One lifted phrase per card.
Don't: emphasize with green, italics or bold; the copywriting guide bans italic emphasis.
Example: "Use one or all. Best of breed products.", with "Use one or all." set as color.

### Hairline product bento

Where: the product grid below the hero, template cards, the logo wall.
Do: near-white cards with 1px low-contrast borders and 16px radius, a small line icon plus Manrope 16/600 title top left, muted copy, and a thin grayscale line illustration of the product (a Postgres elephant, a wireframe globe, a cube of vectors) with a few green dots as the only color. One bento per page.
Don't: fill cards with brand green or use colorful 3D illustration; color is a few green points.
Example: "Storage".

### Code and terminal as the picture

Where: Edge Functions card, 'Use Supabase with React' sample, mono labels.
Do: real code in Source Code Pro stands in for imagery: a rounded chip reading $ supabase functions deploy with the command in green, and a full syntax-highlighted client sample beside framework tabs. Code shown is real and runnable.
Don't: fake pseudo-code or set code in the sans.
Example: "$ supabase functions deploy".

## Messaging: rules

The homepage runs one promise ('Build in a weekend, scale to millions') and lets the product grid, real code and named customer stories carry the proof. Claims are short and concrete; the community quote wall does the enthusiasm the house copy avoids.

Why it works: Developers trust what they can run and who already ships on it, so proof is code, logos and named numbers.

- Lead with the weekend-to-millions promise
- Name the product (Database, Auth, Storage...) before the benefit
- Proof is named: customer, number, what changed
- Close every page on the same tagline and two buttons: Start your project, Request a demo

Sources: https://supabase.com/, https://supabase.com/company, https://supabase.com/open-source

## Voice: rules

Supabase publishes a concise UI copywriting guide: four tone traits, then bad/good pairs for buttons, labels, errors, success, tooltips, headings, empty and loading states, confirmations, and a short banned list (easily, simply, powerful, vague verbs). It ends with a six-question checklist.

Why it works: Copy that tells a developer exactly what happened and what to do next is the fastest UI there is.

|  |  |
|---|---|
| Tone | Direct, action-oriented, technical without jargon, pragmatic |
| Case | sentence; title case for nav page names |
| Auth words | Sign in, Sign out, Sign up |
| Product names | Database, Auth, Storage, Edge Functions, Realtime, Vector |
| Formatting | inline code for technical terms; bold sparingly; no italics |
| Checklist | action verb, specific, completable, no marketing, sentence case, one sentence |

- Specific verbs on buttons: Create table, not Submit
- Errors: what went wrong, then the fix
- Present tense, active voice
- Sentence case everywhere but nav page names
- One sentence max for labels, buttons and tooltips
- Postgres, not PostgreSQL; Supabase, one word, capital S
- Don't apologize or blame (Sorry, Oops)
- Don't use marketing adverbs (easily, simply) in UI
- Don't use italics for emphasis
- Don't use exclamation marks except for critical warnings

Do and don't:
- Do: "Invalid API key. Check your project settings.". What went wrong, then the fix (the guide's good example).
- Don't: "Oops! Something went wrong.". Apology and vagueness, from the guide's bad column.

Real examples, to look at on Supabase's own pages (not for reuse):
- Voice and tone: direct, action-oriented, technical, pragmatic: https://supabase.com/design-system/docs/copywriting
- Bad/good pairs for buttons and form labels: https://supabase.com/design-system/docs/copywriting
- Empty, loading and confirmation patterns: https://supabase.com/design-system/docs/copywriting

Sources: https://supabase.com/design-system/docs/copywriting, https://supabase.com/design-system/docs/accessibility, https://supabase.com/brand-assets

## Logo: rules

Two marks: the Icon (the green lightning-bolt symbol alone) and the Wordmark (symbol plus lowercase supabase lettering), each in a green version for light and dark grounds, and a one-color wordmark in black or white. Every wordmark file includes the symbol; there is no lettering-only file. All files have transparent backgrounds and already carry the logo colors.

Why it works: A bolt for speed in Supabase green, shipped as ready files with copy-paste code, so nobody has to rebuild or recolor it.

|  |  |
|---|---|
| Lockups | Icon; Wordmark (light, dark); One-color wordmark (black, white) |
| Embed size (brand page code) | Icon 23x24; Wordmark 124x24; one-color 123x24; Connect button 156x31 |
| Clear space | not published |
| Minimum size | not published |
| Colors | #3ECF8E symbol with a #249361 gradient; #1F1F1F or white lettering |

- Wordmark by default whenever there is space for the name
- Icon alone in small spaces: avatars, app icons, a row of partner logos
- One-color wordmark (black or white) when only one color prints, or over a photo
- Pick the file for the background it sits on, not your browser or editor theme
- Use the logos only to refer to Supabase
- Connect Supabase button only starts the OAuth 2.0 flow of a Supabase integration
- Don't change the files
- Don't repaint the logo or change its colors
- Don't set the lettering without the symbol
- Don't use the Connect Supabase button as a logo
- Don't use the logo to imply endorsement (only to refer to Supabase)

Not published: clear space; minimum size; placement; co-branding lockup.

Real examples, to look at on Supabase's own pages (not for reuse):
- Icon and Wordmark, each on light and dark: https://supabase.com/brand-assets
- One-color wordmark, the three colors, and the Connect Supabase button: https://supabase.com/brand-assets

Sources: https://supabase.com/brand-assets, https://supabase.com/terms

## Color: rules

The brand page publishes three colors with HEX, RGB, HSL and OKLCH: Supabase green #3ECF8E (the logo symbol), Dark gray #1C1C1C and Light gray #F8F8F8 (backgrounds behind the logo). The design system splits green in two: a fixed brand green for identity, and a functional primary that darkens in light mode for readable text and buttons. Everything else is neutral grays plus sparing destructive and warning accents.

Why it works: Neutral grounds make the one green unmistakable; separating identity green from text green keeps it accessible.

|  |  |
|---|---|
| Supabase green | #3ECF8E brand-default |
| Dark gray | #1C1C1C gray-dark-200 |
| Light gray | #F8F8F8 gray-light-200 |
| Primary (light) | oklch(0.525 0.12 157.5) = #0E7E4E |
| Proportions | not published |

- Supabase green #3ECF8E is the logo color and the explicitly branded accent (bg-brand-default only when the canonical green is required)
- Readable green text, links and primary buttons use primary (light #0E7E4E), not brand green
- Grays (#1C1C1C, #F8F8F8) sit behind the logo
- Accent text colors (destructive, warning) sparingly
- Never tint icons destructive; the confirmation dialog carries that
- Focus ring color is one shared ring from the primary hue; variants don't change it
- Dark and light themes both supported, plus system
- Don't repaint the logo
- Don't set body text in #3ECF8E on light grounds
- Don't use color to signal destruction on icons

Not published: color proportions or ratios; a marketing palette beyond the three logo colors.

Do and don't:
- Do: "Start your project". Primary buttons in the darkened primary green on light grounds (the homepage CTA).
- Don't: "Start your project". Bright brand green as text on white: the guide darkens green for readability.

Real examples, to look at on Supabase's own pages (not for reuse):
- The three published colors with HEX, RGB, HSL, OKLCH: https://supabase.com/brand-assets
- Primary vs brand green tokens: https://supabase.com/design-system/docs/color-usage
- Text, background and border token swatches: https://supabase.com/design-system/docs/color-usage

Sources: https://supabase.com/brand-assets, https://supabase.com/design-system/docs/color-usage, https://supabase.com/design-system/docs/tailwind-classes, https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)

## Typography: rules

Three open faces, all from the site CSS: Manrope for headings (--font-heading), Inter for body and UI (--font-sans) and Source Code Pro for code and meta labels (--font-mono). Headlines are medium weight (500 hero, 600 section), sentence case, normal tracking; body is Inter at 450 on the variable axis. The design system's typography.css maps h1 to text-2xl tracking-tight, h2 text-xl, h3 text-base, h4/h5 text-sm medium, and a mono uppercase meta style.

Why it works: A friendly geometric display over a neutral workhorse sans, with code as a third voice: approachable, but plainly a developer tool.

|  |  |
|---|---|
| Display | Manrope 500 (hero 46px/1.0), 600 (section 34px/1.11) |
| Body | Inter 450, 16/24 lead, 14 card copy |
| Mono | Source Code Pro |
| UI scale (typography.css) | h1 text-2xl tracking-tight; h2 text-xl; h3 text-base; h4 text-sm medium; meta text-xs mono uppercase tracking-wider |
| Inline code | 13>12, 14>12.5, 15>13.25, 16>14, 20>18 px |
| Licences | all SIL OFL 1.1 |

- Manrope for headlines and card titles
- Inter for body, nav, buttons and forms
- Source Code Pro for code, commands, token names and uppercase meta labels
- Sentence case headings
- Inline code is 2px smaller than surrounding text from 16px up, minimum 12px
- Text-primary green for links and labels only
- Don't use bold 700+ for headlines (the site uses 500/600)
- Don't set code in the sans
- Don't use italics for emphasis

Real examples, to look at on Supabase's own pages (not for reuse):
- Typography utilities and inline code sizing: https://supabase.com/design-system/docs/typography
- Manrope two-tone hero over Inter body: https://supabase.com/

Sources: https://supabase.com/design-system/docs/typography, https://github.com/supabase/supabase/blob/master/packages/config/typography.css, https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30), https://supabase.com/

## Graphic elements: rules

Recognizable without the logo: a near-white page of hairline-bordered cards, thin grayscale line drawings with a few green dots, real code in Source Code Pro, two-tone Manrope headlines, and a GitHub star counter drawn as a green dot matrix.

Why it works: Engineering drawings and real code say 'tool for builders'; green dots make the brand appear only where something is live.

|  |  |
|---|---|
| Card | near-white, 1px hairline border, 16px radius |
| Illustration | gray linework, green dots |
| Code chip | rounded, mono, green command |
| Dot matrix | green squares spelling the GitHub star count |

- 1px low-contrast borders frame cards and grid cells
- Line illustrations are grayscale with green points of data
- Show real code and real commands
- Two-tone headlines: muted setup, ink payoff
- Logo wall in monochrome gray
- Don't use gradients or heavy color fills on light pages (customer story cards are the exception, in the customer's colors)
- Don't use stock 3D or glossy illustration
- Don't use drop shadows for depth

Real examples, to look at on Supabase's own pages (not for reuse):
- Hairline product bento with line illustrations: https://supabase.com/
- Open source band with the green dot-matrix star count: https://supabase.com/

Sources: https://supabase.com/

## Iconography: rules

Lucide for every standard UI icon; a small custom set (database, auth, storage, edge functions, realtime, vector, buckets, integrations) for what Lucide lacks. Icons are 24x24 with about 18x18 of content, 1.5 stroke, round caps and joins, currentColor only, built from plain paths.

Why it works: Plain outline icons that inherit text color keep the UI quiet and consistent; the text does the work.

|  |  |
|---|---|
| Library | Lucide + custom set |
| Frame | 24x24, content ~18x18 |
| Stroke | 1.5 default; 1 at 16px in usage |
| Caps/joins | round |
| Color | currentColor |
| Labels | aria-label for meaningful icons, aria-hidden for decorative |

- Pair icons with text; they aren't obvious enough alone
- Legible at small sizes, unembellished
- Same icon for the same action everywhere
- Tint with text classes
- Export 24x24, viewBox 0 0 24 24, stroke currentColor, stroke-width 1.5, fill none
- Fill-only icons (logos) set stroke none on the root
- Don't hardcode colors
- Don't add background rects or wrapper groups
- Don't tint destructive actions red

Real examples, to look at on Supabase's own pages (not for reuse):
- Principles: paired, clear, consistent: https://supabase.com/design-system/docs/icons
- Custom icon set: https://supabase.com/design-system/docs/icons

Sources: https://supabase.com/design-system/docs/icons, https://supabase.com/design-system/docs/accessibility

## Illustration: rules

No published illustration guideline. On the homepage, illustration is technical line drawing: a Postgres elephant outline, a wireframe globe for Edge Functions, a cube of vector points, table-to-endpoint diagrams for Data APIs, all in gray hairlines with green dots, plus faithful product UI screenshots (Table Editor).

Why it works: It explains the product mechanically, the way an engineer would sketch it.

|  |  |
|---|---|
| Guideline | not published (observed) |
| Line | thin gray |
| Accent | green dots |

- Gray hairlines on near-white
- Green only as data points or the live element
- Draw the mechanism (tables to endpoints, points in vector space)
- Product UI shown as real screenshots in a window frame
- Don't use characters, mascots or colorful scenes
- Don't use more than one accent color

Real examples, to look at on Supabase's own pages (not for reuse):
- Line illustrations in the product grid: https://supabase.com/
- Product UI in a window frame: https://supabase.com/

Sources: https://supabase.com/

## Photography: rules

Supabase uses almost no photography: small circular avatars on community posts and customer quotes. The brand page notes the one-color wordmark is for use over a photo. No photo guideline is published.

Why it works: The product and the community are the picture.

|  |  |
|---|---|
| Guideline | not published |
| Use | avatars only (observed) |

- Avatars small and circular, beside a name
- Over a photo, use the one-color wordmark
- Don't use stock lifestyle photography
- Don't put the green wordmark on a busy photo

Real examples, to look at on Supabase's own pages (not for reuse):
- Community wall with small circular avatars: https://supabase.com/

Sources: https://supabase.com/, https://supabase.com/brand-assets

## Interface and layout: rules

Marketing pages sit in a centered column on a near-white ground with sections separated by full-width hairlines; a sticky top nav with the wordmark left and Sign in / Start your project right; a security strip and a dense multi-column footer close every page. The design system's layout page is for the Studio app: PageContainer widths small, default and full, breadcrumbs first, actions where the user is looking.

- Sticky nav: wordmark left, primary CTA right
- Sections divided by full-width hairlines
- Close with the tagline band, then the security strip and footer
- In product UI, pick width by content (small, default, full)

Not published: marketing grid, margins and spacing scale (measured in the next step).

Sources: https://supabase.com/design-system/docs/ui-patterns/layout, https://supabase.com/

## Rules: rules

- Write Supabase as one word with a capital S
- Use the official files; pick the one for the background
- Green #3ECF8E for identity, darker primary for readable text
- Manrope headings, Inter body, Source Code Pro code
- Sentence case, specific verbs, no apologies
- Logos only to refer to Supabase
- Don't repaint or modify the logo
- Don't use the lettering without the symbol
- Don't use the Connect Supabase button as a logo
- Don't write PostgreSQL, SupaBase or Supa Base
- Don't use marketing adverbs in UI copy
- Don't animate the focus ring

Sources: https://supabase.com/brand-assets, https://supabase.com/design-system/docs/copywriting, https://supabase.com/design-system/docs/color-usage, https://supabase.com/design-system/docs/accessibility, https://supabase.com/terms

## Applications

| Format | What | Source |
|---|---|---|
| Integration button | Connect Supabase button (dark and light) for starting the OAuth 2.0 flow in third-party integrations, 156x31 | https://supabase.com/brand-assets (Integrations) |
| Product UI | Studio pages built from PageContainer, breadcrumbs, PageHeader and PageSection, sized small/default/full | https://supabase.com/design-system/docs/ui-patterns/layout |

## By format

How our engine applies Supabase's system to each format. This is our recipe built from their published rules and homepage, not something Supabase publishes. Level = how much green and illustration a format carries (0 neutral, 5 heavy). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it per kit.spec.page (light theme): #FDFDFD page and sticky 65px nav (wordmark, 6 nav items, 26px Sign in + green Start your project); Manrope 46/46 hero in two lines (ink + #0E7E4E) with a muted 16px Inter lead bottom-aligned at right and a 38px primary + secondary pair; a 12-column bento of #FFFFFF product cards (gradient hairline border, radius 16px, grey line illustrations); grey logo wall in a hairline band; two-tone Manrope 34px section headings (muted setup, ink payoff); real code in Source Code Pro 13px; story accordion; tweet wall; one-line two-tone closing CTA; light footer with security strip. Sections separated by full-bleed rgba(3,3,3,0.08) hairlines, not ground changes. Homepage voice for headlines and card copy; product-UI copywriting rules for every UI string | which product cards and sections; dark theme (#1C1C1C/#141414 grounds, #3ECF8E as the green) when the page is for a dark context |
| Deck | 2 | Wordmark top left, Manrope sentence-case headlines in two tones, Inter body, hairline frames, real code or product UI as visuals | light or dark ground |
| Proposal page | 1 | Near-white, Inter body, Manrope headings, one green CTA, proof as named customers and numbers | a code sample when the buyer is technical |
| Social post | 3 | Dark gray or near-white ground, one green, a Manrope two-tone line, a real snippet or line drawing | dark or light |
| Email | 1 | Plain, sentence case, specific subject and CTA verb, wordmark at top | one green button |
| Error message | 0 | What went wrong, then how to fix it; no apology, no exclamation | inline code for the technical term |

## Checks before anything ships

- **Logo hidden**: Cover the bolt. It should still read as Supabase: near-white or near-black grays, one green, Manrope two-tone headlines, hairline cards, gray line drawings with green dots, and real code.
- **Swap test**: Put another backend vendor's logo on it. If the green-as-live-signal, the code-as-image and the plain, specific copy wouldn't look out of place, it's generic and goes back.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Supabase's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Logo clear space: not published.
- Logo minimum size: not published (the brand page's embed code sizes, 24px tall, are not stated as a minimum).
- Logo placement and co-branding/partner lockups: not published.
- Color proportions or ratios: not published.
- A marketing palette beyond the three logo colors: not published on the brand page; the rest comes from design-system tokens.
- Font families: not published in the guide or design-system docs; read from the homepage stylesheet.
- A marketing type scale (sizes per role): not published; only the product UI utilities in typography.css. Homepage sizes are measured.
- Illustration and photography guidelines: not published.
- Motion principles, durations and easing: not published (only: never animate the focus indicator).
- Marketing layout grid, margins and spacing scale: not published.
- Mission statement: not published on the pages read.
- Marketing voice: not published; the copywriting guide covers product UI copy only.

Logos and reference images belong to Supabase. Look at them on Supabase's own pages; don't reuse them.