---
name: Supabase
description: "This site is worth including as a prime example of a modern, developer-centric SaaS landing page that balances bold typography with clean, restrained aesthetics."
version: alpha

colors:
  background: "#ffffff"
  primary: "#171717"
  secondary: "#707070"
  tertiary: "#00bb68"
  neutral: "#707070"
  bg-soft: "#fdfdfd"
  bg-quiet: "#fcfcfc"
  line: "rgba(223, 223, 223, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1.5px"
  h2:
    fontFamily: geometric-sans
    fontSize: 36px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A high-contrast, clean developer platform site using a bright green accent on a white canvas with geometric sans typography.

*A clean, developer-focused Swiss design that prioritizes clarity and functional aesthetics.*

## Colors

Clean white canvas with high-contrast text and a single vibrant green accent for primary actions.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#171717`)** — uses `ink` token
- **Secondary text (`#707070`)** — uses `ink-soft` token
- **Accent (`#00bb68`)** — uses `accent` token
- **Muted (`#707070`)** — uses `muted` token
- **Borders (`rgba(223, 223, 223, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

- Use Circular or similar geometric sans-serif for all text.
- Headlines use a tight line-height (1.0-1.1) for impact.
- Body text maintains a readable 1.5 line-height.

## Layout

Single-column centered layout for the hero, transitioning to a wider container for content sections.

*Rhythm:* Consistent 8px grid for component spacing, with generous vertical padding (96px) between major sections.

## Elevation & Depth

- 0 1px 3px rgba(0, 0, 0, 0.1)
- Borders: 1px solid #dfdfdf

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Rounded pill shapes with solid green fill for primary actions and transparent with borders for secondary.
- **card:** Clean white cards with subtle 1px borders and rounded corners.
- **chip:** Rounded pill tags or tabs with thin borders.
- **input:** Standard input fields with rounded corners and subtle borders.
- **hero:** Massive centered text with a strong headline hierarchy and clear CTA buttons.

## Do's and Don'ts

**Don't:**
- Don't use serif fonts — screenshot shows a clean geometric sans-serif throughout.
- Don't use dark backgrounds as the primary theme — screenshot shows a predominantly white (#ffffff) canvas.
- Don't use multiple competing accent colors — screenshot relies on a single vibrant green (#00bb68) accent.
- Don't use sharp, square corners — screenshot shows rounded corners (4px to 16px) on all components.
- Don't use heavy drop shadows — screenshot shows minimal or no shadows, relying on subtle borders for depth.
- Don't use dense, cramped layouts — screenshot shows generous white space and clear section separation.

---

## System Prompt (paste into AI agent)

```
Supabase.com is a developer-focused SaaS platform with a clean, modern, and high-contrast design. It uses a white background (#ffffff) with black text (#171717) and a vibrant green accent (#00bb68) for primary calls to action. The typography is a geometric sans-serif (Circular). The layout is centered and spacious, prioritizing readability and clear hierarchies. Critical donts: avoid dark themes, do not use multiple accent colors, avoid sharp corners, never use heavy shadows, skip complex gradients, and avoid cramped layouts. The design is built for developers who value clarity, speed, and functional aesthetics.
```