@pcoi/tokens 0.1.0

package/src/effects/primitives.json

@@ -0,0 +1,122 @@
+{
+  "effect": {
+    "shadow": {
+      "$type": "shadow",
+      "btn-primary-hover": {
+        "$value": "0 8px 30px rgba(212, 164, 76, 0.25)",
+        "$description": "Primary button hover glow — warm gold elevation"
+      },
+      "nav-scrolled": {
+        "$value": "0 1px 0 rgba(255, 255, 255, 0.06)",
+        "$description": "Navbar bottom hairline on scroll"
+      },
+      "mobile-menu": {
+        "$value": "0 12px 40px rgba(0, 0, 0, 0.6)",
+        "$description": "Mobile menu drop shadow"
+      },
+      "focus-ring": {
+        "$value": "0 0 0 3px rgba(212, 164, 76, 0.08)",
+        "$description": "Input focus outer glow ring"
+      },
+      "focus-ring-error": {
+        "$value": "0 0 0 3px rgba(224, 82, 82, 0.08)",
+        "$description": "Input focus outer glow ring in error state"
+      },
+      "elevated": {
+        "$value": "0 8px 32px rgba(0, 0, 0, 0.4)",
+        "$description": "Elevated shadow for modals and dropdowns"
+      }
+    },
+    "blur": {
+      "nav-backdrop": {
+        "$value": "20px",
+        "$description": "Navbar backdrop-filter blur amount"
+      }
+    },
+    "transition": {
+      "$type": "duration",
+      "fast": {
+        "$value": "0.2s ease",
+        "$description": "Buttons, links, borders, input focus"
+      },
+      "medium": {
+        "$value": "0.3s ease",
+        "$description": "Cards, navbar, mobile menu, principle hover"
+      },
+      "slow": {
+        "$value": "0.6s ease",
+        "$description": "Scroll reveal fade-in animations"
+      }
+    },
+    "animation": {
+      "pulse": {
+        "duration": "3s",
+        "timing": "ease-in-out",
+        "iteration": "infinite",
+        "$description": "Brain core pulse ring — scale 1→1.15 with fade"
+      },
+      "orbit-inner": {
+        "duration": "40s",
+        "timing": "linear",
+        "iteration": "infinite",
+        "direction": "normal",
+        "$description": "Inner orbit rotation (SOPs, Field Notes, Tribal Knowledge)"
+      },
+      "orbit-outer": {
+        "duration": "60s",
+        "timing": "linear",
+        "iteration": "infinite",
+        "direction": "reverse",
+        "$description": "Outer orbit rotation (New Hires, Lead Techs, Operations)"
+      }
+    },
+    "opacity": {
+      "disabled": {
+        "$value": 0.5,
+        "$description": "Standard disabled state opacity for interactive elements"
+      }
+    },
+    "transform": {
+      "hover-lift": {
+        "$value": "translateY(-2px)",
+        "$description": "Card and primary button hover lift"
+      },
+      "hover-lift-sm": {
+        "$value": "translateY(-1px)",
+        "$description": "Nav CTA hover lift"
+      },
+      "fade-in-offset": {
+        "$value": "translateY(24px)",
+        "$description": "Initial position for scroll-reveal fade-in"
+      },
+      "parallax-factor": {
+        "$value": "0.15",
+        "$description": "Hero grid background parallax scroll multiplier"
+      },
+      "press-scale": {
+        "$value": "scale(0.985)",
+        "$description": "Button press feedback — standard buttons and nav links"
+      },
+      "press-scale-input": {
+        "$value": "scale(0.99)",
+        "$description": "Input press feedback — select dropdowns and form inputs"
+      },
+      "press-scale-control": {
+        "$value": "scale(0.95)",
+        "$description": "Control press feedback — radio circles and checkbox boxes"
+      },
+      "press-scale-track": {
+        "$value": "scale(0.975)",
+        "$description": "Track press feedback — toggle switch tracks"
+      },
+      "press-scale-icon": {
+        "$value": "scale(0.925)",
+        "$description": "Icon button press feedback — close buttons and hamburger"
+      },
+      "toggle-thumb-on": {
+        "$value": "scale(1.15)",
+        "$description": "Toggle thumb scale increase when checked — cognitive accessibility cue"
+      }
+    }
+  }
+}

package/src/layout/primitives.json

@@ -0,0 +1,101 @@
+{
+  "layout": {
+    "container": {
+      "$type": "dimension",
+      "max":     { "$value": "1200px", "$description": "Max content width — .container" },
+      "narrow":  { "$value": "800px",  "$description": "Narrow content — how-steps, signals, section headers" },
+      "cta":     { "$value": "680px",  "$description": "CTA section max width" },
+      "callout": { "$value": "600px",  "$description": "Callout text max width" },
+      "chamath": { "$value": "640px",  "$description": "Chamath callout max width" },
+      "hero-sub":{ "$value": "520px",  "$description": "Hero subtitle max width" },
+      "compare": { "$value": "900px",  "$description": "Comparison table max width" },
+      "wide":    { "$value": "1100px", "$description": "Wide multi-column layouts (3-col grids)" },
+      "modal":   { "$value": "520px",  "$description": "Modal dialog max width" },
+      "toast-min": { "$value": "280px","$description": "Toast notification min width" },
+      "toast-max": { "$value": "420px","$description": "Toast notification max width" },
+      "compare-scroll": { "$value": "500px", "$description": "Comparison table min width before horizontal scroll" },
+      "document": { "$value": "900px", "$description": "Document overlay modal max width" }
+    },
+    "nav": {
+      "height": { "$value": "72px", "$description": "Fixed navigation height" }
+    },
+    "breakpoint": {
+      "$type": "dimension",
+      "desktop": { "$value": "1025px", "$description": "Desktop — above this: full layout" },
+      "tablet":  { "$value": "1024px", "$description": "Tablet — at/below: single-col hero, 2-col principles" },
+      "mobile":  { "$value": "768px",  "$description": "Mobile — hamburger nav, all single-col" },
+      "small":   { "$value": "480px",  "$description": "Small mobile — reduced h1, tighter buttons" }
+    },
+    "zIndex": {
+      "base":      { "$value": 1,    "$description": "Default layer" },
+      "content":   { "$value": 1,    "$description": "Hero content (z-index: 1)" },
+      "mobile-menu": { "$value": 100, "$description": "Mobile menu overlay" },
+      "nav":       { "$value": 1000, "$description": "Fixed navigation" },
+      "dropdown":  { "$value": 200,  "$description": "Dropdown menus and popovers" },
+      "modal":     { "$value": 500,  "$description": "Modal dialogs" },
+      "toast":     { "$value": 600,  "$description": "Toast notifications (above modals)" }
+    },
+    "component": {
+      "$type": "dimension",
+      "$description": "Component-specific dimensions for form controls, icons, and decorative elements",
+      "control-box":          { "$value": "18px", "$description": "Checkbox and radio button control size" },
+      "radio-dot":            { "$value": "8px",  "$description": "Radio button inner dot size" },
+      "toggle-track-w":       { "$value": "40px", "$description": "Toggle track width" },
+      "toggle-track-h":       { "$value": "22px", "$description": "Toggle track height" },
+      "toggle-thumb":         { "$value": "16px", "$description": "Toggle thumb diameter" },
+      "toggle-thumb-inset":   { "$value": "3px",  "$description": "Toggle thumb inset from track edge" },
+      "toggle-thumb-travel":  { "$value": "18px", "$description": "Toggle thumb translateX when checked" },
+      "toggle-check-w":       { "$value": "4px",   "$description": "Toggle checkmark width" },
+      "toggle-check-h":       { "$value": "7px",   "$description": "Toggle checkmark height" },
+      "toggle-check-stroke":  { "$value": "1.5px", "$description": "Toggle checkmark border stroke" },
+      "icon-box":             { "$value": "52px", "$description": "Problem card icon container size" },
+      "step-number":          { "$value": "48px", "$description": "HowStep number circle size" },
+      "hamburger":            { "$value": "28px", "$description": "Nav hamburger button size" },
+      "hamburger-bar-offset": { "$value": "7px",  "$description": "Hamburger X-animation bar translateY offset" },
+      "accent-line-w":        { "$value": "60px", "$description": "Callout decorative line width" },
+      "accent-border-w":      { "$value": "3px",  "$description": "Toast/variant left accent border width" },
+      "bullet":               { "$value": "8px",  "$description": "SignalsPanel list bullet size" }
+    },
+    "grid": {
+      "hero": {
+        "columns": "1fr 1fr",
+        "gap": "60px",
+        "$description": "Hero section — 2-col on desktop, 1-col on tablet/mobile"
+      },
+      "problem": {
+        "columns": "repeat(2, 1fr)",
+        "gap": "24px",
+        "$description": "Problem cards — 2-col on desktop, 1-col on mobile"
+      },
+      "principles": {
+        "columns": "repeat(3, 1fr)",
+        "gap": "24px",
+        "$description": "Principle cards — 3-col desktop, 2-col tablet, 1-col mobile"
+      },
+      "who": {
+        "columns": "repeat(2, 1fr)",
+        "gap": "24px",
+        "$description": "Who cards — 2-col on desktop, 1-col on mobile"
+      },
+      "comparison": {
+        "columns": "1.2fr 1fr 1fr",
+        "$description": "Comparison table 3-col grid"
+      },
+      "curve": {
+        "columns": "1fr 1fr",
+        "gap": "64px",
+        "$description": "Learning curve — 2-col on desktop, 1-col on tablet/mobile"
+      },
+      "form-row": {
+        "columns": "1fr 1fr",
+        "gap": "20px",
+        "$description": "Form field rows — 2-col on desktop, 1-col on mobile"
+      },
+      "suggestions": {
+        "columns": "repeat(3, 1fr)",
+        "gap": "16px",
+        "$description": "Suggestion cards — 3-col desktop, 1-col mobile"
+      }
+    }
+  }
+}

package/src/radius/primitives.json

@@ -0,0 +1,11 @@
+{
+  "radius": {
+    "$type": "dimension",
+    "$description": "Border radius scale",
+    "sm":   { "$value": "6px",  "$description": "Buttons, badges, inputs, icon boxes, orbit nodes" },
+    "md":   { "$value": "12px", "$description": "Cards, tables, chart panels" },
+    "lg":   { "$value": "20px", "$description": "CTA form container" },
+    "xl":   { "$value": "28px", "$description": "Reserved — not currently used" },
+    "full": { "$value": "9999px", "$description": "Circles — step numbers, brain core, bullet dots" }
+  }
+}

package/src/radius/semantics.json

@@ -0,0 +1,31 @@
+{
+  "semantic-radius": {
+    "$type": "dimension",
+    "$description": "Semantic radius tokens. Map radius primitives to component-level intent.",
+
+    "btn": {
+      "$value": "{radius.sm}",
+      "$description": "Border radius for buttons"
+    },
+    "input": {
+      "$value": "{radius.sm}",
+      "$description": "Border radius for form inputs and textareas"
+    },
+    "card": {
+      "$value": "{radius.md}",
+      "$description": "Border radius for cards and panels"
+    },
+    "panel": {
+      "$value": "{radius.lg}",
+      "$description": "Border radius for large panels and form containers"
+    },
+    "badge": {
+      "$value": "{radius.full}",
+      "$description": "Border radius for badges and pills"
+    },
+    "avatar": {
+      "$value": "{radius.full}",
+      "$description": "Border radius for avatars and step numbers"
+    }
+  }
+}

package/src/sizing/primitives.json

@@ -0,0 +1,15 @@
+{
+  "sizing": {
+    "$type": "dimension",
+    "$description": "Tier 1: Sizing primitives — standardized height scale for component constraints. Based on 8px grid. Separate from spacing (padding/margin/gap).",
+    "height": {
+      "$description": "Component height scale — use semantic-sizing tokens in components, not these directly",
+      "xs":  { "$value": "24px", "$description": "1.5rem — compact badges, tags, small indicators" },
+      "sm":  { "$value": "32px", "$description": "2rem — small buttons, compact controls" },
+      "md":  { "$value": "40px", "$description": "2.5rem — standard inputs, default buttons, selects" },
+      "lg":  { "$value": "48px", "$description": "3rem — large buttons, step numbers, prominent controls" },
+      "xl":  { "$value": "64px", "$description": "4rem — large interactive areas, icon containers" },
+      "2xl": { "$value": "80px", "$description": "5rem — hero-scale elements, feature panels" }
+    }
+  }
+}

package/src/sizing/semantics.json

@@ -0,0 +1,14 @@
+{
+  "semantic-sizing": {
+    "$type": "dimension",
+    "$description": "Tier 3: Semantic sizing tokens — component-intent height constraints. Apply these in component CSS.",
+    "input-height":        { "$value": "{sizing.height.md}",  "$description": "Standard form input height (FormField, Select)" },
+    "btn-height":          { "$value": "{sizing.height.md}",  "$description": "Default button height" },
+    "btn-height-lg":       { "$value": "{sizing.height.lg}",  "$description": "Large button height (.pcoi-btn--large)" },
+    "btn-height-nav":      { "$value": "{sizing.height.sm}",  "$description": "Nav CTA button height (compact)" },
+    "textarea-min-height": { "$value": "{sizing.height.2xl}", "$description": "Textarea minimum height" },
+    "badge-height":        { "$value": "{sizing.height.xs}",  "$description": "Badge and tag height" },
+    "step-number":         { "$value": "{sizing.height.lg}",  "$description": "HowStep number circle diameter (48px)" },
+    "icon-box":            { "$value": "52px",                "$description": "Card icon container size (custom — between lg and xl)" }
+  }
+}

package/src/spacing/primitives.json

@@ -0,0 +1,29 @@
+{
+  "spacing": {
+    "$type": "dimension",
+    "$description": "Tier 1: Spacing primitives. All values extracted from pcoi.ai CSS.",
+    "0":   { "$value": "0px",   "$description": "Zero — how-steps gap" },
+    "4":   { "$value": "4px",   "$description": "Micro — stat vertical gap" },
+    "5":   { "$value": "5px",   "$description": "Hamburger line gap" },
+    "6":   { "$value": "6px",   "$description": "Form label-to-input gap" },
+    "8":   { "$value": "8px",   "$description": "Step h3 margin, hero-badge padding-y, mobile-menu padding-top" },
+    "10":  { "$value": "10px",  "$description": "Card h3 margin-bottom, nav-cta padding-y" },
+    "12":  { "$value": "12px",  "$description": "Footer brand tagline margin, mobile CTA margin-top, callout attribution mt" },
+    "14":  { "$value": "14px",  "$description": "Signals li gap, button padding-y, mobile-menu link padding-y" },
+    "16":  { "$value": "16px",  "$description": "Section-label mb, h2 mb, badge padding-x, form input padding, cta-content mb, form-note mt" },
+    "20":  { "$value": "20px",  "$description": "Form gap, icon mb, signals h3 mb, form row gap" },
+    "22":  { "$value": "22px",  "$description": "Nav CTA padding-x" },
+    "24":  { "$value": "24px",  "$description": "Container padding-x, grid gap, h1 mb, footer-bottom pt, signal-bullet pl, callout-line mb, nav padding-x" },
+    "28":  { "$value": "28px",  "$description": "Hero-badge mb, btn padding-x, footer-links gap" },
+    "32":  { "$value": "32px",  "$description": "Nav-links gap, how-step gap, curve-stats gap, chart padding, mobile-menu footer gap" },
+    "36":  { "$value": "36px",  "$description": "Card padding, hero-sub mb, btn-lg padding-x" },
+    "40":  { "$value": "40px",  "$description": "How-step padding-y, callout padding, form padding, footer-inner mb, signals padding-y" },
+    "48":  { "$value": "48px",  "$description": "Grid mb, cta-content p mb, signals padding-x, mobile tablet gap" },
+    "60":  { "$value": "60px",  "$description": "Hero grid gap, footer top-padding, callout-line width" },
+    "64":  { "$value": "64px",  "$description": "Section-header mb, curve-layout gap" },
+    "72":  { "$value": "72px",  "$description": "Nav height" },
+    "80":  { "$value": "80px",  "$description": "Hero bottom-padding, mobile section padding, textarea min-height" },
+    "100": { "$value": "100px", "$description": "Mobile hero top-padding" },
+    "120": { "$value": "120px", "$description": "Section padding (top and bottom), hero top-padding" }
+  }
+}

package/src/spacing/semantics.json

@@ -0,0 +1,83 @@
+{
+  "semantic-spacing": {
+    "$type": "dimension",
+    "$description": "Semantic spacing tokens. Map spacing primitives to component-level intent.",
+
+    "section-y": {
+      "$value": "{spacing.80}",
+      "$description": "Vertical padding for page sections"
+    },
+    "section-y-lg": {
+      "$value": "{spacing.120}",
+      "$description": "Vertical padding for large/hero sections"
+    },
+    "component-gap": {
+      "$value": "{spacing.40}",
+      "$description": "Default gap between stacked components"
+    },
+    "card-padding": {
+      "$value": "{spacing.36}",
+      "$description": "Internal padding for cards and panels"
+    },
+    "card-gap": {
+      "$value": "{spacing.20}",
+      "$description": "Gap between elements inside a card"
+    },
+    "form-gap": {
+      "$value": "{spacing.20}",
+      "$description": "Gap between form fields"
+    },
+    "form-padding": {
+      "$value": "{spacing.40}",
+      "$description": "Internal padding for form containers"
+    },
+    "input-x": {
+      "$value": "{spacing.16}",
+      "$description": "Horizontal padding inside inputs"
+    },
+    "input-y": {
+      "$value": "{spacing.12}",
+      "$description": "Vertical padding inside inputs"
+    },
+    "btn-x": {
+      "$value": "{spacing.24}",
+      "$description": "Horizontal padding for default buttons"
+    },
+    "btn-y": {
+      "$value": "{spacing.10}",
+      "$description": "Vertical padding for default buttons"
+    },
+    "btn-x-lg": {
+      "$value": "{spacing.36}",
+      "$description": "Horizontal padding for large buttons"
+    },
+    "btn-y-lg": {
+      "$value": "{spacing.16}",
+      "$description": "Vertical padding for large buttons"
+    },
+    "nav-height": {
+      "$value": "{spacing.72}",
+      "$description": "Navigation bar height"
+    },
+    "stack-sm": {
+      "$value": "{spacing.8}",
+      "$description": "Small vertical stack spacing (labels, badges)"
+    },
+    "stack-md": {
+      "$value": "{spacing.16}",
+      "$description": "Medium vertical stack spacing (headings, paragraphs)"
+    },
+    "stack-lg": {
+      "$value": "{spacing.32}",
+      "$description": "Large vertical stack spacing (content blocks)"
+    },
+    "inline-sm": {
+      "$value": "{spacing.8}",
+      "$description": "Small inline spacing (icon + text)"
+    },
+    "inline-md": {
+      "$value": "{spacing.16}",
+      "$description": "Medium inline spacing (nav links)"
+    }
+  }
+}

package/src/typography/primitives.json

@@ -0,0 +1,69 @@
+{
+  "font": {
+    "family": {
+      "$type": "fontFamily",
+      "sans": {
+        "$value": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        "$description": "Primary — all body and heading text"
+      },
+      "mono": {
+        "$value": "'JetBrains Mono', 'Fira Code', monospace",
+        "$description": "Secondary — badges, labels, step numbers, code blocks"
+      }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "light":     { "$value": 300, "$description": "Callout quotes, attributions" },
+      "regular":   { "$value": 400, "$description": "Body text default" },
+      "medium":    { "$value": 500, "$description": "Nav links, labels, mono text, nav-cta weight=450 in CSS" },
+      "semibold":  { "$value": 600, "$description": "Buttons, card titles, h3s, logo" },
+      "bold":      { "$value": 700, "$description": "Section h2s, CTA h2" },
+      "extrabold": { "$value": 800, "$description": "Hero h1 only" }
+    },
+    "size": {
+      "$type": "dimension",
+      "$description": "Font size scale extracted from CSS",
+      "xs":    { "$value": "0.7rem",   "$description": "12px — Orbit node labels" },
+      "sm":    { "$value": "0.75rem",  "$description": "12px — Section labels, badges" },
+      "caption": { "$value": "0.8rem", "$description": "12.8px — Form labels, footer copyright, form note, stat-label" },
+      "body-sm": { "$value": "0.85rem","$description": "13.6px — Step numbers, principle numbers, stat numbers, comparison header, footer brand" },
+      "nav":   { "$value": "0.875rem", "$description": "14px — Nav links, footer links" },
+      "body":  { "$value": "0.9rem",   "$description": "14.4px — Comparison cells, principle body, who-card body, signals body" },
+      "body-default": { "$value": "0.95rem", "$description": "15.2px — Card body, step desc, buttons, form inputs" },
+      "body-lg": { "$value": "1rem",   "$description": "16px — Mobile menu links, btn-lg, curve body" },
+      "lead":  { "$value": "1.05rem",  "$description": "16.8px — Principle h3, CTA description" },
+      "sub":   { "$value": "1.1rem",   "$description": "17.6px — Who h3, signals h3, section desc, callout quote, Chamath" },
+      "h3":    { "$value": "1.15rem",  "$description": "18.4px — Card h3, hero sub text" },
+      "h3-lg": { "$value": "1.2rem",   "$description": "19.2px — Step titles" },
+      "logo":  { "$value": "1.35rem",  "$description": "21.6px — PCOI logo" },
+      "callout": { "$value": "1.35rem","$description": "21.6px — Problem callout quote" },
+      "close-sm": { "$value": "1.25rem","$description": "20px — Toast close button icon" },
+      "close-lg": { "$value": "1.5rem", "$description": "24px — Modal close button icon" },
+      "h2-sm":   { "$value": "2.25rem", "$description": "36px — Smaller section heading (static desktop value; use semantic section-title-xs-size for fluid)" },
+      "h2":      { "$value": "2.5rem",  "$description": "40px — CTA section heading (static desktop value; use semantic section-title-sm-size for fluid)" },
+      "h1":      { "$value": "2.75rem", "$description": "44px — Main section heading (static desktop value; use semantic section-title-size for fluid)" },
+      "display": { "$value": "4rem",    "$description": "64px — Hero h1 headline (static desktop value; use semantic display-size for fluid)" }
+    },
+    "lineHeight": {
+      "$type": "number",
+      "none":    { "$value": 1,    "$description": "No extra leading — buttons, badges, close icons" },
+      "tight":   { "$value": 1.1,  "$description": "Hero h1" },
+      "heading": { "$value": 1.2,  "$description": "Section h2s, CTA h2" },
+      "snug":    { "$value": 1.3,  "$description": "Brain core text" },
+      "body-sm": { "$value": 1.5,  "$description": "Callout, comparison cells, footer brand, signals li" },
+      "body":    { "$value": 1.6,  "$description": "Default body text — cards, principles, who-cards" },
+      "step":    { "$value": 1.65, "$description": "Step content body" },
+      "relaxed": { "$value": 1.7,  "$description": "Hero sub, section desc, curve text, CTA desc" }
+    },
+    "letterSpacing": {
+      "$type": "dimension",
+      "tight":   { "$value": "-0.03em", "$description": "Hero h1" },
+      "heading": { "$value": "-0.02em", "$description": "Section h2s" },
+      "normal":  { "$value": "0em",     "$description": "Default / body text" },
+      "logo":    { "$value": "0.04em",  "$description": "PCOI logo, orbit node labels" },
+      "label":   { "$value": "0.06em",  "$description": "Form labels, comparison headers" },
+      "badge":   { "$value": "0.08em",  "$description": "Hero badge" },
+      "section": { "$value": "0.1em",   "$description": "Section labels (The Problem, How It Works, etc.)" }
+    }
+  }
+}