---
version: alpha
name: Public
description: A deep navy-charcoal investing platform where a featherlight editorial serif sets cinematic display headlines, a clean custom grotesque handles the data, and a saturated cobalt blue anchors every call to action — serious money dressed for the evening, not the trading floor.

colors:
  # Surface / canvas
  background: "#1b222c"             # deep navy-charcoal page canvas (dark primary)
  surface: "#242527"                # lifted dark panel — slightly warmer near-charcoal
  surface-light: "#f1f4f7"          # cool off-white — app/product sections and light cards
  surface-muted: "#e9edf3"          # slightly deeper light surface, dividers on light side

  # Ink / text
  ink: "#ffffff"                    # primary white text on dark canvas
  ink-soft: "#a8b4bf"               # muted blue-gray secondary text on dark
  ink-dark: "#1b222c"               # dark ink for use on light surfaces
  ink-muted-dark: "#516880"         # muted slate-blue body copy on light

  # Brand accent — the Public cobalt
  primary: "#00379a"                # --blue-brand cobalt — buttons, links, focus states
  primary-hover: "#002f87"          # slightly deepened cobalt for hover (approximated)
  on-primary: "#ffffff"             # white text on cobalt fills

  # Glow accent (the signature product UI element)
  glow-pink: "#ffc4fa"              # was rgba(255,196,250,0.25) — pink glow shadow tint
  glow-cyan: "#38cdff"              # was rgba(56,205,255,0.25) — cyan glow shadow tint

  # Borders
  border: "#ffffff"                 # was rgba(255,255,255,0.15) — subtle white border on dark panels
  border-light: "#dce2ea"           # hairline dividers on light surfaces
  border-focus: "#00379a"           # cobalt focus ring

  # Semantic
  success: "#1a9b5a"                # green for positive portfolio movement /* estimated */
  error: "#d43f3f"                  # red for negative portfolio movement /* estimated */

  # Shadow tint
  shadow-soft: "#000000"            # was rgba(0,0,0,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Denton, 'Times New Roman', Georgia, serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Denton, 'Times New Roman', Georgia, serif"
    fontSize: 52px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: -0.5px
  heading:
    fontFamily: "Denton, 'Times New Roman', Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.12
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.31
    letterSpacing: 0px
  body-large:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  body-emphasis:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.37
    letterSpacing: 0px
  nav-link:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  label:
    fontFamily: "Invest Pro, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 40px
  3xl: 60px
  4xl: 112px

rounded:
  none: 0px
  sm: 4px
  md: 6px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 40px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 40px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-glow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 40px
    border: 1px solid {colors.border}
  button-glow-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-dark:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 14px
  button-dark-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-dark}"
    rounded: "{rounded.lg}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: 1px solid {colors.border-focus}

  badge:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0px 4px
  badge-outline:
    backgroundColor: "{colors.surface-light}"  # was colors.background (#1b222c, dark canvas) — outline badge lives on light surfaces; ink-dark (#1b222c) text on #f1f4f7 = 14.50:1
    textColor: "{colors.ink-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 0px 4px
    border: 1px solid {colors.ink-dark}

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px
---

# Public Design System

## Overview

Public's marketing site carries the particular gravity of a platform that takes private investing seriously — but without the stiff formality of institutional finance. The canvas is a deep navy-charcoal (`{colors.background}`), and against that darkness, the brand deploys three layers of sophistication: an ultra-light display serif for editorial gravity, a custom grotesque for numbers and UI, and a saturated cobalt blue (`{colors.primary}`) that appears only where precision matters. The result reads like a well-designed financial magazine brought to life on screen — authoritative without being cold, premium without being exclusionary.

The defining typographic decision is Denton at weight 300. Where other fintech brands reach for bold sans-serifs to signal confidence, Public chooses a featherlight editorial serif at large sizes, letting the letterform geometry carry elegance rather than weight. An 80px Denton Light headline at line-height 1.0 achieves a density that feels typeset rather than composed — the kind of print-culture confidence usually reserved for luxury goods or arts publishing, applied to investment products. Invest Pro, the custom sans, handles everything functional: UI labels, navigation, secondary headings, and button copy. Inter enters at the smallest sizes — captions, disclosures, tiny metadata. Each font occupies its own altitude without overlap.

