---
version: alpha
name: Cosmos
description: A warm off-white mood board where Cosmos Oracle — the brand's proprietary grotesque — floats large and light over a canvas of drifting imagery, a near-black pill is the only CTA, and the entire chromatic vocabulary reduces to a near-neutral warm gray scale plus a single blue-indigo link accent.

colors:
  # Surface / canvas
  background: "#ffffff"           # pure white page base
  surface: "#f2f1f0"              # elevation surface, card tint (gray-100)
  surface-paper: "#f7f5f3"        # warm off-white paper tone used in canvas sections
  surface-hero: "#f9f7f3"         # hero section warm canvas (rgb 249,247,243)

  # Ink / text
  ink: "#0d0d0d"                  # near-black primary text (gray-1000)
  ink-secondary: "#6e6a69"        # warm medium gray supporting copy (warm-gray-light-600)
  ink-tertiary: "#9a9796"         # lighter warm gray for metadata, labels
  ink-muted: "#d0cdcd"            # disabled, placeholder, faintest text (gray-300)
  on-primary: "#ffffff"           # text on the near-black primary button

  # Brand accent
  primary: "#0d0d0d"              # primary button fill — near-black pill
  primary-hover: "#323131"        # hover state, slightly lifted near-black (gray-900)
  accent: "#2965f6"               # blue-indigo link and badge color (blue-300 / --color-text-link)
  accent-hover: "#1a4fd6"         # estimated link hover, deepened blue /* estimated */

  # Semantic
  success: "#00b158"              # green-400 — success states
  error: "#bd3c1f"                # orange-600 / red-600 — critical, error states
  error-text: "#bd3c1f"           # error text color matches error fill

  # Borders (semi-transparent in source, flattened to opaque)
  border: "#e0dfdf"               # was oklch(0.1591/12% transparent) — Google format requires hex
  border-strong: "#0d0d0d"        # full near-black border for active/focused elements

  # Shadow tints
  shadow-soft: "#000000"          # was rgba(0,0,0,0.15) — Google format requires hex
  shadow-medium: "#000000"        # was rgba(0,0,0,0.10) — Google format requires hex

typography:
  display-hero:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 74px
    fontWeight: 350
    lineHeight: 1.0
    letterSpacing: -3.7px
  display:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 66px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: -2.64px
  heading-section:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1.44px
  heading-sub:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.78px
  body-large:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.32px
  body:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.467
    letterSpacing: -0.3px
  body-small:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.28px
  nav-link:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.3px
  caption:
    fontFamily: "cosmosOracle, DM Sans, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.167
    letterSpacing: -0.24px
  mono:
    fontFamily: "basisMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  2xl: 16px
  3xl: 24px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 24px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 16px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
  card-media:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 24px 32px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 6px 12px
  nav-link-hover:
    textColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  image-tile:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 0px
---

# Cosmos Design System

## Overview

Cosmos is a visual discovery and moodboarding tool — and its interface reads like a well-lit gallery wall. The canvas is warm near-white (`{colors.surface-hero}`), somewhere between paper and plaster, and the primary artwork is imagery: photographs, artworks, and references suspended in a soft float animation as if pinned to the board by the user's own hand. Typography is handled almost entirely by Cosmos Oracle, the brand's custom grotesque — a smooth, slightly book-weight face with no sharp grotesque edges. At 74px on the hero, set at weight 350 with an aggressive -3.7px tracking, it reads as generous and unhurried rather than bold or shouting.

The chromatic restraint is radical. Beyond the warm gray neutrals, Cosmos deploys exactly one chromatic accent: a blue-indigo (`{colors.accent}`) that appears on links and badges, nowhere else. The primary CTA — "Sign up" — is a near-black pill (`{colors.primary}`) on the warm canvas, the highest-contrast mark on the page and therefore impossible to miss without requiring any brand color. The "Get the app" companion is a ghost pill with a hairline `{colors.border}` border. Everything defers to the imagery; the interface is scaffolding, not a statement.

