open sourcePostgresdeveloper platformrapid developmentscalability
A clean, developer-focused Swiss design that prioritizes clarity and functional aesthetics.
02
Color
#00bb68Accent
#171717Ink
#707070Ink soft
#ffffffBG
#fdfdfdBG soft
#fcfcfcBG quiet
rgba(223, 223, 223, 1)Line
Clean white canvas with high-contrast text and a single vibrant green accent for primary actions.
03
Typography
geometric-sans · monospace
display64px · 500
h236px · 500
body16px · 400
small14px · 400
Use Circular or similar geometric sans-serif for all text. · Headlines use a tight line-height (1.0-1.1) for impact. · Body text maintains a readable 1.5 line-height.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Consistent 8px grid for component spacing, with generous vertical padding (96px) between major sections.
05
Surfaces
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #dfdfdf
0 1px 3px rgba(0, 0, 0, 0.1)
06
Layout
1200container
12columns
24pxgutter
768 / 1024breakpoints
Single-column centered layout for the hero, transitioning to a wider container for content sections.
07
Motion & Interaction
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Subtle color and background transitions on hover. · Smooth opacity changes for UI feedback.
Subtle background color shifts or border highlights. · Immediate visual feedback via state changes.
08
Components
buttonRounded pill shapes with solid green fill for primary actions and transparent with borders for secondary.
cardClean white cards with subtle 1px borders and rounded corners.
chipRounded pill tags or tabs with thin borders.
inputStandard input fields with rounded corners and subtle borders.
heroMassive centered text with a strong headline hierarchy and clear CTA buttons.
09
Voice & Don'ts
ToneDirect, developer-friendly, and confident.
HeadlinesShort, punchy, and benefit-driven sentences.
CTAsAction-oriented and clear, such as 'Start your project'.
Don't use serif fonts — screenshot shows a clean geometric sans-serif throughout.
Don't use dark backgrounds as the primary theme — screenshot shows a predominantly white (#ffffff) canvas.
Don't use multiple competing accent colors — screenshot relies on a single vibrant green (#00bb68) accent.
Don't use sharp, square corners — screenshot shows rounded corners (4px to 16px) on all components.
Don't use heavy drop shadows — screenshot shows minimal or no shadows, relying on subtle borders for depth.
Don't use dense, cramped layouts — screenshot shows generous white space and clear section separation.
Captured from the live site · real computed styles
11
System prompt
Supabase.com is a developer-focused SaaS platform with a clean, modern, and high-contrast design. It uses a white background (#ffffff) with black text (#171717) and a vibrant green accent (#00bb68) for primary calls to action. The typography is a geometric sans-serif (Circular). The layout is centered and spacious, prioritizing readability and clear hierarchies. Critical donts: avoid dark themes, do not use multiple accent colors, avoid sharp corners, never use heavy shadows, skip complex gradients, and avoid cramped layouts. The design is built for developers who value clarity, speed, and functional aesthetics.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
