---
version: alpha
name: Overlay
description: Premium beauty-robotics minimalism — near-pure white canvas, deep charcoal ink, and a single soft pink-to-violet gradient as the brand's only chroma. Clean geometric sans, generous whitespace, image-first hero, restrained near-square radii on buttons and cards.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f6f5f4"
  ink: "#161616"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Brand gradient endpoints (soft pink → violet)
  primary: "#e86aa6"        # gradient start, rose
  gradient-mid: "#c06cd6"   # gradient midpoint, orchid
  gradient-end: "#7b6cf0"   # gradient end, periwinkle violet

  # Neutral scale
  gray-900: "#161616"
  gray-700: "#3a3a3a"
  gray-500: "#5c5c5c"
  gray-300: "#c9c7c5"
  gray-100: "#e8e6e4"
  gray-50: "#f6f5f4"

  # Interactive
  link: "#161616"
  focus: "#7b6cf0"          # violet focus ring
  border-soft: "#e8e6e4"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.92px
  section-heading:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -1.32px
  sub-heading:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 140px

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

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.gray-700}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-soft}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.gray-300}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border-soft}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.surface-soft}"
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
  eyebrow-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow}"
---

# Overlay Design System

## Overview

Overlay is a beauty-robotics company — hardware plus computer-vision software that automates the daily makeup ritual — and its website wears that ambition as quiet, gallery-grade restraint. The canvas is near-pure white (`{colors.background}`) carrying deep charcoal text (`{colors.ink}`), so the page reads like a premium product spec sheet rather than a cosmetics ad. Photography and motion do the seducing; the chrome stays out of the way. This is the "premium industrial design" thesis applied to a web page: clean lines, generous air, no decoration that doesn't earn its place.

The one place chroma is allowed is the brand gradient — a soft pink-to-violet wash (`{colors.primary}` → `{colors.gradient-mid}` → `{colors.gradient-end}`) that appears as an atmospheric bar or overlay in the vision section. It functions as a signature, not a system color: the rest of the interface is rigorously achromatic. Buttons, text, and borders all live on the neutral charcoal-to-white axis, which makes the single gradient moment land with more impact precisely because it's rationed.

Typography is a geometric sans (closest Google match: Poppins) running display sizes with moderate negative tracking. Headlines like "The Future of Beauty is Automated" sit at 64px weight 600 with tightened letter-spacing for a confident, contemporary feel, while body copy relaxes to a comfortable 17px reading rhythm with normal tracking. The hierarchy is weight-and-scale driven; color is rarely used to differentiate text.

**Key Characteristics:**
- Near-pure white canvas (`{colors.background}`) with deep charcoal ink (`{colors.ink}`) — premium, achromatic chrome
- A single rationed brand gradient: soft pink → orchid → violet, used atmospherically not structurally
- Geometric sans (Poppins-class) with moderate negative tracking at display sizes (-1.92px at 64px)
- Image-first hero; photography and motion carry the brand, chrome recedes
- Pill-shaped buttons; dark primary CTA, hairline-bordered white secondary
- Soft hairline borders (`{colors.border-soft}`) and a single warm-gray surface tint (`{colors.surface-soft}`)
- Violet focus ring (`{colors.focus}`) borrowed from the gradient's cool end
- Uppercase eyebrow labels with positive letter-spacing as the only "typographic flourish"

## Colors

### Primary
- **Charcoal Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill. Near-black with a hint of warmth.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark.
- **Warm Surface** (`{colors.surface-soft}`): Subtle section tint and soft-card fill.

### Brand Gradient
- **Rose** (`{colors.primary}`): Gradient start — the brand's warmest point.
- **Orchid** (`{colors.gradient-mid}`): Gradient midpoint.
- **Periwinkle Violet** (`{colors.gradient-end}`): Gradient end, also the source of the focus color.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 700** (`{colors.gray-700}`): CTA hover, strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Body secondary, descriptions.
- **Gray 300** (`{colors.gray-300}`): Hover borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Hairline borders, card outlines.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Interactive
- **Link** (`{colors.link}`): Charcoal text links, underline on hover.
- **Focus** (`{colors.focus}`): Violet keyboard focus ring.
- **Border Soft** (`{colors.border-soft}`): Default hairline border throughout.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A geometric humanist sans — rounded apertures, even stroke, contemporary tech-beauty feel.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline — billboard impact |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large supporting lines |
| `card-title` | Feature/card headings |
| `body-large` | Lead paragraphs, hero subtitles |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions |
| `button-ui` | Buttons and inline actions |
| `caption` | Metadata, small labels |
| `eyebrow` | Uppercase tracked section labels |

### Principles
- **Scale and weight, not color**: Hierarchy is built from size jumps and 400/500/600 weights, keeping the palette monochrome.
- **Negative tracking at scale**: Display sizes tighten to roughly -1.92px (64px) and -1.32px (44px); body returns to neutral tracking.
- **Eyebrow as accent**: The only positive-tracking text — uppercase 12px labels — marks section openings.
- **Three weights**: 400 (read), 500 (interact), 600 (announce). No 700 in chrome.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous, with a large jump from `{spacing.4xl}` (96px) to `{spacing.5xl}` (140px) for the cinematic vertical rhythm between full-bleed sections.

### Grid & Container
- Max content width approximately 1280px
- Hero: full-width with asymmetric image placement, centered headline block
- Feature sections: alternating image/text splits and 2–3 column grids
- Image-first: large AVIF photography and video carry most sections

