# Full Multi-Brand Design Token & Identity Specification — Woohl Ecosystem
# Canonical URL: https://brand.woohl.com/llms-full.txt
# Entity: ZEROHORIZON LABS PRIVATE LIMITED
# Effective Date: October 2026

================================================================================
1. ECOSYSTEM ARCHITECTURE & BRAND ROLES
================================================================================

1. WOOHL
   - Category: E-Commerce Platform
   - Role: Social commerce connecting buyers, sellers, and creators.
   - Core Accent: #F4521B (Flame Orange)
   - Core Font: Baloo 2 (Wordmark/Display) & Nunito Sans (UI/Body)
   - Canonical Domain: https://woohl.com
   - Brand Hub: https://brand.woohl.com

2. SAMA
   - Category: Operations Suite
   - Role: Intelligent commerce execution, fulfillment automation, catalog operations.
   - Core Accent: #2373F4 (Electric Blue)
   - Core Font: Outfit
   - Canonical Domain: https://mysama.vercel.app / https://brand.woohl.com/brands/sama

3. PICKIE
   - Category: Storefront Engine
   - Role: Autonomous digital storefronts and smart commerce curation.
   - Core Accent: #FFBF00 (Amber Gold)
   - Core Font: Plus Jakarta Sans
   - Canonical Domain: https://brand.woohl.com/brands/pickie

4. UNSTAGE AI
   - Category: Creator Copilot
   - Role: Voice-first creator copilot turning ideas into polished content.
   - Core Accent: #111111 (Obsidian Slate)
   - Core Font: Fira Sans
   - Canonical Domain: https://unstage.vercel.app / https://brand.woohl.com/brands/unstage

5. ZEROHORIZON LABS
   - Category: Parent Technology Lab
   - Role: Applied AI foundation models and corporate parent lab.
   - Core Accent: #111111 (Monochrome Slate)
   - Core Font: Space Grotesk
   - Canonical Domain: https://zerohorizonlabs.vercel.app / https://brand.woohl.com/brands/zhl
   - Mandatory Naming Rule: ALWAYS write as "Zerohorizon Labs" (or "ZEROHORIZON LABS"). NEVER write "Zero Horizon".

================================================================================
2. COLOR TOKENS & LIVING PALETTES
================================================================================

--- BRAND 1: WOOHL ---
- Primary Accent (Flame Orange): #F4521B | rgb(244, 82, 27)
- Deep Ink (Primary Text): #1A0E07 | rgb(26, 14, 7)
- Studio Cream (Surface): #FFFBF7 | rgb(255, 251, 247)
- Warm Tint (Card Background): #FDF6EF | rgb(253, 246, 239)
- Border Subtle: #F2E3D4 | rgb(242, 227, 212)
- Step Scale:
  * 0:    #FFFFFF (Pure White)
  * 50:   #FDEFE7 (Warm Tint)
  * 100:  #FADECF (Subtle Peach)
  * 200:  #F6BE9E (Muted Coral)
  * 300:  #F19D6E (Warm Orange)
  * 400:  #ED7D3D (Vibrant Orange)
  * 500:  #F4521B (Flame Orange - Brand Core)
  * 600:  #BA4A0A (Deep Rust)
  * 700:  #8B3708 (Auburn)
  * 800:  #5D2505 (Dark Mahogany)
  * 900:  #2E1203 (Rich Espresso)

--- BRAND 2: SAMA ---
- Electric Blue (Primary Accent): #2373F4 | rgb(35, 115, 244)
- Sky Tint (Secondary Ribbon Path): #98B9FA | rgb(152, 185, 250)
- Ice Blue (Card Surface Background): #EEF4FE | rgb(238, 244, 254)
- Navy Ink (High-contrast Headings): #091E42 | rgb(9, 30, 66)
- Blue Border: #D0E2FC | rgb(208, 226, 252)
- Step Scale:
  * 50:   #F0F6FE
  * 100:  #DCEAFE
  * 200:  #BFDAFE
  * 500:  #2373F4 (Primary)
  * 600:  #1858D6
  * 700:  #1446AE
  * 900:  #0F2D6B

