@forumone/create-throughline 0.2.1 → 0.3.0

package/dist/templates/with-reference-ds/design-system/src/components/Stats/Stats.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx'
+import styles from './Stats.module.css'
+
+export interface StatItem {
+  value: string
+  label: string
+  description?: string
+}
+
+export interface StatsProps {
+  eyebrow?: string
+  headline?: string
+  items: StatItem[]
+  className?: string
+}
+
+export function Stats({ eyebrow, headline, items, className }: StatsProps) {
+  return (
+    <section className={clsx(styles.stats, className)}>
+      <div className={styles.container}>
+        {eyebrow ? <p className={styles.eyebrow}>{eyebrow}</p> : null}
+        {headline ? <h2 className={styles.headline}>{headline}</h2> : null}
+        <dl className={clsx(styles.list, styles[`cols-${items.length}`])}>
+          {items.map((item) => (
+            <div key={`${item.value}-${item.label}`} className={styles.item}>
+              <dt className={styles.value}>{item.value}</dt>
+              <dd className={styles.label}>
+                <span className={styles.labelText}>{item.label}</span>
+                {item.description ? (
+                  <span className={styles.description}>{item.description}</span>
+                ) : null}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </section>
+  )
+}

package/dist/templates/with-reference-ds/design-system/src/components/Stats/index.ts

@@ -0,0 +1,2 @@
+export { Stats, type StatsProps, type StatItem } from './Stats.js'
+export { contract as statsContract } from './Stats.contract.js'

package/dist/templates/with-reference-ds/design-system/src/css-modules.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable import-x/no-default-export -- CSS Modules loaders emit a default export. */
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/Colors.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { colors } from '../tokens'
+import { FoundationPage } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Colors',
+}
+export default meta
+
+function cssVar(name: string): string {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase().replace(/\./g, '-')}`
+}
+
+const groups = ['neutral', 'brand', 'text', 'bg', 'border', 'state']
+
+export const Colors: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Colors"
+      intro="The palette is grouped by role: neutral ramp, brand accents, text, background, border, and state. Components read these as CSS custom properties so a brand override re-themes everything without touching component code."
+    >
+      {groups.map((group) => {
+        const entries = Object.entries(colors).filter(([k]) => k.startsWith(`color.${group}.`))
+        if (entries.length === 0) return null
+        return (
+          <section key={group} style={{ marginBottom: '2rem' }}>
+            <h2 style={{ fontSize: 'var(--font-size-lg)', margin: '0 0 0.75rem', textTransform: 'capitalize' }}>
+              {group}
+            </h2>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(9rem, 1fr))', gap: '0.75rem' }}>
+              {entries.map(([name, value]) => (
+                <div key={name} style={{ border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-md)', overflow: 'hidden' }}>
+                  <div style={{ height: '3.5rem', background: value }} />
+                  <div style={{ padding: '0.5rem' }}>
+                    <div style={{ fontFamily: 'var(--font-family-mono)', fontSize: 'var(--font-size-xs)' }}>{cssVar(name)}</div>
+                    <div style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>{value}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )
+      })}
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/Elevation.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { FoundationPage } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Elevation',
+}
+export default meta
+
+export const Elevation: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Elevation"
+      intro="The reference design system uses flat depth: elevation is expressed through 1px borders and surface-color shifts rather than drop shadows. Reserve real shadows for transient overlays (modals, popovers)."
+    >
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(12rem, 1fr))', gap: '1rem' }}>
+        <div style={{ padding: '1.5rem', background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-lg)' }}>
+          <strong>Surface</strong>
+          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-secondary)', fontSize: 'var(--font-size-sm)' }}>
+            bg.primary + border.default
+          </p>
+        </div>
+        <div style={{ padding: '1.5rem', background: 'var(--color-bg-secondary)', border: '1px solid var(--color-border-strong)', borderRadius: 'var(--radius-lg)' }}>
+          <strong>Raised</strong>
+          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-secondary)', fontSize: 'var(--font-size-sm)' }}>
+            bg.secondary + border.strong
+          </p>
+        </div>
+        <div style={{ padding: '1.5rem', background: 'var(--color-bg-primary)', border: '1px solid var(--color-border-default)', borderRadius: 'var(--radius-lg)', boxShadow: '0 8px 24px rgba(0,0,0,0.12)' }}>
+          <strong>Overlay</strong>
+          <p style={{ margin: '0.5rem 0 0', color: 'var(--color-text-secondary)', fontSize: 'var(--font-size-sm)' }}>
+            shadow — modals / popovers only
+          </p>
+        </div>
+      </div>
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/LayoutContainers.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { layout } from '../tokens'
+import { FoundationPage, TokenTable } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Layout & Containers',
+}
+export default meta
+
+/** Token name → CSS custom property (mirrors build-tokens-css). */
+function cssVar(name: string): string {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase().replace(/\./g, '-')}`
+}
+
+const containers = Object.entries(layout).filter(([k]) => k.startsWith('layout.container.'))
+const breakpoints = Object.entries(layout).filter(([k]) => k.startsWith('layout.breakpoint.'))
+const gutter = layout['layout.gutter']
+const margin = layout['layout.margin']
+
+export const LayoutAndContainers: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Layout & Containers"
+      intro="Page content constrains to one of a small set of max-widths. The gutter is the space between grid columns; the page margin is the breathing room between the container and the viewport edge. Breakpoints are min-width and progressively widen the layout."
+    >
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '0 0 1rem' }}>Container widths</h2>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', marginBottom: '2.5rem' }}>
+        {containers.map(([name, value]) => (
+          <div key={name}>
+            <div
+              style={{
+                fontFamily: 'var(--font-family-mono)',
+                fontSize: 'var(--font-size-xs)',
+                color: 'var(--color-text-secondary)',
+                marginBottom: '0.25rem',
+              }}
+            >
+              {cssVar(name)} · {value}
+            </div>
+            <div
+              style={{
+                height: '2rem',
+                width: `min(100%, ${value})`,
+                background: 'var(--color-brand-primary)',
+                borderRadius: 'var(--radius-sm)',
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '0 0 1rem' }}>Gutter & page margin</h2>
+      <TokenTable
+        rows={[
+          {
+            name: cssVar('layout.gutter'),
+            value: gutter,
+            preview: <div style={{ height: '1rem', width: gutter, background: 'var(--color-brand-secondary)' }} />,
+          },
+          {
+            name: cssVar('layout.margin'),
+            value: margin,
+            preview: <div style={{ height: '1rem', width: margin, background: 'var(--color-brand-secondary)' }} />,
+          },
+        ]}
+      />
+
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '2.5rem 0 1rem' }}>Breakpoints</h2>
+      <TokenTable
+        rows={breakpoints.map(([name, value]) => ({
+          name: cssVar(name),
+          value,
+          preview: (
+            <div
+              style={{
+                height: '0.5rem',
+                width: `min(100%, calc(${value} / 4))`,
+                background: 'var(--color-border-strong)',
+              }}
+            />
+          ),
+        }))}
+      />
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/Radii.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { radii } from '../tokens'
+import { FoundationPage } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Radii',
+}
+export default meta
+
+function cssVar(name: string): string {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase().replace(/\./g, '-')}`
+}
+
+export const Radii: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Radii"
+      intro="Corner radii available to components. A brand may collapse this to a binary set (sharp vs. pill); the tokens stay the same so components don't change."
+    >
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(10rem, 1fr))', gap: '1rem' }}>
+        {Object.entries(radii).map(([name, value]) => (
+          <div key={name}>
+            <div
+              style={{
+                height: '5rem',
+                background: 'var(--color-bg-tertiary)',
+                border: '1px solid var(--color-border-strong)',
+                borderRadius: value,
+              }}
+            />
+            <div style={{ fontFamily: 'var(--font-family-mono)', fontSize: 'var(--font-size-xs)', marginTop: '0.5rem' }}>{cssVar(name)}</div>
+            <div style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>{value}</div>
+          </div>
+        ))}
+      </div>
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/Spacing.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { spacing } from '../tokens'
+import { FoundationPage } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Spacing',
+}
+export default meta
+
+function cssVar(name: string): string {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase().replace(/\./g, '-')}`
+}
+
+export const Spacing: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Spacing"
+      intro="A single spacing scale drives padding, margins, and gaps. Section and container spacing are semantic aliases on top of the numeric scale."
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        {Object.entries(spacing).map(([name, value]) => (
+          <div key={name} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            <span style={{ fontFamily: 'var(--font-family-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', width: '11rem', flexShrink: 0 }}>
+              {cssVar(name)}
+            </span>
+            <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-secondary)', width: '4rem', flexShrink: 0 }}>{value}</span>
+            <div style={{ height: '1rem', width: value, background: 'var(--color-brand-primary)', borderRadius: 'var(--radius-sm)' }} />
+          </div>
+        ))}
+      </div>
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/Typography.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { typography } from '../tokens'
+import { FoundationPage, TokenTable } from './_helpers.tsx'
+
+const meta: Meta = {
+  title: 'Foundations/Typography',
+}
+export default meta
+
+function cssVar(name: string): string {
+  return `--${name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase().replace(/\./g, '-')}`
+}
+
+const sizes = Object.entries(typography).filter(([k]) => k.startsWith('font.size.'))
+const families = Object.entries(typography).filter(([k]) => k.startsWith('font.family.'))
+const weights = Object.entries(typography).filter(([k]) => k.startsWith('font.weight.'))
+
+export const Typography: StoryObj = {
+  render: () => (
+    <FoundationPage
+      title="Typography"
+      intro="Type sizes form a single scale; hierarchy comes from size and weight, not from mixing typefaces. The font family is a token, so a brand swap (e.g. DM Sans) re-themes every component."
+    >
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '0 0 1rem' }}>Type scale</h2>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '2.5rem' }}>
+        {sizes.map(([name, value]) => (
+          <div key={name} style={{ display: 'flex', alignItems: 'baseline', gap: '1rem' }}>
+            <span style={{ fontFamily: 'var(--font-family-mono)', fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', width: '8rem', flexShrink: 0 }}>
+              {cssVar(name)}
+            </span>
+            <span style={{ fontSize: value, lineHeight: 1.1 }}>The quick brown fox</span>
+          </div>
+        ))}
+      </div>
+
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '0 0 1rem' }}>Families</h2>
+      <TokenTable
+        rows={families.map(([name, value]) => ({
+          name: cssVar(name),
+          value,
+          preview: <span style={{ fontFamily: value }}>Aa Bb Cc 123</span>,
+        }))}
+      />
+
+      <h2 style={{ fontSize: 'var(--font-size-xl)', margin: '2.5rem 0 1rem' }}>Weights</h2>
+      <TokenTable
+        rows={weights.map(([name, value]) => ({
+          name: cssVar(name),
+          value,
+          preview: <span style={{ fontWeight: value as number }}>The quick brown fox</span>,
+        }))}
+      />
+    </FoundationPage>
+  ),
+}