The signature visual element is the glow button: a semi-transparent pill with a hairline white border and a bicolor shadow that bleeds pink (`{colors.glow-pink}`) toward the upper-right and cyan (`{colors.glow-cyan}`) toward the lower-left. It is not a standard CSS box-shadow; it is a designed atmospheric effect that makes the CTA read as if lit from behind. No other element in the system uses this treatment — the glow is reserved as the brand's primary call to action and a visual metaphor for the premium, slightly luminous nature of the product. The cobalt `{colors.primary}` fills secondary buttons and standard CTAs where the glow would be too theatrical.

**Key Characteristics:**
- Deep navy-charcoal canvas (`{colors.background}`) as the dominant marketing surface — dark-first with a light product mode (`{colors.surface-light}`)
- Denton Light serif (`{typography.display-hero}`) at weight 300 for all major headlines — editorial gravity without heaviness
- Invest Pro custom grotesque (`{typography.button-ui}`) for UI, labels, and navigation; Inter for micro-text
- Signature glow button: semi-transparent pill, hairline white border, dual pink-and-cyan shadow bloom
- Saturated cobalt (`{colors.primary}`, `--blue-brand`) as the single brand accent — applied to standard CTAs, links, and focus states
- All interactive elements are fully rounded pills (`{rounded.pill}`, 100px / 999px) — no hard-cornered buttons
- Muted blue-gray secondary text (`{colors.ink-soft}`) creates a cool, low-temperature secondary register on dark
- Cool off-white light surfaces (`{colors.surface-light}`) for app-style product sections nested within the dark marketing shell
- 8px base spacing scale that stretches dramatically at macro level (112px section gaps) for editorial pacing
- Subtle white-on-dark borders (`{colors.border}`) via near-transparent treatment — hairline edges, not dividing lines

## Colors

### Surface & Canvas
- **Deep Navy-Charcoal** (`{colors.background}`): The primary page canvas. The entire marketing hero and major sections sit on this tone — dark but not pure black; it has warmth and depth.
- **Lifted Dark Panel** (`{colors.surface}`): A marginally warmer near-charcoal for raised cards, modals, and interactive containers on the dark canvas.
- **Cool Off-White** (`{colors.surface-light}`): The light side of the dual-mode layout. Product feature sections, testimonials, and app UI previews sit here — it reads like the inside of the product itself.
- **Muted Light Surface** (`{colors.surface-muted}`): Slightly deeper light fills for section dividers and nested cards on the light side.

### Brand Accent
- **Cobalt Blue** (`{colors.primary}`): The `--blue-brand` CSS variable. Applied to primary CTAs, in-line links, and keyboard focus rings. Saturated and precise — it points rather than decorates.
- **Cobalt Hover** (`{colors.primary-hover}`): A slightly deeper cobalt for pressed/hover states on filled blue buttons.
- **On-Primary** (`{colors.on-primary}`): White text and icons on cobalt fills — the only legible pairing.

### Glow Accents
- **Pink Glow** (`{colors.glow-pink}`): The upper-right shadow bloom on the signature glow button. Opaque stand-in for the original `rgba(255,196,250,0.25)` — used exclusively in the glow button's box-shadow.
- **Cyan Glow** (`{colors.glow-cyan}`): The lower-left shadow bloom pairing the pink. The pink-cyan glow pair is a proprietary visual signature; do not introduce it on other elements.

### Ink / Text
- **White** (`{colors.ink}`): Primary text and headings on the dark canvas.
- **Blue-Gray Muted** (`{colors.ink-soft}`): Secondary copy, captions, and navigation on dark — a distinctly cool, desaturated tone.
- **Dark Ink** (`{colors.ink-dark}`): Headings and body text on light surfaces.
- **Slate-Blue Body** (`{colors.ink-muted-dark}`): Supporting copy on light product sections.

### Borders & Shadows
- **White Hairline** (`{colors.border}`): Thin borders on dark surfaces — near-transparent in practice.
- **Light Divider** (`{colors.border-light}`): Hairline dividers on the cool off-white side.
- **Cobalt Focus** (`{colors.border-focus}`): Keyboard focus ring color matching the brand accent.
- **Shadow** (`{colors.shadow-soft}`): Ambient shadow tint for elevated cards; opaque stand-in for the original `rgba(0,0,0,0.08)`.

## Typography

