Kit

# Kit — Style Reference
> Warm creator notebook — parchment pages, highlighter-blue ink, heavy type on linen.
Theme: light

Kit reads like a warm editorial notebook — cream-tinted parchment (#f2efe9) as the page base, heavy black headlines punching out of it at weight 700, and a single sky-blue accent (#44b1ff) that appears on CTAs and interactive highlights against the near-black (#1e1e1e). The palette is intentionally muted and hand-curated: soft pastel blocks (dusty blue, blush pink, peach, sage green) appear as section backgrounds, never as text or interaction states, making the one vivid blue feel like a highlighter on a notebook page. KitSansFont at 80px/64px in the custom weight 500 dominates hero spaces with tight -0.009em tracking, while Libre Franklin handles everything else across the content hierarchy — a two-font system where custom display and workhorse utility stay in clearly assigned lanes. Radius tokens are tight and intentional: 12px on buttons and cards, 8px on secondary UI, creating a slightly-rounded-but-serious personality that avoids both sharp corporate rigidity and bubbly consumer softness.

## Colors
| Name | Value | Role |
|------|-------|------|
| Sky Marker | `#44b1ff` | Primary CTA buttons, active nav states, inline keyword highlights — vivid blue on parchment or near-black backgrounds acts as the single highlighter across an otherwise neutral palette, directing attention without competing with any other chromatic element |
| Dust Blue | `#a2d1f1` | Hero and section background panels — muted blue used as an atmospheric backdrop, never for text or interaction |
| Blush Mist | `#e7c9f1` | Section background panels — pastel pink used decoratively to vary section rhythm |
| Peach Sand | `#ffd0ad` | Section background panels — muted orange for alternating content band backgrounds |
| Sage Foam | `#b9e9c5` | Section background panels — muted green used as a decorative surface, never for semantic status |
| Amber Flag | `#f2ba41` | Icon fills and inline callout elements — warm yellow used sparingly for small graphic accents, not for text or backgrounds |
| Near Black | `#1e1e1` | Primary text, nav text, button text, footer text, borders on dark surfaces — near-black rather than pure black softens the contrast ceiling while still reading as definitive ink |
| Parchment | `#f2efe9` | Page background, hero section fill, card backgrounds — the defining warm-tinted base that makes the whole site feel like a printed editorial page rather than a screen |
| Chalk | `#ffffff` | Card interiors, form inputs, modal surfaces, footer text on dark backgrounds |
| Fog | `#e3e3e3` | All borders, dividers, input outlines — omnipresent at freq=7844, it is the connective tissue border color across every component |
| Ash | `#d4d4d4` | Subdued body text, placeholder text, disabled states |

## Typography
| Family | Role |
|--------|------|
| KitSansFont | Hero display headlines and large section statements only. Weight 500 is the only cut — this custom face is reserved for sizes 48px and above in practice, with 14px/18px appearing as UI labels in kit-branded contexts. At 80px with 0.95 line-height, lines stack with intentional bleed, creating visual mass. The -0.009em tracking at display sizes tightens the setting so letterforms feel cut from a single block. |
| Libre Franklin | Everything except display headlines — nav, body copy, buttons, links, captions, footer columns. Weight 700 for sub-headlines and emphasis within body text; 600 for button labels and nav items; 400 for running body text and secondary info. Negative tracking from -0.025em at small sizes to -0.008em at 20px gives all text a slightly condensed, editorial feel even at small scales. The 0.025em uppercase letter-spacing on small-caps labels creates a typewriter-tag contrast against the condensed body. |