Supabaze Design System

---

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

---

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:**

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

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).

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 64px | 500 | 1.1 | -1.92px | Hero headline |

| `{typography.display-xl}` | 48px | 500 | 1.1 | -1.44px | Section opener |

| `{typography.display-lg}` | 36px | 500 | 1.15 | -0.72px | Sub-section / pricing tier |

| `{typography.display-md}` | 28px | 500 | 1.2 | -0.42px | Card title |

| `{typography.heading-lg}` | 22px | 500 | 1.2 | 0 | Compact heading |

| `{typography.heading-md}` | 18px | 500 | 1.4 | 0 | Section sub-heading |

| `{typography.body-lg}` | 18px | 400 | 1.55 | 0 | Marketing body lead |

| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default UI body |

| `{typography.button-md}` | 14px | 500 | 1.0 | 0 | Button label |

| `{typography.caption}` | 13px | 400 | 1.45 | 0 | Helper, footnote |

| `{typography.micro}` | 12px | 400 | 1.45 | 0 | Pill label, fine print |

| `{typography.code}` | 14px | 400 | 1.5 | 0 | Code block content |

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.

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.

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat, 1px hairline | Default cards |

| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` | Subtle card lift |

| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.08)` | Floating composited UI mockups |

| 3 | `box-shadow: 0 16px 48px rgba(0,0,0,0.12)` | Modal overlays, deep elevation |

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.

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Form inputs, hairline tags |

| `{rounded.sm}` | 6px | Buttons (the brand's signature button radius), code blocks |

| `{rounded.md}` | 8px | Compact cards, alerts |

| `{rounded.lg}` | 12px | Pricing cards, feature cards, product mockups |

| `{rounded.xl}` | 16px | Modal dialogs, large container chrome |

| `{rounded.full}` | 9999px | Pill tags, avatars |

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.

**`button-primary-green`** — the signature CTA.

**`button-secondary-outline`** — outline alternative on white.

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

**`button-link`** — text-only inline button.

**`card-feature-light`** — feature card on white.

**`card-pricing`** — standard pricing tier.

**`card-pricing-featured`** — inverted dark featured tier.

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

**`code-block`** — code snippet container.

**`text-input`** — standard form input.

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

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

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

**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.

**`footer-light`** — site-wide footer.

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1440px | Full container width; product mockups at full scale |

| Desktop | 1024–1440px | Default content max-width; pricing 4-up |

| Tablet | 768–1023px | Pricing 2-up; mockups simplify to single panel |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |

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

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.