@oneqode/design-system 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OneQode
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,37 @@
+# OneQode Design System
+
+Centralized design tokens for all OneQode projects.
+
+## Quick Start
+
+```bash
+pnpm install
+pnpm build:tokens    # Generate CSS, Tailwind, shadcn, and JSON outputs
+pnpm dev             # Start Starlight docs site
+```
+
+## Consuming Tokens
+
+**Any project (CSS):**
+```html
+<link rel="stylesheet" href="path/to/build/css/tokens.css">
+```
+
+**Tailwind projects (Astro, Nuxt):**
+```css
+@import "@oneqode/design-system/build/css/tailwind-theme.css";
+```
+
+**shadcn-vue projects:**
+```css
+@import "@oneqode/design-system/build/css/shadcn-vars.css";
+```
+
+## Build Outputs
+
+| File | Format | Consumers |
+|------|--------|-----------|
+| `build/css/tokens.css` | CSS custom properties | All projects |
+| `build/css/tailwind-theme.css` | Tailwind v4 @theme | Website, Frontier |
+| `build/css/shadcn-vars.css` | HSL variables | shadcn-vue projects |
+| `build/json/tokens.json` | Flat JSON | AI agents, scripts |

package/build/css/lagom-theme-custom.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+/* Lagom2 theme override - generated from OneQode Design System tokens.
+ * Deploy to: templates/lagom2/core/styles/<style>/assets/css/theme-custom.css
+ * Do not edit manually - regenerate with: pnpm build:tokens
+ */
+:root {
+  --brand-primary: #1774e0;
+  --brand-primary-gradient-end: #1774e0;
+  --brand-info: #1774e0;
+  --brand-info-gradient-end: #1774e0;
+  --brand-secondary: #00c1ff;
+  --brand-primary-lighter: #00c1ff;
+  --brand-success: #69fea2;
+  --brand-success-gradient-end: #69fea2;
+  --brand-warning: #fec33c;
+  --brand-warning-gradient-end: #fec33c;
+  --body-bg: #0d0f10;
+  --gray-base: rgba(255, 255, 255, 0.7);
+  --gray-lighter: #bbc4d0;
+  --gray-lighter-2: #a4acb6;
+  --font-family-base: Inter, system-ui, -apple-system, sans-serif;
+  --font-family-monospace: "Fira Code", ui-monospace, monospace;
+  --input-border-radius: 0.5rem;
+  --dropdown-border-radius: 0.5rem;
+  --alert-border-radius: 0.5rem;
+}