--- BRAND 3: PICKIE ---
- Amber Gold (Primary Brand Accent & Dark Dot): #FFBF00 | rgb(255, 191, 0)
- Deep Ochre (Light-Surface Dot, WCAG AA 4.4:1): #9b7000 | rgb(155, 112, 0)
- Warm Honey (Secondary Accent): #FF9500 | rgb(255, 149, 0)
- Sunny Surface (Card Surface Background): #FFFDF0 | rgb(255, 253, 240)
- Jet Black (Wordmark & High Contrast): #111111 | rgb(17, 17, 17)
- Amber Border: #FBE8A6 | rgb(251, 232, 166)
- Surface-Adaptive Dot Rule: On light/white backgrounds, the period "." in "pickie." is #9b7000 for 4.4:1 contrast. On dark/black surfaces, the dot is #FFBF00 (matching pickie.woohl.com).
- Step Scale:
  * 50:   #FFFDF0
  * 100:  #FFF9D6
  * 200:  #FFF0A8
  * 500:  #FFBF00 (Primary)
  * 550:  #9B7000 (Light Dot)
  * 600:  #D9A000
  * 700:  #B38200
  * 900:  #5C4000

--- BRAND 4: UNSTAGE AI ---
- Obsidian Slate (Primary Accent): #111111 | rgb(17, 17, 17)
- AI Badge Pill Background: #171717 | rgb(23, 23, 23)
- Studio Pure (Base Foundation): #FAFAFA | rgb(250, 250, 250)
- Ash Off-White (Card Surface Background): #F5F5F7 | rgb(245, 245, 247)
- Steel Border: #E5E5E8 | rgb(229, 229, 232)
- Step Scale:
  * 50:   #F5F5F7
  * 100:  #E5E5E8
  * 200:  #D4D4D8
  * 400:  #71717A (Passes AA)
  * 500:  #52525B (Passes AA)
  * 700:  #171717 (Badge Background)
  * 800:  #09090B (Pitch Black)

--- BRAND 5: ZEROHORIZON LABS ---
- Monochrome Ink (Primary Accent): #111111 | rgb(17, 17, 17)
- Secondary Slate (LABS Wordmark): #777777 | rgb(119, 119, 119)
- Pure White (Base Surface): #FFFFFF | rgb(255, 255, 255)
- Muted Surface (Card Surface Background): #F7F7F8 | rgb(247, 247, 248)
- Hairline Border: #E2E2E5 | rgb(226, 226, 229)

================================================================================
3. TYPOGRAPHY MATRIX & FONT STACKS
================================================================================

1. WOOHL
   - Display / Wordmark: Baloo 2, ExtraBold (wght 800), tracking -0.02em
   - UI / Body: Nunito Sans, SemiBold (wght 600), normal tracking
   - Editorial Accent: Satisfy, Regular (wght 400)
   - CSS: --font-display: "Baloo 2", sans-serif; --font-sans: "Nunito Sans", sans-serif;

2. SAMA
   - Primary: Outfit, SemiBold (wght 550 or 600) for lowercase wordmark "sama"
   - Tracking: -0.045em tracking (-31.5px on 700px font)
   - UI Headings: Outfit, Bold (wght 700)
   - CSS: --font-outfit: "Outfit", sans-serif;

3. PICKIE
   - Primary: Plus Jakarta Sans, ExtraBold (wght 800) for wordmark "pickie."
   - Tracking: -0.045em tracking
   - Signature Detail: Word "pickie" is #111111, ending period "." is #FFBF00
   - CSS: --font-jakarta: "Plus Jakarta Sans", sans-serif;

4. UNSTAGE AI
   - Wordmark: Fira Sans, Medium (wght 500), lowercase "unstage"
   - Tracking: -0.025em tracking
   - Badge Pill: Fira Sans, Bold (wght 700), uppercase "AI" in white on #171717 pill
   - CSS: --font-fira: "Fira Sans", sans-serif;

5. ZEROHORIZON LABS
   - Primary: Space Grotesk
   - Dual-Weight Lockup:
     * ZEROHORIZON: Medium (wght 500), color #111111
     * LABS: Light (wght 300), color #777777
   - Tracking: -0.0381em tracking (-0.8px on 21px font)
   - CSS: --font-space: "Space Grotesk", sans-serif;