### Font Family
- **Display**: `Denton` (self-hosted, Light / weight 300), with fallbacks `'Times New Roman', Georgia, serif`. Carries every display headline. A transitional editorial serif with generous proportions and elegant stroke contrast.
- **UI / Functional**: `Invest Pro` (self-hosted, Regular 400 + Medium 500), with fallbacks `Helvetica, Arial, sans-serif`. Carries navigation, headings-sub, labels, buttons, and most body copy.
- **Micro / Utility**: `Inter` (self-hosted, Regular 400), with fallbacks `Helvetica, Arial, sans-serif`. Reserved for smallest text: captions, disclosures, legal copy.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 80px / Denton 300 — marquee headline, hero section |
| `display` | 52px / Denton 300 — major section headlines |
| `heading` | 48px / Denton 300 — feature section headings |
| `heading-sub` | 32px / Invest Pro 400 — sub-section sans headings |
| `body-large` | 24px / Invest Pro 400 — lead paragraphs, feature callouts |
| `body` | 16px / Inter 400 — standard body and inputs |
| `body-emphasis` | 16px / Invest Pro 500 — medium-weight UI copy and links |
| `nav-link` | 16px / Invest Pro 400 — navigation labels |
| `button-ui` | 16px / Invest Pro 500 — button labels |
| `label` | 14px / Invest Pro 400 — form labels, data labels |
| `caption` | 12px / Inter 400 — metadata, legal, disclosures |

### Principles
- **Serif for authority, grotesque for function**: Denton makes editorial claims; Invest Pro and Inter handle the product. Never mix their roles.
- **Weight as restraint**: Denton runs at 300 — lighter than most display fonts. The serif's geometry does the heavy lifting, not the weight.
- **No tracking drama**: unlike many fintech brands, Public uses minimal or null letter-spacing at all sizes. The fonts speak through their inherent proportions.
- **Three-tier font system**: the three-typeface hierarchy maps precisely to three altitude bands — display/hero, functional/UI, legal/micro.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The scale stretches dramatically at macro level — `{spacing.4xl}` (112px) separates major page sections on the dark canvas, creating the editorial pacing that makes the Denton headlines land with impact. Micro spacing (4–16px) handles component internals tightly.

### Grid & Container
- Max content width: ~1280px, centered
- Common pattern: dark hero with Denton display headline centered over the canvas, single glow-button CTA, followed by alternating dark/light feature sections
- Light product sections (`{colors.surface-light}`) use a tighter grid for app UI previews and stat cards
- Breakpoints span from 0px to 1440px with major transitions at 768px (mobile/tablet) and 1024px (tablet/desktop)

### Whitespace Philosophy
- **Dark air is design**: the navy canvas makes generous whitespace feel intentional and premium rather than empty
- **One glow, one cobalt**: each primary section has a single high-emphasis CTA; nothing competes with it
- **Editorial pacing on macro**: major sections breathe at `{spacing.4xl}` — more like a print spread than a SaaS page

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Pure dark canvas (`{colors.background}`), no shadow | Marketing page canvas and most content sections |
| Panel (Level 1) | Lifted dark fill (`{colors.surface}`), hairline border | Cards, modals, and interactive containers on dark |
| Card Light (Level 2) | Cool off-white fill (`{colors.surface-light}`) | Product feature cards on the light side |
| Glow (Special) | Transparent fill + pink-cyan dual shadow bloom | Signature hero CTA only — the luminous pill |
| Elevated (Level 3) | `rgba(0,0,0,0.08)` soft ambient below cards | Floating content blocks on light sections |
| Focus Ring | 1px solid cobalt (`{colors.border-focus}`) | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Public is largely flat on its dark canvas — depth is conveyed through tonal fills (`{colors.surface}` vs `{colors.background}`) and the bordered-but-transparent card treatment. On the light side, a gentle ambient shadow (`{colors.shadow-soft}`) floats product cards. The one true elevation statement is the glow button: its bicolor shadow (`{colors.glow-pink}` / `{colors.glow-cyan}`) is not about depth, it is about luminosity — a designed atmospheric effect that signals the primary action without using a fill color.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard-edge decorative elements, image masks |
| `sm` | 4px | Small badges and menu chips |
| `md` | 6px | Inputs, modals, and nested card elements |
| `lg` | 16px | Content cards, image containers, larger panels |
| `pill` | 9999px | All interactive buttons and primary UI pills |