package/build/css/remake/tokens.css

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-border-dark: rgb(26, 28, 28); /** Default dark border */
+  --color-line: rgba(255, 255, 255, 0.1); /** Standard line/border - 10% white */
+  --color-line-faint: rgba(255, 255, 255, 0.05); /** Faint line/border - 5% white */
+  --color-divider: #ffffff08; /** Section divider */
+  --color-divider-soft: #ffffff05; /** Soft section divider */
+  --color-hover: rgba(255, 255, 255, 0.05); /** Hover overlay */
+  --color-tint: rgba(255, 255, 255, 0.02); /** Subtle tint overlay */
+  --color-overlay: rgba(255, 255, 255, 0.05); /** General overlay */
+  --color-primary: #1774e0; /** OneQode blue - primary CTA, links, active states */
+  --color-accent-cyan: #00c1ff; /** Secondary accent - highlights, secondary CTAs */
+  --color-accent-gold: #fec33c; /** Tertiary accent - badges, warnings */
+  --color-accent-green: #69fea2; /** Success states, positive indicators */
+  --color-muted: rgba(255, 255, 255, 0.7); /** Secondary text - 70% white opacity */
+  --color-subtle: #bbc4d0; /** Tertiary text - soft blue-gray */
+  --color-dim: #a4acb6; /** Quaternary text - dimmed blue-gray */
+  --color-bar-inactive: rgb(62, 70, 78); /** Inactive bar/strikethrough elements */
+  --color-dark: #0d0f10; /** Primary background */
+  --color-dark-deep: #0c0d0d; /** Deep background */
+  --color-dark-deeper: #090a0a; /** Deepest background */
+  --color-surface: #0c0d0d; /** Card/component surface */
+  --color-surface-elevated: rgb(15, 17, 18); /** Raised surface (modals, popovers) */
+  --color-surface-hover: rgb(25, 27, 28); /** Surface hover state */
+  --color-surface-inset: rgb(16, 18, 19); /** Inset/recessed surface */
+  --color-surface-badge: rgb(32, 35, 37); /** Badge background */
+  --radius: 0.5rem; /** Default border radius for cards and inputs */
+  --shadow-dropdown: 0 8px 40px rgba(255, 255, 255, 0.06); /** Dropdown panel shadow */
+  --shadow-avatar-glow: inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59; /** Avatar/icon glow effect */
+  --container-wide: 1400px; /** Wide layouts (3-col grids, special sections) */
+  --container-default: 1536px; /** Main sections, standard content */
+  --container-narrow: 900px; /** Forms, contact pages, narrower sections */
+  --container-medium: 850px; /** Logo strips, tech stack sections */
+  --container-narrower: 800px; /** Hero text, centered content blocks */
+  --container-text: 720px; /** Prose content, legal pages, CTAs */
+  --container-compact: 650px; /** Tight text blocks, centered descriptions */
+  --container-content: 600px; /** Paragraph descriptions, subtitles */
+  --spacing-section: 5rem; /** Standard spacing between page sections */
+  --font-sans: Inter, system-ui, -apple-system, sans-serif; /** Body text font stack */
+  --font-display: Manrope, system-ui, sans-serif; /** Heading/display font stack */
+  --font-mono: "Fira Code", ui-monospace, monospace; /** Code/monospace font stack */
+  --font-size-micro: 0.625rem; /** 10px - status badges, chart labels, mono captions */
+  --font-size-tiny: 0.6875rem; /** 11px - dashboard data, small card text */
+  --font-size-caption: 0.75rem; /** 12px - metadata labels, breadcrumbs, image captions */
+  --font-size-label: 0.875rem; /** 14px - data values, small UI text */
+  --font-size-nav: 0.9375rem; /** 15px - mobile navigation items */
+  --font-size-body: 1rem; /** 16px - standard body text */
+  --font-size-body-lg: 1.125rem; /** 18px - marketing descriptions, hero subtitles */
+  --font-size-subtitle: 1.25rem; /** 20px - feature titles, checklist items */
+  --font-size-quote: 1.625rem; /** 26px - pull quotes, testimonials */
+  --font-size-heading-sm: 1.75rem; /** 28px - mobile section headings, small titles */
+  --font-size-heading-md: 2rem; /** 32px - page titles (contact/legal), sub-headings */
+  --font-size-heading: 2.625rem; /** 42px - section headings (desktop) */
+  --font-size-hero-sm: 3.5rem; /** 56px - secondary hero headings */
+  --font-size-hero: 3.75rem; /** 60px - primary hero headings */
+  --font-size-display: 4.5rem; /** 72px - maximum display heading */
+  --font-weight-normal: 400; /** Normal body text */
+  --font-weight-medium: 500; /** Medium emphasis */
+  --font-weight-semibold: 600; /** Buttons, labels, subheadings */
+  --font-weight-bold: 700; /** Headings, strong emphasis */
+}

package/build/css/shadcn-vars.css

@@ -0,0 +1,31 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --background: 0 0% 4%;
+  --foreground: 0 0% 98%;
+  --card: 0 0% 3%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 4%;
+  --popover-foreground: 0 0% 98%;
+  --primary: 211 78% 49%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 10%;
+  --secondary-foreground: 0 0% 98%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 0 0% 64%;
+  --accent: 193 100% 50%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 15%;
+  --input: 0 0% 15%;
+  --ring: 211 78% 49%;
+  --radius: 0.5rem;
+  --chart-1: 211 78% 49%;
+  --chart-2: 193 100% 50%;
+  --chart-3: 45 97% 61%;
+  --chart-4: 145 91% 70%;
+  --chart-5: 0 84% 60%;
+}