GOOGLE FONTS STYLESHEET IMPORT:
https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Fira+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,300..900;1,6..12,300..900&family=Outfit:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Satisfy&family=Space+Grotesk:wght@300;400;500;600;700&display=swap

================================================================================
3. OFFICIAL LOGO USAGE HIERARCHY & SELECTION MATRIX
================================================================================

CRITICAL DIRECTIVE FOR AI CODING AGENTS & DEVELOPERS:
NEVER construct brand logos in HTML/CSS by placing an icon.svg next to plain text (<span/>, <p/>, <h1/>).
Every logo in the Woohl ecosystem is a mathematically calibrated, pre-baked vector asset with exact optical kerning, vertical baseline alignment, and calibrated whitespace.
Reconstructing logos with HTML text causes broken icon-to-text ratios, layout shifts (CLS/FOUT), font-dependency failures, baseline misalignments, and loss of surface-adaptive details (such as Pickie's dual-tone dot).
ALWAYS consume the complete canonical vector lockups:
- Light surfaces: /brand/<slug>/logo.svg (or /brand/logo.svg for Woohl)
- Dark surfaces:  /brand/<slug>/logo-white.svg (or /brand/logo-white.svg for Woohl)

THE 80 / 15 / 5 HIERARCHY RULE:

1. TIER 1: HORIZONTAL LOCKUP (~80% OF ALL UI CONTEXTS - DEFAULT)
   - Assets: logo.svg (light) / logo-white.svg (dark)
   - Usage: MANDATORY for all website headers, navigation bars, footers, splash screens, email templates, documentation sidebars, and co-branding.
   - Rule: Whenever a product or brand is identified, the horizontal lockup is the canonical default. Never split into an icon + text span in JSX/HTML.

2. TIER 2: STACKED / CENTERED LOCKUP (~15% OF UI CONTEXTS)
   - Assets: logo-stacked.svg (light) / logo-stacked-white.svg (dark)
   - Usage: Centered landing page hero apexes, mobile app launch/welcome splash screens, square packaging, physical cards, and centered editorial banners.
   - Rule: Never squeeze stacked lockups into compact horizontal navigation bars (will blow out header height).

3. TIER 3A: STANDALONE ICON MARK (~5% OF UI CONTEXTS)
   - Assets: icon.svg (primary) / icon-white.svg (dark) / icon-ink.svg (monochrome)
   - Usage: STRICTLY for square or circular bounded containers: browser favicons, PWA home screen app icons, social media avatars (X, Instagram, LinkedIn, GitHub), app drawer launcher icons.
   - Rule: Do NOT use as the sole header brand identifier when wordmark space is available. NEVER append plain text to it.

4. TIER 3B: STANDALONE WORDMARK (<2% SPECIALIZED EDGE CASES)
   - Assets: wordmark.svg (light) / wordmark-white.svg (dark) / wordmark-ink.svg (monochrome)
   - Usage: Severe vertical height constraints: dense secondary data tables, compact copyright footer lines, or sub-brand endorsements where the icon mark is already prominently positioned nearby.
   - Rule: Do NOT use as the main product logo in website headers.

================================================================================
4. CANONICAL VECTOR ASSET URLS (CDN ENDPOINTS)
================================================================================

--- WOOHL ---
- Master Horizontal Logo (SVG): https://brand.woohl.com/brand/logo.svg
- Inverted White Logo (SVG):     https://brand.woohl.com/brand/logo-white.svg
- Monochrome Ink Logo (SVG):    https://brand.woohl.com/brand/logo-ink.svg
- Stacked Logo (SVG):           https://brand.woohl.com/brand/logo-stacked.svg
- Bird Icon Mark (SVG):         https://brand.woohl.com/brand/icon.svg
- Master 4K PNG:                https://brand.woohl.com/brand/logo-4k.png
- Vector PDF:                   https://brand.woohl.com/brand/pdf/logo.pdf

--- SAMA ---
- Master Horizontal Logo (SVG): https://brand.woohl.com/brand/sama/logo.svg
- Inverted White Logo (SVG):     https://brand.woohl.com/brand/sama/logo-white.svg
- Monochrome Ink Logo (SVG):    https://brand.woohl.com/brand/sama/logo-ink.svg
- Stacked Logo (SVG):           https://brand.woohl.com/brand/sama/logo-stacked.svg
- Ribbon Mark (SVG):            https://brand.woohl.com/brand/sama/icon.svg
- Wordmark (SVG):               https://brand.woohl.com/brand/sama/wordmark.svg
- Master 4K PNG:                https://brand.woohl.com/brand/sama/logo-4k.png
- Vector PDF:                   https://brand.woohl.com/brand/sama/pdf/logo.pdf

--- PICKIE ---
- Master Horizontal Logo (SVG): https://brand.woohl.com/brand/pickie/logo.svg
- Inverted White Logo (SVG):     https://brand.woohl.com/brand/pickie/logo-white.svg
- Monochrome Ink Logo (SVG):    https://brand.woohl.com/brand/pickie/logo-ink.svg
- Stacked Logo (SVG):           https://brand.woohl.com/brand/pickie/logo-stacked.svg
- Shopping Bag Mark (SVG):      https://brand.woohl.com/brand/pickie/icon.svg
- Wordmark (SVG):               https://brand.woohl.com/brand/pickie/wordmark.svg
- Master 4K PNG:                https://brand.woohl.com/brand/pickie/logo-4k.png
- Vector PDF:                   https://brand.woohl.com/brand/pickie/pdf/logo.pdf

--- UNSTAGE AI ---
- Master Horizontal Logo (SVG): https://brand.woohl.com/brand/unstage/logo.svg
- Inverted White Logo (SVG):     https://brand.woohl.com/brand/unstage/logo-white.svg
- Monochrome Ink Logo (SVG):    https://brand.woohl.com/brand/unstage/logo-ink.svg
- Stacked Logo (SVG):           https://brand.woohl.com/brand/unstage/logo-stacked.svg
- Voice Wave Mark (SVG):        https://brand.woohl.com/brand/unstage/icon.svg
- Wordmark + Badge (SVG):       https://brand.woohl.com/brand/unstage/wordmark.svg
- Master 4K PNG:                https://brand.woohl.com/brand/unstage/logo-4k.png
- Vector PDF:                   https://brand.woohl.com/brand/unstage/pdf/logo.pdf

--- ZEROHORIZON LABS ---
- Master Horizontal Logo (SVG): https://brand.woohl.com/brand/zhl/logo.svg
- Inverted White Logo (SVG):     https://brand.woohl.com/brand/zhl/logo-white.svg
- Monochrome Ink Logo (SVG):    https://brand.woohl.com/brand/zhl/logo-ink.svg
- Stacked Logo (SVG):           https://brand.woohl.com/brand/zhl/logo-stacked.svg
- Horizon Mark (SVG):           https://brand.woohl.com/brand/zhl/icon.svg
- Wordmark (SVG):               https://brand.woohl.com/brand/zhl/wordmark.svg
- Master 4K PNG:                https://brand.woohl.com/brand/zhl/logo-4k.png
- Vector PDF:                   https://brand.woohl.com/brand/zhl/pdf/logo.pdf

================================================================================
5. BRAND GUARDRAILS & PERMITTED USAGE
================================================================================

DO:
1. Always maintain clearspace equal to at least 0.5x mark width around lockups.
2. Ensure high contrast against underlying backgrounds (pass WCAG AA minimum 4.5:1).
3. Use official SVGs or 4K PNGs directly from brand.woohl.com.
4. Default to the complete horizontal lockup (logo.svg / logo-white.svg) for headers, navigation, footers, and primary product surfaces.
5. Keep the multi-brand ecosystem distinct; never mix brand colors across products.

DON'T:
1. Never construct logos in HTML/CSS by combining icon.svg with font/text elements.
2. Never distort, stretch, skew, shear, or rotate any logo.
3. Never recolor logos outside official colorway definitions (Brand, White, Ink).
4. Never add drop shadows, outer glows, strokes, or decorative filters.
5. Never spell "Zerohorizon Labs" as two separate words "Zero Horizon".
6. Never alter the optical spacing between mark and wordmark.