What is You.com's primary brand color?

You's brand voltage is indigo #5368ee — a saturated, slightly-cool blue wired into CSS as --swatch--brand-500, --_theme---button-primary--background, and --_theme---text--text-accent. It carries the primary pill CTA on every band of the page, including the deep navy-indigo hero, the white middle section, and the pure-black close above the footer. There is no second brand accent: the violet and cherry families declared in the swatch palette appear only in product-side decoration like the announcement chip and the gradient washes behind code panels.

What typeface does You.com use, and what should I use as a substitute?

You.com runs Lumen Sans for every spoken surface — display, heading, body, button, and nav. It is a proprietary geometric sans loaded with Arial as the fallback. Display headlines sit at 47px in weight 500, smaller display at 37px / 500, body at 16px / 400, captions at 12px / 400, and nav links at 16px / 400. There is no 700 weight on the captured page. The closest open-source substitutes are Inter or Geist at the same weights; both match Lumen Sans's geometric proportions at 16-19px body sizes. For the mono caption strip use JetBrains Mono.

Why does You.com invert its background three times on one page?

The page is structured as three vertical bands stacked top-to-bottom: a deep navy-indigo hero (#1a1f4d-ish surface) carrying the Finance Research API announcement and the 87.29% featured stat; a pure-white editorial body running the headline, sub-paragraph, customer logo wall, and feature cells; and a pure-black close section pairing a dark scene panel with a final repeat of the indigo pill above the footer. The inversion isn't decoration — it lets the same indigo pill act as the anchor across three different surface conventions, which is You's structural way of saying the product moves between dark search results and light editorial chrome without breaking identity.

What corner-radius scale does You.com use?

The system runs a generous-soft scale anchored at 16px. Cards default to 16px, internal chips at 12px, smaller buttons at 8px, and the primary CTA goes fully pill at the maximum representable radius. There is no 4px tight tier — even the smallest interactive surfaces start at 8px. The pill treatment is reserved for the indigo CTA and the announcement chip; everything else uses the rounded-rectangle 12-16px scale. The result keeps every interactive element feeling tappable rather than industrial, which matches the consumer-search positioning.

Can I use this DESIGN.md to build my own AI-search marketing site?

Yes — the file is structured to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce You's specific moves: three-band canvas inversion (indigo / white / black), a single indigo pill voltage at #5368ee carried across every band, Lumen Sans-equivalent typography at modest weights, monospace caption strips inside code blocks, and 16px default rounding with a full-pill primary. The tokens resolve without invention — every hex, font family, radius, and spacing value is a quoted scalar ready to drop into Tailwind or CSS variables. The borrowable move is the band inversion under a single brand pill; the harder discipline is keeping the indigo from leaking into secondary chrome.

You.com Design System

You.com's marketing system as a DESIGN.md file.

About You.com DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source you.com

AI & LLM Platforms

You.com's marketing page does something rare for an AI-search brand: it shows the indigo voltage on three different floors of the page without flinching. The top band is a deep navy-indigo hero with a featured 87.29% stat-card and a violet pill announcing the Finance Research API; the middle band switches to pure white with a 47px Lumen Sans headline in ink and the same indigo pill rendered as the only chromatic CTA; the bottom band goes pure black, with the indigo pill returning yet again above the footer. Most peer search brands (Perplexity, Brave) keep their accent locked to one surface — You inverts the canvas under it and asks the pill to do the work alone.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 17 color tokens drawn from a single indigo brand voltage, an ink-near-black running-text color, a near-white body canvas, and a small set of structural grays; 9 typography tokens running Lumen Sans (You's proprietary geometric sans) at weights 400 and 500 across every tier from 47px display to 12px metadata; 5 radius tokens centered on a 16px default plus a full-pill option; 8 spacing values on a 4px base; and 14 component definitions covering the indigo pill, the ink-on-white display heading, the deep-indigo hero card, the dark scene panel, and the mono code-strip caption.

Feed this file to an AI coding tool and it reproduces You's specific moves: indigo as a single saturated pill voltage rather than as a UI accent, three-band canvas inversion (indigo hero / white body / black close), Lumen Sans at modest weights instead of bold display, 16px default rounding rather than tight 4px corners, and monospace as the only second voice. The move worth borrowing only if your product has a single confident brand color: trust one pill to do the entire CTA job across every surface — the inversion under it does more work than a second accent ever would.

What makes it distinct

Three-band surface inversiondeep navy-indigo hero, ink-on-white middle, pure-black close; the brand pill survives every band
Single indigo pill#5368ee carries the primary CTA at every position on the page, no second accent voltage
Lumen Sans across every tierdisplay at 47px / 500, body at 16px / 400, no separate display family
Mono caption strip14px monospace runs throughout the code snippets, the only secondary typographic voice
Generous-soft 16px radiuscards round at 16px, pill CTAs go fully rounded, no 4px tight tier anywhere

Live at you.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

you.com

Explore You.com

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

You.com design system FAQ

Common questions about You.com's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

You.com — official site

You.com's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.