How to build a UI in the Supabase style

:root {
  /* Supabase style — extracted from supabase.com by taste-skill */
  --canvas: #FDFDFD;
  --surface: #FFFFFF;
  --text: #030303;
  --text-muted: #696969;
  --accent: #0E7E4E;
  --border: rgba(0, 0, 0, 0.08);
  --font-heading: Manrope, Inter, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter / Manrope', Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace;
  --h1-size: 46px;
  --h1-tracking: 0em;
  --h1-weight: 500;
  --radius-button: 9.29231px;
  --radius-common: 10.6667px;
  --shadow-common: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.15s;
}

// tailwind.config.js — Supabase style tokens (taste-skill)
module.exports = {
  theme: {
    extend: {
      colors: {
        canvas: "#FDFDFD",
        surface: "#FFFFFF",
        ink: "#030303",
        muted: "#696969",
        accent: "#0E7E4E",
        line: "rgba(0, 0, 0, 0.08)",
      },
      fontFamily: {
        heading: ["Manrope", 'Inter', 'system-ui', 'sans-serif'],
        sans: ["Inter / Manrope", 'Inter', 'system-ui', 'sans-serif'],
        mono: ["Source Code Pro", 'ui-monospace', 'monospace'],
      },
      fontSize: { display: ["46px", { letterSpacing: "0em", fontWeight: "500" }] },
      borderRadius: { button: "9.29231px", card: "10.6667px" },
      boxShadow: { brand: "rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset" },
      transitionTimingFunction: { brand: "cubic-bezier(0.4, 0, 0.2, 1)" },
    },
  },
};

---
name: supabase-style
description: Build UI in the Supabase visual style (Postgres Emerald Technical Clarity & Clean Modular Bento). Use when the user asks for a Supabase-like look.
---

# Supabase Style — Quick Rules (source: supabase.com, extracted by taste-skill)

## Tokens
- canvasBg: #FDFDFD — Primary Supabase page canvas
- surfaceElevated: #FFFFFF — Primary elevated card & bento surface
- surfaceSecondary: #FDFDFD — Secondary interactive container / hover fill
- borderPrimary: rgba(0, 0, 0, 0.08) — Primary structural divider (1px rgba(0,0,0,0.08))
- borderSecondary: rgba(0, 0, 0, 0.15) — Secondary nested module or pill border
- textPrimary: #030303 — Hero H1, section H2 & high-contrast foreground
- textMuted: #696969 — Lead paragraphs, descriptions & muted labels
- accentPrimary: #0E7E4E — Primary interactive CTA & brand highlight (8px)
- accentSecondary: #FDFDFD — Secondary badge, syntax or telemetry highlight

## Typography
- Heading font: Manrope; body: Inter / Manrope; mono: Source Code Pro
- Hero H1: 46px | line-height 46px (leading-[1]) | letter-spacing 0px (tracking-[0em]) | weight 500 (font-[500]) | color #030303 (text-[#030303]) | font Manrope
- Section H2 (Primary): 34px | line-height 37.8px (leading-[1.11]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #030303 (text-[#030303]) | font Manrope
- Card / Feature H3: 34px | line-height 37.8px (leading-[1.11]) | letter-spacing 0px (tracking-[0em]) | weight 600 (font-[600]) | color #696969 (text-[#696969]) | font Manrope
- Body Copy (Paragraph): 16px | line-height 24px (leading-[1.5]) | letter-spacing 0px (tracking-[0em]) | weight 450 (font-[450]) | color #696969 (text-[#696969]) | font Inter

## Components
- Primary button: height 38px, padding 8px 16px, radius 9.29231px, bg #FFFFFF, text #030303, 14px / 500
- Card: bg #FDFDFD, border 1px solid rgba(0, 0, 0, 0.08), radius 21.3333px, padding 8px 8px

## Never
- NEVER substitute generic uncalibrated gray backgrounds for Supabase’s exact #FDFDFD canvas and #FFFFFF surface pairing.
- NEVER replace Manrope display typography or ignore its signature scale (46px / 0em (w500)).
- NEVER use thick opaque borders that clash with rgba(0, 0, 0, 0.08) (1px rgba(0,0,0,0.08)).
- NEVER deviate from the signature button geometry (8px) or introduce off-brand saturated gradients.
- NEVER use default browser monospace when rendering code or telemetry—always pair with Source Code Pro.

Full 120-line spec: https://taste-skill.pages.dev/taste/supabase/

npx taste-skill add supabase