Mayank Gupta

Generated Jul 19, 2026

DESIGN.md for supabase.com

supabase.com12 colors18 componentsManrope + ui-sans-serif

Remix

12 screenshots captured· supabase.com

1 / 12 · Supabase | The Postgres Development Platform · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by Supabase

1. Visual Theme & Atmosphere

Supabase's design system embodies a modern, developer-centric aesthetic with bold energy and accessibility at its core. The visual language combines vibrant, nature-inspired green tones with clean minimalism, creating an interface that feels both approachable and powerful. The system celebrates technical capability while maintaining warmth and clarity, making complex backend infrastructure feel intuitive and within reach. Generous whitespace, clear typography hierarchies, and thoughtful use of accent colors guide users through powerful database and API functionality without overwhelming them.

Key Characteristics

Vibrant, energetic primary green (#3FCF8E) that conveys growth and forward momentum
Clean, minimal aesthetic with purposeful use of color for emphasis
Developer-friendly typography emphasizing legibility and technical clarity
Accessible contrast ratios prioritizing readability across all interface elements
Nature-inspired color palette suggesting reliability, scalability, and sustainability
Progressive disclosure of information through layered visual hierarchy
Strong call-to-action buttons that invite immediate engagement

2. Color Palette & Roles

Primary

Brand Primary (#3FCF8E): The dominant vibrant green used across primary CTAs, highlights, and interactive states. Conveys innovation and growth.
Primary Dark (#097C4F): Deep forest green for text, hover states, and secondary emphasis. Provides strong contrast and hierarchy.

Accent Colors

Accent Green (#16B674): Mid-tone green for secondary actions and feature highlights. Creates visual rhythm alongside primary.
Accent Green Light (#72E3AD): Soft mint for delicate highlights, disabled states, or background emphasis.
Accent Green Lighter (#A9F1CA): Very light mint for subtle background tints or gentle affordances.
Accent Orange (#DC7B18): Warm orange-amber for status indicators, alerts, or beta/experimental features.
Accent Orange Light (#F3BA63): Lighter amber for secondary orange states and softer callouts.

Interactive

Accent Dark (#0A874F): Dark teal-green used for interactive hover states and elevated prominence.
Link Text (#1A73E8): Blue hyperlink color (inferred from design patterns). Used for unvisited links.

Neutral Scale

Text Primary (#000000): Core black for primary text content and headings.
Text Secondary (#808080): Mid-gray for secondary text, captions, and de-emphasized content.
Text Tertiary (#A0A0A0): Light gray for disabled text, hints, and very subtle information.
Background (#FFFFFF): Pure white for main content areas and card backgrounds.

Surface & Borders

Border Subtle (#E5E5E5): Very light gray border used throughout for container edges and dividers (inferred from extracted border opacity values).
Surface Overlay (rgba(0, 0, 0, 0.026)): Minimal dark overlay for input backgrounds and subtle surface elevation.
Border Medium (rgba(0, 0, 0, 0.1466)): Semi-transparent dark border for more defined container separation.

3. Typography Rules

Font Family

Primary Display & Headings: Manrope (Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)
Body & UI: Inter (Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)
Secondary UI Fallback: ui-sans-serif (ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)
Code: Source Code Pro ("Source Code Pro", "Courier New", monospace)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display 1	Manrope	46px	500	46px	0px	Hero headlines, page titles
Display 2	Manrope	34px	600	37.78px	0px	Section headings, major emphasis
Display 3	Manrope	34px	500	40.8px	0px	Large feature titles
Heading 1	Manrope	28px	500	33.6px	0px	Primary section headers
Heading 2	Manrope	28px	600	33.6px	0px	Secondary section headers
Heading 3	Manrope	18px	600	25.2px	0px	Subsection titles
Heading 4	Manrope	16px	600	24px	0px	Card titles, strong emphasis
Heading 5	Manrope	16px	400	24.89px	0px	Lighter subsection labels
Heading 6	Manrope	15px	600	22.5px	0px	Small strong labels
Body Large	Inter	16px	450	24px	0px	Primary body text, feature descriptions
Body Regular	Inter	14px	500	19.25px	0px	Standard body copy, list items
Body Small	Inter	14px	450	20px	0px	Secondary body text, help text
Label Medium	Manrope	14px	600	20px	0px	Form labels, tags
Label Small	Inter	14px	450	14px	0px	Small UI labels, badges
Caption	ui-sans-serif	12px	450	16px	0px	Captions, metadata, fine print
Code Large	Source Code Pro	13px	500	22.1px	0px	Code blocks, larger snippets
Code Regular	Source Code Pro	12px	450	19.5px	0px	Inline code, small snippets

Principles

Use Manrope for all headings and display text to convey strength and modernity
Inter serves as the primary UI and body font for excellent on-screen legibility
Maintain strict weight discipline: headings use 500–600, body uses 400–500
Always pair large display sizes with ample line height for visual breathing room
Code uses Source Code Pro monospace for technical content and commands
Color contrast must meet WCAG AA standards (4.5:1 for body text, 3:1 for UI elements)
Avoid font-weight below 400 for body text to preserve readability on screens

4. Component Stylings

Buttons

Primary Button (CTA)

Background: #3FCF8E
Text Color: #FFFFFF
Padding: 8px 32px
Font: Inter, 14px, weight 450, line-height 20px
Border Radius: 33554400px (pill-shaped, fully rounded)
Border: 1px solid #3FCF8E
Box Shadow: none
Height: 38px
Hover State: Background #16B674, Text #FFFFFF
Active State: Background #097C4F, Text #FFFFFF
Disabled State: Background #A9F1CA, Text #FFFFFF, opacity 0.6

Secondary Button

Background: #FFFFFF
Text Color: #097C4F
Padding: 8px 32px
Font: Inter, 14px, weight 450, line-height 20px
Border Radius: 33554400px
Border: 1px solid #097C4F
Box Shadow: none
Height: 38px
Hover State: Background #F0FEFB, Border #16B674
Active State: Background #E8FDFA, Border #097C4F

Ghost Button

Background: transparent
Text Color: #097C4F
Padding: 8px 8px
Font: Inter, 14px, weight 500, line-height 16px
Border Radius: 6px
Border: 1px solid transparent
Box Shadow: none
Height: 34px
Hover State: Background rgba(63, 207, 142, 0.1), Text #3FCF8E

Cards & Containers

Standard Card

Background: #FFFFFF
Border: 1px solid rgba(0, 0, 0, 0.1466)
Border Radius: 16px
Padding: 24px
Box Shadow: none
Text Color: #097C4F
Hover State: Box Shadow 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

Minimal Card (no border)

Background: transparent
Border: none
Border Radius: 0px
Padding: 0px
Box Shadow: none
Text Color: #097C4F

Elevated Card

Background: #FFFFFF
Border: 1px solid rgba(0, 0, 0, 0.05)
Border Radius: 16px
Padding: 24px
Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
Text Color: #097C4F

Pricing Card (highlighted)

Background: #FFFFFF
Border: 2px solid #3FCF8E
Border Radius: 16px
Padding: 24px
Box Shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1)

Inputs & Forms

Text Input (default)

Background: oklab(0.1 0 0 / 0.026) (near-white with subtle tint)
Border: 1px solid rgba(0, 0, 0, 0.1466)
Border Radius: 6px
Padding: 8px 12px
Font: Inter, 14px, weight 450, line-height 20px
Text Color: #097C4F
Height: 37px
Placeholder Color: #A0A0A0
Focus State: Border #3FCF8E, Box Shadow 0px 0px 0px 3px rgba(63, 207, 142, 0.1)
Disabled State: Background #F5F5F5, Text Color #A0A0A0, Border rgba(0, 0, 0, 0.05)

Text Input (minimal)

Background: transparent
Border: 1px solid transparent
Border Radius: 0px
Padding: 8px 12px 8px 8px
Font: ui-sans-serif, 14px, weight 450, line-height 16px
Text Color: #097C4F
Height: 34px

Textarea

Background: oklab(0.1 0 0 / 0.026)
Border: 1px solid rgba(0, 0, 0, 0.1466)
Border Radius: 8px
Padding: 12px
Font: Inter, 14px, weight 450, line-height 20px
Text Color: #097C4F
Min Height: 100px
Focus State: Border #3FCF8E

Checkbox

Size: 18px × 18px
Background (unchecked): #FFFFFF
Border: 1px solid rgba(0, 0, 0, 0.2)
Border Radius: 4px
Background (checked): #3FCF8E
Checkmark Color: #FFFFFF
Hover State: Border #3FCF8E

Navigation

Top Navigation Bar

Background: #FFFFFF or transparent
Border: 1px solid rgba(0, 0, 0, 0.05) (if elevated)
Height: 65px
Padding: 0px 24px
Alignment: Flex, center vertically, space-between horizontally
Text Color: #097C4F
Font: Inter, 14px, weight 450

Navigation Link (active)

Text Color: #3FCF8E
Font Weight: 600
Border Bottom: 2px solid #3FCF8E
Padding Bottom: 2px

Navigation Link (inactive)

Text Color: #097C4F
Font Weight: 450
Hover: Text Color #3FCF8E, Border Bottom 2px solid #3FCF8E

Dropdown Menu

Background: #FFFFFF
Border: 1px solid rgba(0, 0, 0, 0.1)
Border Radius: 8px
Box Shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
Padding: 8px 0px

Links & Text Links

Standard Link

Text Color: #3FCF8E
Font: Inter, 16px, weight 450, line-height 24px
Text Decoration: none
Hover State: Text Decoration underline, Color #16B674
Visited: Color #0A874F

Link with Icon

Display: Flex, align-items center, gap 8px
Text Color: #3FCF8E
Icon Color: #3FCF8E
Hover: Both text and icon change to #16B674

Status & Badge Components

Success Badge

Background: #E8FDFA
Text Color: #097C4F
Border: 1px solid #72E3AD
Border Radius: 6px
Padding: 4px 10px
Font: Inter, 12px, weight 500

Warning Badge

Background: #FFF8E8
Text Color: #DC7B18
Border: 1px solid #F3BA63
Border Radius: 6px
Padding: 4px 10px

Info Badge

Background: #E3F2FD
Text Color: #1976D2
Border: 1px solid #90CAF9
Border Radius: 6px
Padding: 4px 10px

"Most Popular" Label

Background: #097C4F
Text Color: #FFFFFF
Border: none
Border Radius: 4px
Padding: 4px 8px
Font: Inter, 11px, weight 600

5. Layout Principles

Spacing System

Base Unit: 8px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px
Usage Context:
- 4px: Micro spacing between adjacent elements, tight component gaps
- 8px: Component internal spacing, button padding, close proximity elements
- 12px: Form field gaps, tight groupings
- 16px: Standard margin between sections, list item spacing
- 20px: Card internal spacing from title to content
- 24px: Card padding, section margin, moderate spacing
- 32px: Larger component padding, feature spacing
- 40px: Section padding, substantial visual breaks
- 48px: Major section spacing, page structure
- 64px: Large section dividers, hero spacing
- 80px: Major layout divisions
- 96px: Page-level spacing, maximum separation

Grid & Container

Max Width: 1440px for primary content containers
Column Strategy: 12-column fluid grid on desktop, 6-column on tablet, single-column on mobile
Content Width: 1280px for main content with 80px margins on desktop
Section Pattern: Hero section (96px top/bottom) → Feature sections (64px top/bottom) → Footer (80px top/bottom)
Container Padding: 24px on tablet, 16px on mobile

Whitespace Philosophy

Supabase embraces "breathing room" as a design principle. Generous padding around key information allows the eye to rest and emphasizes importance. Section spacing uses the 8px-derived scale hierarchically: tight spacing unifies related content, while larger gaps create visual separation between distinct concepts. Cards maintain internal padding of 24px minimum to avoid claustrophobia. Hero sections exploit maximum whitespace (96px) to showcase brand and establish confidence.

Border Radius Scale

0px: Sharp edges for specific, structured components (tables, code blocks)
4px: Minimal softening for smaller UI elements (badges, small tags, checkboxes)
6px: Standard radius for inputs, buttons (ghost variant), small interactive elements
8px: Medium components, navigation dropdowns, subtle softness
16px: Primary card radius, moderate softness, friendly appearance
33554400px (full pill): Button primary and secondary, fully rounded CTAs

6. Depth & Elevation

Level	Treatment	Use
Flat (0)	No shadow, `box-shadow: none`	Minimal cards, flat backgrounds, decorative elements
Subtle (1)	`0px 1px 2px 0px rgba(0, 0, 0, 0.05)`	Borders and very subtle lift
Raised (2)	`0px 4px 6px -4px rgba(0, 0, 0, 0.1)`	Hovered cards, input focus, secondary elevation
Elevated (3)	`0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1)`	Dropdowns, modals, cards on hover
Floating (4)	`0px 20px 25px -5px rgba(0, 0, 0, 0.15), 0px 10px 10px -5px rgba(0, 0, 0, 0.1)`	Tooltips, floating action buttons, modals

Shadow Philosophy: Supabase uses minimal shadows to convey hierarchy without visual heaviness. Subtle shadows (Level 1) establish baseline structure. Interactive elements receive raised shadows (Level 2) on hover. Dropdowns and modals use elevated shadows (Level 3) to float above content. All shadows employ soft opacity values (0.05–0.15) and soft blur to maintain the modern, clean aesthetic. Shadows are never harsh or pure black, preserving the friendly, approachable tone.

7. Do's and Don'ts

Do

Use primary green (#3FCF8E) for all primary calls-to-action and main interactive elements
Maintain 8px-based spacing throughout layouts to create visual harmony and predictability
Employ Manrope for all headings to ensure consistent, modern branding
Apply subtle shadows (Level 1–2) for depth; reserve heavy shadows for modals and floating elements only
Prioritize high contrast between text and backgrounds (minimum 4.5:1 for body, 3:1 for UI text)
Use cards with 16px border radius to convey friendliness and modernity
Pair secondary green tones (#16B674, #097C4F) for hover states, secondary actions, and visual hierarchy
Include whitespace generously around featured content to guide attention and reduce cognitive load
Use pill-shaped buttons (#33554400px radius) for primary CTAs to enhance discoverability
Test all interactive elements at 48px minimum touch target size on mobile

Don't

Avoid using harsh black (#000000) at full opacity for large text blocks; use #097C4F instead for body copy
Don't mix card border radius styles within a single interface (pick 16px as standard)
Avoid heavy shadows (blur > 15px) unless creating a modal or floating overlay
Don't use orange accent (#DC7B18, #F3BA63) for positive states; reserve for warnings, alerts, or beta labels
Avoid thin font weights (< 400) for body text on screens; maintain minimum 450 weight
Don't override pill-shaped buttons with sharp corners; primary CTAs should always feel approachable
Avoid color-only affordances for interactive elements; always pair color with shape or border
Don't apply opacity effects to neutrals unless indicating disabled states
Avoid line-height below 20px for body text; generous line height enhances legibility
Don't use light gray (#A0A0A0) for primary text; reserve for tertiary content and hints only

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	320px–767px	Single column, 16px padding, 24px section spacing, buttons 100% width, font sizes -2px, touch targets 48px minimum
Tablet	768px–1024px	6-column grid, 24px padding, 40px section spacing, buttons 80–100% width, font sizes -1px, reduced padding on cards (16px)
Desktop	1025px–1440px	12-column grid, 80px padding sides, 48px+ section spacing, buttons auto width, full font sizes, 24px card padding
Large Desktop	1441px+	Max-width container 1440px centered, 96px section spacing, additional whitespace

Touch Targets

Minimum Interactive Size: 48px × 48px on mobile, 44px × 44px on tablet
Comfortable Size: 56px × 56px for primary actions
Spacing Between Targets: 16px minimum to prevent accidental activation
Button Heights: 38px minimum for all clickable elements
Link Padding: 8px minimum around text links for easier targeting

Collapsing Strategy

Navigation: Hamburger menu appears at 768px breakpoint; dropdowns collapse into drawer
Cards Grid: 1 column (mobile) → 2 columns (tablet) → 3 columns (desktop)
Typography: Hero text scales from 28px (mobile) → 34px (tablet) → 46px (desktop)
Containers: Full-width at mobile (16px padding) → centered container at 768px → max-width 1440px at 1025px
Feature Sections: Stack vertically on mobile; side-by-side on tablet; 3-column on desktop
Pricing Cards: Full width, stacked on mobile; 2-column on tablet; 4-column on desktop
Forms: Single column inputs on mobile; multi-column on desktop
Images: Lazy-load on mobile; eager-load on desktop
Padding Collapse: 96px section spacing → 64px (tablet) → 48px (mobile)

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Primary (#3FCF8E)
Secondary CTA: Accent Green (#16B674)
Dark Green (text/hover): Primary Dark (#097C4F)
Background: Background (#FFFFFF)
Heading text: Text Primary (#000000)
Body text: Primary Dark (#097C4F)
Subtle text: Text Secondary (#808080)
Disabled/hint text: Text Tertiary (#A0A0A0)
Borders: Border Subtle (#E5E5E5)
Warning/beta: Accent Orange (#DC7B18)
Light green accent: Accent Green Light (#72E3AD)
Input backgrounds: Surface Overlay (rgba(0, 0, 0, 0.026))

Iteration Guide

All primary buttons use #3FCF8E background, pill-shaped (33554400px border-radius), white text at 14px/450 weight Inter, 38px height, 8px 32px padding.
All cards use 16px border-radius, white background, 1px solid rgba(0, 0, 0, 0.1466) border, 24px padding, no shadow by default, elevated shadow on hover.
Use 8px-derived spacing scale throughout: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px.
Headings always use Manrope; body/UI always use Inter; code always uses Source Code Pro.
Text color for body copy is #097C4F (dark green); for primary headings use #000000 (black); never use full black for body text.
Input fields: rounded 6px, subtle background oklab(0.1 0 0 / 0.026), border rgba(0, 0, 0, 0.1466), 37px height, focus state adds #3FCF8E border.
Navigation links: inactive #097C4F, active #3FCF8E with 2px bottom border, pill-shaped hover background rgba(63, 207, 142, 0.1).
Shadows are subtle: never use pure black, max 15px blur except for modals, opacity max 0.15 for depth perception.
Mobile-first responsive: single column, 16px padding, 48px touch targets → tablet 768px with 6-column grid, 24px padding → desktop 1025px with 12-column, 80px padding.
Always test contrast: body text minimum 4.5:1 against background, UI elements minimum 3:1, especially true for #097C4F text on white.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from supabase.com

Primary

#3FCF8E

#097C4F

#0A874F

#16B674

#72E3AD

#DC7B18

#F3BA63

#A9F1CA

Neutral

#FFFFFF

#000000

#808080

#A0A0A0

Typography · Manrope

h615px · 600 · 22.5px

h134px · 500 · 40.8px

h216px · 600 · 24px

h334px · 600 · 37.7778px

h418px · 600 · 25.2px

h146px · 500 · 46px

h414px · 500 · 20px

h228px · 600 · 33.6px

h416px · 400 · 24.8889px

h214px · 600 · 20px

h128px · 500 · 33.6px

Typography · ui-sans-serif

body14px · 500 · 19.25px

span12px · 450 · 16px

link16px · 450 · 24px

label14px · 450 · 14px

Typography · Inter

body14px · 500 · 19.25px

span12px · 450 · 16px

link16px · 450 · 24px

input14px · 450 · 20px

Typography · Source Code Pro

code12px · 450 · 19.5px

code13px · 500 · 22.1px

h322px · 450 · 29.3333px

Spacing

8px

4px

32px

16px

24px

12px

96px

80px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.52065 0 34) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

Components · 18

Remixes of supabase.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it

DESIGN.md for supabase.com

Preview

Design System Inspired by Supabase

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (CTA)

Secondary Button

Ghost Button

Badge/Tag Button

Cards & Containers

Standard Card

Minimal Card (no border)

Elevated Card

Pricing Card (highlighted)

Inputs & Forms

Text Input (default)

Text Input (minimal)

Textarea

Checkbox

Navigation

Top Navigation Bar

Navigation Link (active)

Navigation Link (inactive)

Dropdown Menu

Links & Text Links

Standard Link

Link with Icon

Status & Badge Components

Success Badge

Warning Badge

Info Badge

"Most Popular" Label

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

6. Depth & Elevation

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

Remixes of supabase.com

Preview

Design System Inspired by Supabase

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors

Interactive

Neutral Scale

Surface & Borders

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button (CTA)

Secondary Button

Ghost Button

Badge/Tag Button

Cards & Containers