Supabase DESIGN.md

version: alpha name: Supabaze-Inspired-design-analysis description: An inspired interpretation of Supabaze's design language — an open-source database platform built on a clean white-and-near-black system with a single signature emerald-green CTA, a custom humanist sans display tier, and dense product UI mockups composited above the hero. The brand reads as quietly technical: minimal chrome, a near-monochrome palette, and the green primary acting as the only chromatic event on the page.

colors: primary: "#3ecf8e" primary-deep: "#24b47e" primary-soft: "#4ade80" ink: "#171717" ink-secondary: "#212121" ink-mute: "#707070" ink-mute-2: "#9a9a9a" ink-faint: "#b2b2b2" on-primary: "#171717" on-dark: "#ffffff" canvas: "#ffffff" canvas-soft: "#fafafa" canvas-night: "#1c1c1c" canvas-night-soft: "#202020" hairline: "#dfdfdf" hairline-strong: "#c7c7c7" hairline-cool: "#ededed" hairline-cool-2: "#efefef" hairline-cool-3: "#d4d4d4" accent-purple: "#6b01c2" accent-violet: "#644fc1" accent-purple-soft: "#eddbf9" accent-yellow: "#ffdb13" accent-tomato: "#ff2201" accent-pink: "#c7007e" accent-indigo: "#054cff" accent-crimson: "#e2005a"

typography: display-xxl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.92px display-xl: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1.44px display-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.72px display-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.42px heading-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 heading-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-lg: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 caption: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 micro: fontFamily: "Circular, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0 code: fontFamily: "ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px full: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px

components: button-primary-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-primary-green-pressed: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-secondary-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-on-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 8px 16px button-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.xs}" padding: 0px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-feature-dark: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px code-block: backgroundColor: "{colors.canvas-night}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.sm}" padding: 16px pill-tag-green: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px pill-tag-soft: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" typography: "{typography.micro}" rounded: "{rounded.full}" padding: 2px 8px nav-bar-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

Overview

Supabaze's design language is engineered for clarity above all else. The marketing surfaces sit on {colors.canvas} (pure white), with text rendered in {colors.ink} (#171717 — near-black, never pure black). Across the entire system the only consistent chromatic event is the emerald green primary ({colors.primary} — #3ecf8e) — used as the filled CTA, occasional accent dot, and the signature highlight color in the wordmark. Everything else is a calibrated grey ladder from #ededed hairline-cool to #171717 ink, with thin black-on-white typography doing most of the visual work.

Typography runs Circular at weight 500 for display and 400 for body. The display tier uses tight negative letter-spacing (-1.92px at 64px) to pull the rounded humanist letterforms into editorial density. There's no atmospheric gradient, no full-bleed photography, no dark-canvas marketing track — the brand commits to white.

The product itself appears as composited UI screenshots on every page: dashboard tables, SQL editors, query builders, log streams. These screenshots are the brand's argument. They sit inside {rounded.lg} 12px containers with subtle 1px hairlines, often arranged 2-up or in a floating "stacked panes" composition above the hero band.

Key Characteristics:

