Skip to content

supabase.md

Latest commit

 

History

History
92 lines (65 loc) · 2.83 KB

supabase.md

File metadata and controls

92 lines (65 loc) · 2.83 KB

Design System: Supabase | The Postgres Development Platform.

This is a real DESIGN.md example generated from https://supabase.com with npx brandmd.

Drop a DESIGN.md like this in your project root so Claude Code, Cursor, Gemini CLI, Codex, or Google Stitch can use the colors, typography, spacing, and UI patterns when generating UI.

Generate one for your site: npx brandmd https://yoursite.com (npm · repo)

1. Visual Theme & Atmosphere

Overall mood: Balanced and professional

Density: Moderate. The layout uses a varied spacing scale.

Shape language: Rounded, friendly aesthetic with generous corner radii.

Depth: Uses 3 shadow styles for layering and elevation.

2. Color Palette & Roles

  • White (#FCFCFC): Page background
  • Black (#000000): Dark background / footer
  • Light Cyan (#72E3AD): Accent background
  • Dark gray (#707070): Secondary background
  • Dark gray (#525252): Primary text
  • Medium gray (#B2B2B2): Muted text
  • Cyan (#3FCF8E): Link / accent text
  • Light gray (#DFDFDF): Divider / border
  • Cyan (#16B674BF): Focus / active border

3. Typography Rules

Primary font: Circular Secondary font: Source Code Pro

Fonts by role:

  • Headings: Circular
  • Body: Circular

Type scale:

  • Headings: 24px, 36px, 72px
  • Body / UI: 14px, 16px, 18px
  • Captions / Small: 12px

Weights in use: 400, 500

Line heights: 24px, 20px, 16px, 14px, 43.2px, 28px, 19.25px, 72px, 45px, 32px

Letter spacing: -0.16px, 1.2px

4. Component Stylings

Buttons

  • Text color: rgb(23, 23, 23)
  • Corner radius: 6px
  • Padding: 8px 8px 8px 8px
  • Font: 14px, weight 500

Cards

  • Padding: 0px 0px 0px 0px

Inputs

  • Background: oklab(0.204404 0.00000931323 0.00000409782 / 0.026)
  • Border: 1px solid rgb(199, 199, 199)
  • Corner radius: 6px
  • Padding: 8px 8px 8px 8px
  • Font size: 14px

5. Layout Principles

Spacing scale: 1px, 4px, 8px, 12px, 16px, 20px, 24px, 32px

Base unit: 4px grid (values are mostly multiples of 4).

Border radii: 6px, 8px, 11px, 12px, 16px, 3.35544e+07px

6. Guidelines

Do

  • Use 4px grid for all spacing
  • Use #72E3AD for primary actions and CTAs
  • Stick to 2 font weights: 400, 500
  • Use Circular as the primary typeface

Don't

  • Don't introduce colors outside the palette above
  • Don't mix fonts beyond Circular and Source Code Pro
  • Don't use inline styles when the design system covers the pattern
  • Don't use border-radius values outside: 6px, 8px, 11px, 12px, 16px, 3.35544e+07px

This DESIGN.md was generated by brandmd. Drop it into your project root and AI coding agents (Claude Code, Cursor, Gemini CLI) will use it to generate on-brand UI.