# Luckiest Man Ventures Brand System

> The complete brand and design operating system for Luckiest Man Ventures (LMV), a holding company of local media brands, SaaS products (lightbreak, greetform), and the WilCo Guide property family. Warm editorial meets restrained neo-brutalism. This document is built to be read by both humans and LLMs: load it, follow the tokens and rules, and build on-brand.

## How to build on-brand
- Load tokens.css and follow tokens.json. Use only those tokens; never hardcode a hex, duration, or easing.
- Put a surface class on every section and card: .on-cream / .on-navy / .on-rust / .on-sand / .on-dark. Every child then reads contract variables (--hd heading, --bd body, --mu muted, --ki kicker, --br border, --lk link, --bbg/--btx button), so color-on-color is impossible.
- Section rhythm: cream to navy to cream to rust to cream. Never two dark sections adjacent.
- PILL BAN: no border-radius over 8px on non-circular elements. Only a real circular icon button or status dot is round.
- --white is #fffaf0, never #ffffff. Caveat font for personality accents only. Gradients surfaces-only. Every animation resolves to a static state under reduced-motion. No em dashes in copy.
- Product casing: lightbreak, greetform (lowercase); Luckiest Man Ventures, Skip School (title); LMV (caps); WilCoGuide (camel).

## Machine layer
- [tokens.css](tokens.css): the canonical CSS tokens (colors, surface contract .on-* classes, gradients, motion, type, spacing, radius, shadows).
- [tokens.json](tokens.json): machine-readable mirror of the tokens plus the rules. Parse this to build correctly.
- [USE-THIS.md](USE-THIS.md): the human + LLM build brief.

## Pages (the system)
- [Cover](index.html): the thesis, the brand-director letter, the chapter map, the brand stack (Owner > Products > Geographic > Demographic > Vertical).
- [Architecture](architecture.html): the brand family tree, what is locked vs what flexes, and Voice and tone (#voice).
- [Color](color.html): the editorial palette, locked core vs signature colors, property assignments, usage rules, do and don't.
- [Type](type.html): the four families (Fraunces, Source Serif 4, Inter, JetBrains Mono), roles, specimens, pairings.
- [Wordmark](wordmark.html): the wordmark construction and escalations.
- [Logo](logo-studies.html): the logo and lockup system (horizontal, stacked, sub-brand, small mark).
- [Sub-brands](subbrands.html): the toolkit to spin up a new property, the color-slot board, naming, launch checklist.
- [Components](components.html): the UI kit (buttons, cards, badges, forms, kickers, section rules, nav).
- [Newsletter](newsletter-sections.html): the send-ready Beehiiv newsletter section library.
- [Social](social.html): social templates (feed, carousel, stories, TikTok, share cards) at real aspect ratios.
- [Ads](ads.html): the ad and monetization system, products, placements, disclosure, rate card.
- [Motion](motion.html): the four motion tiers, duration and easing tokens, named gestures, sonic identity.
- [SaaS shells](shells.html): two reusable product-UI shells (summary-to-detail fly-out; clean primitives + command palette).
- [Build with this](foundations.html): the surface contract, the hard rules, and the machine layer, all in one place.

## Properties (examples in the system)
WilCo Guide and 20+ local newsletter titles, WilCo Seniors, WilCo Business Guide, lightbreak, Local Media HQ, Modern Media Engine, Skip School.