The system is binary in practice: containers are `{rounded.md}` or `{rounded.lg}`, and every interactive element is a fully rounded `{rounded.pill}`. The 100px / 999px pill is the dominant shape of the UI, from tiny nav labels to hero CTAs.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Cobalt fill (`{colors.primary}`), white text (`{colors.on-primary}`), full pill (`{rounded.pill}`), `12px 40px` padding. Standard high-emphasis CTA on dark and light surfaces.
- **`button-primary-hover`** — Deepened cobalt (`{colors.primary-hover}`) on hover.
- **`button-ghost`** — Transparent fill on dark canvas, white text, hairline white border (`{colors.border}`), full pill. Secondary action alongside primary.
- **`button-glow`** — The hero CTA: semi-transparent (near-transparent dark fill), white text, hairline white border, bicolor pink-cyan box-shadow bloom. Reserved for the primary hero call to action. Hover shifts fill slightly.
- **`button-dark`** — Pure dark fill (`{colors.ink-dark}`), white text, full pill. Used for small in-context actions ("Got it", dismissals).

### Cards
- **`card`** — Lifted dark fill (`{colors.surface}`), white text, `{rounded.lg}` (16px). Used for feature cards, testimonial panels, and module containers on the dark canvas.
- **`card-light`** — Cool off-white fill (`{colors.surface-light}`), dark ink text, same `{rounded.lg}`. Product section feature cards and app previews.

### Inputs
- **`input`** — Dark fill (`{colors.surface}`), white text, `{rounded.md}` (6px), hairline white border. **`input-focus`** keeps the dark fill and replaces the border with a cobalt (`{colors.border-focus}`) focus ring.

### Badges
- **`badge`** — Dark fill, white text, `{rounded.sm}`, minimal padding `0px 4px`. Menu item chips and status labels.
- **`badge-outline`** — Transparent fill, dark text, dark border, same shape. Outlined variant for labels on light surfaces.

### Navigation
- **`nav-bar`** — Dark canvas fill (`{colors.background}`), white Invest Pro 400 links, `16px 24px` padding. The navigation bar sits invisibly against the hero with a 0.24s max-height transition for the mobile drawer (`cubic-bezier(0.215, 0.61, 0.355, 1)`).

### Links
- **`link`** — White on dark canvas; `link-hover` shifts to cobalt (`{colors.primary}`) with underline decoration.

## Do's and Don'ts

### Do
- Use the dark navy canvas (`{colors.background}`) as the default marketing shell — Public's identity is dark-first
- Reserve the glow button for the single primary hero CTA — its pink-cyan shadow bloom is a signature, not a pattern
- Set all major headlines in Denton 300 (`{typography.display-hero}`) — the ultra-light serif weight is deliberate, not an error
- Use cobalt (`{colors.primary}`) for standard CTAs, inline links, and focus states on both dark and light surfaces
- Make every interactive element a pill (`{rounded.pill}`) — hard-cornered buttons do not exist in this system
- Transition between dark and light sections fluidly — the `{colors.surface-light}` product sections sit inside the dark marketing shell
- Keep the glow's bicolor shadow (pink upper-right, cyan lower-left) paired — neither color alone reproduces the effect
- Use Invest Pro 500 (`{typography.button-ui}`) for all button labels and medium-weight UI copy

### Don't
- Don't use the glow shadow on more than one element per view — it loses its premium signal immediately when multiplied
- Don't substitute Inter or a fallback for Denton in hero headlines — the serif brand voice collapses to generic sans if the font fails silently
- Don't introduce warm colors (orange, yellow, warm greens) — the palette is deliberately cool: navy, cobalt, blue-gray, and the cool pink-cyan glow
- Don't use pill buttons with hard-corner (0px radius) content inside — the pill is the shape of the entire interactive surface
- Don't reach for weight to create hierarchy — Denton at 300 plus cobalt plus the glow is the hierarchy; don't add 700-weight type
- Don't apply the light mode (`{colors.surface-light}`) as the primary canvas — it is a nested product-section mode, not the brand default
- Don't create a second accent color alongside cobalt (`{colors.primary}`) — the system is intentionally one-accent on its functional layer

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; Denton hero scales toward 36–40px; glow CTA goes full-width pill; nav collapses to dark drawer (0.24s cubic-bezier open) |
| Mobile Wide | 640–767px | Single column with more breathing room; dark sections continue full-bleed |
| Tablet Small | 768–899px | Two-column feature grids begin; heading scale steps down from 80 → 48px |
| Tablet | 900–1023px | Full two-column layouts; light product sections expand |
| Desktop | 1024–1279px | Full layout; editorial spacing at `{spacing.4xl}`; centered Denton hero over dark canvas |
| Large Desktop | ≥1280px | Max ~1280px container centered; generous 112px section gap remains |