package/build/css/tailwind-theme.css

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+@theme {
+  --color-border-dark: rgb(26, 28, 28);
+  --color-line: rgba(255, 255, 255, 0.1);
+  --color-line-faint: rgba(255, 255, 255, 0.05);
+  --color-divider: #ffffff08;
+  --color-divider-soft: #ffffff05;
+  --color-hover: rgba(255, 255, 255, 0.05);
+  --color-tint: rgba(255, 255, 255, 0.02);
+  --color-overlay: rgba(255, 255, 255, 0.05);
+  --color-primary: #1774e0;
+  --color-accent-cyan: #00c1ff;
+  --color-accent-gold: #fec33c;
+  --color-accent-green: #69fea2;
+  --color-muted: rgba(255, 255, 255, 0.7);
+  --color-subtle: #bbc4d0;
+  --color-dim: #a4acb6;
+  --color-bar-inactive: rgb(62, 70, 78);
+  --color-dark: #0d0f10;
+  --color-dark-deep: #0c0d0d;
+  --color-dark-deeper: #090a0a;
+  --color-surface: #0c0d0d;
+  --color-surface-elevated: rgb(15, 17, 18);
+  --color-surface-hover: rgb(25, 27, 28);
+  --color-surface-inset: rgb(16, 18, 19);
+  --color-surface-badge: rgb(32, 35, 37);
+  --radius: 0.5rem;
+  --shadow-dropdown: 0 8px 40px rgba(255, 255, 255, 0.06);
+  --shadow-avatar-glow: inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59;
+  --container-wide: 1400px;
+  --container-default: 1536px;
+  --container-narrow: 900px;
+  --container-medium: 850px;
+  --container-narrower: 800px;
+  --container-text: 720px;
+  --container-compact: 650px;
+  --container-content: 600px;
+  --spacing-section: 5rem;
+  --font-sans: Inter, system-ui, -apple-system, sans-serif;
+  --font-display: Manrope, system-ui, sans-serif;
+  --font-mono: "Fira Code", ui-monospace, monospace;
+  --font-size-micro: 0.625rem;
+  --font-size-tiny: 0.6875rem;
+  --font-size-caption: 0.75rem;
+  --font-size-label: 0.875rem;
+  --font-size-nav: 0.9375rem;
+  --font-size-body: 1rem;
+  --font-size-body-lg: 1.125rem;
+  --font-size-subtitle: 1.25rem;
+  --font-size-quote: 1.625rem;
+  --font-size-heading-sm: 1.75rem;
+  --font-size-heading-md: 2rem;
+  --font-size-heading: 2.625rem;
+  --font-size-hero-sm: 3.5rem;
+  --font-size-hero: 3.75rem;
+  --font-size-display: 4.5rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+}

package/build/css/tokens.css

