Supabase

Overview

Supabase is a backend-as-a-service platform that democratizes database-driven development by wrapping Postgres in a modern, developer-friendly interface. The design aesthetic is 'Functional Minimalism with Accent Vitality'—a clean, light-dominant interface punctuated by a vibrant emerald-green accent (#3ecf8e) that signals action, progress, and the energy of rapid development. The brand serves developers and technical founders who value speed, transparency, and open-source principles. The UI evokes clarity and confidence: every interaction feels direct and purposeful, never cluttered. Voice: direct, encouraging, technical without jargon. Example: 'Start your project with a Postgres database. Add Authentication, Data APIs, Edge Functions, Realtime Data, Storage, and Vector embeddings.'

Colors

The color system is anchored in a light, neutral foundation (surface: #ffffff, on-surface: #0b0e0d) that maximizes readability and reduces cognitive load. Primary (#3ecf8e) is a saturated, cool-toned emerald used exclusively for call-to-action buttons, active states, and brand-critical interactions—it appears on 'Start your project' CTAs and the header logo. Secondary (#6b35dc) is a deep purple reserved for secondary actions and accent highlights; tertiary (#bda4ff) is a lighter purple for supporting UI elements and badges. The surface stack progresses from #ffffff (base) through #f5f5f5 (container-low) to #e0e0e0 (container-highest), providing subtle visual separation without harsh contrast. Outline (#a0a0a0) and outline-variant (#d0d0d0) define borders and dividers. Error (#fa2733) is a

Typography

The type system pairs Manrope (headlines, display) with Inter (body, labels), creating a modern, technical personality. Manrope's geometric, open letterforms convey precision and forward momentum; Inter's neutral, highly legible design ensures clarity at all scales. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; headline-lg (46px, 500 weight) is used for main page titles like 'Build in a weekend / Scale to millions'; body-md (16px, 400 weight) is the default for paragraph text and descriptions. Label-md (14px, 500 weight) is applied to buttons and UI labels with 0.01em tracking for subtle emphasis. All headlines use negative letter-spacing (-0.02em to -0.04em) to tighten the visual weight and reinforce the 'technical precision' brand voice. On small labels over busy ba

Layout

The layout uses a 12-column grid with a max-width of 1280px, creating a fluid, responsive structure that adapts from mobile (single column) to desktop (multi-column). The gutter is 24px, providing consistent breathing room between sections. Hero sections use lg spacing (40px) for vertical separation between the headline, subheading, and CTA buttons. Feature cards are arranged in a 3-column grid on desktop, collapsing to 1–2 columns on tablet and mobile. Container padding is md (24px) on desktop, sm (12px) on mobile. White-space is generous: section breaks use lg spacing (40px), card padding is md (24px), and internal element spacing is sm (12px). This rhythm creates a calm, uncluttered reading experience that guides the eye naturally from hero to features to CTAs.

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. Base cards use elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06)) to define boundaries without visual weight. On hover, cards elevate to elevation-md (0 4px 12px rgba(0, 0, 0, 0.1)), signaling interactivity. Modals and overlays use elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)). All cards have a 1px solid border in outline-variant (#d0d0d0) to reinforce structure. Buttons do not cast shadows in their default state; on hover, primary buttons receive a subtle glow: box-shadow: 0 4px 12px rgba(62, 207, 142, 0.

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used sparingly and consistently to soften technical interfaces without sacrificing precision. Buttons and inputs use rounded-DEFAULT (6px), a subtle curve that feels modern and approachable. Cards and larger containers use rounded-md (8px) for slightly more visual softness. Badges and pills use rounded-full (9999px) for maximum roundness, signaling secondary or supplementary information. No sharp corners (0px radius) are used on interactive elements; this reinforces the brand's friendly, developer-first positioning. The 6px defaul

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses backgroundColor: {colors.primary} (#3ecf8e), textColor: white, padding: 8px 16px, height: 40px, rounded: 6px, and label-md typography (14px, 500 weight). On hover, the background shifts to #2eb87d with a subtle glow (box-shadow: 0 4px 12px rgba(62, 207, 142, 0.15)). Secondary buttons have a transparent background with a 1px outline-variant border, textColor: on-surface, and the same padding and height. Tertiary/ghost buttons omit the border entirely. All buttons use a 200ms transition on background-color and box-shadow for smooth feedback.

Containers & Surfaces Cards are the primary container for grouped content. Standard cards use backgroundColor: white, rounded: 8px, padding: 24px, and a 1px b

Do's and Don'ts

**Do**

• Do use primary (#3ecf8e) exclusively for CTAs, active states, and brand-critical interactions—never for decorative elements.
• Do maintain the lg spacing (40px) between major sections to create visual breathing room and guide the reader's eye.
• Do pair Manrope headlines with Inter body text to reinforce the technical-yet-approachable brand voice.
• Do apply negative letter-spacing (-0.02em to -0.04em) on all headlines to tighten visual weight and convey precision.
• Do use the surface stack (surface, surface-container-low, surface-container-high) to create depth without harsh contrast shifts.

**Don't**

• Don't use secondary (#6b35dc) or tertiary (#bda4ff) as primary action colors—they dilute the emerald accent's impact.
• Don't apply shadows stronger than elevation-lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements; this creates visual noise.
• Don't use rounded corners larger than 8px on cards or containers—it conflicts with the 'geometric clarity' philosophy.
• Don't mix Manrope and Inter within a single headline; choose one typeface per text block to maintain visual hierarchy.
• Don't reduce padding below sm (12px) on interactive elements; this compromises touch targets and readability on mobile.