Postgres development platform

Dark product surfaces for teams building with Postgres.

A compact, border-led catalog of Supabase visual tokens: green actions, dashboard frames, SQL code panels, pricing pills, and docs-style navigation.

database / public / profiles

profiles

DataSchemaRLS
id uuid
status
plan
created
usr_82d7...
active
Pro
May 19
usr_4f19...
active
Free
May 18
usr_aa03...
pending
Team
May 17
usr_b71c...
active
Enterprise
May 12
27Colors
12Type levels
14Components
58Core tokens

01 / Colors

Dark canvas, green action.

Supabase hierarchy is built from near-black surfaces, quiet gray borders, and a precise green action scale.

primary#3ECF8E

CTA and success highlight.

accent#249361

Green hover support.

accentPressed#15593B

Selected dark green UI.

canvas#121212

Default dark mode field.

surface#1F1F1F

Cards and controls.

surfaceAlt#171717

Nav and app shells.

border#2E2E2E

Hairline dividers.

borderStrong#454545

Inputs and strong frames.

ink#FAFAFA

Headings and values.

body#B4B4B4

Paragraph text.

warning#DB8900

Caution states.

error#E54D2E

Invalid and destructive.

02 / Typography

Regular weight, technical rhythm.

The system avoids heavy display weights. Monospace labels and code create the developer-platform cadence.

Launch scalable Postgres apps

Display — 72px / 400 / 1.00 / 0em / Inter substitute

Build in a weekend

Hero — 60px / 400 / 1.00 / 0em / Inter substitute

Every project is a full Postgres database

Headline-lg — 36px / 400 / 1.20 / 0em / Inter substitute

Table Editor

Title-lg — 24px / 400 / 1.33 / 0em / Inter substitute

Realtime subscriptions

Title-md — 20px / 400 / 1.40 / 0em / Inter substitute

Storage policies

Title-sm — 16px / 500 / 1.50 / 0em / Inter substitute

Use muted body copy to explain behavior without overpowering the product UI.

Body — 16px / 400 / 1.50 / 0em / Inter substitute

DATABASE / PUBLIC / PROFILES

Label — 12px / 400 / 1.33 / 0.08em / Source Code Pro

$25 / month

Pricing display — 48px / 400 / 1.00 / 0em / Inter substitute

select * from auth.users where confirmed_at is not null;

Code — 14px / 400 / 1.36 / 0em / Source Code Pro

03 / Buttons

Compact controls, restrained states.

Buttons are low-radius, 34px-ish controls. Green is reserved for real action or active state.

button-primary
button-primary-active
button-secondary
button-ghost
button-icon
button-pricing-pill

04 / Cards & Surfaces

Flat modules with hairline edges.

Cards feel like product panels, not floating marketing tiles. The border is the main depth device.

Feature card

Database

Dedicated Postgres with table UI, SQL editor, backups, and row-level security.

Explore database →

Hero card

Realtime

A darker shell for screenshots and multi-panel product stories.

Brand panel

Auth policies

Dark green emphasis for selected states, plan pills, and security moments.

Configure RLS →

Pricing card

$25 / month

Operational plan cards keep borders strong and sales styling quiet.

SQL editor

create policy "Public profiles" on profiles for select using (true);

Run query →

Docs card

Guides

Documentation cards use muted text, compact links, and the same control surfaces.

Read guide →

05 / Brand-Specific Product Patterns

It should feel like a database console.

The essential Supabase cues are real product UI: table editor, SQL, auth, storage, logs, and pricing infrastructure.

SQL Editorquery.sql
select
  date_trunc('day', created_at) as day,
  count(*) as signups
from auth.users
group by 1
order by 1 desc;
Schema visualizer4 relations
profiles
iduuid
user_idfk
plantext
projects
iduuid
owner_idfk
regiontext
Authenabled

Sign in



Storage bucketspolicy
avatarspublic
invoicesprivate
exportssigned URLs
allow select on storage.objects
using (bucket_id = 'avatars');
Pricing calculatorPro
Database size8 GB included
Bandwidth$0.09 / GB
Edge Functions2M included
Estimated total$25

06 / Forms

Compact inputs with green focus.

Forms inherit the dashboard language: dark fill, strong border, small labels, and sparse error treatment.

Key has expired. Generate a new service role key.

07 / Spacing

4px base, product density.

Marketing breathes at section scale; dashboards compress into 8px, 16px, and 24px steps.

xs / 4px
sm / 8px
md / 16px
lg / 24px
xl / 32px
section / 96px

08 / Radius

Low-radius, never bubbly.

Supabase corners are small and functional, with pills reserved for pricing tags and compact filters.

2px

Tiny table cells.

4px

Small tags.

6px

Inputs and buttons.

8px

Feature cards.

12px

Dashboard frames.

9999px

Pricing pills only.

09 / Elevation

Flat by default.

Depth comes from border contrast and surface steps. Utility shadows appear only in floating or code-demo contexts.

Default

Flat surface

shadow: none; border carries depth.

Utility

Small control

0 1px 2px #0000000d

Floating

Popover/menu

0 1px 3px #0000001a

10 / Extracted Component Tokens

CSS custom properties.

The preview declares every core design token in `:root` for direct reuse.

:root {
  --brand-primary: #3ECF8E;
  --brand-accent: #249361;
  --brand-accent-hover: #33CC87;
  --brand-accent-pressed: #15593B;
  --brand-ink: #FAFAFA;
  --brand-body: #B4B4B4;
  --brand-muted: #898989;
  --brand-canvas: #121212;
  --brand-surface: #1F1F1F;
  --brand-surface-alt: #171717;
  --brand-border: #2E2E2E;
  --brand-border-strong: #454545;
  --brand-link: #00C47C;
  --brand-warning: #DB8900;
  --brand-error: #E54D2E;
  --brand-deep: #072719;
  --brand-code-canvas: #1E1E1E;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
}