skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-supabase

Apply Supabase's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#supabase#dark mode#css tokens#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-supabase-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-supabase
Source: https://github.com/deepparser/skills/tree/main/design-supabase
Command: npx skills add https://github.com/deepparser/skills --skill design-supabase-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Supabase's dark-mode-native visual identity requires exact design tokens — colors, typography, spacing, and component rules — that are tedious to reverse-engineer manually. ## Core Features & Use Cases - Complete Design Token Reference: Provides Supabase's exact color palette (near-black backgrounds, emerald green accents, Radix HSL tokens), typography scale (Circular, Source Code Pro), spacing, and border-radius values. - Component Styling Rules: Defines pill buttons, border-defined cards, tabs, links, navigation, and form states with precise CSS values. - Visual Previews: Bundled light and dark theme HTML previews let you verify exact visual implementation details. - Use Case: When asked to build a developer dashboard or landing page styled like Supabase, invoke this skill to generate UI code using the correct #171717 backgrounds, #3ecf8e green accents, 1.00 hero line-height, and border-based depth system. ## Quick Start Use the design-supabase skill to create a landing page hero section styled like Supabase's website.

Frequently Asked Questions about design-supabase

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Supabase?▼

Invoke this skill when generating UI code and it will apply Supabase's exact design tokens: near-black backgrounds (#0f0f0f, #171717), emerald green accents (#3ecf8e), Circular typography at weight 400, and pill-shaped primary buttons with 9999px radius.

What colors does the Supabase design system use?▼

The palette centers on near-black surfaces (#0f0f0f, #171717), a neutral gray scale from #242424 to #fafafa, and Supabase green (#3ecf8e brand, #00c573 links). It also includes Radix HSL color tokens with alpha channels for translucent layering.

Does this skill include light and dark theme examples?▼

Yes, the skill bundles two HTML preview files: preview.html for the standard theme and preview-dark.html for the deeper dark variant. Both demonstrate colors, typography, buttons, cards, forms, spacing, and elevation with working CSS.

How does Supabase handle shadows and elevation in dark mode?▼

Supabase avoids box-shadows almost entirely. Depth is created through a border color hierarchy (#242424 to #393939) and translucent green accent borders at rgba(62, 207, 142, 0.3), with shadows reserved only for focus states.

What typography rules should I follow for Supabase-style interfaces?▼

Use Circular at weight 400 for nearly all text, with weight 500 only for nav links and buttons. Hero text uses 72px with a 1.00 line-height, and Source Code Pro uppercase labels with 1.2px letter-spacing serve as technical markers.

Related Skills

Explore More Design & Creative Skills→
SpaceZephyrSpaceZephyr
127

space-brand-ui-design

Fetch design specifications and generate UI components in specified brand styles.

Community
Advanced
Norfolk-GroupNorfolk-Group

component-library

Provides a UI component library with usage rules for the Hospitality portal.

Official
Intermediate
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced