---
version: alpha
name: "supabase.com"
description: "Design system extracted from https://supabase.com/ on 2026-10-28"
colors:
  background: "#000000"
  surface: "#0c0f24"
  surface-2: "#002533"
  foreground: "#ffffff"
  muted-foreground: "#a0a0a0"
  primary: "#15593b"
  on-primary: "#ffffff"
  secondary: "#8e4ec6"
  border: "#3fcf8e"
typography:
  headline-display:
    fontFamily: "Manrope"
    fontSize: "46px"
    fontWeight: 500
    lineHeight: "46px"
  headline-lg:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: "24px"
  headline-md:
    fontFamily: "Manrope"
    fontSize: "34px"
    fontWeight: 600
    lineHeight: "37.7778px"
  body-md:
    fontFamily: "Inter"
    fontSize: "15px"
    fontWeight: 450
    lineHeight: "22.5px"
  label-md:
    fontFamily: "Inter"
    fontSize: "12px"
    fontWeight: 500
    lineHeight: "1.33"
  button:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 450
    lineHeight: "20px"
rounded:
  none: "0px"
  xl: "21px"
  lg: "11px"
  full: "9999px"
  md: "5px"
spacing:
  unit: "8px"
  1: "8px"
  2: "16px"
  3: "24px"
  4: "32px"
  5: "40px"
  6: "96px"
components:
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "9px"
    height: "64px"
    padding: "8px 10px"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.button}"
    rounded: "8px"
    height: "26px"
    padding: "4px 10px"
  card:
    backgroundColor: "transparent"
    rounded: "21px"
    padding: "24px"
---

# supabase.com

## Overview

Supabase | The Postgres Development Platform: Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.

Sharp, squared-off controls, layered shadows for depth, confident display type at 46px / 500, a single green accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 6000 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("AI ChatbotAn open-source"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("AI ChatbotAn open-source"), focus
- `screenshots/c-link-1--rest.png`: Text link 1 ("Postgres DatabaseEvery p"), rest
- `screenshots/c-link-1--focus.png`: Text link 1 ("Postgres DatabaseEvery p"), focus
- `screenshots/c-text-input-1--rest.png`: Text input 1, rest
- `screenshots/c-text-input-1--focus.png`: Text input 1, focus
- `screenshots/c-text-input-1--disabled.png`: Text input 1, disabled
- `screenshots/c-text-input-1--filled.png`: Text input 1, filled
- `screenshots/c-text-input-1--invalid.png`: Text input 1, invalid
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Pricing"), rest
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Pricing"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Product"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Product"), hover
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "Product"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Product"), open (trigger)
- `screenshots/c-tabs-1--rest.png`: Tabs 1 ("Table EditorSQL EditorRL"), rest
- `screenshots/c-tabs-1--selected.png`: Tabs 1 ("Table EditorSQL EditorRL"), another tab selected
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Pricing"), rest
- `screenshots/c-badge-1--rest.png`: Badge / pill / tag 1 ("$supabasefunctions deplo"), rest
- `screenshots/c-feature-item-1--rest.png`: Feature item (icon + title + text) 1 ("Postgres DatabaseEvery p"), rest
- `screenshots/c-list-1--rest.png`: Styled list 1 ("100% portable Built-in A"), rest
- `screenshots/c-avatar-1--rest.png`: Avatar 1, rest
- `screenshots/c-code-1--rest.png`: Code block / inline code 1 ("import { createClient } "), rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-newsletter-form-1--rest.png`: Newsletter / signup form 1 ("Get product updates and "), rest
- `screenshots/c-button-2--rest.png`: Button 2 ("Start your project"), rest
- `screenshots/c-button-2--focus.png`: Button 2 ("Start your project"), focus
- `screenshots/c-button-2--active.png`: Button 2 ("Start your project"), active
- `screenshots/c-link-2--rest.png`: Text link 2 ("Read the story →"), rest
- `screenshots/c-link-2--focus.png`: Text link 2 ("Read the story →"), focus
- `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("114.1K"), rest
- `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("114.1K"), focus
- `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2 ("Toggle theme"), rest
- `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by menu-button "Toggle theme"
- `screenshots/c-tabs-2--rest.png`: Tabs 2, rest
- `screenshots/c-tabs-2--selected.png`: Tabs 2, another tab selected
- `screenshots/c-card-2--rest.png`: Card 2 ("Postgres DatabaseEvery p"), rest
- `screenshots/c-feature-item-2--rest.png`: Feature item (icon + title + text) 2 ("StorageStore, organize, "), rest
- `screenshots/c-list-2--rest.png`: Styled list 2, rest
- `screenshots/c-image-2--rest.png`: Image / figure 2, rest
- `screenshots/c-button-3--rest.png`: Button 3 ("Start your project"), rest
- `screenshots/c-button-3--focus.png`: Button 3 ("Start your project"), focus
- `screenshots/c-button-3--active.png`: Button 3 ("Start your project"), active
- `screenshots/c-link-3--rest.png`: Text link 3 ("View all examples"), rest
- `screenshots/c-link-3--focus.png`: Text link 3 ("View all examples"), focus
- `screenshots/c-card-3--rest.png`: Card 3 ("Postgres DatabaseEvery p"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#000000` | Page background |
| surface | `#0c0f24` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#002533` | Secondary surface |
| foreground | `#ffffff` | Primary text |
| muted-foreground | `#a0a0a0` | Secondary text, captions |
| primary | `#15593b` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#8e4ec6` | Secondary accent (pink) |
| border | `#3fcf8e` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#000000`, `#0c0f24`, `#002533`, `#a9f1ca`, `#8e4ec6`, `#be93e4`, `#0070f3`, `#3fcf8e`.

Gradients in use: `linear-gradient(oklch(0.1 0 337.5 / 0.0812725) 0px, oklab(0.1 0 0 / 0.0406362) 100%)`; `linear-gradient(rgb(253, 73, 168) 0%, rgb(253, 41, 128) 10%, rgb(252, 26, 88) 20%, rgb(250, 31, 65) 30%, rgb(250, 39, 51) 40%, rgb(251, 61, 38) 50%, rgb(252, 84, 31) 60%, rgb(254, 106, 30) 70%, rgb(254, 119, 29) 80%, rgb(255, 134, 27) 90%, rgb(255, 143, 27) 100%)`; `linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 50%, oklch(1 0 337.5) 85%)`.

The accent `#15593b` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Manrope** for h1, h2, h3: self-hosted webfont; verify availability and permission; **Manrope** is the suggested stand-in.
- **Inter** for body, label, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Manrope | 46px | 500 | 46px | normal |
| headline-lg | Manrope | 16px | 600 | 24px | normal |
| headline-md | Manrope | 34px | 600 | 37.7778px | normal |
| body-md | Inter | 15px | 450 | 22.5px | normal |
| label-md | Inter | 12px | 500 | 1.33 | normal |
| button | Inter | 14px | 450 | 20px | normal |

Type scale in use: 12px, 13px, 14px, 15px, 16px, 34px, 46px. Base body size 15px.

The hero heading (h1) renders at 46px / 500, start aligned, up to 536px wide. Sample: "Build in a weekendScale to millions".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 8px. Scale in use: 8, 16, 24, 32, 40, 96 (px).
- Flex and grid gaps: 8, 16, 24, 32 px.
- Content max width: 1280px, centred.
- Breakpoints: 640px, 768px, 1024px, 1280px, 1536px.
- Header: 65px tall, relative, backdrop blur, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid oklch(0.1 0 337.5 / 0.0812725); 7 nav links at 16px / 450 (Pricing · Docs · Blog · 114.1K · Sign in · Start your project).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`
- shadow-2: `oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px`
- shadow-3: `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`
- shadow-4: `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`

## Shapes

- Buttons: 0px
- Inputs: 0px
- Cards and panels: 21px
- Images and media: 0px
- Radius scale: none 0px, xl 21px, lg 11px, full 9999px, md 5px

## Components

### Button, secondary

Background transparent, text `#000000`, border 1px solid transparent, radius 9px, height 64px, padding 8px 10px, 14px / 500, shadow `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`. Sample label: "Product".

### Button, ghost

Background transparent, text `#000000`, border none, radius 8px, height 26px, padding 4px 10px, 12px / 500, shadow `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`. Sample label: "Sign in".

### Card

Background `transparent`, border 1px solid transparent, radius 21px, padding 24px, no shadow. Typical size about 288×215px.

### Link

Colour `#000000`, underline, weight 450.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (25 of 87 in the checklist, 44 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 19 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | secondary-with-icon lg, primary sm, primary, secondary, filled-with-icon lg, secondary, secondary sm, secondary-icon-right sm | focus, active | "AI ChatbotAn open-source AI ch" |
| Text link | plain, underlined, underlined | focus | "Postgres DatabaseEvery project" |
| Text input | outlined-icon-left | focus, disabled, filled, invalid, placeholder |  |
| Navigation link | plain, plain | focus | "Pricing" |
| Menu / dropdown trigger | outline, ghost | hover, open | "Product" |
| Tabs | underline, pill | selected | "Table EditorSQL EditorRLS Poli" |
| Footer | default | rest only | "FooterWe protect your data.Mor" |
| Footer link | plain | rest only | "Pricing" |
| Badge / pill / tag | subtle-pill | rest only | "$supabasefunctions deploy" |
| Counter / notification dot | inverse-filled | rest only |  |
| Card | outlined-interactive-with-media, filled-interactive-media-top, filled-interactive-media-top, elevated-interactive | rest only | "@sdustericLoving #Supabase MCP" |
| Feature item (icon + title + text) | flat-interactive, filled-interactive-with-media, filled-interactive-with-media | rest only | "Postgres DatabaseEvery project" |
| Styled list | default, default | rest only | "100% portable Built-in Auth wi" |
| Avatar | 28px-round | rest only |  |
| Code block / inline code | block | rest only | "import { createClient } from '" |
| Image / figure | aspect-1, aspect-1, aspect-0.66 | rest only |  |
| Video / media embed | default | rest only |  |
| Icon | outline-16px | rest only |  |
| Newsletter / signup form | default | rest only | "Get product updates and news f" |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Icon button, Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar stack, Divider, Keyboard key, Blockquote, Carousel / slider, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Search results / listing row.

## Dark Mode

Both themes exist; the default render is dark and the dark theme was reached via prefers-color-scheme. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#000000` | `#000000` |
| surface | `#0c0f24` | `#0c0f24` |
| surface-2 | `#002533` | `#002533` |
| foreground | `#ffffff` | `#ffffff` |
| primary | `#15593b` | `#3ecf8e` |
| on-primary | `#ffffff` | `#111111` |
| secondary | `#8e4ec6` | `#8e4ec6` |
| border | `#3fcf8e` | `#3ecf8e` |

Dark-theme shadows: `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`; `oklab(0.999994 0.0000455678 0.0000200868 / 0.3) 0px 0px 0px 1px`; `rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0px -1px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset`; `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1280px | 176px | 16px | 46px, 2 lines, start | 65px, 6 links, 2 CTA | text only | 2→2 col; 2→1 col; 6→6 col | content-width |
| laptop 1024px | 928px | 48px | 16px | 46px, 2 lines, start | 65px, 6 links, 2 CTA | text only | 2→2 col; 2→1 col; 6→6 col | content-width |
| tablet 768px | 720px | 24px | 16px | 46px, 2 lines, start | 65px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 342px | 24px | 16px | 34px, 2 lines, start | 65px, 0 links | text only | 2→2 col; 2→1 col; 2→1 col | 1 full-width |

- H1 goes 46px → 34px (74%), 2 → 2 lines.
- No navigation links or hamburger detected at 390px; mobile navigation behavior is unverified.
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 24px.
- 1 buttons stretch full-width on phones.

## Interaction & Motion

3736 elements carry transitions; typical 0.4s with ease, mostly on opacity, background-color, border-color. 4 running keyframe animations (pulse 0.6s infinite; marquee-reverse 30s infinite; marquee 35s infinite).

- Hover on button-primary ("Start your project"): no visible change; cursor pointer; transition background-color, border-color, color, scale | 0.2s | cubic-bezier(0.22, 1, 0.36, 1).
- Hover on button-secondary ("Product"): text oklch(0.1 0 337.5) → oklch(0.525 0.12 157.5), icon/inner colour → oklch(0.525 0.12 157.5); cursor pointer; transition background-color, border-color, color, scale | 0.2s | cubic-bezier(0.22, 1, 0.36, 1).
- Hover on nav-link ("Pricing"): no visible change; cursor pointer.
- Focus on button-primary: outline 1px none rgb(16, 16, 16), offset 1px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 6px gap, shifted right; oklch(1 0 337.5), radius 16px, padding 0px 0px, shadow yes; 19 items, 40px tall, 14px, padding 0px 0px, with icons, with descriptions; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 5 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 8px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#15593b` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 15px in Inter and headings in Manrope.
- Do match corner radii per element class (buttons 0px, cards 21px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.