### Touch Targets
- Pill buttons with `12px 40px` padding produce tall, thumb-friendly targets on mobile
- Nav menu items carry enough vertical padding for comfortable touch interaction
- The glow CTA scales to full-width on mobile, maximizing the tap area for the primary action

### Collapsing Strategy
- **Navigation**: horizontal dark nav → mobile drawer with max-height animation (0.24s, `cubic-bezier(0.215, 0.61, 0.355, 1)`)
- **Hero**: Denton display headline scales proportionally; the glow CTA goes from inline pill to full-width pill
- **Feature sections**: dark/light alternating two-column grids collapse to single-column stacks
- **Spacing**: macro section gaps compress from `{spacing.4xl}` (112px) toward `{spacing.3xl}` (60px)

### Image Behavior
- Product app screenshots are inset inside `{rounded.lg}` cards on light sections and reflow as grid children on narrow viewports
- Dark canvas sections are typographic — images appear as supporting secondary content, not as hero backgrounds

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Deep Navy-Charcoal (`{colors.background}`)
- Text: White (`{colors.ink}`)
- Brand accent / CTA: Cobalt (`{colors.primary}`)
- Secondary text: Blue-gray muted (`{colors.ink-soft}`)
- Border (dark): Hairline white (`{colors.border}`)
- Light surface: Cool off-white (`{colors.surface-light}`)

### Example Component Prompts

- "Create a hero on deep navy-charcoal (`{colors.background}`) with a centered 80px Denton 300 white headline (`{colors.ink}`), line-height 1.0, and a single semi-transparent pill CTA below it — hairline white border (`{colors.border}`), white text (`{colors.ink}`), `{rounded.pill}` radius, `12px 40px` padding, and a bicolor box-shadow: `8px -8px 20px 0px rgba(255,196,250,0.25), -8px 8px 30px 0px rgba(56,205,255,0.25)`"
- "Build the primary cobalt CTA button: cobalt fill (`{colors.primary}`), white text (`{colors.on-primary}`) in Invest Pro 500 (`{typography.button-ui}`), fully rounded pill (`{rounded.pill}`), `12px 40px` padding; hover deepens to `{colors.primary-hover}`"
- "Design a dark feature card: lifted dark fill (`{colors.surface}`), white text (`{colors.ink}`), `{rounded.lg}` (16px) radius, `24px` padding, hairline white border (`{colors.border}`)"
- "Create the mobile navigation drawer: dark canvas fill (`{colors.background}`), white Invest Pro 400 nav links (`{typography.nav-link}`), animates open with max-height over 0.24s using `cubic-bezier(0.215, 0.61, 0.355, 1)`"
- "Build a light product section card: cool off-white fill (`{colors.surface-light}`), dark ink text (`{colors.ink-dark}`), `{rounded.lg}` (16px) radius, `24px` padding, soft ambient shadow `0px 4px 24px 0px rgba(0,0,0,0.06)`"
- "Render a small badge: dark fill (`{colors.ink-dark}`), white text in `{typography.caption}`, `{rounded.sm}` (4px) radius, `0px 4px` padding — for menu item labels and status chips"

### Iteration Guide

1. Start on deep navy-charcoal (`{colors.background}`). If you reached for a pure black (#000000) or a light background, correct it — Public's dark tone is specifically naval, not void.
2. The hero CTA is the glow button — semi-transparent pill with pink-cyan shadow bloom. If you made it cobalt-filled, that is the standard CTA, not the hero signature.
3. Cobalt (`{colors.primary}`) is one color. If you added a second accent hue, remove it.
4. Headlines must be Denton at weight 300 (`{typography.display-hero}`). If the headline appears bold or is in a sans-serif, the brand voice is lost.
5. Every button is a pill (`{rounded.pill}`). If a button has a corner radius under 50px or no radius, fix it.
6. Depth on dark surfaces comes from tonal fills (`{colors.surface}` over `{colors.background}`) and hairline borders — not from heavy shadows.
7. When transitioning to a product / light section, switch to `{colors.surface-light}` canvas and `{colors.ink-dark}` text — it reads as "inside the product," not a separate theme.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Public. Brand names and trademarks belong to their respective owners.