Design System
The canonical specification of design tokens, colors, typography, logo geometry, and component patterns for every product in the Zerohorizon Labs ecosystem. Built for human designers and autonomous AI tools.
Select Brand Token Set:
Woohl Tokens
Modern commerce connecting buyers, sellers, and creators.
Color Tokens
Tested contrast ratios and role-based assignments.
Flame Orange
Primary Accent & Brand Core
Deep Ink
High-contrast Typography
Studio Cream
Surface Foundation
Warm Tint
Subtle Card Background
Border Subtle
Divider & Border Hairlines
Typography Tokens
Official font family and optical weight assignments.
Baloo 2 & Nunito Sans
Baloo 2 (800) · Nunito Sans (500, 600)
Baloo 2 (-0.02em) · Nunito (normal)
--font-display / --font-sans
The 80 / 15 / 5 Logo Hierarchy Standard
To guarantee zero layout shift, eliminate font-loading delays, and preserve optical kerning across human developers and autonomous AI coding agents, all applications must follow this strict lockup hierarchy.
Strict Prohibition: Never Reconstruct Logos in HTML/CSS with Plain Text
Never place an icon.svg alongside plain text (<span>, <h1>). Every logo in the Woohl ecosystem is a mathematically drawn vector asset with exact optical kerning and baseline alignment. HTML text stitching introduces font dependency delays (FOUT), broken proportions, and misalignments.
<div className="flex items-center gap-2">
<img src="/brand/woohl/icon.svg" className="size-6" />
<span className="font-bold text-lg">Woohl</span>
</div><img
src="https://brand.woohl.com/brand/logo.svg"
alt="Woohl"
className="h-7 w-auto"
/>Horizontal Master Lockup
Mandatory choice for headers, navbars, footers, splash screens, documentation sidebars, and co-branding.
Asset Endpoints:
Light: /brand/logo.svg
Dark: /brand/logo-white.svg
Stacked / Centered Lockup
Reserved for centered landing page hero apexes, mobile launch splash screens, square packaging, and physical cards.
Strict Guardrail:
Do NOT squeeze into horizontal navbars (inflates header height).
Asset: /brand/logo-stacked.svg
Standalone Mark & Wordmark
Standalone mark is strictly for 1:1 square/circular containers: favicons, app icons, and social media avatars.
icon.svg (5%)
wordmark.svg (<2%)Usage Guardrail:
Never append HTML text next to the standalone mark. Standalone wordmark is reserved for tight vertical data rows.
Machine-Readable Specification: DESIGN.md & llms-full.txt
Need to feed these tokens directly into Claude, ChatGPT, Cursor, or Antigravity? Read DESIGN.md at the repository root or download the full text token feed at /llms-full.txt.