package/dist/templates/with-reference-ds/design-system/src/foundations/_helpers.tsx

@@ -0,0 +1,82 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+/** Shared layout chrome for every Foundations page. */
+export function FoundationPage({
+  title,
+  intro,
+  children,
+}: {
+  title: string
+  intro?: string
+  children: ReactNode
+}) {
+  return (
+    <div
+      style={{
+        fontFamily: 'var(--font-family-sans)',
+        color: 'var(--color-text-primary)',
+        background: 'var(--color-bg-primary)',
+        padding: '2rem',
+        maxWidth: '64rem',
+      }}
+    >
+      <h1 style={{ fontSize: 'var(--font-size-4xl)', margin: '0 0 0.5rem', lineHeight: 1.15 }}>
+        {title}
+      </h1>
+      {intro ? (
+        <p
+          style={{
+            color: 'var(--color-text-secondary)',
+            margin: '0 0 2rem',
+            maxWidth: '42rem',
+            lineHeight: 'var(--line-height-relaxed)',
+          }}
+        >
+          {intro}
+        </p>
+      ) : null}
+      {children}
+    </div>
+  )
+}
+
+const cell: CSSProperties = {
+  textAlign: 'left',
+  padding: '0.5rem 0.75rem',
+  borderBottom: '1px solid var(--color-border-default)',
+  verticalAlign: 'middle',
+}
+
+/** A simple token reference table: name, resolved value, and a preview cell. */
+export function TokenTable({
+  rows,
+}: {
+  rows: Array<{ name: string; value: string; preview?: ReactNode }>
+}) {
+  return (
+    <table
+      style={{
+        borderCollapse: 'collapse',
+        width: '100%',
+        fontSize: 'var(--font-size-sm)',
+      }}
+    >
+      <thead>
+        <tr>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Token</th>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Value</th>
+          <th style={{ ...cell, color: 'var(--color-text-muted)', fontWeight: 600 }}>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr key={row.name}>
+            <td style={{ ...cell, fontFamily: 'var(--font-family-mono)' }}>{row.name}</td>
+            <td style={{ ...cell, color: 'var(--color-text-secondary)' }}>{row.value}</td>
+            <td style={cell}>{row.preview}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/dist/templates/with-reference-ds/design-system/src/index.ts

@@ -0,0 +1,14 @@
+export { Hero, type HeroProps, type HeroVariant, type HeroBackground } from './components/Hero/index.js'
+export { SectionIntro, type SectionIntroProps, type SectionIntroAlignment } from './components/SectionIntro/index.js'
+export { Prose, type ProseProps, type ProseSize } from './components/Prose/index.js'
+export { MediaBlock, type MediaBlockProps, type MediaBlockAspect, type MediaBlockMedia } from './components/MediaBlock/index.js'
+export { Card, type CardProps } from './components/Card/index.js'
+export { CardGrid, type CardGridProps, type CardGridColumns } from './components/CardGrid/index.js'
+export { CTASection, type CTASectionProps, type CTASectionBackground } from './components/CTASection/index.js'
+export { Stats, type StatsProps, type StatItem } from './components/Stats/index.js'
+export { FAQ, type FAQProps, type FAQItem } from './components/FAQ/index.js'
+export { Quote, type QuoteProps, type QuoteSize } from './components/Quote/index.js'
+export { Divider, type DividerProps, type DividerSpacing } from './components/Divider/index.js'
+export { Spacer, type SpacerProps, type SpacerSize } from './components/Spacer/index.js'
+
+export * as tokens from './tokens/index.js'

package/dist/templates/with-reference-ds/design-system/src/styles/base.css

@@ -0,0 +1,55 @@
+/* Base element styles applied on top of reset.css + tokens.css. */
+
+html {
+  font-family: var(--font-family-sans);
+  font-size: 16px;
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background: var(--color-bg-primary);
+}
+
+body {
+  font-size: var(--font-size-base);
+}
+
+h1 {
+  font-size: var(--font-size-5xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+h2 {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+
+h3 {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+}
+
+h4 {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+}
+
+a {
+  color: var(--color-brand-primary);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+a:hover {
+  color: var(--color-brand-primary-hover);
+}
+
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  background: var(--color-bg-tertiary);
+  padding: 0.125em 0.25em;
+  border-radius: var(--radius-sm);
+}

package/dist/templates/with-reference-ds/design-system/src/styles/reset.css

@@ -0,0 +1,48 @@
+/* Minimal reset — based on modern-normalize with a few opinionated extras. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+img,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-brand-primary);
+  outline-offset: 2px;
+}

package/dist/templates/with-reference-ds/design-system/src/styles/tokens.css

@@ -0,0 +1,116 @@
+/* Auto-generated by scripts/build-tokens-css.ts. Do not edit by hand. */
+
+:root {
+  /* Colors */
+  --color-neutral-0: #FFFFFF;
+  --color-neutral-50: #FAFAFA;
+  --color-neutral-100: #F4F4F5;
+  --color-neutral-200: #E4E4E7;
+  --color-neutral-300: #D4D4D8;
+  --color-neutral-400: #A1A1AA;
+  --color-neutral-500: #71717A;
+  --color-neutral-600: #52525B;
+  --color-neutral-700: #3F3F46;
+  --color-neutral-800: #27272A;
+  --color-neutral-900: #18181B;
+  --color-neutral-1000: #000000;
+  --color-brand-primary: #2563EB;
+  --color-brand-primary-hover: #1D4ED8;
+  --color-brand-secondary: #0891B2;
+  --color-text-primary: #18181B;
+  --color-text-secondary: #52525B;
+  --color-text-muted: #71717A;
+  --color-text-inverse: #FFFFFF;
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #FAFAFA;
+  --color-bg-tertiary: #F4F4F5;
+  --color-bg-inverse: #18181B;
+  --color-border-default: #E4E4E7;
+  --color-border-strong: #D4D4D8;
+  --color-state-success: #16A34A;
+  --color-state-warning: #CA8A04;
+  --color-state-error: #DC2626;
+  --color-state-info: #2563EB;
+
+  /* Typography */
+  --font-family-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-family-mono: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-6xl: 3.75rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-tight: 1.15;
+  --line-height-snug: 1.3;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.65;
+  --line-height-loose: 1.8;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-px: 1px;
+  --spacing-0-5: 0.125rem;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-section: 5rem;
+  --spacing-container: 1.5rem;
+
+  /* Radii */
+  --radius-none: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Layout & Containers */
+  --layout-container-sm: 40rem;
+  --layout-container-md: 64rem;
+  --layout-container-lg: 80rem;
+  --layout-gutter: 1.5rem;
+  --layout-margin: 1rem;
+  --layout-breakpoint-sm: 40rem;
+  --layout-breakpoint-md: 48rem;
+  --layout-breakpoint-lg: 64rem;
+  --layout-breakpoint-xl: 80rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #FAFAFA;
+    --color-text-secondary: #A1A1AA;
+    --color-text-muted: #71717A;
+    --color-bg-primary: #18181B;
+    --color-bg-secondary: #27272A;
+    --color-bg-tertiary: #3F3F46;
+    --color-bg-inverse: #FAFAFA;
+    --color-border-default: #3F3F46;
+    --color-border-strong: #52525B;
+  }
+}