Remixes of supabase.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Supabase
description: |
Supabase's design system embodies a modern, developer-centric aesthetic built
for technical clarity and rapid product integration. The visual language
combines clean geometric forms, sharp angular contrast, and a high-trust
palette centered on deep navy and bright accent teal. The typography employs
distinct families (Manrope for display and headings, Inter for body and UI) to
create immediate hierarchy and scanability. Surfaces are predominantly light
with minimal shadows—depth comes from color blocking and precise borders
rather than elevation effects. This creates a business-professional,
approachable tone suited to infrastructure and backend tooling, where
confidence in data handling is paramount. The overall mood is energetic yet
stable, inviting developers to "build in a weekend" while maintaining visual
rigor.
source:
url: "https://supabase.com"
pagesAnalyzed: 1
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#0C0F24"
ink: "#FFFFFF"
accent-1: "#002533"
neutral-1: "#000000"
typography:
display:
fontFamily: Manrope
fontSize: 46px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
heading-lg:
fontFamily: Manrope
fontSize: 34px
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0px
heading-lg-tight:
fontFamily: Manrope
fontSize: 34px
fontWeight: 600
lineHeight: 1.11
letterSpacing: 0px
heading-md:
fontFamily: Manrope
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-sm:
fontFamily: Manrope
fontSize: 15px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-xs:
fontFamily: Manrope
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
body-xl:
fontFamily: Inter
fontSize: 22px
fontWeight: 450
lineHeight: 1.33
letterSpacing: -0.16px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: 450
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 15px
fontWeight: 450
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.38
letterSpacing: 0px
nav:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1
letterSpacing: 0px
button-xl:
fontFamily: Manrope
fontSize: 22px
fontWeight: 450
lineHeight: 1.38
letterSpacing: 0px
button-lg:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.43
letterSpacing: 0px
button-lg-tight:
fontFamily: Inter
fontSize: 14px
fontWeight: 500
lineHeight: 1.14
letterSpacing: 0px
button-md:
fontFamily: Inter
fontSize: 12px
fontWeight: 450
lineHeight: 1.63
letterSpacing: 0px
label:
fontFamily: Inter
fontSize: 14px
fontWeight: 450
lineHeight: 1.43
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 450
lineHeight: 1.33
letterSpacing: 0px
caption-xs-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
code:
fontFamily: "Source Code Pro"
fontSize: 13px
fontWeight: 500
lineHeight: 1.7
letterSpacing: 0px
rounded:
none: 0px
xs: 8px
sm: 9.29231px
md: 10.6667px
lg: 15px
xl: 16px
xxl: 21.3333px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 40px
section: 48px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset"
md: "rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset"
lg: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
elevationStrategy: layered-micro
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FBFBFB"
surface: "#F1F1F1"
surfaceRaised: "#E9E9E9"
text: "#111112"
textMuted: "#737374"
border: "#D8D8D8"
accent: "#0C0F24"
accentFg: "#FFFFFF"
focusRing: "#0C0F24"
elevation: shadow
dark:
bg: "#0F1011"
surface: "#0F1010"
surfaceRaised: "#222323"
text: "#FFFFFF"
textMuted: "#ABABAC"
border: "#2C2D2E"
accent: "#4D5CC4"
accentFg: "#FFFFFF"
focusRing: "#0C0F24"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(oklch(0.1 0 337.5 / 0.0812725) 0px, oklab(0.1 0 0 / 0.0406362) 100%)"
- context: section
kind: linear
value: "linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, oklch(1 0 337.5) 85%)"
components:
button-outline:
typography: "{typography.caption-xs}"
textColor: "oklch(0.394455 0 337.5)"
border: "1px solid oklch(0.1 0 337.5 / 0.0812725)"
height: 30px
padding: "6px 12px 6px 12px"
rounded: "3.35544e+07px"
backgroundColor: "oklch(1 0 337.5)"
button-text:
typography: "{typography.button-lg}"
textColor: "oklch(0.99 0.00275 157.5)"
height: 38px
padding: "8px 16px 8px 16px"
boxShadow: "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.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset"
rounded: "{rounded.sm}"
backgroundColor: "oklch(0.525 0.12 157.5)"
button-text-2:
typography: "{typography.button-lg}"
textColor: "oklch(0.1 0 337.5)"
height: 38px
padding: "8px 16px 8px 16px"
boxShadow: "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.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset"
rounded: "{rounded.sm}"
backgroundColor: "oklch(1 0 337.5)"
card:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
border: "1px solid oklch(0.1 0 337.5 / 0.0812725)"
padding: "24px 24px 24px 24px"
rounded: "{rounded.xxl}"
backgroundColor: "oklch(1 0 337.5)"
card-2:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
navigation:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
height: 65px
footer:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
backgroundColor: "oklch(0.995 0 337.5)"
link:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
border: "1px solid oklch(0.1 0 337.5 / 0.0812725)"
rounded: "{rounded.md}"
backgroundColor: "oklch(1 0 337.5)"
link-lg:
typography: "{typography.body-lg}"
textColor: "oklch(0.1 0 337.5)"
rounded: "{rounded.xl}"
states:
other-focus-visible:
target: other
state: focus-visible
boxShadow: "rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px"
button-focus-visible:
target: button
state: focus-visible
boxShadow: "rgba(0, 0, 0, 0.4) 0px 0px 0px 2px"
other-hover:
target: other
state: hover
opacity: 1
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 6
navLinksVisible: 1
menuToggleVisible: true
headingPx: 34
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 6
navLinksVisible: 1
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1280
gridColumns: 6
navLinksVisible: 7
menuToggleVisible: true
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 6
gradientsFound: 2
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Supabase's design system embodies a modern, developer-centric aesthetic built for technical clarity and rapid product integration. The visual language combines clean geometric forms, sharp angular contrast, and a high-trust palette centered on deep navy and bright accent teal. The typography employs distinct families (Manrope for display and headings, Inter for body and UI) to create immediate hierarchy and scanability. Surfaces are predominantly light with minimal shadows—depth comes from color blocking and precise borders rather than elevation effects. This creates a business-professional, approachable tone suited to infrastructure and backend tooling, where confidence in data handling is paramount. The overall mood is energetic yet stable, inviting developers to "build in a weekend" while maintaining visual rigor.
Key Characteristics
{colors.primary} — #0C0F24): Deep navy serving as the primary brand color, used in CTAs, active states, and brand mark. Appears on white backgrounds for high contrast and authority.{colors.ink} — #FFFFFF): White, used for headings, primary body text, and on dark backgrounds. The inverse of the primary for readability.{colors.accent-1} — #002533): A darker teal, measured in decorative contexts with no assigned semantic role. Used sparingly in background layering and non-interactive visual interest.{colors.neutral-1} — #000000): Pure black, minimal direct use; primarily applied to text and borders in high-contrast contexts.oklch(1 0 337.5) — derived as #FFFFFF): Clean white, standard canvas for cards, containers, and page backgrounds.oklch(0.1 0 337.5 / 0.0812725) — derived as #1A1F3A at 8% opacity): Subtle outline stroke for cards, inputs, and interactive elements; provides gentle containment without visual weight.Primary Display & Headings: Manrope (sans-serif)
Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifSecondary UI & Body: Inter (sans-serif)
Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifCode & Technical: Source Code Pro (monospace)
'Source Code Pro', 'Courier New', monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Manrope | 46px | 500 | 1.0 | 0px | Hero headings; tight line-height for impact |
| Heading Large | Manrope | 34px | 600 | 1.2 | 0px | Section titles; slightly more generous leading |
| Heading Large (Tight) | Manrope | 34px | 600 | 1.11 | 0px | Alternative tight variant for specific contexts |
| Heading Medium | Inter | 16px | 600 | 1.5 | 0px | Card titles, subsection heads |
| Heading Small | Inter | 15px | 600 | 1.5 | 0px | Minor headings, labels |
| Heading XS | Manrope | 14px | 500 | 1.43 | 0px | Small section markers |
| Body XL | Inter | 22px | 450 | 1.33 | -0.16px | Large body prose; subtle negative tracking |
| Body Large | Inter | 16px | 450 | 1.5 | 0px | Primary body text, UI descriptors |
| Body Medium | Inter | 15px | 450 | 1.5 | 0px | Subsidiary body text |
| Body Small | Inter | 14px | 500 | 1.38 | 0px | Compact body, form labels |
| Button XL | Manrope | 22px | 450 | 1.38 | 0px | Large call-to-action buttons |
| Button Large | Inter | 14px | 500 | 1.43 | 0px | Primary interactive buttons |
| Button Large (Tight) | Inter | 14px | 500 | 1.14 | 0px | Compact button variant |
| Button Medium | Inter | 12px | 450 | 1.63 | 0px | Secondary action buttons |
| Navigation | Inter | 14px | 500 | 1.0 | 0px | Header nav links; tight line-height |
| Label | Inter | 14px | 450 | 1.43 | 0px | Form field labels |
| Caption XS | Inter | 12px | 450 | 1.33 | 0px | Footnotes, metadata |
| Caption XS Strong | Inter | 12px | 500 | 1.33 | 0px | Emphasized captions |
| Code | Source Code Pro | 13px | 500 | 1.7 | 0px | Inline and block code blocks |
-0.16px letter-spacing to create optical tightness at larger sizes; all other roles use 0px spacing.Primary Variant (filled teal, green-tinted)
oklch(0.525 0.12 157.5) (bright teal accent)oklch(0.99 0.00275 157.5) (off-white)typography.button-lg})8px 16px{rounded.sm} (9.29231px)rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px insetSecondary Variant (outline, light background)
oklch(1 0 337.5) (white)oklch(0.1 0 337.5) (navy, #0C0F24)typography.button-lg})8px 16px{rounded.sm} (9.29231px)1px solid oklch(0.1 0 337.5 / 0.0812725) (subtle navy outline)rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.04) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px insetborderColor changes to var(--normal-border-hover) (slightly darker outline)Ghost Variant (minimal, pill-shaped)
oklch(1 0 337.5) (white)oklch(0.394455 0 337.5) (medium gray)typography.button-md})6px 12px{rounded.full} (9999px — fully rounded pill)1px solid oklch(0.1 0 337.5 / 0.0812725) (subtle outline)Focus-Visible State (all buttons)
rgba(0, 0, 0, 0.4) 0px 0px 0px 2px or rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px (ring-based focus indicator)Default Card (light background, subtle border)
oklch(1 0 337.5) (white)oklch(0.1 0 337.5) (navy)typography.body-lg})24px (all sides){rounded.xxl} (21.3333px)1px solid oklch(0.1 0 337.5 / 0.0812725) (subtle navy outline)Card Borderless Variant (no visible border, transparent)
rgba(0, 0, 0, 0) (transparent){rounded.none} (0px)oklch(0.1 0 337.5) (navy)Input Field (standard)
oklch(1 0 337.5) (white)oklch(0.1 0 337.5) (navy)typography.label}){spacing.md} / 16px){rounded.xs} (8px)1px solid oklch(0.1 0 337.5 / 0.0812725) (subtle navy)rgba(0, 0, 0, 0.04) 0px 1px 3px 0px (minimal inset lift)rgba(0, 0, 0, 0.1) 0px 4px 12px, rgba(0, 0, 0, 0.2) 0px 0px 0px 2px (soft ring focus)Header Navigation (full-width, transparent)
rgba(0, 0, 0, 0) (transparent)oklch(0.1 0 337.5) (navy)typography.body-lg}){rounded.none} (0px){typography.nav} (14px, weight 500, line-height 1.0)Default Link (bordered container, light background)
oklch(1 0 337.5) (white)oklch(0.1 0 337.5) (navy)typography.body-lg}){rounded.md} (10.6667px)1px solid oklch(0.1 0 337.5 / 0.0812725) (subtle outline)Link Borderless Variant (transparent, no visible border)
rgba(0, 0, 0, 0) (transparent){rounded.xl} (16px)oklch(0.1 0 337.5) (navy)Default Footer (light background)
oklch(0.995 0 337.5) (off-white, nearly white)oklch(0.1 0 337.5) (navy)typography.body-lg}){rounded.none} (0px)The system employs a base unit of 4px with a consistent multiplicative scale:
{spacing.xxs}: 4px — Micro gaps (icon spacing, inline elements){spacing.xs}: 8px — Compact spacing (button internal padding, tight containers){spacing.sm}: 12px — Small gaps (label-to-field, minor separators){spacing.md}: 16px — Standard gutter (card padding, column gaps){spacing.lg}: 20px — Medium spacing (section headers, rhythm breaks){spacing.xl}: 24px — Large padding (card internals, container padding){spacing.xxl}: 32px — Extended spacing (section separators, major layout divisions){spacing.xxxl}: 40px — Large dividers (between feature blocks){spacing.section}: 48px — Major section spacing (between hero and content){spacing.band}: 64px — Page-level band spacing (full-width section breaks)Usage Context:
{spacing.xxs} and {spacing.xs}.{spacing.md} or {spacing.xl} for padding.{spacing.section} and {spacing.band} for breathing room.Supabase prioritizes generous whitespace and color-blocked separation over shadow-based depth. Large sections are divided by {spacing.band} (64px) gaps; feature cards maintain consistent {spacing.xl} (24px) internal padding. This approach keeps the interface breathable and scannable while allowing color gradients and subtle borders to define containment. Navigation and footer have no padding-x constraint, respecting full viewport width.
| Value | Radius | Component Context |
|---|---|---|
{rounded.none} | 0px | Buttons (ghost variant use pill, but standard primary/secondary measured 0px in code—verify per-component); cards (borderless variant); images; full-width sections |
{rounded.xs} | 8px | Input fields; overlay modals; small contained elements |
{rounded.sm} | 9.29231px | Buttons (primary and secondary, 9.29231px observed); minor containers |
{rounded.md} | 10.6667px | Links and bordered content blocks |
{rounded.lg} | 15px | Alternative card variant |
{rounded.xl} | 16px | Large borderless links; media containers |
{rounded.xxl} | 21.3333px | Default cards; large containers |
{rounded.full} | 9999px | Pill-shaped ghost buttons; badges |
The system employs a layered-micro elevation strategy, using stacked near-transparent shadow layers and color blocking rather than dramatic elevation changes. Most components sit on a flat plane; depth emerges from surface-color contrast and subtle inset borders.
| Level | Treatment | Use |
|---|---|---|
| Flat / No Shadow | No box-shadow | Base surfaces, cards, sections, most UI |
| Micro Lift (sm) | rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset | Modals; buttons; minimal interactive hints |
| Micro Lift (lg) | rgba(0, 0, 0, 0.04) 0px 1px 3px 0px, rgba(0, 0, 0, 0.027) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.067) 0px 0px 0px 1px inset | Alternative modal layer |
| Dropdown (xl) | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Popovers, dropdowns, overlays requiring visual separation |
Shadow Philosophy: Shadows are minimal and blur-soft, designed to suggest containment rather than dramatic floating. Most rely on inset borders and color contrast for definition. The micro-lift shadows use 1–4px vertical blur with opacity ≤ 4%, creating barely-there elevation. Only dropdown-level elements (z-index 40+) employ the larger xl shadow for clear visual hierarchy when appearing over multiple layers.
0.80): Primary interactive hover, semi-transparent overlays0.70): Secondary opacity, medium-strength transparency0.20): Disabled or de-emphasized elements; low-contrast backgrounds| Layer | Z-index | Use |
|---|---|---|
| Dropdown (lower tier) | 10 | Inline popover, menu suggestions |
| Dropdown (mid tier) | 20 | Secondary dropdown layers |
| Sticky | 100 | Fixed header, sticky nav (above content scroll) |
| Dropdown (top tier) | 40 | Primary dropdown menus, active popovers |
{colors.ink} on {colors.primary}, white on navy) rather than shadows to establish visual hierarchy.{rounded.xxl} (21.3333px), inputs use {rounded.xs} (8px), buttons use {rounded.sm} (9.29231px)—maintain these consistently across implementations.{spacing.section} (48px) and {spacing.band} (64px) between major content blocks to preserve scannability.1px solid borders with inset box-shadows (rgba(0, 0, 0, 0.04) on three insets) for subtle containment.oklch(0.1 0 337.5 / 0.0812725) (navy at 8% opacity) creates sophisticated, non-jarring borders across inputs, cards, and interactive elements.rgba(0, 0, 0, 0.2) 0px 0px 0px 2px for keyboard navigation visibility.{typography.body-xl} uses -0.16px tracking; all others are 0px.oklch(0.525 0.12 157.5) is the primary CTA color; use navy ({colors.primary}) and white ({colors.ink}) for contrast.1px solid outlines to distinguish them from primary (filled) variants.| Viewport | Content Width | Grid Columns | Nav Links Visible | Menu Toggle | Display Heading | Body Font Size | Section Padding-X |
|---|---|---|---|---|---|---|---|
| 375px (Mobile) | 375px | 6 | 1 | Yes | 34px ({typography.heading-lg}) | 16px ({typography.body-lg}) | 0px |
| 768px (Tablet) | 768px | 6 | 1 | Yes | 46px ({typography.display}) | 16px ({typography.body-lg}) | 0px |
| 1024px (Small Desktop) | 1024px | 6 | 7 | Yes | 46px ({typography.display}) | 16px ({typography.body-lg}) | 0px |
| 1280px (Desktop) | 1280px | 6 | 7 | Yes | 46px ({typography.display}) | 16px ({typography.body-lg}) | 0px |
| 1440px (Large Desktop) | 1280px (capped) | 6 | 7 | Yes | 46px ({typography.display}) | 16px ({typography.body-lg}) | 0px |
Key Observations:
While exact touch-target measurements were not extracted, the following component dimensions observed indicate safe touch areas:
{spacing.md} (16px) between adjacent touch targetsRecommend minimum 44px (iOS) / 48px (Android) for mobile touch targets; current button and input sizes (30–38px) should be tested and increased if mobile usability testing indicates issues.
{spacing.xl} (24px) internal padding but stack in single column.oklch(0.525 0.12 157.5)) — buttons, interactive accents{colors.primary} — #0C0F24) — headings, body text, brand mark{colors.ink} — #FFFFFF) — text on dark backgroundsoklch(1 0 337.5) — #FFFFFF) — default canvasoklch(0.1 0 337.5 / 0.0812725)) — card borders, input outlinesoklch(0.995 0 337.5)) — nearly white footer container{colors.accent-1} — #002533) — non-semantic use onlyDisplay and Heading Sizes: Use Manrope at 34px–46px with line-heights 1.0–1.2. Apply 0px letter-spacing except Body XL (-0.16px).
Button Styling: Primary buttons fill with teal and round at {rounded.sm} (9.29231px). Secondary buttons outline with 1px solid navy border and white fill. Ghost buttons use pill shape ({rounded.full}) and minimal padding.
Color Hierarchy: Navy ({colors.primary}) is the highest-contrast text and UI element. White backgrounds contrast sharply with navy text. Teal accents are reserved for CTAs and interactive states.
Spacing: Apply {spacing.section} (48px) between major sections; {spacing.band} (64px) for full-bleed dividers. Card internals use {spacing.xl} (24px). Respect the 10-tier scale; do not interpolate arbitrary values.
Depth and Shadows: Rely on color blocking first. Apply subtle {rounded.none} or {rounded.xs} radius to modals and inputs. Use micro-lift shadows (rgba(0, 0, 0, 0.04) 0px 1px 3px) on buttons; reserve xl shadows for dropdowns only.
Responsive Collapses: At ≤1024px, hide nav menu and show toggle. Heading size drops to 34px at ≤768px. Maintain content max-width of 1280px; center with auto margins above that.
Borders and Outlines: Use the navy-with-opacity outline (oklch(0.1 0 337.5 / 0.0812725)) for all card and input borders. Combine 1px solid border with inset box-shadow for definition.
Typography Pairing: Manrope for headlines and display sizes; Inter for body, UI, and navigation; Source Code Pro for code blocks. Never mix Manrope and Inter in the same hierarchy level.
Focus States: Apply :focus-visible with rgba(0, 0, 0, 0.2) 0px 0px 0px 2px ring for keyboard users. This is the only interactive state measured and verified.
Gradients (Decorative): Use measured linear gradients sparingly for section backgrounds (e.g., linear-gradient(oklch(...) 0px, oklab(...) 100%) for subtle atmospheric layers). Do not apply gradients to interactive elements or text.
Hover, Active, and Disabled States: Only :focus-visible and :hover states with specific box-shadow and border-color changes were extracted. Comprehensive interaction states (pressed, disabled, loading) are not documented and should be validated through component testing.
Semantic Status Colors: The site does not expose error, success, warning, or info color variants in its markup. No semantic ramp was measured. Implement status colors through convention or extend the palette if required.
Dark Mode: No dark theme was observed or extracted. The design is light-mode-only as measured; dark-mode derivatives would be non-canonical and should be validated with the Supabase brand team if needed.
Animation and Transition Timings: No CSS transitions, keyframes, or animation durations were captured. Micro-interaction timing (e.g., button press, menu slide, focus ring fade) is not documented.
Cross-Origin Stylesheets: Some styles may be served via CDN or cross-origin sources, limiting visibility of certain CSS properties. Shadow and border treatments on interactive elements outside the measured page sections may differ.
Behind-Authentication Surfaces: The captured page is public-facing. Authenticated dashboards, user account pages, and editor interfaces (where Supabase likely applies UI extensively) were not analyzed.
Component Variants in Context: Measured component data represents singular instances (one primary button, one secondary button, one card). Variants in hover, focus, and disabled states beyond those explicitly captured require implementation and testing.
Icon Sizing and Styling: Icons are used throughout (Postgres logo, lock, satellite, database icons). Specific icon sizes, stroke widths, and color rules were not extracted; infer from proximity to related components.
Print and Accessibility Modes: No print stylesheets or high-contrast / accessibility-specific overrides were captured.
Mobile Interactions and Gestures: Breakpoint data reflects layout changes; touch-specific behaviors (swipe, long-press, haptic feedback) are not documented.