---
version: alpha
name: Supabase landing-page reference
description: A light developer-platform landing page with mint-green actions, understated
  Manrope headings, a fine-bordered product bento grid, dashboard and code demonstrations,
  templates and open-source community proof.
colors:
  primary: '#3FCF8E'
  secondary: '#72E3AD'
  surface: '#FFFFFF'
  on-surface: '#030303'
  muted: '#686868'
typography:
  headline-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 46px
  headline-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 600
    lineHeight: 24px
  headline-mobile:
    fontFamily: Manrope
    fontSize: 34px
    fontWeight: 500
    lineHeight: 37.7778px
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 500
    lineHeight: 20px
---

# Supabase landing-page reference

## Overview

Observed at https://supabase.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A light developer-platform landing page with mint-green actions, understated Manrope headings, a fine-bordered product bento grid, dashboard and code demonstrations, templates and open-source community proof. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Keep copy and technical labels clear against near-white surfaces.

## Typography

The visible display sample uses Manrope, 46px size, 46px line height and weight 500. Tracking is normal. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Use a restrained announcement strip and dense desktop navigation. Place the two-line promise at left and supporting copy at right, then a varied-width product grid where the database card is dominant. Follow with logo proof, a dashboard demo, framework/code split panel, template cards, customer stories, community quotes, open-source metrics and closing actions. The desktop hero text column is 536px wide at x=176.

At 390px, the desktop navigation collapses to a menu. The main content has 24px side gutters; the headline reduces to 34px with about 37.8px leading. The supporting paragraph follows the headline and compact actions remain side by side. Product cards stack and the desktop decorative illustrations are reduced or absent in the inspected first cards. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

Keep surfaces almost white and primarily separate them with borders. Use only subtle shadows around demonstrations. Green linework and overlapping database illustrations create local depth; avoid introducing strong page-wide gradients.

## Shapes

Use lightly rounded rectangular product tiles, fine gray borders, compact actions and small outlined technical icons. Wireframe diagrams and pale line art give the cards texture without competing with labels. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

A green start-project action and outlined request-demo action lead the hero. Seven named platform capability cards mix short copy with technical imagery. Tab-like controls frame the dashboard and framework examples; template previews and a large star count provide ecosystem proof.

## Do's and Don'ts

Keep copy and technical labels clear against near-white surfaces. Reserve mint for meaningful accents and actions. Do not assume the dark theme or hidden tab contents match this light-theme capture. Neutral hex tokens approximate sampled OKLCH neutrals; green tokens are exact RGB samples.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.