# Use this design system

The Luckiest Man Ventures Design System is one design language every LMV product is built on. It is made to be read by people and pulled by machines from one address: `brand.luckiestmanventures.com`. This document tells a person or an AI how to apply it.

## The fastest path

1. Pull [tokens.css](https://brand.luckiestmanventures.com/tokens.css) into your project and use the CSS variables directly. It is the single source of truth.
2. If you need the values as data instead, fetch [tokens.json](https://brand.luckiestmanventures.com/tokens.json).
3. Hand the prompt starter below to any AI builder.

## Prompt starter (copy this)

> Use the Luckiest Man Ventures design system at brand.luckiestmanventures.com. Pull tokens from /tokens.json. Core colors: navy `#123260`, rust `#c24c32`, gold `#e6bf4a`, cream `#f5efe3`, warm-white `#fffaf0`, ink `#171717`. Fonts: Fraunces (display), Source Serif 4 (body), Inter (UI), JetBrains Mono (metadata). Cream pages, warm palette, low radius (2 to 8px), no pills, alternating light and dark sections. Editorial operator aesthetic, not generic SaaS. lightbreak is one product in the portfolio, not the umbrella.

## Core colors

| Name | Hex | Token | Role |
|---|---|---|---|
| Navy | `#123260` | `--navy` | Primary structure: headers, dark sections, footer |
| Rust | `#c24c32` | `--rust` | Attention and CTAs |
| Gold | `#e6bf4a` | `--gold` | Accent on dark, highlights, detail |
| Cream | `#f5efe3` | `--cream` | The page background |
| Warm-white | `#fffaf0` | `--white` | Card and panel surface (never `#ffffff`) |
| Ink | `#171717` | `--ink` | Primary text |

Each core hue also has a 5-step ramp (900, 700, 500, 300, 100) in [tokens.json](https://brand.luckiestmanventures.com/tokens.json). The 700 step is the core value; the 300 and 100 steps are the soft tints for washes, hovers, and quiet panels.

## Fonts

- Fraunces, display, for headlines and wordmarks.
- Source Serif 4, body, for reading text.
- Inter, UI, for controls and dense interface text.
- JetBrains Mono, metadata, for labels, timestamps, status, and source names.

Load all four from the [Google Fonts URL](https://brand.luckiestmanventures.com/tokens.json) listed in `font.googleFonts`.

## Rules

- Warm palette only. No cool blue.
- Warm-white is `#fffaf0`, never `#ffffff`.
- Low radius only (2 to 8px). No pills or fully-rounded shapes. The only round shapes allowed are a genuinely circular icon button or a status dot.
- No white or warm-white cards on cream sections. On a cream section, use navy-body cards or boxless styles.
- No same-color-on-same-color fills. Every boxed element must contrast its section background.
- Alternate light (cream) and dark (navy or rust) sections down a page. Never place two dark sections adjacent; if two darks meet, alternate navy and rust.
- Do not use em dashes.

## Brands

The system serves six real brands. Each inherits the house grammar. Per-brand accent colors are PARKED: none is assigned yet. Do not invent a color for any single brand. Use the shared house palette until accents are published.

- Luckiest Man Ventures, Parent, the holding company and the house.
- lightbreak, Product, newsletter-operator SaaS (always lowercase).
- greetform, Product, survey and lead capture.
- Local Media HQ, Platform, operator platform and education.
- Modern Media Engine, Studio, build and growth engine.
- Texas AI Lab, Studio, applied AI studio.

## Files

- [tokens.css](https://brand.luckiestmanventures.com/tokens.css), the source of truth, paste-ready CSS variables.
- [tokens.json](https://brand.luckiestmanventures.com/tokens.json), the same values as structured data.
- [llms.txt](https://brand.luckiestmanventures.com/llms.txt), the index an agent reads first.
- [USE-THIS.md](https://brand.luckiestmanventures.com/USE-THIS.md), this document.