The depth system leans on the warm paper gradient. Cards and sections use `{colors.surface-paper}` and `{colors.surface-hero}` as gentle tonal shifts rather than shadows or borders. Image tiles float freely against the canvas, rounded with `{rounded.xl}`, and a subtle bottom-of-page fade (`linear-gradient` to paper) dissolves them back into the surface — no hard edge, no chrome. The nav is minimal: a sticky 54px bar with the wordmark, two text links, a search pill, and the Login / Sign up pair. It floats above the imagery rather than anchoring it.

**Key Characteristics:**
- Warm off-white canvas (`{colors.surface-hero}`, `{colors.surface-paper}`) — not pure white, not cream, a warm ambient neutral
- Cosmos Oracle (`{typography.display-hero}`) — proprietary grotesque, book weight (350) at hero scale with -3.7px tracking
- Display type at weight 350–400, never bold: confidence through lightness
- Single chromatic accent: blue-indigo (`{colors.accent}`) for links only — everything else is grayscale
- Primary CTA is a near-black pill (`{colors.primary}`) — maximum contrast without using a brand color
- Image tiles float freely at `{rounded.xl}` — no card chrome, no shadows
- Soft bottom-of-section gradient fades imagery back to paper; no hard section cuts
- A warm gray text ladder: `{colors.ink}` → `{colors.ink-secondary}` → `{colors.ink-tertiary}` replaces contrast via hue
- `basisMono` (Basis Grotesque Pro Mono) present as a secondary monospace voice
- Pill geometry throughout: nav search, CTA buttons, input fields — all `{rounded.pill}`
- Section rhythm is generous (`{spacing.5xl}`–`{spacing.6xl}`); content sections breathe wide

## Colors

### Surface & Canvas
- **Pure White** (`{colors.background}`): The base page canvas — content sections and card fills default here.
- **Elevation Gray** (`{colors.surface}`): Subtle raised surfaces, secondary card backgrounds, hover fills.
- **Paper Warm** (`{colors.surface-paper}`): The slightly warm off-white used across canvas sections and the hero backdrop. `#f7f5f3` — warmer than gray, cooler than cream.
- **Hero Canvas** (`{colors.surface-hero}`): The section canvas in the hero area (`#f9f7f3`); the imagery floats against this.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Primary text, heading copy, the darkest readable tone. Not `#000000` — sits at `#0d0d0d` for a softer ink quality.
- **Warm Medium Gray** (`{colors.ink-secondary}`): Supporting copy, nav links at rest, secondary labels. A warm gray that reads alongside the paper tones.
- **Light Warm Gray** (`{colors.ink-tertiary}`): Metadata, timestamps, captions, muted UI labels.
- **Ghost Gray** (`{colors.ink-muted}`): Disabled states, placeholder text — barely visible against the white canvas.

### Brand Accent
- **Blue-Indigo** (`{colors.accent}`): The single chromatic accent. Applied to links and badges. Vivid enough to read clearly against the warm neutrals without competing with imagery.

### Semantic
- **Success Green** (`{colors.success}`): Confirmation states, positive feedback.
- **Critical Red-Orange** (`{colors.error}`): Error states, destructive actions.

### Borders & Shadows
- **Hairline Border** (`{colors.border}`): The primary border at ~12% black opacity, flattened to opaque for the spec. Used on secondary buttons, input outlines, image tile frames.
- **Active Border** (`{colors.border-strong}`): Full near-black used on focused inputs and active selections.

## Typography

### Font Family
- **Primary**: `cosmosOracle` — Cosmos's proprietary grotesque. Available weights: 300 (book), 400 (regular), 500 (medium). Neutral but with an organic warmth distinct from Swiss neo-grotesques. Fallback: `DM Sans, ui-sans-serif, system-ui`.
- **Monospace**: `basisMono` — Basis Grotesque Pro Mono by Colophon Foundry. Used for code, technical labels, and any typographic moments that need a machine-voice contrast. Fallback: `ui-monospace, Menlo, Consolas`.
- **Tracking philosophy**: Aggressive negative tracking on display sizes (-3.7px at 74px, -2.64px at 66px), tapering toward -0.3px on body. The `tracking-[-3.7px]` class is declared explicitly in the HTML — it's a design decision, not an afterthought.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 74px / 350 / -3.7px — the hero headline. Book weight, extremely tight tracking. |
| `display` | 66px / 400 / -2.64px — large section headlines |
| `heading-section` | 36px / 400 / -1.44px — section-level subheadings |
| `heading-sub` | 26px / 400 / -0.78px — tertiary headings, feature labels |
| `body-large` | 16px / 500 / -0.32px — lead paragraphs, prominent callouts |
| `body` | 15px / 400 / -0.3px — standard body copy |
| `body-small` | 14px / 400 / -0.28px — UI labels, navigation items |
| `button-ui` | 15px / 500 / -0.3px — all button labels |
| `caption` | 12px / 400 / -0.24px — timestamps, metadata, tile labels |
| `mono` | 13px / 400 / 0px — code, technical content, `basisMono` |