@@ -0,0 +1,64 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-border-dark: rgb(26, 28, 28); /** Default dark border */
+  --color-line: rgba(255, 255, 255, 0.1); /** Standard line/border - 10% white */
+  --color-line-faint: rgba(255, 255, 255, 0.05); /** Faint line/border - 5% white */
+  --color-divider: #ffffff08; /** Section divider */
+  --color-divider-soft: #ffffff05; /** Soft section divider */
+  --color-hover: rgba(255, 255, 255, 0.05); /** Hover overlay */
+  --color-tint: rgba(255, 255, 255, 0.02); /** Subtle tint overlay */
+  --color-overlay: rgba(255, 255, 255, 0.05); /** General overlay */
+  --color-primary: #1774e0; /** OneQode blue - primary CTA, links, active states */
+  --color-accent-cyan: #00c1ff; /** Secondary accent - highlights, secondary CTAs */
+  --color-accent-gold: #fec33c; /** Tertiary accent - badges, warnings */
+  --color-accent-green: #69fea2; /** Success states, positive indicators */
+  --color-muted: rgba(255, 255, 255, 0.7); /** Secondary text - 70% white opacity */
+  --color-subtle: #bbc4d0; /** Tertiary text - soft blue-gray */
+  --color-dim: #a4acb6; /** Quaternary text - dimmed blue-gray */
+  --color-bar-inactive: rgb(62, 70, 78); /** Inactive bar/strikethrough elements */
+  --color-dark: #0d0f10; /** Primary background */
+  --color-dark-deep: #0c0d0d; /** Deep background */
+  --color-dark-deeper: #090a0a; /** Deepest background */
+  --color-surface: #0c0d0d; /** Card/component surface */
+  --color-surface-elevated: rgb(15, 17, 18); /** Raised surface (modals, popovers) */
+  --color-surface-hover: rgb(25, 27, 28); /** Surface hover state */
+  --color-surface-inset: rgb(16, 18, 19); /** Inset/recessed surface */
+  --color-surface-badge: rgb(32, 35, 37); /** Badge background */
+  --radius: 0.5rem; /** Default border radius for cards and inputs */
+  --shadow-dropdown: 0 8px 40px rgba(255, 255, 255, 0.06); /** Dropdown panel shadow */
+  --shadow-avatar-glow: inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59; /** Avatar/icon glow effect */
+  --container-wide: 1400px; /** Wide layouts (3-col grids, special sections) */
+  --container-default: 1536px; /** Main sections, standard content */
+  --container-narrow: 900px; /** Forms, contact pages, narrower sections */
+  --container-medium: 850px; /** Logo strips, tech stack sections */
+  --container-narrower: 800px; /** Hero text, centered content blocks */
+  --container-text: 720px; /** Prose content, legal pages, CTAs */
+  --container-compact: 650px; /** Tight text blocks, centered descriptions */
+  --container-content: 600px; /** Paragraph descriptions, subtitles */
+  --spacing-section: 5rem; /** Standard spacing between page sections */
+  --font-sans: Inter, system-ui, -apple-system, sans-serif; /** Body text font stack */
+  --font-display: Manrope, system-ui, sans-serif; /** Heading/display font stack */
+  --font-mono: "Fira Code", ui-monospace, monospace; /** Code/monospace font stack */
+  --font-size-micro: 0.625rem; /** 10px - status badges, chart labels, mono captions */
+  --font-size-tiny: 0.6875rem; /** 11px - dashboard data, small card text */
+  --font-size-caption: 0.75rem; /** 12px - metadata labels, breadcrumbs, image captions */
+  --font-size-label: 0.875rem; /** 14px - data values, small UI text */
+  --font-size-nav: 0.9375rem; /** 15px - mobile navigation items */
+  --font-size-body: 1rem; /** 16px - standard body text */
+  --font-size-body-lg: 1.125rem; /** 18px - marketing descriptions, hero subtitles */
+  --font-size-subtitle: 1.25rem; /** 20px - feature titles, checklist items */
+  --font-size-quote: 1.625rem; /** 26px - pull quotes, testimonials */
+  --font-size-heading-sm: 1.75rem; /** 28px - mobile section headings, small titles */
+  --font-size-heading-md: 2rem; /** 32px - page titles (contact/legal), sub-headings */
+  --font-size-heading: 2.625rem; /** 42px - section headings (desktop) */
+  --font-size-hero-sm: 3.5rem; /** 56px - secondary hero headings */
+  --font-size-hero: 3.75rem; /** 60px - primary hero headings */
+  --font-size-display: 4.5rem; /** 72px - maximum display heading */
+  --font-weight-normal: 400; /** Normal body text */
+  --font-weight-medium: 500; /** Medium emphasis */
+  --font-weight-semibold: 600; /** Buttons, labels, subheadings */
+  --font-weight-bold: 700; /** Headings, strong emphasis */
+}

package/build/json/tokens.json

@@ -0,0 +1,60 @@
+{
+  "color-border-dark": "rgb(26, 28, 28)",
+  "color-line": "rgba(255, 255, 255, 0.1)",
+  "color-line-faint": "rgba(255, 255, 255, 0.05)",
+  "color-divider": "#ffffff08",
+  "color-divider-soft": "#ffffff05",
+  "color-hover": "rgba(255, 255, 255, 0.05)",
+  "color-tint": "rgba(255, 255, 255, 0.02)",
+  "color-overlay": "rgba(255, 255, 255, 0.05)",
+  "color-primary": "#1774e0",
+  "color-accent-cyan": "#00c1ff",
+  "color-accent-gold": "#fec33c",
+  "color-accent-green": "#69fea2",
+  "color-muted": "rgba(255, 255, 255, 0.7)",
+  "color-subtle": "#bbc4d0",
+  "color-dim": "#a4acb6",
+  "color-bar-inactive": "rgb(62, 70, 78)",
+  "color-dark": "#0d0f10",
+  "color-dark-deep": "#0c0d0d",
+  "color-dark-deeper": "#090a0a",
+  "color-surface": "#0c0d0d",
+  "color-surface-elevated": "rgb(15, 17, 18)",
+  "color-surface-hover": "rgb(25, 27, 28)",
+  "color-surface-inset": "rgb(16, 18, 19)",
+  "color-surface-badge": "rgb(32, 35, 37)",
+  "radius": "0.5rem",
+  "shadow-dropdown": "0 8px 40px rgba(255, 255, 255, 0.06)",
+  "shadow-avatar-glow": "inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59",
+  "container-wide": "1400px",
+  "container-default": "1536px",
+  "container-narrow": "900px",
+  "container-medium": "850px",
+  "container-narrower": "800px",
+  "container-text": "720px",
+  "container-compact": "650px",
+  "container-content": "600px",
+  "spacing-section": "5rem",
+  "font-sans": "Inter, system-ui, -apple-system, sans-serif",
+  "font-display": "Manrope, system-ui, sans-serif",
+  "font-mono": "\"Fira Code\", ui-monospace, monospace",
+  "font-size-micro": "0.625rem",
+  "font-size-tiny": "0.6875rem",
+  "font-size-caption": "0.75rem",
+  "font-size-label": "0.875rem",
+  "font-size-nav": "0.9375rem",
+  "font-size-body": "1rem",
+  "font-size-body-lg": "1.125rem",
+  "font-size-subtitle": "1.25rem",
+  "font-size-quote": "1.625rem",
+  "font-size-heading-sm": "1.75rem",
+  "font-size-heading-md": "2rem",
+  "font-size-heading": "2.625rem",
+  "font-size-hero-sm": "3.5rem",
+  "font-size-hero": "3.75rem",
+  "font-size-display": "4.5rem",
+  "font-weight-normal": "400",
+  "font-weight-medium": "500",
+  "font-weight-semibold": "600",
+  "font-weight-bold": "700"
+}

