{ "schema": "brand-kit@2", "palette": { "paper": "#FDFDFD", "surface": "#F8F8F8", "ink": "#030303", "ink_muted": "#696969", "accent": "#0E7E4E", "on_accent": "#FFFFFF", "accent_secondary": "#3ECF8E", "night": "#1C1C1C", "on_night": "#EDEDED", "note": "Two greens on purpose: #3ECF8E is the fixed identity green (logo, explicitly branded surfaces); #0E7E4E is the light-theme functional primary (buttons, links, the green hero line), darkened for AA. On dark grounds the bright green is the ink. paper/ink/ink_muted are measured on the light homepage; surface and night are the published logo-background grays. on_accent: the token is oklch(0.99 0.00275 157.5), white to the eye", "prov": "published", "source": "https://supabase.com/brand-assets (Colors)", "also": [ "https://supabase.com/design-system/docs/color-usage" ], "extras": [ { "name": "Supabase green", "hex": "#3ECF8E", "role": "The main color of the logo symbol (token brand-default). Fixed identity green for explicitly branded surfaces; does not follow the theme's primary hue. Also rgb(62 207 142), hsl(153.1 60.2% 52.7%), oklch(76.2% 0.154 159.4)", "prov": "published", "source": "https://supabase.com/brand-assets (Colors)", "also": [ "https://supabase.com/design-system/docs/color-usage (Brand green)" ] }, { "name": "Dark gray", "hex": "#1C1C1C", "role": "Background behind the logo on dark (token gray-dark-200); rgb(28 28 28)", "prov": "published", "source": "https://supabase.com/brand-assets (Colors)" }, { "name": "Light gray", "hex": "#F8F8F8", "role": "Background behind the logo on light (token gray-light-200); rgb(248 248 248)", "prov": "published", "source": "https://supabase.com/brand-assets (Colors)" }, { "name": "Primary (light theme)", "hex": "#0E7E4E", "role": "Functional accent in light mode: links, labels, primary button fill (primary-solid equals primary in light). Darkened to meet WCAG AA for normal text. Hex converted from the published token oklch(0.525 0.12 157.5)", "prov": "published", "source": "https://supabase.com/design-system/docs/color-usage (Primary ink, Primary solid)", "also": [ "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30): .light --primary:oklch(.525 .12 var(--primary-hue)), --hue:157.5" ], "site_use": "Start your project buttons, green hero line, footer Subscribe (observed https://supabase.com/ 2026-10-30)" }, { "name": "Logo gradient dark stop", "hex": "#249361", "role": "Darker stop of the linear gradient on the lower half of the symbol, fading from #249361 to #3ECF8E inside the official files. Never repaint", "prov": "published", "source": "https://supabase.com/brand-assets (official SVG files)" }, { "name": "Wordmark ink", "hex": "#1F1F1F", "role": "Lettering color in the green-and-black wordmark for light backgrounds", "prov": "published", "source": "https://supabase.com/brand-assets (supabase-logo-green-black-transparent.svg)" }, { "name": "Brand 600 (light)", "hex": "#097C4F", "role": "brand-600 light theme, hsl(156.5 86.5% 26.1%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 500 (light)", "hex": "#16B674", "role": "brand-500 light theme, hsl(155.3 78.4% 40%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 400 (light)", "hex": "#72E3AD", "role": "brand-400 light theme, hsl(151.3 66.9% 66.9%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 300 (light)", "hex": "#A9F1CA", "role": "brand-300 light theme, hsl(147.5 72% 80.4%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 200 (light)", "hex": "#D3F8E4", "role": "brand-200 light theme, hsl(147.6 72.5% 90%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 600 (dark)", "hex": "#85E0BA", "role": "brand-600 dark theme, hsl(154.9 59.5% 70%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 500 (dark)", "hex": "#006239", "role": "brand-500 dark theme, hsl(154.9 100% 19.2%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Brand 400 (dark)", "hex": "#00311D", "role": "brand-400 dark theme, hsl(155.5 100% 9.6%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 100", "hex": "#161616", "role": "gray-dark-100, hsl(0 0% 8.6%)", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 300", "hex": "#232323", "role": "gray-dark-300", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 500", "hex": "#2E2E2E", "role": "gray-dark-500", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 700", "hex": "#3E3E3E", "role": "gray-dark-700", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 900", "hex": "#707070", "role": "gray-dark-900", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 1100", "hex": "#A0A0A0", "role": "gray-dark-1100", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray dark 1200", "hex": "#EDEDED", "role": "gray-dark-1200, top text step on dark; the light-on-dark Connect Supabase button fill", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 100", "hex": "#FCFCFC", "role": "gray-light-100", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 400", "hex": "#EDEDED", "role": "gray-light-400", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 600", "hex": "#E2E2E2", "role": "gray-light-600", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 800", "hex": "#C7C7C7", "role": "gray-light-800", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 900", "hex": "#8F8F8F", "role": "gray-light-900", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 1100", "hex": "#6F6F6F", "role": "gray-light-1100", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Gray light 1200", "hex": "#171717", "role": "gray-light-1200, top text step on light", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Secondary", "hex": "#7A66FF", "role": "secondary-default, hsl(247.8 100% 70%); a violet used sparingly in UI and code tokens", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Destructive", "hex": "#E54D2E", "role": "destructive-default, hsl(10.2 77.9% 53.9%); errors only, sparingly, never to tint icons", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)", "also": [ "https://supabase.com/design-system/docs/color-usage (Text)", "https://supabase.com/design-system/docs/icons (Tints)" ] }, { "name": "Warning (dark)", "hex": "#DB8E00", "role": "warning-default dark theme, hsl(38.9 100% 42.9%); sparingly", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "name": "Page ground (homepage, light)", "hex": "#FDFDFD", "role": "Light theme page ground: oklch(0.995 0 0) from the theme's --surface .995, chroma 0", "prov": "observed", "source": "https://supabase.com/ (2026-10-30)" }, { "name": "Ink (homepage, light)", "hex": "#030303", "role": "Light theme foreground: oklch(0.1 0 0) from --foreground-lightness .1; headlines, nav, emphasized words", "prov": "observed", "source": "https://supabase.com/ (2026-10-30)" }, { "name": "Muted ink (homepage, light)", "hex": "#696969", "role": "oklch(0.52 0 0): the gray first line of two-tone headlines and the unemphasized part of card copy", "prov": "observed", "source": "https://supabase.com/ (2026-10-30)" }, { "name": "Dark surface", "hex": "#141414", "role": "Dark theme surface from --surface .19 (oklch(0.19 ...)); the ground of supabase.com when the visitor's system is dark", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30)" }, { "hex": "#E9E9E9", "name": "Hairline (rendered)", "role": "border-default rgba(3,3,3,0.08) over #FDFDFD: section rules, card borders, nav bottom", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#EBEBEB", "name": "Hairline on white", "role": "border-default over #FFFFFF cards", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#DADADA", "name": "Control border", "role": "rgba(3,3,3,0.15): input border, command pill border, avatar ring", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#E6E6E6", "name": "Mockup frame border", "role": "border-stronger rgba(3,3,3,0.09) on template browser mockups", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FFFFFF", "name": "Card white", "role": "product, template and tweet cards; secondary button", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FAFCFB", "name": "On-primary text", "role": "oklch(0.99 0.00275 157.5), label on green buttons", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#007243", "name": "Primary hover", "role": "oklch(0.485 0.12 157.5), primary button hover", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#464646", "name": "Ink light", "role": "oklch(0.394 0 0): GitHub count, text links, docs pill, theme toggle, menu items", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#F9F9F9", "name": "Input fill", "role": "rgba(3,3,3,0.015) over the page", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#EEEEEE", "name": "Muted 10% / dot field", "role": "#696969 at 10%: mockup bars, dot-matrix field", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#F6F6F6", "name": "bg-muted", "role": "rgba(3,3,3,0.027) over #FDFDFD: mockup bars", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#D2D2D2", "name": "Mockup traffic dots", "role": "#696969 at 30% over white", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#3FCF8E", "name": "brand-default (rendered)", "role": "hsl(152.9 60% 52.9%) as rendered; the published #3ECF8E: realtime/storage dots, dot-matrix", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#6B35DC", "name": "Code keyword", "role": "syntax: import, const, function, =>", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#15593B", "name": "Code identifier", "role": "syntax: functions, constants", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#B45309", "name": "Code string", "role": "syntax: strings", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#525252", "name": "Code plain", "role": "syntax: plain identifiers and brackets", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#BE93E4", "name": "Mockup purple 800", "role": "Stripe template mockup bar", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#8E4EC6", "name": "Mockup purple 900", "role": "Stripe template mockup bar", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#635BFF", "name": "Stripe tint", "role": "Stripe mockup middle column at 5%", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#0070F3", "name": "Next.js blue", "role": "Next.js template mockup logo square", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FD49A8", "name": "Lovable gradient 0%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FD2980", "name": "Lovable gradient 10%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FC1A58", "name": "Lovable gradient 20%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FA1F41", "name": "Lovable gradient 30%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FA2733", "name": "Lovable gradient 40%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FB3D26", "name": "Lovable gradient 50%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FC541F", "name": "Lovable gradient 60%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FE6A1E", "name": "Lovable gradient 70%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FE771D", "name": "Lovable gradient 80%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FF861B", "name": "Lovable gradient 90%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#FF8F1B", "name": "Lovable gradient 100%", "role": "story panel", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#0C0F24", "name": "eXp Realty panel", "role": "story panel ground", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#002533", "name": "Phoenix Energy panel", "role": "story panel ground", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#444ED4", "name": "Rally gradient start", "role": "display-p3(0.275 0.306 0.8) in sRGB", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#1A2DCC", "name": "Rally gradient end", "role": "display-p3(0.118 0.176 0.769); phone solid", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#131413", "name": "Dark theme ground", "role": "oklch(0.19 0.0025 157.5), dark theme body", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#EDEFEE", "name": "Dark theme text", "role": "oklch(0.95 0.00275 157.5)", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#4ACD8B", "name": "Dark theme green", "role": "oklch(0.76 0.15 157.5), dark hero payoff", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "hex": "#006338", "name": "Dark theme primary", "role": "oklch(0.436 0.11 157.5), dark primary button", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" } ] }, "typography": { "display": { "family": "Manrope", "steal_family": "Manrope", "weight": 500, "tracking": 0, "line_height": 1, "fallback_stack": "Manrope, system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif", "real": "Manrope (SIL OFL 1.1, Google Fonts); the site's --font-heading", "stand_in": false, "prov": "observed", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30): --font-heading:var(--font-manrope,var(--font-sans)); .font-heading", "site": { "weight": "500 hero H1, 600 section H2s and card titles", "size_px": "46 hero H1 (desktop); 34 section H2; 16 card titles; 14 template titles", "line_height": "1.0 hero (46/46), 1.11 section H2 (37.8 at 34)", "tracking": "normal", "prov": "observed", "source": "https://supabase.com/ (2026-10-30)" } }, "body": { "family": "Inter", "steal_family": "Inter", "weight": 400, "tracking": 0, "line_height": 1.5, "scale": 1, "fallback_stack": "Inter, \"Helvetica Neue\", Helvetica, ui-sans-serif, system-ui, sans-serif", "real": "Inter (SIL OFL 1.1); the site's --font-sans", "stand_in": false, "prov": "observed", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30): --font-sans:var(--font-inter),Inter,...", "also": [ "https://github.com/supabase/supabase/blob/master/packages/config/typography.css" ], "site": { "weights": "450 body and buttons (variable Inter), 500 nav links and small labels", "sizes_px": "16 hero lead, 14 card copy and buttons, 12 small print", "line_height": "1.5 (24 at 16), about 1.38 at 14", "tracking": "normal", "prov": "observed", "source": "https://supabase.com/ (2026-10-30)" } }, "mono": { "family": "Source Code Pro", "steal_family": "Source Code Pro", "weight": 400, "fallback_stack": "\"Source Code Pro\", \"Office Code Pro\", ui-monospace, Menlo, monospace", "real": "Source Code Pro (SIL OFL 1.1); the site's --font-mono", "stand_in": false, "prov": "observed", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30): --font-mono:var(--font-source-code-pro),\"Source Code Pro\",...", "also": [ "https://github.com/supabase/supabase/blob/master/packages/config/typography.css (heading-meta: mono, uppercase, wider tracking)" ], "site": { "use": "code samples, terminal chips ($ supabase functions deploy), token names and hex values on the brand page, uppercase meta labels", "sizes_px": "12 on the brand page color specs", "prov": "observed", "source": "https://supabase.com/brand-assets (2026-10-30)" } }, "calibration": "Real faces, all open (OFL), loaded from the site CSS and saved in the fonts folder; no stand-ins. Roles verified from the homepage stylesheet: Manrope = --font-heading (every h1/h2/h3 on supabase.com and the brand page), Inter = --font-sans (body, nav, buttons; the brand page body falls back to ui-sans-serif), Source Code Pro = --font-mono. The design-system Typography page publishes utilities and inline-code sizes but no families; the families come from the shipped CSS." }, "style": { "button_shape": "rounded", "button_note": "Small rounded rectangles: the homepage measures about 9px radius on 38px-tall Start your project / Request a demo buttons (green fill vs white with hairline border), 8px on nav items, 16px on product cards, about 10.7px on template cards. Published radius tokens: --radius 0.333rem, sm 0.333rem, md 0.5rem, lg 0.667rem, xl 1rem. Pills appear only as tab toggles (Table Editor / SQL Editor / RLS Policies)", "corners": "soft, small radii; cards 16px; tokens xs 0.167rem to xl 1rem", "linework": "1px hairline borders (border-default at low alpha) frame cards, grid cells and sections; product illustrations are thin grayscale linework with green dots", "motion": "Not published as tokens. Accessibility rule: never animate the focus indicator; prefer transition-colors over transition-all", "prov": "published", "source": "https://supabase.com/ homepage stylesheet (frontend-assets.supabase.com/www/.../_next/static/css, fetched 2026-10-30) (radius tokens)", "also": [ "https://supabase.com/design-system/docs/accessibility", "https://supabase.com/ (2026-10-30, measured radii)" ] }, "voice": { "tone": [ "Direct", "Action-oriented", "Technical without jargon", "Pragmatic" ], "notes": [ "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": [ { "id": "sentence-case", "kind": "headline_case", "value": "sentence", "text": "Sentence case for all UI text: buttons, labels, section headings", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Capitalization)" }, { "id": "title-case-nav", "kind": "guidance", "text": "Title case only for page names in global navigation and document titles (e.g. Database Settings)", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Navigation and headings)" }, { "id": "name-one-word", "kind": "prefer", "term": "Supabase", "over": [ "SupaBase", "Supa Base", "supabase (outside code)" ], "prov": "published", "source": "https://supabase.com/brand-assets (Name)", "also": [ "https://supabase.com/design-system/docs/copywriting (Capitalization)" ] }, { "id": "postgres", "kind": "prefer", "term": "Postgres", "over": [ "PostgreSQL" ], "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Capitalization)" }, { "id": "sign-in", "kind": "prefer", "term": "Sign in / Sign out / Sign up", "over": [ "Login", "Log in", "Logout", "Log out" ], "text": "login/logout stay only in code, routes, slugs and CLI where they match implementation", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Authentication terminology)" }, { "id": "no-marketing-adverbs", "kind": "avoid", "terms": [ "easily", "simply", "powerful" ], "instead": "state the action: Create tables", "why": "Marketing language in UI copy", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Words to avoid)" }, { "id": "no-vague-verbs", "kind": "avoid", "terms": [ "manage", "handle", "work with" ], "instead": "name the actions: Create, edit, or delete tables", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Vague verbs)" }, { "id": "no-apology", "kind": "avoid", "terms": [ "sorry", "oops", "something went wrong", "an error occurred" ], "instead": "State what went wrong, then how to fix it", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Error messages)" }, { "id": "no-enables", "kind": "avoid", "terms": [ "enables you to", "allows you to" ], "instead": "say what it does", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Voice and tone)" }, { "id": "exclamations", "kind": "exclamations", "value": "never", "text": "No exclamation marks unless critical (e.g. destructive actions)", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Formatting)" }, { "id": "no-italics", "kind": "guidance", "text": "No italics for emphasis; bold only when necessary", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Formatting)" }, { "id": "inline-code", "kind": "guidance", "text": "Inline code for technical terms: RLS, API key, supabase init", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Formatting)" }, { "id": "verbs-not-nouns", "kind": "guidance", "text": "Buttons use specific verbs that match the action: Create table, Delete project, Revoke access; never Submit or Configure", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Buttons and actions)" }, { "id": "present-tense", "kind": "guidance", "text": "Present tense: Stores connection pool settings, not Will store", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Form labels and descriptions)" }, { "id": "active-voice", "kind": "guidance", "text": "Active voice in confirmations: Deleting this project will remove all data", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Confirmations and dialogs)" }, { "id": "one-sentence", "kind": "max_sentence_words", "value": 20, "text": "Labels, buttons and tooltips: one sentence or less. The 20-word cap is our machine reading of the published one-sentence rule", "prov": "inferred", "source": "https://supabase.com/design-system/docs/copywriting (Quick checklist)" }, { "id": "errors-specific", "kind": "guidance", "text": "Errors state the problem and the fix: Invalid API key. Check your project settings.", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Error messages)" }, { "id": "success-brief", "kind": "guidance", "text": "Success messages confirm what happened, briefly: Backup restored", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Success messages)" }, { "id": "empty-states", "kind": "guidance", "text": "Empty states say what's missing, then how to add it, with the action button", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Empty states)" }, { "id": "loading-verb", "kind": "guidance", "text": "Loading states match the action verb: Deleting project..., not Processing...", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Loading states)" }, { "id": "declarative-descriptions", "kind": "guidance", "text": "Page descriptions are declarative fragments without a trailing period", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Use declarative page descriptions)" }, { "id": "headings-describe", "kind": "guidance", "text": "Headings name the page, not the task: API keys, not Manage your API keys", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Headings describe the page)" }, { "id": "product-names", "kind": "guidance", "text": "Product names capitalized: Database, Auth, Storage, Edge Functions, Realtime, Vector", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting (Capitalization)" }, { "id": "alt-text", "kind": "guidance", "text": "Alt text describes the image objectively, not its context", "prov": "published", "source": "https://supabase.com/design-system/docs/accessibility (Imagery)" }, { "id": "spelling", "kind": "spelling", "value": "en-US", "text": "US spelling throughout the site and guide (our reading; no spelling rule is published)", "prov": "inferred", "source": "https://supabase.com/" }, { "id": "person", "kind": "person", "value": "we_you", "text": "We and you on marketing pages ('We protect your data')", "prov": "observed", "source": "https://supabase.com/" }, { "id": "homepage-verbatim", "kind": "guidance", "text": "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", "prov": "inferred", "source": "scope of https://supabase.com/design-system/docs/copywriting (product UI) vs https://supabase.com/ (marketing)" } ], "approved": { "phrases": [ "Build in a weekend, scale to millions", "Start your project", "Use one or all.", "Open source from day one", "The Postgres Development Platform" ], "words": [ "Postgres", "Database", "Auth", "Edge Functions", "Realtime", "Storage", "Vector", "Data APIs", "RLS" ] }, "banned": [ "SupaBase", "Supa Base", "PostgreSQL (say Postgres)", "easily / simply / powerful (UI copy)", "Sorry / Oops", "Submit (as a button label)", "italics for emphasis" ], "is_not": [ [ "Direct", "Promotional ('enables you to')" ], [ "Action-oriented", "About what we built" ], [ "Technical", "Jargon-heavy" ], [ "Pragmatic", "Overpromising" ], [ "Calm", "Apologetic or blaming" ] ], "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting" }, "spec": { "source": "https://supabase.com/brand-assets", "how": "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.", "provenance": "published", "icons": { "grid": "24x24 frame, content optically centered at about 18x18", "sizes": [ { "name": "default", "px": 24, "stroke_px": 1.5 }, { "name": "inline (usage sample)", "px": 16, "stroke_px": 1 } ], "stroke": "1.5 by default; 1 at 16px in the usage sample", "caps_joins": "round caps and round joins (the guide's good example)", "color": "currentColor only, tinted with text classes (text-foreground-muted, text-light); never text-destructive", "rule": "Lucide for standard UI icons; custom icons only when Lucide lacks one. Pair icons with text", "prov": "published", "source": "https://supabase.com/design-system/docs/icons" }, "signature": [ { "id": "two-tone-headline", "name": "Two-tone headline", "where": "hero and every section H2 on the homepage and the brand page's closing band", "spec": "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", "once": "one per section heading", "example": { "ground": "paper", "text": "Build in a weekend Scale to millions", "mark": "Scale to millions", "mark_style": "color", "mark_color": "#0E7E4E", "weight": 500 }, "dont_example": { "ground": "paper", "text": "Build in a weekend Scale to millions", "mark": "Scale to millions", "mark_style": "underline", "mark_color": "#3ECF8E", "weight": 700 }, "dont": "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)", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30" }, { "id": "emphasis-in-muted-copy", "name": "Dark words inside muted copy", "where": "product cards and the 'Use one or all.' line", "spec": "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", "once": "one lifted phrase per card", "example": { "ground": "paper", "text": "Use one or all. Best of breed products.", "mark": "Use one or all.", "mark_style": "color", "mark_color": "#030303" }, "dont_example": { "ground": "paper", "text": "Use one or all. Best of breed products.", "mark": "Use one or all.", "mark_style": "color", "mark_color": "#3ECF8E" }, "dont": "emphasize with green, italics or bold; the copywriting guide bans italic emphasis", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30" }, { "id": "hairline-product-grid", "name": "Hairline product bento", "where": "the product grid below the hero, template cards, the logo wall", "spec": "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", "once": "one bento per page", "example": { "ground": "paper", "text": "Storage", "weight": 600 }, "dont_example": { "ground": "#3ECF8E", "text": "Storage", "weight": 600 }, "dont": "fill cards with brand green or use colorful 3D illustration; color is a few green points", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30" }, { "id": "code-as-image", "name": "Code and terminal as the picture", "where": "Edge Functions card, 'Use Supabase with React' sample, mono labels", "spec": "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", "once": "code shown is real and runnable", "example": { "ground": "paper", "text": "$ supabase functions deploy", "font": "mono", "weight": 400 }, "dont_example": { "ground": "paper", "text": "$ supabase functions deploy", "font": "display", "weight": 700 }, "dont": "fake pseudo-code or set code in the sans", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30" } ], "page": { "source": "https://supabase.com/", "date": "2026-10-30", "prov": "observed", "theme": "Anatomy is the LIGHT theme: what headless Chromium renders with no color-scheme preference (html data-theme light, body #FDFDFD). The site also has a full dark theme (prefers-color-scheme dark or the footer sun/moon toggle sets data-theme=\"dark\"): body #131413 (oklch(0.19 0.0025 157.5)), text #EDEFEE, hero payoff green #4ACD8B (oklch(0.76 0.15 157.5)), primary button #006338. Build light unless the brief asks for dark.", "voices": "Two voices, each scoped. (1) Homepage voice (this page, and any landing page built from this spec): short product-marketing claims in sentence case with no end punctuation in headlines; every section heading is a two-tone Manrope headline (setup in muted #696969, payoff in ink #030303; the hero payoff is green #0E7E4E); product cards lift the doing-phrase to ink inside muted copy (\"Store, organize, and serve\" ink + \"large files, from videos to images.\" muted); proof is named customers, verbatim quotes and verbatim community posts; real code in Source Code Pro. The homepage does use words the UI guide bans (\"Easily write custom code\"): that is the site, keep it on landing pages only. (2) Product-UI copywriting voice (design-system Copywriting page, kit.voice.rules): sentence case, specific verbs, no \"easily/simply/powerful\", no exclamation marks, errors = problem + fix. It governs buttons, forms, empty states, errors and any UI text on the landing page (button labels are verb-first: \"Start your project\", \"Request a demo\", \"View on GitHub\", \"Read docs for React\"). Precedence: kit.voice is law for UI strings; the homepage voice is how marketing headlines and card copy are applied on the web. Title Case appears only in nav/footer page names (Edge Functions, Feature Catalog), matching the guide rule \"title case only for page names in global navigation\".", "container": "section-container: max-width 1280px centred (x 80-1360 at 1440) with 96px side padding, so content runs x 176-1264 (1088px). Phone: 24px side padding, content x 24-366 (342px). Every section uses it; hairline section borders run full-bleed 0-1440.", "nav": { "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" }, "sections": [ { "name": "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 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" ] }, { "name": "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" ] }, { "name": "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
, 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
, 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" ] }, { "name": "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 / }", "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" ] }, { "name": "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
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." ] }, { "name": "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)" ] }, { "name": "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.\"" ] }, { "name": "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" }, { "name": "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." }, "dark_ground": { "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" } }, "bands": [ { "label": "Navigation", "ground": "#FDFDFD at 90% + blur(4px)", "content": "wordmark, Product/Developers/Solutions menus, Pricing, Docs, Blog, GitHub stars, Sign in, Start your project", "desktop": "1440x65 sticky, content x 176-1264", "phone": "390x65: wordmark + hamburger", "anatomy": [ "1px bottom hairline rgba(3,3,3,0.08)", "Small 26px buttons in the bar, 38px buttons everywhere else" ] }, { "label": "Hero", "ground": "#FDFDFD", "content": "two-line H1 (ink + green), lead, two buttons", "desktop": "y 65-451; 2 columns 536/536, bottom-aligned", "phone": "y 65-395; stacked, 24px gutter", "anatomy": [ "H1 Manrope 46/46 500", "Lead Inter 16/24 450 #696969" ] }, { "label": "Product bento", "ground": "#FDFDFD, #FFFFFF cards", "content": "7 product cards + closing two-tone line", "desktop": "y 451-1400; 12-col grid, 12px gaps, 400px cards", "phone": "1 column, illustrations hidden", "anatomy": [ "Gradient 1px card border, radius 16px", "Line illustrations in greys with sparse green" ] }, { "label": "Logo wall", "ground": "#FDFDFD", "content": "caption + 12 grey wordmarks", "desktop": "y 1400-1670; 6x2", "phone": "3x4", "anatomy": [ "Hairline open frame band" ] }, { "label": "Dashboard tabs", "ground": "#FDFDFD", "content": "two-tone H3, 3 pill tabs, product video frame", "desktop": "y 1670-2533; frame clipped at section bottom", "phone": "y 1818-2269", "anatomy": [ "Active pill has a #030303 border" ] }, { "label": "Framework code", "ground": "#FDFDFD", "content": "two-tone H3 + code panel with 6 framework tabs", "desktop": "y 2533-3229; 2 columns 544/544", "phone": "stacked", "anatomy": [ "Source Code Pro 13/22.1 500 code" ] }, { "label": "Templates", "ground": "#FDFDFD", "content": "2 large + 4 small template cards", "desktop": "y 3229-4127", "phone": "stacked", "anatomy": [ "Drawn browser mockups in the large cards" ] }, { "label": "Customer stories", "ground": "#FDFDFD; brand-colour panels", "content": "accordion: Lovable open + 4 closed", "desktop": "y 4126-4938; 752/76x4 columns", "phone": "stacked, 64px closed bars", "anatomy": [ "Only saturated colour on the page" ] }, { "label": "Community wall", "ground": "#FDFDFD", "content": "centred header + 5-column tweet masonry with fades", "desktop": "y 4938-5847", "phone": "2 columns", "anatomy": [ "Radius 21.33px cards", "mask fades bottom and sides" ] }, { "label": "Open source", "ground": "#FDFDFD", "content": "H2, paragraph, GitHub button; dot-matrix star count right", "desktop": "y 5847-6220", "phone": "centred, matrix below", "anatomy": [ "radial mask on the matrix" ] }, { "label": "Closing CTA", "ground": "#FDFDFD", "content": "one-line two-tone H2 + button pair", "desktop": "y 6220-6595", "phone": "2-line H2 25.6px", "anatomy": [ "centred" ] }, { "label": "Footer", "ground": "#FDFDFD", "content": "security strip, wordmark/socials/newsletter, 6 link columns, copyright + theme toggle", "desktop": "y 6595-7692", "phone": "y 7835-9876, 2-column link grid", "anatomy": [ "Same ground as the page; hairline rule above the bottom bar" ] } ], "layout": { "page_margin": { "desktop": 176, "phone": 24 }, "container_max": 1280, "container_padding": { "desktop": 96, "phone": 24 }, "content_width": { "desktop": 1088, "phone": 342 }, "section_padding": { "desktop": 96, "phone": 64 }, "columns": 12, "columns_phone": 1, "gutter": 12, "gutter_phone": 16, "card_gap": 12, "nav_height": 65, "note": "Measured on https://supabase.com/ (observed 2026-10-30) at 1440 and 390. Content x 176-1264 (1280 container minus 96px padding each side). Section padding: 96px top/bottom on code, templates, stories; the product bento has 0 top (it follows the hero) and 96 bottom; the dashboard section has 96 top and 0 bottom (frame clipped); community header 80px; logo band 40px. Phone: 24px gutter, 64px typical vertical padding (templates 96px, dashboard 40/16px). Sections are separated by full-bleed 1px rgba(3,3,3,0.08) hairlines (border-b) rather than ground changes: after the logo band, dashboard, code, templates, community and open source. Every ground on the light page is #FDFDFD; cards are #FFFFFF.", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, "type": [ { "role": "Hero H1", "id": "display", "face": "Manrope", "size": { "desktop": 46, "phone": 34 }, "line_height": "46px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "note": "two lines, ink then #0E7E4E", "line_height_note": "46px desktop (1.0); 37.78px phone", "line_height_phone": "37.78px" }, { "role": "Section H2/H3 (two-tone)", "id": "heading", "face": "Manrope", "size": { "desktop": 34, "phone": 22 }, "line_height": "37.78px", "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "note": "Community and Open source H2s stay 34px on phone; closing CTA 34px/40.8px desktop, 25.6px/30.72px phone", "line_height_note": "37.78px desktop (1.111); 29.33px phone", "line_height_phone": "29.33px" }, { "role": "Story quote", "id": "quote", "face": "Manrope", "size": { "desktop": 22, "phone": 18 }, "line_height": "30.25px", "tracking_px": 0, "weight": 450, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "line_height_note": "30.25px desktop; 24.75px phone", "line_height_phone": "24.75px" }, { "role": "Bento closing line", "id": "lead-l", "face": "Inter", "size": { "desktop": 22, "phone": 18 }, "line_height": "29.33px", "tracking_px": -0.16, "weight": 450, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "line_height_note": "29.33px desktop; 25.2px phone", "line_height_phone": "25.2px" }, { "role": "Card title", "id": "title", "face": "Manrope", "size": { "desktop": 16, "phone": 16 }, "line_height": "24px", "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Footer column heading", "id": "footer-heading", "face": "Manrope", "size": { "desktop": 15, "phone": 15 }, "line_height": "22.5px", "tracking_px": 0, "weight": 600, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Template title", "id": "title-s", "face": "Manrope", "size": { "desktop": 14, "phone": 14 }, "line_height": "20px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Hero lead / community lead", "id": "lead", "face": "Inter", "size": { "desktop": 16, "phone": 16 }, "line_height": "24px", "tracking_px": 0, "weight": 450, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Tweet text", "id": "body-tweet", "face": "Inter", "size": { "desktop": 15, "phone": 15 }, "line_height": "22.5px", "tracking_px": 0, "weight": 450, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Body / card copy / links", "id": "body", "face": "Inter", "size": { "desktop": 14, "phone": 14 }, "line_height": "20px", "tracking_px": 0, "weight": 450, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "note": "open-source paragraph 14px/22.75px. html and body set font-weight 450 (variable Inter 100-900 loaded; Manrope 200-800; Source Code Pro 200-900). inside copy stays 450 and only changes colour. 500 = buttons, nav, handles, story names; 600 = Manrope headings; Manrope hero 500. All tracking normal except the 22/18px bento line (-0.16px). -webkit-font-smoothing antialiased." }, { "role": "Button label (38px buttons)", "id": "button", "face": "Inter", "size": { "desktop": 14, "phone": 15 }, "line_height": "20px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "line_height_note": "20px desktop; 22.5px phone", "line_height_phone": "22.5px" }, { "role": "Nav item", "id": "nav", "face": "Inter", "size": { "desktop": 14, "phone": 15 }, "line_height": "16px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "line_height_note": "16px (bar); phone menu 15px/22.5px" }, { "role": "Small button / pill / caption", "id": "small", "face": "Inter", "size": { "desktop": 12, "phone": 12 }, "line_height": "16px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "note": "Sign in, Start your project (nav), Subscribe, GitHub count 500; docs pill, copyright, story sublines 450" }, { "role": "Code", "id": "code", "face": "Source Code Pro", "size": { "desktop": 13, "phone": 13 }, "line_height": "22.1px", "tracking_px": 0, "weight": 500, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, { "role": "Menu eyebrow", "id": "eyebrow", "face": "Source Code Pro", "size": { "desktop": 12, "phone": 12 }, "line_height": "16px", "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "note": "uppercase with wide letter-spacing (FEATURES, MODULES, COMPARE SUPABASE) in nav dropdowns only" } ], "components": { "button_primary": { "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)", "states": { "hover": { "measured": { "fill": "#007243" }, "css": { "background-color": "#007243" }, "prov": "observed" }, "active": { "css": { "scale": "0.97" }, "prov": "observed" }, "transition": "background-color, border-color, color, scale 0.2s cubic-bezier(0.22,1,0.36,1)" }, "small": "26px tall, radius 8px, padding 4px 10px, 12px/16px 500 (nav Start your project 120x26, footer Subscribe 78x26)", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "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" }, "button_secondary": { "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)", "states": { "hover": { "measured": { "fill": "#F8F8F8 (rgba(3,3,3,0.027) over white)" }, "css": { "background-color": "#F8F8F8" }, "prov": "observed" }, "active": { "css": { "scale": "0.97" }, "prov": "observed" } }, "sizes": "38px (hero, CTA); 34px with padding 8px 12px radius 8.86px (Join us on Discord, View on GitHub); 26px small (Sign in)", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "padding_x": 16, "font_size": 14, "weight": 500, "face": "body" }, "pill_tab": { "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", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, "text_link": { "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)", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, "product_card": { "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", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "radius": 16, "radius_phone": 10.67 }, "card": { "fill": "#FFFFFF", "border": "1px rgba(3,3,3,0.08)", "radius": 10.67, "shadow": "none (only browser mockups/frames carry shadow-lg)", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)", "radius_variants": "10.67px templates; 21.33px tweet cards and the dashboard frame; 8px code panel and story panels" }, "input": { "fill": "#F9F9F9", "border": "1px rgba(3,3,3,0.15) (#DADADA)", "radius": 8, "height": 35, "padding": "8px", "text": "12px placeholder #696969", "prov": "observed", "source": "https://supabase.com/ (light theme, 1440 and 390, observed 2026-10-30)" }, "focus": { "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)", "prov": "published rule; ring not measured", "source": "https://supabase.com/design-system/docs/accessibility" } } }, "system": { "fixed": [ "The green bolt, never repainted", "Supabase, one word, capital S", "Neutral gray grounds with one green", "Sentence-case, specific copy" ], "flex": "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.", "traits": [ { "is": "Direct", "not": "Promotional", "text": "Say what something does, not what it enables (paraphrase).", "source": "https://supabase.com/design-system/docs/copywriting", "prov": "published" }, { "is": "Action-oriented", "not": "Self-regarding", "text": "Focus on what happens, not what we built (paraphrase).", "source": "https://supabase.com/design-system/docs/copywriting", "prov": "published" }, { "is": "Technical", "not": "Jargon-heavy", "text": "Precise terms, explained when necessary (paraphrase).", "source": "https://supabase.com/design-system/docs/copywriting", "prov": "published" }, { "is": "Pragmatic", "not": "Overpromising", "text": "Acknowledge tradeoffs and limitations (paraphrase).", "source": "https://supabase.com/design-system/docs/copywriting", "prov": "published" }, { "is": "Open", "not": "Locked-in", "text": "Built in the open; read, contribute, self-host (paraphrase).", "source": "https://supabase.com/", "prov": "observed" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "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", "flex": "which product cards and sections; dark theme (#1C1C1C/#141414 grounds, #3ECF8E as the green) when the page is for a dark context" }, { "format": "Deck", "level": 2, "must": "Wordmark top left, Manrope sentence-case headlines in two tones, Inter body, hairline frames, real code or product UI as visuals", "flex": "light or dark ground" }, { "format": "Proposal page", "level": 1, "must": "Near-white, Inter body, Manrope headings, one green CTA, proof as named customers and numbers", "flex": "a code sample when the buyer is technical" }, { "format": "Social post", "level": 3, "must": "Dark gray or near-white ground, one green, a Manrope two-tone line, a real snippet or line drawing", "flex": "dark or light" }, { "format": "Email", "level": 1, "must": "Plain, sentence case, specific subject and CTA verb, wordmark at top", "flex": "one green button" }, { "format": "Error message", "level": 0, "must": "What went wrong, then how to fix it; no apology, no exclamation", "flex": "inline code for the technical term" } ], "checks": [ { "name": "Logo hidden", "text": "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." }, { "name": "Swap test", "text": "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." } ], "examples": [ { "chapter": "color", "do": { "ground": "paper", "text": "Start your project", "button": true, "button_fill": "#0E7E4E" }, "do_caption": "Primary buttons in the darkened primary green on light grounds (the homepage CTA).", "dont": { "ground": "paper", "text": "Start your project", "ink": "#3ECF8E" }, "dont_caption": "Bright brand green as text on white: the guide darkens green for readability." }, { "chapter": "voice", "do": { "ground": "paper", "text": "Invalid API key. Check your project settings." }, "do_caption": "What went wrong, then the fix (the guide's good example).", "dont": { "ground": "paper", "text": "Oops! Something went wrong." }, "dont_caption": "Apology and vagueness, from the guide's bad column." } ], "make_it_yours": { "note": "Everything above transfers. These are Supabase's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "story": { "text": "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.", "prov": "observed", "source": "https://supabase.com/company", "source_note": "2026-10-30", "paraphrase": true, "also": [ "https://supabase.com/open-source" ] }, "values": [ { "name": "Open by default", "means": "Great developer tools should be transparent, inspectable and owned by the community (paraphrase of the homepage open source band).", "prov": "observed", "source": "https://supabase.com/" }, { "name": "No lock-in", "means": "Read, contribute, self-host; every project is portable Postgres (paraphrase).", "prov": "observed", "source": "https://supabase.com/" }, { "name": "Respect developer time", "means": "Copy and UI help developers complete tasks quickly (paraphrase).", "prov": "published", "source": "https://supabase.com/design-system/docs/copywriting" } ] }, "positioning": { "statement": { "text": "The Postgres development platform: start with a Postgres database and add Auth, Data APIs, Edge Functions, Realtime, Storage and Vector.", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30" }, "category": { "text": "Postgres development platform (backend as a service on Postgres); press has called it the open source Firebase alternative", "prov": "observed", "source": "https://supabase.com/", "also": [ "https://supabase.com/company (press: 'open source Firebase alternative')" ] }, "audience": { "text": "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).", "prov": "observed", "source": "https://supabase.com/" }, "problem": { "text": "Building and scaling a backend means stitching together a database, auth, APIs, storage and servers, and risking lock-in (paraphrase).", "prov": "inferred", "source": "https://supabase.com/" }, "promise": { "text": "Build in a weekend, scale to millions, on open Postgres you can take with you.", "prov": "observed", "source": "https://supabase.com/" }, "differentiators": [ { "text": "Every project is a full Postgres database, 100% portable.", "prov": "observed", "source": "https://supabase.com/" }, { "text": "Open source from day one; self-hostable, no lock-in.", "prov": "observed", "source": "https://supabase.com/", "also": [ "https://supabase.com/open-source" ] }, { "text": "One platform of best-of-breed products you can adopt one at a time.", "prov": "observed", "source": "https://supabase.com/" }, { "text": "Row Level Security built into Auth.", "prov": "observed", "source": "https://supabase.com/" }, { "text": "SOC2 Type 2, HIPAA and ISO 27001.", "prov": "observed", "source": "https://supabase.com/" } ], "alternatives": [ { "text": "Firebase (the footer offers 'Switch from Firebase').", "prov": "observed", "source": "https://supabase.com/" }, { "text": "Neon (the footer offers 'Switch from Neon').", "prov": "observed", "source": "https://supabase.com/" }, { "text": "MongoDB (a homepage story migrates off it).", "prov": "observed", "source": "https://supabase.com/" } ] }, "messaging": { "taglines": [ { "text": "Build in a weekend, scale to millions", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30", "where": "Homepage hero (two lines, second in green) and the closing band on every marketing page, including the brand page" }, { "text": "The Postgres Development Platform", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30", "where": "Homepage title" }, { "text": "Use one or all. Best of breed products. Integrated as a platform.", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30", "where": "Under the product grid" } ], "attributes": [ "direct", "action-oriented", "technical without jargon", "pragmatic" ], "key_messages": [], "boilerplate": { "text": "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.", "prov": "observed", "source": "https://supabase.com/", "source_note": "2026-10-30", "paraphrase": true, "also": [ "https://supabase.com/open-source" ] }, "pillars": [ { "id": "postgres-core", "name": "Just Postgres", "claim": "Every project is a full Postgres database: portable, extensible, with Row Level Security built in.", "prov": "observed", "source": "https://supabase.com/", "proof": [ "p-portable", "p-oss-stars" ] }, { "id": "one-platform", "name": "Use one or all", "claim": "Auth, Data APIs, Edge Functions, Realtime, Storage and Vector, each best of breed, integrated as one platform.", "prov": "observed", "source": "https://supabase.com/", "proof": [ "p-chatbase", "p-rally" ] }, { "id": "weekend-to-millions", "name": "Weekend to millions", "claim": "Start fast, and the same stack carries you to scale.", "prov": "observed", "source": "https://supabase.com/", "proof": [ "p-lovable", "p-exp", "p-devs" ] }, { "id": "open-source", "name": "Open source from day one", "claim": "Built in the open, never locked in, and you can self-host.", "prov": "observed", "source": "https://supabase.com/", "proof": [ "p-oss-stars", "p-sponsor" ] }, { "id": "trust", "name": "Enterprise-ready trust", "claim": "Security and compliance credentials for regulated and enterprise work.", "prov": "inferred", "source": "https://supabase.com/", "why": "The security strip on every page; not published as a named pillar", "proof": [ "p-soc2", "p-phoenix" ] } ], "proof_points": [ { "id": "p-devs", "kind": "stat", "text": "10,000,000+ registered developers", "source": "https://supabase.com/company", "prov": "observed" }, { "id": "p-oss-stars", "kind": "stat", "text": "100,000+ GitHub stars (nav counter showed 114.3K on 2026-10-30)", "source": "https://supabase.com/company", "prov": "observed" }, { "id": "p-funding", "kind": "stat", "text": "$1 billion raised in funding", "source": "https://supabase.com/company", "prov": "observed" }, { "id": "p-soc2", "kind": "certification", "text": "SOC2 Type 2 certified, HIPAA compliant, ISO 27001 certified", "source": "https://supabase.com/", "prov": "observed" }, { "id": "p-portable", "kind": "other", "text": "100% portable; built-in Auth with RLS; easy to extend (Postgres card)", "source": "https://supabase.com/", "prov": "observed" }, { "id": "p-chatbase", "kind": "customer", "text": "Chatbase scaled from zero to $10M ARR on a single Postgres-backed platform", "source": "https://supabase.com/", "prov": "observed", "attribution": "Chatbase" }, { "id": "p-rally", "kind": "customer", "text": "Rally went from first line of code to licensed fintech in three months", "source": "https://supabase.com/", "prov": "observed", "attribution": "Rally" }, { "id": "p-lovable", "kind": "customer", "text": "Lovable powers millions of AI-generated apps on a Supabase backend", "source": "https://supabase.com/", "prov": "observed", "attribution": "Lovable" }, { "id": "p-exp", "kind": "customer", "text": "eXp Realty: 2,000+ employees building production software with AI", "source": "https://supabase.com/", "prov": "observed", "attribution": "eXp Realty" }, { "id": "p-phoenix", "kind": "customer", "text": "Phoenix Energy migrated critical infrastructure from MongoDB with zero downtime", "source": "https://supabase.com/", "prov": "observed", "attribution": "Phoenix Energy" }, { "id": "p-sponsor", "kind": "other", "text": "More than $250,000 paid in open source sponsorships (PostgREST, pgroonga, pgsodium, OrioleDB, Elixir)", "source": "https://supabase.com/open-source", "prov": "observed" } ], "claim_boundaries": [ { "text": "Use the Supabase logos only to refer to Supabase; never imply partnership or endorsement.", "prov": "published", "source": "https://supabase.com/brand-assets (Usage)" }, { "text": "The Connect Supabase button only starts the OAuth 2.0 flow of a Supabase integration; it is never a logo.", "prov": "published", "source": "https://supabase.com/brand-assets (Integrations)" }, { "text": "Under the customer terms, neither party uses the other's name or logo without prior written approval.", "prov": "published", "source": "https://supabase.com/terms" }, { "text": "Quote stats with their date; the star count on the nav moves daily.", "prov": "inferred", "source": "https://supabase.com/company" } ], "prov": "observed", "source": "https://supabase.com/" } } } }