### Principles
- **Book weight is confidence**: The hero runs at weight 350 — lighter than most display type. The message is effortless, not forceful.
- **Tracking does the heavy lifting**: Negative tracking at display sizes compresses space to feel intentional and composed, never airy.
- **Single family with a monospace counterpart**: Oracle handles all visible UI; basisMono appears as a secondary technical voice only.
- **No uppercase tricks**: Cosmos uses sentence case throughout. Caps would read stiff against the imagery-forward aesthetic.

## Layout

### Spacing System
The full spacing scale is in the `spacing:` token block. Base unit: 4px. Internal component padding runs at `{spacing.xl}`–`{spacing.2xl}` (24–32px); section-level rhythm expands to `{spacing.5xl}`–`{spacing.6xl}` (96–128px).

### Grid & Container
- Horizontal layout padding: 32px on each side (--layout-padding-horizontal)
- Header height: 54px sticky
- Hero: full-bleed warm canvas with imagery tiles in a free-floating animated scatter
- Below hero: feature sections in full-width alternating layouts, generous vertical rhythm
- Content max-width: ~960–1200px, centered, generous outer gutters

### Whitespace Philosophy
- **The canvas is the content**: whitespace between the imagery tiles is the breathing room of a moodboard — intentional negative space, not wasted real estate
- **No section cramming**: sections want full `{spacing.5xl}` top/bottom; the imagery needs air to float in
- **Gradient edges replace hard dividers**: section transitions use bottom-to-paper gradients instead of lines or spacing jolts

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, body text, navigation at rest |
| Paper Tint (Level 1) | Background shifts to `{colors.surface}` or `{colors.surface-paper}` | Hovered nav items, card backgrounds |
| Hairline (Level 2) | `1px solid {colors.border}` | Ghost buttons, inputs, image tile frames |
| Soft Drop (Level 3) | `0 2px 12px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.10)` | Floating cards, dynamic island-style panels |
| Active / Focus (Level 4) | `1px solid {colors.border-strong}` | Input focus, selected state borders |

**Shadow Philosophy**: Cosmos almost never uses drop shadows. The depth language is ambient tonal shifts — surface paper backgrounds (`{colors.surface-paper}`) and gentle gradient fades replace shadow lift. Where a shadow does appear (floating panels, the search bar), it reads as thin and close-cast, never theatrical. The imagery provides all the visual weight; UI depth must not compete.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Flush section dividers, full-bleed images |
| `xs` | 2px | Micro UI elements, element-level radius |
| `sm` | 4px | Small badges, tight controls |
| `md` | 6px | Compact cards, tooltips |
| `lg` | 8px | Default card radius |
| `xl` | 12px | Image tiles, media cards |
| `2xl` | 16px | Feature cards, larger containers |
| `3xl` | 24px | Large rounded panels |
| `pill` | 9999px | All buttons, inputs, nav search, all interactive controls |

The system is two-register: interactive elements snap to `{rounded.pill}` for a soft, approachable quality; containers and tiles use `{rounded.xl}`–`{rounded.2xl}`. This binary keeps chrome soft while media stays framed but not rigid.

## Components

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

### Button variants
- **`button-primary`** — Near-black (`{colors.primary}`) pill with white label. The highest-contrast element on the warm canvas. Used for "Sign up" and "Get the app". Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, `{colors.border}` hairline border, near-black label. Ghost-pill that reads quietly beside the primary. Used for secondary actions.
- **`button-ghost`** — Transparent fill, no border, near-black text. Used inline for text-level actions and navigation links.

