# Supabase 밝은 뉴트럴 캔버스에 시그니처 에메랄드 그린 하나를 브랜드 액션으로 얹은 오픈소스 개발자 플랫폼 스타일 — 위계는 색이 아니라 얇은 보더와 라운드 카드, Inter/Manrope 타이포로 만든다. - taxonomy: corporate-clean · developer-platform, open-source, emerald-accent, light-first, dark-capable, bordered-cards, product-saas, green-tinted-neutrals, inter-manrope · complexity=medium - page types: landing, marketing, docs, app, dashboard - best for: 개발자 도구·API·데이터베이스 제품 랜딩, 오픈소스 프로젝트 마케팅 사이트, SaaS 기능 소개·문서 허브, 라이트/다크를 모두 지원하는 제품 UI와 대시보드 - avoid for: 따뜻한 라이프스타일·리테일 브랜드, 인쇄 편집(에디토리얼) 감성 사이트, 장난스러운 파스텔 소비자 앱, 고채도 그라디언트가 주인공인 비주얼 중심 페이지 - provenance: website (Supabase | The Open Source Firebase Alternative) — confidence: colors=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred, light=computed-css, dark=computed-css, chart_palette=vision-inferred ## Design rules # Supabase ## Overview A clean, open-source developer-platform aesthetic. Light-first — a near-white canvas (oklch 0.995) with near-black text — but the site ships a genuine dark-native mode, so a measured dark set is included. The whole system is organized around a single signature emerald green used sparingly for brand actions. Hierarchy comes from thin borders, rounded cards, and a clear Manrope/Inter type split — not from color or shadow. Trustworthy and functional, never decorative. ## Colors & Roles Foundation is a green-tinted neutral scale: grays carry a whisper of hue ~159 (measured dark bg `#131413`, muted `#989a99`), so they read as one family with the brand rather than as flat gray. The signature is one **emerald brand green** `oklch(0.762 0.154 159.4)` (#3ecf8e), assigned to `primary` = `accent` = `ring` = `chart-1`. It appears only on the main CTA ("Start your project"), focus rings, and emphasis. Crucially, text on green buttons is **near-black** (`primary-foreground`), not white — a Supabase signature. Measured secondary brand colors — purple `#8e4ec6` and blue `#0070f3` — are demoted to `chart-2/3`: chart/diagram signals only, never brand accents. Light `border`/`input` are the measured near-black hairlines (~8% alpha) flattened to a light gray (0.92); dark borders are white-8% flattened to 0.285. ## Typography Rules Three families, all on Google Fonts: **Manrope** for headings (measured display/H1 46px/500, section headers 34px/600), **Inter** for body and UI (16px/450 body, 14px/500 buttons), **Source Code Pro** for code. Only three weights: 450 / 500 / 600. Body weight 450 is a Supabase tell — slightly heavier than the usual 400. Large headings tighten tracking to ≈ −0.02em for density. Modular scale ratio ≈ 1.25. ## Layout Principles Centered 12-column / 24px-gutter container, max width 1280px. Hero is a two-part split: a large left headline (with the second line set in brand green) plus right-aligned subtext. Feature sections use a 3-up card grid (Postgres Database / Authentication / Edge Functions …), each block wrapped in a rounded, bordered card. Vertical rhythm is generous — section gaps `clamp(4rem, 9vw, 8rem)` — with density built inside cards. ## Depth & Elevation Mostly flat. Section cards have no shadow — division is done with 1px hairline borders. Soft shadows (`0 10px 15px -3px rgba(0,0,0,.1)`) are reserved for genuinely floating elements (dropdowns, popovers, floating panels). The sticky top nav uses a light backdrop-blur. Dark sections may carry a very low-opacity emerald radial glow behind the hero. ## Shapes Rounded but restrained: fields/buttons 6px, selectors 8px, cards 12–16px (measured cards use 16px). Corners are soft, never pill-round for containers. ## Component Stylings - **Button**: primary = emerald `--primary` fill + near-black `--primary-foreground`, radius 6px, 14px/500 Inter, padding 8px 16px. Hover brightens the green a step. Focus = 2px emerald ring. Secondary = transparent/`--secondary` with 1px `--border` ("Request a demo"). Ghost = nav-link style. - **Card**: `--card` background, 1px `--border` hairline, radius 12–16px, padding 24px, no shadow. In dark, `card` sits a step lighter than `background`. - **Input**: translucent surface `--input`, 1px `--border`, radius 6px, padding 8px 12px, 14px/450; focus goes to `--ring`. Placeholder `--muted-foreground`. - **Nav**: sticky, light backdrop-blur, 1px bottom hairline. Left wordmark, center dropdown links, right "Sign in" ghost + "Start your project" green primary. - **Badge**: small version/status pills, 12px text; status colors from `chart-*` (purple/blue/amber) as low-alpha tint + matching text. Brand green only for "New"/emphasis. ## Motion Quick and restrained. Opacity fade + 8–12px slide; hover does subtle background/border transitions. Green CTAs brighten or gain a faint glow on hover. Durations 120–400ms, standard easing. No bounce, spring overshoot, or heavy parallax. ## Responsive Behavior The 12-column grid collapses to a single column on mobile; the 3-up feature grid stacks. Display type scales via `clamp()`. Nav condenses to a menu on narrow widths. ## Agent Prompt Guide > Build this in the 'Supabase' style: light-first (near-white oklch 0.995 0.002 159, near-black green-tinted text) with a genuine measured dark mode (oklch 0.19 0.003 159). One signature emerald brand green (oklch 0.762 0.154 159 / #3ecf8e) as primary/accent/ring, reserved for main CTAs, focus, and emphasis — with near-black (not white) text on green buttons. Neutrals subtly green-tinted (hue ~159). Headings in Manrope, body/UI in Inter, code in Source Code Pro; weights 450/500/600. Separate surfaces with 1px hairline borders and rounded cards (fields 6px, cards 12–16px), not heavy shadows. Purple (#8e4ec6) and blue (#0070f3) are chart signals only. ## Known Gaps / Confidence Colors, typography, and radii are **computed-css** (Playwright walk of both the light and native-dark renders — both sets are measured, not synthesized). Color-role assignment, taxonomy, motion, and layout are **vision-inferred** from the screenshots. The chart palette is vision-inferred: chart-1 (green), chart-2 (purple), chart-3 (blue) are measured brand hues re-roled as data signals; chart-4 (amber) and chart-5 (gray) are tuned for legibility, not directly measured. `border`/`input` values are opaque approximations of measured semi-transparent hairlines. Measured card radii range 6–16px; `box` is set to 12px as a representative middle. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Supabase — theme.css (generated, do not edit) */ :root { --radius: 12px; --radius-selector: 8px; --radius-field: 6px; --font-sans: "Inter", "Inter Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Source Code Pro", "Office Code Pro", Menlo, ui-monospace, monospace; --font-display: "Manrope", "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif; --spacing: 8px; --shadow: 0px 10px 15px -3px color-mix(in oklab, oklch(0 0 0) 10%, transparent); --ks-display-weight: 500; --ks-display-tracking: -0.02em; --background: oklch(0.995 0.002 159); --foreground: oklch(0.20 0.010 159); --card: oklch(1 0 0); --card-foreground: oklch(0.20 0.010 159); --popover: oklch(1 0 0); --popover-foreground: oklch(0.20 0.010 159); --primary: oklch(0.762 0.154 159.4); --primary-foreground: oklch(0.20 0.020 159); --secondary: oklch(0.96 0.004 159); --secondary-foreground: oklch(0.26 0.010 159); --muted: oklch(0.96 0.004 159); --muted-foreground: oklch(0.521 0.006 159); --accent: oklch(0.762 0.154 159.4); --accent-foreground: oklch(0.20 0.020 159); --destructive: oklch(0.58 0.22 27); --destructive-foreground: oklch(0.995 0.002 159); --border: oklch(0.92 0.004 159); --input: oklch(0.92 0.004 159); --ring: oklch(0.762 0.154 159.4); --chart-1: oklch(0.762 0.154 159.4); --chart-2: oklch(0.556 0.183 305.9); --chart-3: oklch(0.573 0.214 258.2); --chart-4: oklch(0.70 0.15 65); --chart-5: oklch(0.65 0.006 159); } .dark { --background: oklch(0.190 0.003 159); --foreground: oklch(0.950 0.003 159); --card: oklch(0.215 0.003 159); --card-foreground: oklch(0.950 0.003 159); --popover: oklch(0.230 0.003 159); --popover-foreground: oklch(0.950 0.003 159); --primary: oklch(0.762 0.154 159.4); --primary-foreground: oklch(0.190 0.020 159); --secondary: oklch(0.265 0.004 159); --secondary-foreground: oklch(0.900 0.003 159); --muted: oklch(0.265 0.004 159); --muted-foreground: oklch(0.684 0.003 159); --accent: oklch(0.762 0.154 159.4); --accent-foreground: oklch(0.190 0.020 159); --destructive: oklch(0.62 0.20 27); --destructive-foreground: oklch(0.190 0.005 159); --border: oklch(0.285 0.004 159); --input: oklch(0.305 0.004 159); --ring: oklch(0.762 0.154 159.4); --chart-1: oklch(0.762 0.154 159.4); --chart-2: oklch(0.62 0.160 305.9); --chart-3: oklch(0.60 0.190 258.2); --chart-4: oklch(0.80 0.110 63); --chart-5: oklch(0.684 0.003 159); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Build in a weekend
Scale to millions

Start your project with a Postgres database. Add Authentication, Data APIs, Edge Functions, Realtime, Storage, and Vector embeddings.

Start your project Request a demo

Postgres Database

Every project is a full Postgres database, the world's most trusted relational database.

✓ 100% portable  ✓ Built-in Auth with RLS

Authentication

Add user sign ups and logins, securing your data with Row Level Security.

alex16019@gmail.com

Edge Functions

Easily write custom code without deploying or scaling servers.

$ supabase functions deploy
``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/supabase.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `