Design system · V2.1

Ink, Geist, one rationed yellow.

The system the ProductLed site and app actually run on. Hover the logo above: that is the Market Ascent climb, and the only motion the brand mark is ever allowed.

7 token files · 20 components · 21 specimen cards · 2 UI kits

Read first

Three files, in this order

00-START-HERE.md

What this is, how to read it, who needs which folder. Two minutes.

readme.md

The full system. Voice, color, type, spacing, motion, iconography. The one file to hand an AI.

CHANGELOG.md

What changed and when. V2.1 added the logo climb.
Foundations

The five rules people break first

  1. Yellow is rationed. One accent per viewport. Never a fill, never a resting button.
  2. Primaries are white and flip to yellow on hover. Never a pill.
  3. Above the fold is headline, subtitle, CTA. Visuals go below at full container width.
  4. A CTA is never wider than the text above it. Hero lockups cap near 470px.
  5. No em dashes, no emoji, no superlatives. Sentence case everywhere.
#08090A page
#0E0F11 panel
#16181B float
#F7F8F8 text
#8A8F98 body
#62666D label
#F3CA07 accent
Tokens

Every value the system allows

Import styles.css and you have all of it, plus the logo climb.

tokens/colors.cssFour ink surfaces, a five-step text ramp, four hairlines, one yellow with six jobs, four desaturated signals, the light plate.
tokens/typography.cssDisplay never exceeds weight 500. Tracking tightens as size grows.
tokens/fonts.cssGeist and Geist Mono. Montserrat and Source Sans 3 are retired.
tokens/spacing.css1120px container, 24px edge padding, 96 / 104 / 120px section rhythm.
tokens/geometry.cssRadii 5 to 18. Never a pill. One elevation.
tokens/motion.css160 / 200 / 320 / 240ms on one easing curve. Value changes, never size.
tokens/base.cssReset and body defaults.
Components

Twenty, in four groups

Each one ships a .jsx, a .d.ts, and a .prompt.md spec written for a person or an agent.

coreButton · Card · Kicker · Chip · StatusTag
dataScoreRing · DotGrid · ProgressBar · OpportunityRow · MetricRow
marketingSectionHead · ScanLockup · Testimonial · Headshot · PullQuote · AscentMark · AscentLogo
productPanelShell · AgentTile · OperatorFloat
The logo climb. Hover the lockup and yellow climbs Commodity to Crusader, holds the full pyramid two seconds, clears, repeats. Spec and timing table: AscentLogo.prompt.md. Working offline proof: snippets/logo-climb-demo.html. The static AscentMark stays correct for favicons, tiles, avatars and print.
Specimens

Foundation cards

Live HTML, one per foundation. Open any of them.

BrandThe mark · The logo climb · Market Ascent · Voice · Actions · Headshots
ColorSurfaces · Text ramp · The yellow · Signals · Light plate · Never
TypeDisplay · Body · Mono · The yellow period
GeometrySpacing scale · Rhythm · Radii · Elevation · Motion
Assembled

UI kits and snippets

ui_kits/websiteproductled.com. Nav, home, pricing, report, footer.
ui_kits/appThe workspace. Assessment, opportunities, agents, roadmap.
snippetsCopy-paste HTML for Webflow, WordPress, and hand-built pages. No React, no build step.
assetsLogos, the Ascent mark, icon tiles, book covers, headshot.
Open

Decisions still needed

Nav namingThe prototype says Advisory and Books. CLAUDE.md says Implementation and Library. Pick one.
Light modeOnly the light-plate tokens exist, for product mocks and print. No full light surface ramp.
Logo climb on lightBlack bars, same climb. Not reviewed. Ask before shipping it.
HeadshotsChristopher Gimmer, Ian Robertson, Gergana Berman. Testimonials render the fallback until real photos land.
V2.1 · 18 September 2026