### Cards
- **`card`** — White surface, `{rounded.2xl}`, `{colors.border}` hairline. Holds feature copy and UI screenshots.
- **`card-media`** — Surface fill, `{rounded.xl}`, zero padding so imagery bleeds to the rounded corners. The gallery tile building block.

### Inputs
- **`input`** — White fill, pill radius, `{colors.border}` border, `{typography.body}` text. The search bar at rest. **`input-focus`** shifts border to `{colors.border-strong}`.

### Navigation
- **`nav-bar`** — White, sticky 54px height, 32px horizontal padding. The logo wordmark, two text links ("Explore", "Careers"), a centered pill search field, and Login / Sign up on the right.
- **`nav-link`** — `{colors.ink-secondary}` text at rest, brightening to `{colors.ink}` on hover.

### Badges
- **`badge`** — Blue-indigo (`{colors.accent}`) fill, white text, pill radius. The only chromatic surface in the system.

### Image Tiles
- **`image-tile`** — Surface gray fill, `{rounded.xl}`, zero padding. Holds curated imagery. Float freely in the hero with CSS animation (canvas-enter, 1.8s cubic-bezier).

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.surface-paper}`, `{colors.surface-hero}`) for sections where imagery floats — the warmth is load-bearing
- Keep display headlines at weight 350–400 in `{typography.display-hero}` — book weight is the brand voice
- Apply aggressive negative tracking to large type (-3.7px at 74px, -2.64px at 66px); `{typography.display-hero}` and `{typography.display}` have this baked in
- Snap all interactive controls (buttons, inputs, search) to `{rounded.pill}` — the pill is the brand's friendly shape
- Reserve `{colors.accent}` (blue-indigo) exclusively for links and badges — it is the only chromatic signal
- Let image tiles float freely with `{rounded.xl}` and zero padding — no card chrome, no border around imagery
- Use tonal paper-shift gradients to dissolve section edges instead of hard rules or spacing jumps
- Keep the primary CTA as a near-black pill (`{components.button-primary}`) — its contrast is the point, not a brand color fill

### Don't
- Don't set display headlines at weight 600+ or 700 — boldness breaks the effortless register
- Don't reduce the negative tracking on display type toward 0 or positive — compressed spacing is structural
- Don't add drop shadows to cards or image tiles; the depth system is tonal shifts, not simulated light
- Don't introduce new chromatic colors beyond `{colors.accent}` — the warm-neutral palette defers to imagery
- Don't use square 0px corners on interactive elements — pills or `{rounded.xl}` only
- Don't use uppercase styling on any text — sentence case throughout, including nav and buttons
- Don't clip image tiles to uniform aspect ratios — the free-float scatter requires natural dimensions
- Don't put heavy borders around sections; `{colors.border}` hairlines are for components only, never layout dividers
- Don't use `{colors.error}` (`{colors.accent}`) interchangeably — orange-red is critical/error, blue-indigo is links
- Don't introduce a second display typeface alongside Oracle — `basisMono` is the only permitted alternate voice and belongs to technical contexts

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Hero headline scales to ~36px; floating tile grid collapses; nav compresses to logo + menu icon |
| Tablet | 640–1024px | Headline scales to ~48px; image tiles reflow to 2-column; feature sections stack |
| Desktop | 1024–1440px | Full hero at 74px; tile float animation plays; 32px horizontal padding |
| Large Desktop | >1440px | Layout stays at ~1200px centered; generous outer canvas |

### Touch Targets
- Primary buttons have 16px vertical padding — comfortable tap targets at 52px+ height
- Nav links expand tap area to full header height (54px) on touch
- Image tiles are fully tappable as navigation targets; no overlay required

### Collapsing Strategy
- **Navigation**: Horizontal nav with full links on desktop collapses to logo + hamburger menu on mobile
- **Hero text**: Display headline scales down from 74px; letter-spacing may compress proportionally
- **Image tiles**: The scatter animation plays at all sizes; tile count and spread adjust per viewport
- **Section padding**: `{spacing.5xl}` section rhythm compresses toward `{spacing.3xl}` on mobile

### Image Behavior
- Tiles reflow and resize but preserve natural aspect ratios — no forced crops
- The bottom gradient fade adapts its length to match the available viewport area
- Hero imagery tiles lazy-load; the canvas-enter animation fires on element entry

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm off-white (`{colors.surface-hero}`) for featured sections; White (`{colors.background}`) for content
- Primary text: Near-black (`{colors.ink}`)
- Secondary text: Warm gray (`{colors.ink-secondary}`)
- Primary CTA: Near-black pill (`{colors.primary}` fill, `{colors.on-primary}` label)
- Link / badge accent: Blue-indigo (`{colors.accent}`)
- Border: Hairline near-transparent (`{colors.border}`)

### Example Component Prompts

- "Create a hero section on warm off-white (`{colors.surface-hero}`) with the brand wordmark above a 74px headline in cosmosOracle (DM Sans fallback), weight 350, letter-spacing -3.7px, line-height 1.0, color `{colors.ink}`. Below the headline: a near-black pill primary button (`{components.button-primary}`) labeled 'Sign up' beside a ghost pill button (`{components.button-secondary}`) labeled 'Get the app'. Scatter 8–12 image tiles at `{rounded.xl}` around the text in a float animation."
- "Build a pill search input: white (`{colors.background}`) fill, `{rounded.pill}` radius, `{colors.border}` hairline border, `{typography.body}` text in `{colors.ink}`, placeholder in `{colors.ink-tertiary}`, 10px 20px padding. On focus, border shifts to `{colors.border-strong}`. No drop shadow."
- "Design a feature card: white (`{colors.background}`) surface, `{rounded.2xl}` radius, `{colors.border}` hairline border, 24px padding. Heading in `{typography.heading-sub}` at `{colors.ink}`, body in `{typography.body}` at `{colors.ink-secondary}`. No shadow."
- "Create a media tile gallery: tiles at `{rounded.xl}`, zero padding, `{colors.surface}` placeholder fill. Tiles float freely in a staggered scatter — no uniform grid, natural aspect ratios preserved. A soft gradient fade at the bottom of the section (`linear-gradient` to `{colors.surface-hero}`) dissolves the tiles back into the canvas."
- "Build a minimal navigation bar: sticky, 54px height, `{colors.background}` fill, 32px horizontal padding. Left: logo wordmark in `{typography.body}` weight 500. Center: text links 'Explore' and 'Careers' in `{colors.ink-secondary}`, `{typography.body-small}`. Right: 'Login' ghost link in `{colors.ink}` and 'Sign up' near-black pill (`{components.button-primary}`, 16px 24px padding). All interactive elements pill-shaped."
- "Design a badge in blue-indigo (`{colors.accent}`), white text (`{colors.on-primary}`), `{typography.caption}`, `{rounded.pill}`, 4px 10px padding. This is the only chromatic surface element allowed — use it for category tags or feature labels only."

### Iteration Guide

1. Start on warm off-white (`{colors.surface-hero}`) — if you defaulted to pure white or a gray background, shift to the paper canvas.
2. Set display headlines at weight 350 in `{typography.display-hero}` with -3.7px tracking. If they look bold, reduce the weight; if they look loose, tighten the tracking.
3. Make the primary CTA a near-black pill (`{components.button-primary}`). If you reached for a colored button, revert — the system has no brand-colored CTA.
4. Blue-indigo (`{colors.accent}`) appears on links and badges only. If it appears as a button fill or section background, remove it.
5. Snap all interactive elements to `{rounded.pill}`; use `{rounded.xl}` for image tiles and cards. No sharp 0px corners anywhere in interactive chrome.
6. Depth comes from paper tonal shifts (`{colors.surface}`, `{colors.surface-paper}`) and soft gradient dissolves — not from drop shadows. If a shadow crept in, remove it.
7. Check the text hierarchy: `{colors.ink}` → `{colors.ink-secondary}` → `{colors.ink-tertiary}` should cover all copy states. No additional text colors needed.

---

## 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 Cosmos. Brand names and trademarks belong to their respective owners.