package/build/md/design-tokens.md

@@ -0,0 +1,104 @@
+## OneQode Design Tokens
+
+> Source of truth: `oneqode-design-system/build/json/tokens.json`
+> Generated: 2026-04-22
+> Auto-synced to `.claude-plugin/oneqode-workspace/data/design-tokens.md` on each build.
+> If values here seem wrong, rebuild with `pnpm build:tokens` in the design system repo.
+
+### Brand Colors
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| primary | --color-primary | #1774e0 | OneQode blue - primary CTA, links, active states |
+| accent-cyan | --color-accent-cyan | #00c1ff | Secondary accent - highlights, secondary CTAs |
+| accent-gold | --color-accent-gold | #fec33c | Tertiary accent - badges, warnings |
+| accent-green | --color-accent-green | #69fea2 | Success states, positive indicators |
+
+### Surface Colors
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| dark | --color-dark | #0d0f10 | Primary background |
+| dark-deep | --color-dark-deep | #0c0d0d | Deep background |
+| dark-deeper | --color-dark-deeper | #090a0a | Deepest background |
+| surface | --color-surface | #0c0d0d | Card/component surface |
+| surface-elevated | --color-surface-elevated | rgb(15, 17, 18) | Raised surface (modals, popovers) |
+| surface-hover | --color-surface-hover | rgb(25, 27, 28) | Surface hover state |
+| surface-inset | --color-surface-inset | rgb(16, 18, 19) | Inset/recessed surface |
+| surface-badge | --color-surface-badge | rgb(32, 35, 37) | Badge background |
+
+### Content Colors
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| muted | --color-muted | rgba(255, 255, 255, 0.7) | Secondary text - 70% white opacity |
+| subtle | --color-subtle | #bbc4d0 | Tertiary text - soft blue-gray |
+| dim | --color-dim | #a4acb6 | Quaternary text - dimmed blue-gray |
+| bar-inactive | --color-bar-inactive | rgb(62, 70, 78) | Inactive bar/strikethrough elements |
+
+### Border Colors
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| border-dark | --color-border-dark | rgb(26, 28, 28) | Default dark border |
+| line | --color-line | rgba(255, 255, 255, 0.1) | Standard line/border - 10% white |
+| line-faint | --color-line-faint | rgba(255, 255, 255, 0.05) | Faint line/border - 5% white |
+| divider | --color-divider | #ffffff08 | Section divider |
+| divider-soft | --color-divider-soft | #ffffff05 | Soft section divider |
+| hover | --color-hover | rgba(255, 255, 255, 0.05) | Hover overlay |
+| tint | --color-tint | rgba(255, 255, 255, 0.02) | Subtle tint overlay |
+| overlay | --color-overlay | rgba(255, 255, 255, 0.05) | General overlay |
+
+### Typography - Families
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| sans | --font-sans | Inter, system-ui, -apple-system, sans-serif | Body text font stack |
+| display | --font-display | Manrope, system-ui, sans-serif | Heading/display font stack |
+| mono | --font-mono | "Fira Code", ui-monospace, monospace | Code/monospace font stack |
+
+### Typography - Scale
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| micro | --font-size-micro | 0.625rem | 10px - status badges, chart labels, mono captions |
+| tiny | --font-size-tiny | 0.6875rem | 11px - dashboard data, small card text |
+| caption | --font-size-caption | 0.75rem | 12px - metadata labels, breadcrumbs, image captions |
+| label | --font-size-label | 0.875rem | 14px - data values, small UI text |
+| nav | --font-size-nav | 0.9375rem | 15px - mobile navigation items |
+| body | --font-size-body | 1rem | 16px - standard body text |
+| body-lg | --font-size-body-lg | 1.125rem | 18px - marketing descriptions, hero subtitles |
+| subtitle | --font-size-subtitle | 1.25rem | 20px - feature titles, checklist items |
+| quote | --font-size-quote | 1.625rem | 26px - pull quotes, testimonials |
+| heading-sm | --font-size-heading-sm | 1.75rem | 28px - mobile section headings, small titles |
+| heading-md | --font-size-heading-md | 2rem | 32px - page titles (contact/legal), sub-headings |
+| heading | --font-size-heading | 2.625rem | 42px - section headings (desktop) |
+| hero-sm | --font-size-hero-sm | 3.5rem | 56px - secondary hero headings |
+| hero | --font-size-hero | 3.75rem | 60px - primary hero headings |
+| display | --font-size-display | 4.5rem | 72px - maximum display heading |
+
+### Typography - Weights
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| normal | --font-weight-normal | 400 | Normal body text |
+| medium | --font-weight-medium | 500 | Medium emphasis |
+| semibold | --font-weight-semibold | 600 | Buttons, labels, subheadings |
+| bold | --font-weight-bold | 700 | Headings, strong emphasis |
+
+### Containers
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| wide | --container-wide | 1400px | Wide layouts (3-col grids, special sections) |
+| default | --container-default | 1536px | Main sections, standard content |
+| narrow | --container-narrow | 900px | Forms, contact pages, narrower sections |
+| medium | --container-medium | 850px | Logo strips, tech stack sections |
+| narrower | --container-narrower | 800px | Hero text, centered content blocks |
+| text | --container-text | 720px | Prose content, legal pages, CTAs |
+| compact | --container-compact | 650px | Tight text blocks, centered descriptions |
+| content | --container-content | 600px | Paragraph descriptions, subtitles |
+
+### Spacing
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| section | --spacing-section | 5rem | Standard spacing between page sections |
+
+### Effects
+| Token | CSS Variable | Value | Usage |
+| --- | --- | --- | --- |
+| shadow-dropdown | --shadow-dropdown | 0 8px 40px rgba(255, 255, 255, 0.06) | Dropdown panel shadow |
+| shadow-avatar-glow | --shadow-avatar-glow | inset 0 11.46px 22.92px #ffffff14, inset 0 2.87px 2.87px #ffffff59 | Avatar/icon glow effect |
+| radius | --radius | 0.5rem | Default border radius for cards and inputs |

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@oneqode/design-system",
+  "version": "0.3.0",
+  "type": "module",
+  "description": "OneQode design tokens: CSS custom properties, Tailwind v4 theme, shadcn variables, and flat JSON.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneQode/oneqode-design-system.git"
+  },
+  "homepage": "https://github.com/OneQode/oneqode-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/OneQode/oneqode-design-system/issues"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "oneqode",
+    "css",
+    "tailwind",
+    "shadcn",
+    "style-dictionary"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "build/"
+  ],
+  "exports": {
+    "./tokens.css": "./build/css/tokens.css",
+    "./tailwind-theme.css": "./build/css/tailwind-theme.css",
+    "./shadcn-vars.css": "./build/css/shadcn-vars.css",
+    "./tokens.json": "./build/json/tokens.json",
+    "./remake.css": "./build/css/remake/tokens.css"
+  },
+  "devDependencies": {
+    "style-dictionary": "^5.4.0"
+  },
+  "scripts": {
+    "build:tokens": "style-dictionary build --config config/style-dictionary.config.mjs && pnpm build:agent-ref",
+    "build:agent-ref": "node scripts/generate-agent-reference.mjs",
+    "build:docs": "cd docs && pnpm build",
+    "build": "pnpm build:tokens && pnpm build:docs",
+    "dev": "cd docs && pnpm dev",
+    "preview": "cd docs && pnpm preview"
+  }
+}