Tokens

Portable design system package with all brand tokens, styles, and configuration. Download for use in any project or with AI tools.

Download Styles Package

Get the complete portable styles folder with Tailwind config, CSS variables, design tokens, fonts, and AI context documentation.

Package Contents

tokens.json

tailwind.config.ts

brand.css

fonts/

README.md

AI-CONTEXT.md

Colors

Brand Colors

Charcoal#191919

Primary text, dark backgrounds

Vanilla#FFFAEE

Primary backgrounds, light surfaces

Aperol#FE5102

Accent (max 10% usage)

OS Dark Theme Palette

BG Darker#0C0C0C

Deepest background

BG Dark#141414

Primary dark background

Surface Dark#1C1C1C

Elevated surfaces

Border Dark#2C2C2C

Borders and dividers

Text Primary#E8E8E8

Primary text on dark

Text Secondary#9CA3AF

Muted text on dark

Typography

Display

Headings H1-H4

Neue Haas Grotesk Display Pro

Sans

Body text

Neue Haas Grotesk Display Pro

Mono/Accent

H5-H6 (max 2/viewport)

Offbit

Border Radius

Brand12px

Brand Large16px

Shadows

Brand0 2px 8px rgba(0,0,0,0.1)

Brand Large0 4px 16px rgba(0,0,0,0.15)

Quick Usage Guide

CSS Variables

color: var(--brand-charcoal);
background: var(--brand-vanilla);
border-radius: var(--radius-brand);

Tailwind Classes

<div class="bg-brand-vanilla text-brand-charcoal">
<button class="bg-brand-aperol rounded-brand">
<p class="font-display text-os-text-primary-dark">