Brand tokens.
Source of truth for color, type, spacing, and component primitives across the Offside Studio Suite. Tokens are adopted verbatim from the offside.ai marketing site. Tan is emphasis only. Saturated blue, purple, and cyan are off-brand.
Tan, Ink, Bone.
The brand is a three-color palette. Every other color is a derived warm-neutral or a muted status signal — never an unrelated accent.
--brand-tan
#C9A389
--brand-ink
#1E1E1E
--brand-bone
#F1F1F1
--brand-tan-text
#7A5F44
The brand book listed #B8916F for tan-on-bone copy; that fails WCAG (2.54:1 on Bone). The token here is corrected to #7A5F44 per the production CSS.
Display · Body · Mono.
Display is Styrene A (paid Commercial Type) with a Söhne → Inter fallback. Until Styrene A is licensed and dropped into frontend-web/public/fonts/, the page falls through that chain.
Display XL.
Display L.
H2 — sentence case.
H3
Eyebrow · 0.18em tracked · uppercaseBody — Roboto. Engineer-to-engineer voice. Two short clauses. No adjective inflation.
Mono — JetBrains Mono · 0xC9A389
4px base · six radius steps · soft warm shadows.
2 · 4 · 8 · 12 · 16 · pill.
Never dramatic.
1280 max · 88px gutters.
Editorial container caps content at 1280px. 24px gutters mobile, 88px desktop. Section vertical rhythm: 80px mobile, 128px desktop.
Primitives.
Card title.
Hairline 1px ink at 12% alpha. Rounded 14–20px. Soft warm shadow on hover. Voice is engineer-to-engineer — never breathless.
Hover the tan link — underline scales in over 220ms, cubic-bezier(0.16, 1, 0.3, 1).
Engineer-to-engineer.
Confident, technical, infrastructure-grade. We speak to engineering leaders and developers, not consumers. Sentences are short and declarative. Specifics over hype: real numbers, real product names, real compliance acronyms.
Pride in open-source. "Proudly Open Source", "Open by design", "Community Driven" — treated as identity, not a feature bullet. Customer testimonials lead with engineering outcomes, not feelings.