• Single emerald primary ({colors.primary} #3ecf8e) as the only chromatic event; everything else is monochrome.
• White canvas marketing track with greyscale hierarchy from {colors.hairline-cool} to {colors.ink}.
• Custom humanist sans display tier at weight 500 with negative letter-spacing of -1.92px to -0.42px.
• Composited product UI screenshots (dashboard, SQL editor, log stream) are the dominant decorative element — never photography, never illustrations.
• Tight 6px / 8px button radii — square-ish, technical, never pill-shaped.
• Code blocks rendered in deep {colors.canvas-night} (#1c1c1c) with monospace inline code; the brand's developer DNA is visible in every snippet.
• Pricing tiers use a dark inverted {colors.canvas-night} featured tier, not a green one — the green is reserved for buttons and dot accents.

Colors

Source pages: home (/), /database, /partners/integrations, /partners/integrations/powersync, /solutions/ai-builders, /pricing.

Brand & Accent

• Emerald ({colors.primary} — #3ecf8e): The signature CTA color. Filled-button background, brand wordmark accent, dot indicator.
• Emerald Deep ({colors.primary-deep} — #24b47e): Pressed-state lift of the primary.
• Emerald Soft ({colors.primary-soft} — #4ade80): Lighter emerald used in chart accents and product UI.
• Accent Purple ({colors.accent-purple} — #6b01c2): Rare accent used in integration logos and chart points; never a button.
• Accent Violet ({colors.accent-violet} — #644fc1): Secondary accent in the same role as accent purple.
• Accent Yellow ({colors.accent-yellow} — #ffdb13): Chart accent / status indicator only.
• Accent Pink / Crimson / Indigo / Tomato: Reserved for integration logos and rare chart highlights, never as system colors.

Surface

• Canvas ({colors.canvas} — #ffffff): Default page background.
• Canvas Soft ({colors.canvas-soft} — #fafafa): Barely-tinted off-white for alternating section bands.
• Canvas Night ({colors.canvas-night} — #1c1c1c): Deep near-black used in code blocks, dashboard mockups, featured pricing tier.
• Canvas Night Soft ({colors.canvas-night-soft} — #202020): Slightly lifted dark for nested chrome.
• Hairline ({colors.hairline} — #dfdfdf): 1px borders on cards and tables.
• Hairline Strong ({colors.hairline-strong} — #c7c7c7): Slightly darker border for emphasis.
• Hairline Cool ({colors.hairline-cool} — #ededed) / Hairline Cool 2 (#efefef) / Hairline Cool 3 (#d4d4d4): The brand's grey ladder for fine chrome work.

Text

• Ink ({colors.ink} — #171717): Default body text. Near-black, never pure.
• Ink Secondary ({colors.ink-secondary} — #212121): Slightly cooler near-black for body emphasis.
• Ink Mute ({colors.ink-mute} — #707070): Secondary text and helper copy.
• Ink Mute 2 ({colors.ink-mute-2} — #9a9a9a): Tertiary text.
• Ink Faint ({colors.ink-faint} — #b2b2b2): Disabled / placeholder text.
• On Primary ({colors.on-primary} — #171717): Text on the emerald primary fill — near-black, not white. The button reads as a "lit" surface with dark type, not a colored chip.
• On Dark ({colors.on-dark} — #ffffff): Text on canvas-night surfaces.

Typography

Font Family

The display and UI tier is Circular — a proprietary geometric humanist sans by Lineto. Fallback chain: 'Helvetica Neue', Helvetica, Arial.

For maximum brand fidelity when Circular isn't licensed, use Inter (open-source via Google Fonts) at weight 500 for display with letter-spacing: -1.92px at 64px. Inter is the closest open-source analogue to Circular's geometric humanist character.

Code blocks use system mono (ui-monospace, with Menlo / Monaco / Consolas fallbacks).

Hierarchy

Principles

• Weight 500 across display. Mid-weight reads as engineered, not decorative.
• Negative tracking on display. -1.92px at 64px scaling proportionally down — tightens the rounded humanist letterforms into editorial density.
• Mono for code. System mono families (Menlo / Monaco) — no proprietary mono webfont.

Note on Font Substitutes

Circular is proprietary. Use Inter at weight 500 with letter-spacing: -1.92px for display tiers. Geist Sans (open-source from Vercel) is another close alternative for both display and body. Avoid Helvetica defaults — they're heavier and lack the geometric warmth.

Layout

Spacing System

• Base unit: 8px (with 2 / 4 / 12 sub-tokens for fine work).
• Tokens: {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px.
• Section padding: 64–96px on marketing surfaces.
• Card internal padding: 32px on feature/pricing cards.

Grid & Container

• Marketing pages center in a ~1280px container with no edge-bleed; the brand keeps content inside the box.
• Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
• Product UI mockups stack 2-up or render as overlapping panes inside the same container.

Whitespace Philosophy

The brand uses generous 64–96px section padding without atmospheric gradients filling the space — the white canvas is the design. The composited product UI mockups break up sections without requiring decoration.

Elevation & Depth

Decorative Depth

The brand's depth is product UI mockups rather than gradients. Stacked dashboard / SQL editor / log panes composite together with subtle Level 2 shadows to suggest spatial hierarchy.

Shapes

Border Radius Scale

Photography Geometry

The brand uses minimal photography. Customer logo strips display wordmarks at uniform height (~24–32px) in greyscale; case-study cards (rare) use 4:3 photos inset in {rounded.lg} containers.

Components

Buttons

button-primary-green — the signature CTA.

• Background {colors.primary}, text {colors.on-primary} (near-black, NOT white), type {typography.button-md}, padding {spacing.sm} {spacing.lg} (8px 16px), rounded {rounded.sm} 6px.
• Pressed state button-primary-green-pressed shifts to {colors.primary-deep}.

button-secondary-outline — outline alternative on white.

• Background {colors.canvas}, text {colors.ink}, 1px solid {colors.hairline-strong} border, same shape.

button-on-dark — used on dark surfaces / code-block CTAs.

• Background {colors.canvas-night}, text {colors.on-dark}, same shape.

button-link — text-only inline button.

• Transparent background, text {colors.ink} rendered in {typography.button-md}, no padding, with a subtle underline on hover.

Cards & Containers

card-feature-light — feature card on white.

• Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg} 12px, 1px {colors.hairline} border.

card-pricing — standard pricing tier.

• Background {colors.canvas}, padding {spacing.xxl}, rounded {rounded.lg}, 1px {colors.hairline} border. Title in {typography.heading-lg}, price in {typography.display-md}, body in {typography.body-md}, CTA button-primary-green pinned bottom.

card-pricing-featured — inverted dark featured tier.

• Background {colors.canvas-night}, text {colors.on-dark}, otherwise identical structure.

card-feature-dark — feature card with deep dark fill.

• Background {colors.canvas-night}, text {colors.on-dark}, padding {spacing.xxl}, rounded {rounded.lg}. Used for code-heavy feature explanations.

code-block — code snippet container.

• Background {colors.canvas-night}, text {colors.on-dark} rendered in {typography.code}. Padding {spacing.lg} 16px, rounded {rounded.sm} 6px.

Inputs & Forms

text-input — standard form input.

• Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, padding {spacing.sm} {spacing.md} (8px 12px), rounded {rounded.sm} 6px, 1px {colors.hairline} border.

Navigation

nav-bar-light — top nav across the site.

• Background {colors.canvas}, text {colors.ink}, padding {spacing.lg} {spacing.xl}. Logo on the left, primary nav center, "Sign In" link + filled button-primary-green on the right.

Pills, Tags, and Chips

pill-tag-green — small green pill used for "new" or featured indicators.

• Background {colors.primary}, text {colors.on-primary}, type {typography.micro}, padding {spacing.xxs} {spacing.sm}, rounded {rounded.full}.

pill-tag-soft — neutral pill on light surfaces.

• Background {colors.canvas-soft}, text {colors.ink}, otherwise same shape.

Signature Components

Composited Product UI Mockups — multi-layer dashboard / SQL editor / log pane composites with subtle Level 2 shadows. The product is the brand's argument; mockups always sit on white canvas with no surrounding decoration.

link-on-light — inline links in body copy.

• Text {colors.ink} rendered in {typography.body-md} with a persistent underline.

footer-light — site-wide footer.

• Background {colors.canvas}, text {colors.ink-mute}, type {typography.caption}, padding {spacing.huge} {spacing.xl} (64px 24px). Holds 4–5 columns of link groups, social icons, and a small legal row.

Do's and Don'ts

Do

• Reserve {colors.primary} emerald for filled CTAs and the wordmark accent — it should appear sparingly.
• Render display tiers at weight 500 with negative letter-spacing — the engineered tightness is part of the brand.
• Use {rounded.sm} 6px for buttons — square-ish radii, never pill-shaped.
• Composite product UI mockups inside {rounded.lg} containers with subtle Level 2 shadows.
• Use near-black {colors.ink} on the emerald button (not white) — the green reads as "lit" with dark type, which is the brand's idiosyncratic choice.
• Apply system mono for every code block.

Don't

• Don't introduce additional accent colors as system colors — purples, yellows, and pinks belong inside chart points and integration logos only.
• Don't bump display weight above 500 — the brand's calibrated mid-weight breaks at 600+.
• Don't use pill-shaped buttons; the brand's button radius is square-ish 6px.
• Don't use white text on the emerald button — the brand specifically uses near-black on green.
• Don't add atmospheric gradients to hero bands — the white canvas is the design.

Responsive Behavior

Breakpoints

Touch Targets

• Buttons hit ≥ 36×36px on mobile; vertical padding scales up to maintain WCAG AA minimum.
• Form fields stay at 36px minimum height.

Collapsing Strategy

• Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
• Product UI mockups simplify to a single primary panel on mobile.
• Pricing tiers stair-step 4-up → 2-up → 1-up; dark featured tier always distinguished.

Image Behavior

Product UI mockups use srcset with desktop / mobile crops; mobile crops focus on the most actionable inner panel.

Iteration Guide

1. Focus on ONE component at a time.
2. Reference component names and tokens directly.
3. Run npx @google/design.md lint DESIGN.md after edits.
4. Default body to {typography.body-md}; use {typography.code} for any developer-facing snippet.
5. Keep emerald scarce; one filled green button per viewport.
6. The white-canvas commitment is non-negotiable — adding atmospheric backdrops breaks the brand.