### Whitespace Philosophy
- **Gallery air**: Massive vertical padding (`{spacing.4xl}`–`{spacing.5xl}`) between sections.
- **One chroma moment**: The pink-violet gradient is the visual exhale in an otherwise achromatic page.
- **Edge-to-edge media**: Hero and vision imagery run full-bleed; text blocks sit on a constrained container.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border-soft}` | Cards, inputs, nav bottom |
| Soft Card (Level 2) | Hairline + very soft ambient shadow | Lifted content cards |
| Focus | `2px solid {colors.focus}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Depth is whisper-level. Separation comes from hairline borders and the warm surface tint rather than heavy shadows — consistent with the premium-industrial restraint. The gradient overlay is decorative atmosphere, never a depth cue.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `xs` | 4px | Small inline elements |
| `sm` | 8px | Inputs, small containers |
| `md` | 12px | Compact cards |
| `lg` | 16px | Standard cards |
| `xl` | 24px | Large feature panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Charcoal fill, white text, full pill. The default CTA ("Get in touch").
- **`button-secondary`** — White surface with `{colors.border-soft}` hairline, charcoal text, full pill.

### Badges
- **`badge`** — Warm-gray surface, muted ink, uppercase eyebrow type, full pill.

### Cards
- **`card`** — White surface, hairline border, 16px radius, generous 32px padding.
- **`card-soft`** — Warm-gray (`{colors.surface-soft}`) fill for grouped/feature content.

### Inputs
- **`input`** — White surface, hairline border, 8px radius. Focus swaps the border to violet (`{colors.focus}`) plus a 2px outline.

### Navigation
- **`nav-bar`** — White sticky header with a hairline bottom border, Poppins 15px weight 500 links, dark pill CTA at right.

### Distinctive Components
- **Gradient Vision Bar**: A soft pink→orchid→violet gradient (`{colors.primary}` → `{colors.gradient-mid}` → `{colors.gradient-end}`) used as an atmospheric band behind the brand-vision section — the single chroma moment in the system.
- **Full-bleed Media Hero**: Edge-to-edge AVIF photography / video with the headline block overlaid or adjacent.

## Do's and Don'ts

### Do
- Keep chrome achromatic — charcoal-to-white neutrals for buttons, text, borders
- Reserve the pink-violet gradient for atmospheric, brand-vision moments only
- Use pill radius on buttons and badges
- Use hairline borders (`{colors.border-soft}`) and the warm surface tint for separation instead of heavy shadows
- Apply moderate negative tracking on display headlines, normal tracking on body
- Use uppercase tracked eyebrows to open sections

### Don't
- Don't spread the gradient across UI chrome (buttons, cards, nav) — it's a signature, not a system color
- Don't introduce other accent colors — the brand is monochrome plus one gradient
- Don't use heavy drop shadows — depth is hairline-and-tint level
- Don't tighten body text letter-spacing
- Don't use weight 700 in interface chrome
- Don't set `primary` (the rose) as a text or background fill for chrome — it lives in the gradient, with white-only text on it if ever used as fill

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked media + text, tighter padding |
| Tablet | 600–1024px | 2-column grids begin, hero media stacks above headline |
| Desktop | 1024–1280px | Full split layouts, max content width |
| Large Desktop | >1280px | Centered container, generous margins, full-bleed media |

### Touch Targets
- Pill buttons use comfortable 14px×28px padding
- Nav links at 15px with adequate spacing
- Inputs at 12px vertical padding

### Collapsing Strategy
- Hero: 64px headline scales down, maintains proportional tracking
- Navigation: horizontal links → hamburger menu
- Feature splits: image/text side-by-side → stacked single column
- Section spacing: 140px → ~64px on mobile
- Full-bleed media: maintains edge-to-edge treatment, aspect ratio preserved

### Image Behavior
- AVIF photography and video remain full-bleed at all sizes
- The gradient vision bar simplifies but keeps its pink→violet direction on mobile
- Product imagery preserves rounded corners on constrained cards

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Charcoal `{colors.ink}`
- Background: Pure White `{colors.background}`
- Heading text: Charcoal `{colors.ink}`
- Body text: Gray 500 `{colors.gray-500}`
- Border: `1px solid {colors.border-soft}`
- Brand gradient: `{colors.primary}` → `{colors.gradient-mid}` → `{colors.gradient-end}`
- Focus ring: Violet `{colors.focus}`

### Example Component Prompts
- "Create a hero on white background. Headline at 64px Poppins weight 600, line-height 1.05, letter-spacing -1.92px, color `{colors.ink}`. Subtitle at 20px weight 400 in `{colors.gray-500}`. Dark pill CTA (`{colors.ink}`, 9999px radius, 14px 28px padding) and white pill ghost button with `{colors.border-soft}` hairline."
- "Design a card: white surface, 1px solid `{colors.border-soft}` border, 16px radius, 32px padding. Title 22px Poppins weight 600 letter-spacing -0.44px; body 17px weight 400 in `{colors.gray-500}`."
- "Build a badge: `{colors.surface-soft}` background, `{colors.ink-secondary}` text, 9999px radius, 6px 14px padding, 12px Poppins weight 600 uppercase letter-spacing 1.2px."
- "Create a vision band: soft gradient from `{colors.primary}` to `{colors.gradient-mid}` to `{colors.gradient-end}`, white headline text over it, otherwise keep the page achromatic."

### Iteration Guide
1. Keep everything achromatic except the one pink-violet gradient moment
2. Pill radius for buttons and badges; 8–16px radius for inputs and cards
3. Three weights only: 400 (read), 500 (interact), 600 (announce)
4. Negative tracking scales with size: -1.92px at 64px, -1.32px at 44px, neutral at body
5. Separation via hairline borders and warm surface tint, never heavy shadow
6. Uppercase tracked eyebrows open sections; the gradient closes the brand argument

---

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