Supabase

Difficulty:
Company
Supabase Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Circular

  • Ag

    Body 16px · regular

    Circular

  • Ag

    Labels 13px · medium

    Circular

Supabase is the Postgres development platform — database, auth, instant APIs, Realtime, Functions, Storage, and vector embeddings in one — widely seen as the open-source Firebase alternative. Its interface is dark-native (#0f0f0f, #171717, never pure black), marks identity sparingly with emerald (#3ecf8e), pairs the rounded geometric Circular with Source Code Pro uppercase labels, and runs HSL tokens with alpha for translucent layering.

DeveloperMinimal

Prompt Template

Base Template
Design a Supabase-inspired interface. - Dark-mode-native: near-black backgrounds (#0f0f0f, #171717) — never pure black; - Emerald green brand accent (#3ecf8e, #00c573) used sparingly as identity marker; - Circular font — geometric sans-serif with rounded terminals; - Source Code Pro for uppercase technical labels (1.2px letter-spacing); - HSL-based color token system with alpha channels for translucent layering. Colors: #3ecf8e, #00c573, #0f0f0f, #171717 with #3ecf8e accent. Typography: Circular.

Variant Prompts

📱 Mobile
Design a mobile app with Supabase aesthetics. Use Supabase color identity with #3ecf8e accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Supabase style. Use Supabase color identity with #3ecf8e accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Supabase design language. Use Supabase color identity with #3ecf8e accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Supabase visual identity. Use Supabase color identity with #3ecf8e accents. Compelling, conversion-focused.

Usage Examples

Supabase App

Web
Build a web app with Supabase design language and #3ecf8e color system.

Supabase Dashboard

Dashboard
Create a dashboard using Supabase style with data visualization and Circular typography.

✅ Best For

  • Backend
  • Open-source backend services and databases
  • Developer consoles and docs

❌ Avoid For

  • Luxury retail brand pages
  • Bright cartoon education products

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download