@thru/design-system 0.1.19

package/README.md

@@ -0,0 +1,199 @@
+# @thru/design-system
+
+Thru Design System - Complete design tokens, components, and utilities for building Thru-branded applications.
+
+## Installation
+
+```bash
+npm install @thru/design-system
+# or
+pnpm add @thru/design-system
+```
+
+## Quick Start
+
+### 1. Configure Tailwind CSS v4
+
+The design system uses Tailwind CSS v4 with CSS-first configuration. Import the theme CSS in your main stylesheet:
+
+**In your `globals.css` or main CSS file:**
+
+```css
+@import "tailwindcss";
+@import "@thru/design-system/tailwind.css";
+
+/* Use @source to scan the design system package for class usage */
+@source "../node_modules/@thru/design-system/src";
+```
+
+**Important notes:**
+- Import `tailwindcss` **first**, then the design system CSS
+- The `@source` directive tells Tailwind v4 to scan the design system's source files for class names
+- Tailwind v4 automatically detects your app files (`app/`, `src/`, etc.), so you don't need `@source` for those
+- The `@source` path should point to the `src` folder (not `dist`), so Tailwind can scan the original TypeScript/JSX files
+
+**Optional: `tailwind.config.js`**
+
+You typically don't need a `tailwind.config.js` file with Tailwind v4. If you do need one for other reasons, keep it minimal:
+
+```javascript
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // Content paths are defined in CSS via @source directive
+  // This file is only needed for other Tailwind plugins or custom config
+};
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Input, Card } from '@thru/design-system';
+
+export default function MyPage() {
+  return (
+    <Card>
+      <Input label="Email" placeholder="> Email" />
+      <Button variant="primary" className="mt-4">
+        JOIN THE FLOCK
+      </Button>
+    </Card>
+  );
+}
+```
+
+## Color Usage
+
+### Stone Scale (Neutrals)
+```tsx
+// Background
+<div className="bg-stone-0">Light background</div>
+<div className="bg-stone-100">Light gray background</div>
+
+// Text
+<p className="text-stone-700">Dark text</p>
+<p className="text-stone-600">Medium-dark text</p>
+```
+
+### Brick (Primary Brand Color)
+```tsx
+<button className="bg-thru-brick text-white">
+  Primary Action
+</button>
+```
+
+### Secondary Colors
+```tsx
+<div className="bg-thru-saffron-400">Saffron accent</div>
+<div className="bg-thru-ocean-400">Ocean accent</div>
+<div className="bg-thru-forest-400">Forest accent</div>
+<div className="bg-thru-sand-400">Sand accent</div>
+```
+
+## Typography
+
+The design system uses Inter Tight as the primary font and JetBrains Mono for code.
+
+### Font Sizes
+
+```tsx
+<h1 className="text-headline-2xl font-extrabold">Headline 2XL</h1>
+<h2 className="text-headline-xl font-semibold">Headline XL</h2>
+<h3 className="text-headline-l font-semibold">Headline L</h3>
+<p className="text-body-m">Body text</p>
+<code className="font-mono text-body-s">Code snippet</code>
+```
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from '@thru/design-system';
+
+// Primary (default)
+<Button variant="primary">Action</Button>
+
+// Secondary (Brick color)
+<Button variant="secondary">Action</Button>
+
+// Outline
+<Button variant="outline">Action</Button>
+
+// Ghost
+<Button variant="ghost">Action</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+```
+
+### Input
+
+```tsx
+import { Input } from '@thru/design-system';
+
+// With label
+<Input label="Email" type="email" placeholder="Enter email" />
+
+// Without label
+<Input placeholder="> Email" />
+
+// Error state
+<Input error placeholder="Invalid input" />
+```
+
+### Card
+
+```tsx
+import { Card } from '@thru/design-system';
+
+// Default (with border)
+<Card variant="default">Content</Card>
+
+// Elevated (with shadow)
+<Card variant="elevated">Content</Card>
+
+// Outlined (thicker border)
+<Card variant="outlined">Content</Card>
+```
+
+## Design Tokens
+
+See [resources/design.md](../../resources/design.md) for complete design specifications including:
+- Color palette with hex values
+- Typography scale
+- Spacing system
+- Component guidelines
+- Brand usage rules
+
+## Fonts
+
+The design system uses **Inter Tight** as the primary font and **JetBrains Mono** for code/monospace text. 
+
+Font files are not included in this package. Font files are stored in the `resources/Fonts/` directory at the repository root. Each Next.js application should:
+1. Copy font files from `resources/Fonts/` to a static directory in the app
+2. Set up font loaders in the app using `next/font/local`
+
+See the wallet app implementation (`wallet/src/lib/fonts.ts`) for an example setup.
+
+## Troubleshooting
+
+### Classes from design system components not appearing
+
+If you see unstyled components (e.g., buttons without background colors), Tailwind may not be detecting classes from the design system package.
+
+**Solution:** Ensure the `@source` directive in your CSS file points to the correct path. The path is relative to your CSS file location:
+
+- If your CSS is in `app/globals.css`, use: `@source "../node_modules/@thru/design-system/src"`
+- If your CSS is in `src/styles/globals.css`, use: `@source "../../node_modules/@thru/design-system/src"`
+
+**Important:** 
+- The path should point to the `src` folder (not `dist`)
+- Tailwind v4 auto-detects your app files, so you only need `@source` for external packages
+- Make sure the import order is correct: `@import "tailwindcss"` first, then the design system CSS
+
+## License
+
+See package.json for license information.
+

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+    label?: string;
+    wrapperClassName?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'elevated' | 'outlined';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+type TextProps = {
+    [x: string]: unknown;
+    className?: string;
+    as?: React.ElementType;
+    bold?: boolean;
+    children?: React.ReactNode;
+};
+type TextComponent = React.FC<TextProps>;
+declare const Heading1: TextComponent;
+declare const Heading2: TextComponent;
+declare const Heading3: TextComponent;
+declare const Heading4: TextComponent;
+declare const Heading5: TextComponent;
+declare const Body1: TextComponent;
+declare const Body3: TextComponent;
+declare const Body4: TextComponent;
+declare const Body5: TextComponent;
+declare const Ui1: TextComponent;
+declare const Ui2: TextComponent;
+declare const Ui3: TextComponent;
+declare const Ui4: TextComponent;
+declare const Ui5: TextComponent;
+declare const Button1: TextComponent;
+
+export { Body1, Body3, Body4, Body5, Button, Button1, type ButtonProps, Card, type CardProps, Heading1, Heading2, Heading3, Heading4, Heading5, Input, type InputProps, Ui1, Ui2, Ui3, Ui4, Ui5 };

package/dist/index.js

@@ -0,0 +1,155 @@
+import React2 from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Button.tsx
+
+// src/utils.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var Button = React2.forwardRef(
+  ({ className, variant = "primary", size = "md", children, disabled, ...props }, ref) => {
+    const baseStyles = "font-semibold transition-colors focus:outline-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
+    const variants = {
+      primary: "bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse",
+      secondary: "bg-surface-brick text-text-primary-inverse hover:opacity-90",
+      outline: "border border-border-primary text-text-primary hover:bg-surface-lower",
+      ghost: "text-text-primary hover:bg-surface-lower"
+    };
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-6 py-3 text-base",
+      lg: "px-8 py-4 text-lg"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(baseStyles, variants[variant], sizes[size], className),
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React2.forwardRef(
+  ({ className, error, label, id, wrapperClassName, ...props }, ref) => {
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const inputRef = React2.useRef(null);
+    React2.useImperativeHandle(ref, () => inputRef.current, []);
+    const handleWrapperClick = () => {
+      inputRef.current?.focus();
+    };
+    const inputWrapper = /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "border bg-surface-higher p-4 transition-colors cursor-text flex items-center",
+          "focus-within:border-border-primary focus-within:bg-golden",
+          error ? "border-border-brand bg-surface-brick focus-within:bg-surface-brick" : "border-border-secondary",
+          "disabled:bg-surface-disabled disabled:cursor-not-allowed",
+          wrapperClassName
+        ),
+        onClick: handleWrapperClick,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            className: cn(
+              "w-full bg-transparent outline-none font-sans text-base",
+              "text-text-primary placeholder:text-text-tertiary",
+              "placeholder:font-mono",
+              "disabled:cursor-not-allowed",
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    );
+    if (label) {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            className: "block text-sm font-medium text-text-primary",
+            children: label
+          }
+        ),
+        inputWrapper
+      ] });
+    }
+    return inputWrapper;
+  }
+);
+Input.displayName = "Input";
+var Card = React2.forwardRef(
+  ({ className, variant = "default", children, ...props }, ref) => {
+    const variants = {
+      default: "bg-white border border-stone-300",
+      elevated: "bg-white shadow-lg border border-stone-300",
+      outlined: "bg-white border border-stone-800"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("p-6", variants[variant], className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var baseClasses = "text-current";
+var Base = ({
+  as = "p",
+  children,
+  className,
+  defaultClasses,
+  ...props
+}) => {
+  const { bold, ...propsWithoutBold } = props;
+  return React2.createElement(
+    as,
+    {
+      className: cn(baseClasses, defaultClasses, className),
+      ...propsWithoutBold
+    },
+    children
+  );
+};
+var TextStyle = (className, props) => {
+  const boldClass = props.bold ? className.bold : void 0;
+  return /* @__PURE__ */ jsx(
+    Base,
+    {
+      defaultClasses: cn(className.normal, boldClass),
+      ...props
+    }
+  );
+};
+var Heading1 = (props) => TextStyle({ normal: "type-heading-1", bold: "type-heading-1-bold" }, props);
+var Heading2 = (props) => TextStyle({ normal: "type-heading-2", bold: "type-heading-2-bold" }, props);
+var Heading3 = (props) => TextStyle({ normal: "type-heading-3", bold: "type-heading-3-bold" }, props);
+var Heading4 = (props) => TextStyle({ normal: "type-heading-4", bold: "type-heading-4-bold" }, props);
+var Heading5 = (props) => TextStyle({ normal: "type-heading-5", bold: "type-heading-5-bold" }, props);
+var Body1 = (props) => TextStyle({ normal: "type-body-1", bold: "type-body-1-bold" }, props);
+var Body3 = (props) => TextStyle({ normal: "type-body-3", bold: "type-body-3-bold" }, props);
+var Body4 = (props) => TextStyle({ normal: "type-body-4", bold: "type-body-4-bold" }, props);
+var Body5 = (props) => TextStyle({ normal: "type-body-5", bold: "type-body-5-bold" }, props);
+var Ui1 = (props) => TextStyle({ normal: "type-ui-1", bold: "type-ui-1-bold" }, props);
+var Ui2 = (props) => TextStyle({ normal: "type-ui-2", bold: "type-ui-2-bold" }, props);
+var Ui3 = (props) => TextStyle({ normal: "type-ui-3", bold: "type-ui-3-bold" }, props);
+var Ui4 = (props) => TextStyle({ normal: "type-ui-4", bold: "type-ui-4-bold" }, props);
+var Ui5 = (props) => TextStyle({ normal: "type-ui-5", bold: "type-ui-5-bold" }, props);
+var Button1 = (props) => TextStyle({ normal: "type-button-1", bold: "type-button-1-bold" }, props);
+
+export { Body1, Body3, Body4, Body5, Button, Button1, Card, Heading1, Heading2, Heading3, Heading4, Heading5, Input, Ui1, Ui2, Ui3, Ui4, Ui5 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts","../src/components/Button.tsx","../src/components/Input.tsx","../src/components/Card.tsx","../src/components/Text.tsx"],"names":["React","jsx"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Utility functions for the design system\n */\n\n/**\n * Combines class names, handling undefined/null values\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = 'primary', size = 'md', children, disabled, ...props }, ref) => {\n    const baseStyles = 'font-semibold transition-colors focus:outline-none cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed';\n    \n    const variants = {\n      primary: 'bg-surface-lower-inverse text-text-primary-inverse hover:bg-surface-higher-inverse',\n      secondary: 'bg-surface-brick text-text-primary-inverse hover:opacity-90',\n      outline: 'border border-border-primary text-text-primary hover:bg-surface-lower',\n      ghost: 'text-text-primary hover:bg-surface-lower',\n    };\n\n    const sizes = {\n      sm: 'px-3 py-1.5 text-sm',\n      md: 'px-6 py-3 text-base',\n      lg: 'px-8 py-4 text-lg',\n    };\n\n    return (\n      <button\n        ref={ref}\n        className={cn(baseStyles, variants[variant], sizes[size], className)}\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  error?: boolean;\n  label?: string;\n  wrapperClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, error, label, id, wrapperClassName, ...props }, ref) => {\n    const inputId = id || label?.toLowerCase().replace(/\\s+/g, '-');\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge refs - support both forwarded ref and internal ref\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    const handleWrapperClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const inputWrapper = (\n      <div\n        className={cn(\n          'border bg-surface-higher p-4 transition-colors cursor-text flex items-center',\n          'focus-within:border-border-primary focus-within:bg-golden',\n          error\n            ? 'border-border-brand bg-surface-brick focus-within:bg-surface-brick'\n            : 'border-border-secondary',\n          'disabled:bg-surface-disabled disabled:cursor-not-allowed',\n          wrapperClassName,\n        )}\n        onClick={handleWrapperClick}\n      >\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={cn(\n            'w-full bg-transparent outline-none font-sans text-base',\n            'text-text-primary placeholder:text-text-tertiary',\n            'placeholder:font-mono',\n            'disabled:cursor-not-allowed',\n            className\n          )}\n          {...props}\n        />\n      </div>\n    );\n\n    if (label) {\n      return (\n        <div className=\"space-y-2\">\n          <label\n            htmlFor={inputId}\n            className=\"block text-sm font-medium text-text-primary\"\n          >\n            {label}\n          </label>\n          {inputWrapper}\n        </div>\n      );\n    }\n\n    return inputWrapper;\n  }\n);\n\nInput.displayName = 'Input';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: 'default' | 'elevated' | 'outlined';\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant = 'default', children, ...props }, ref) => {\n    const variants = {\n      default: 'bg-white border border-stone-300',\n      elevated: 'bg-white shadow-lg border border-stone-300',\n      outlined: 'bg-white border border-stone-800',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('p-6', variants[variant], className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n","import React from 'react';\nimport { cn } from '../utils';\n\ntype TextProps = {\n  [x: string]: unknown;\n  className?: string;\n  as?: React.ElementType;\n  bold?: boolean;\n  children?: React.ReactNode;\n};\n\ntype TextComponent = React.FC<TextProps>;\n\nconst baseClasses = 'text-current';\n\nconst Base: React.FC<TextProps & { defaultClasses: string }> = ({\n  as = 'p',\n  children,\n  className,\n  defaultClasses,\n  ...props\n}) => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { bold, ...propsWithoutBold } = props;\n\n  return React.createElement(\n    as,\n    {\n      className: cn(baseClasses, defaultClasses, className),\n      ...propsWithoutBold,\n    },\n    children\n  );\n};\n\nconst TextStyle = (className: { normal: string; bold: string }, props: TextProps) => {\n  const boldClass = props.bold ? className.bold : undefined;\n  return (\n    <Base\n      defaultClasses={cn(className.normal, boldClass)}\n      {...props}\n    />\n  );\n};\n\nexport const Heading1: TextComponent = (props) =>\n  TextStyle({ normal: 'type-heading-1', bold: 'type-heading-1-bold' }, props);\n\nexport const Heading2: TextComponent = (props) =>\n  TextStyle({ normal: 'type-heading-2', bold: 'type-heading-2-bold' }, props);\n\nexport const Heading3: TextComponent = (props) =>\n  TextStyle({ normal: 'type-heading-3', bold: 'type-heading-3-bold' }, props);\n\nexport const Heading4: TextComponent = (props) =>\n  TextStyle({ normal: 'type-heading-4', bold: 'type-heading-4-bold' }, props);\n\nexport const Heading5: TextComponent = (props) =>\n  TextStyle({ normal: 'type-heading-5', bold: 'type-heading-5-bold' }, props);\n\nexport const Body1: TextComponent = (props) =>\n  TextStyle({ normal: 'type-body-1', bold: 'type-body-1-bold' }, props);\n\nexport const Body3: TextComponent = (props) =>\n  TextStyle({ normal: 'type-body-3', bold: 'type-body-3-bold' }, props);\n\nexport const Body4: TextComponent = (props) =>\n  TextStyle({ normal: 'type-body-4', bold: 'type-body-4-bold' }, props);\n\nexport const Body5: TextComponent = (props) =>\n  TextStyle({ normal: 'type-body-5', bold: 'type-body-5-bold' }, props);\n\nexport const Ui1: TextComponent = (props) =>\n  TextStyle({ normal: 'type-ui-1', bold: 'type-ui-1-bold' }, props);\n\nexport const Ui2: TextComponent = (props) =>\n  TextStyle({ normal: 'type-ui-2', bold: 'type-ui-2-bold' }, props);\n\nexport const Ui3: TextComponent = (props) =>\n  TextStyle({ normal: 'type-ui-3', bold: 'type-ui-3-bold' }, props);\n\nexport const Ui4: TextComponent = (props) =>\n  TextStyle({ normal: 'type-ui-4', bold: 'type-ui-4-bold' }, props);\n\nexport const Ui5: TextComponent = (props) =>\n  TextStyle({ normal: 'type-ui-5', bold: 'type-ui-5-bold' }, props);\n\nexport const Button1: TextComponent = (props) =>\n  TextStyle({ normal: 'type-button-1', bold: 'type-button-1-bold' }, props);\n\n"]}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@thru/design-system",
+  "version": "0.1.19",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tailwind.css": "./src/tailwind.css"
+  },
+  "files": [
+    "dist",
+    "src/tailwind.css",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "clean": "rm -rf dist"
+  }
+}

package/src/tailwind.css

@@ -0,0 +1,483 @@
+@theme {
+  /* ========================================
+     BREAKPOINTS
+     ======================================== */
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 840px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1600px;
+
+  /* ========================================
+     COLOR SCALES
+     ======================================== */
+
+  /* Steel (Neutral - Cool Gray) */
+  --color-steel-0: #f7f8f8;
+  --color-steel-100: #eaeef0;
+  --color-steel-200: #cdd5db;
+  --color-steel-300: #a4b3bc;
+  --color-steel-400: #7e93a0;
+  --color-steel-500: #5b6f7b;
+  --color-steel-600: #43515b;
+  --color-steel-700: #2b353b;
+  --color-steel-800: #151b1e;
+
+  /* Teal (Neutral - Warm Teal) */
+  --color-teal-0: #f9fbfb;
+  --color-teal-100: #eaf2f2;
+  --color-teal-200: #d1e1e1;
+  --color-teal-300: #a9c3c5;
+  --color-teal-400: #81a7a7;
+  --color-teal-500: #5e8787;
+  --color-teal-600: #456063;
+  --color-teal-700: #2d3e3e;
+  --color-teal-800: #151e1e;
+
+  /* Stone (Neutral - Alias to Teal for compatibility) */
+  --color-stone-0: var(--color-teal-0);
+  --color-stone-100: var(--color-teal-100);
+  --color-stone-200: var(--color-teal-200);
+  --color-stone-300: var(--color-teal-300);
+  --color-stone-400: var(--color-teal-400);
+  --color-stone-600: var(--color-teal-600);
+  --color-stone-700: var(--color-teal-700);
+  --color-stone-800: var(--color-teal-800);
+
+  /* Brick (Primary Brand Color) */
+  --color-brick-100: #fbdadc;
+  --color-brick-200: #f6acb0;
+  --color-brick-300: #ed787e;
+  --color-brick-400: #d33c43;
+
+  /* Thru Brick (Legacy naming) */
+  --color-thru-brick: var(--color-brick-200);
+  --color-thru-brick-alt: var(--color-brick-100);
+  --color-brick: var(--color-brick-200);
+
+  /* Sky (Blue) */
+  --color-sky-100: #cfeffc;
+  --color-sky-200: #8cd4f2;
+  --color-sky-300: #28a3d7;
+  --color-sky-400: #0279b1;
+
+  /* Grass (Green) */
+  --color-grass-100: #c2ebe8;
+  --color-grass-200: #75d1cc;
+  --color-grass-300: #239f97;
+  --color-grass-400: #0a766f;
+
+  /* Yellow (Saffron) */
+  --color-yellow-100: #fdefdd;
+  --color-yellow-200: #fde0ba;
+  --color-yellow-300: #fbc784;
+  --color-yellow-400: #ffad42;
+
+  /* Tan */
+  --color-tan-100: #f6ebe5;
+  --color-tan-200: #ebd5c7;
+  --color-tan-300: #ddb8a0;
+  --color-tan-400: #c98f69;
+
+  /* Sand */
+  --color-sand-100: #f6ebe5;
+  --color-sand-200: #ebd5c7;
+  --color-sand-300: #ddb8a0;
+  --color-sand-400: #c98f69;
+
+  /* Golden */
+  --color-golden: #ffffbd;
+
+  /* ========================================
+     SEMANTIC COLOR TOKENS
+     ======================================== */
+
+  /* Text Colors */
+  --color-text-primary: var(--color-steel-800);
+  --color-text-secondary: var(--color-teal-600);
+  --color-text-tertiary: var(--color-steel-400);
+  --color-text-brand: var(--color-brick-400);
+  --color-text-disabled: var(--color-steel-300);
+  --color-text-primary-inverse: var(--color-teal-0);
+  --color-text-secondary-inverse: var(--color-teal-200);
+  --color-text-tertiary-inverse: var(--color-teal-400);
+  --color-text-disabled-inverse: var(--color-steel-600);
+
+  /* Border Colors */
+  --color-border-primary: var(--color-teal-800);
+  --color-border-secondary: var(--color-teal-400);
+  --color-border-tertiary: var(--color-teal-200);
+  --color-border-brand: var(--color-brick-400);
+  --color-border-disabled: var(--color-steel-300);
+
+  /* Surface Colors */
+  --color-surface-higher: var(--color-teal-0);
+  --color-surface-primary: var(--color-teal-100);
+  --color-surface-lower: var(--color-teal-200);
+  --color-surface-disabled: var(--color-steel-100);
+  --color-surface-higher-inverse: var(--color-teal-600);
+  --color-surface-primary-inverse: var(--color-teal-700);
+  --color-surface-lower-inverse: var(--color-steel-800);
+
+  /* Surface Brand Colors */
+  --color-surface-brick: var(--color-brick-400);
+  --color-surface-sky: var(--color-sky-400);
+  --color-surface-grass: var(--color-grass-400);
+  --color-surface-yellow: var(--color-yellow-400);
+  --color-surface-tan: var(--color-tan-400);
+  --color-surface-sand: var(--color-sand-400);
+
+  /* ========================================
+     FONT FAMILIES
+     ======================================== */
+  --font-sans: var(--font-inter-tight);
+  --font-mono: var(--font-jetbrains-mono);
+
+  /* ========================================
+     FONT SIZES (for text-* utilities)
+     ======================================== */
+  --text-headline-2xl: 5rem;
+  --text-headline-xl: 4rem;
+  --text-headline-l: 3rem;
+  --text-headline-m: 2.5rem;
+  --text-headline-s: 2rem;
+  --text-headline-xs: 1.5rem;
+  --text-body-xl: 1.25rem;
+  --text-body-l: 1.125rem;
+  --text-body-m: 1rem;
+  --text-body-s: 0.875rem;
+  --text-body-xs: 0.75rem;
+
+  /* ========================================
+     BORDER WIDTH
+     ======================================== */
+  --border-width: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+}
+
+/* ========================================
+   TYPOGRAPHY CSS CLASSES
+   ======================================== */
+
+.type-heading-1 {
+  font-family: var(--font-sans);
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+  letter-spacing: -0.03125rem;
+  font-weight: 400;
+}
+
+@media (min-width: 600px) {
+  .type-heading-1 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 840px) {
+  .type-heading-1 {
+    font-size: 4rem;
+    line-height: 4rem;
+  }
+}
+
+.type-heading-1-bold {
+  font-weight: 600;
+}
+
+.type-heading-2 {
+  font-family: var(--font-sans);
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+  font-weight: 400;
+}
+
+@media (min-width: 600px) {
+  .type-heading-2 {
+    font-size: 2.75rem;
+    line-height: 2.75rem;
+  }
+}
+
+@media (min-width: 840px) {
+  .type-heading-2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+.type-heading-2-bold {
+  font-weight: 600;
+}
+
+.type-heading-3 {
+  font-family: var(--font-sans);
+  font-size: 2rem;
+  line-height: 2rem;
+  font-weight: 400;
+}
+
+@media (min-width: 600px) {
+  .type-heading-3 {
+    font-size: 2.25rem;
+    line-height: 2.25rem;
+  }
+}
+
+@media (min-width: 840px) {
+  .type-heading-3 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+.type-heading-3-bold {
+  font-weight: 600;
+}
+
+.type-heading-4 {
+  font-family: var(--font-sans);
+  font-size: 1.75rem;
+  line-height: 2rem;
+  font-weight: 400;
+}
+
+@media (min-width: 840px) {
+  .type-heading-4 {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+}
+
+.type-heading-4-bold {
+  font-weight: 600;
+}
+
+.type-heading-5 {
+  font-family: var(--font-sans);
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 400;
+}
+
+.type-heading-5-bold {
+  font-weight: 600;
+}
+
+.type-body-1 {
+  font-family: var(--font-sans);
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+}
+
+.type-body-1-bold {
+  font-weight: 600;
+}
+
+.type-body-3 {
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+
+@media (min-width: 1600px) {
+  .type-body-3 {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+.type-body-3-bold {
+  font-weight: 600;
+}
+
+.type-body-4 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+@media (min-width: 1600px) {
+  .type-body-4 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+.type-body-4-bold {
+  font-weight: 600;
+}
+
+.type-body-5 {
+  font-family: var(--font-sans);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@media (min-width: 1600px) {
+  .type-body-5 {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.type-body-5-bold {
+  font-weight: 600;
+}
+
+.type-ui-1 {
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  letter-spacing: -0.03125rem;
+}
+
+.type-ui-1-bold {
+  font-weight: 700;
+}
+
+.type-ui-2 {
+  font-family: var(--font-mono);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+  letter-spacing: -0.015625rem;
+}
+
+.type-ui-2-bold {
+  font-weight: 700;
+}
+
+.type-ui-3 {
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+
+.type-ui-3-bold {
+  font-weight: 700;
+}
+
+.type-ui-4 {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+.type-ui-4-bold {
+  font-weight: 700;
+}
+
+.type-ui-5 {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+}
+
+@media (min-width: 1600px) {
+  .type-ui-5 {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.type-ui-5-bold {
+  font-weight: 700;
+}
+
+.type-button-1 {
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+}
+
+.type-button-1-bold {
+  font-weight: 600;
+}
+
+/* ========================================
+   UTILITY CLASSES
+   ======================================== */
+
+.scrollbar-hide {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+/* ========================================
+   ANIMATIONS
+   ======================================== */
+
+.pressure-gauge {
+  animation: pressure-rise 2s ease-in-out 0.25s forwards;
+  transform-origin: 12.5px 43px;
+  transform: rotate(44deg);
+}
+
+@keyframes pressure-rise {
+  0% {
+    transform: rotate(44deg); /* 0 PSI */
+  }
+
+  /* Overshoot to near max */
+  40% {
+    transform: rotate(315deg); /* ~100 PSI */
+  }
+
+  /* First slight drop back */
+  60% {
+    transform: rotate(308deg); /* ~88 PSI */
+  }
+
+  /* Final settle at 80 PSI */
+  100% {
+    transform: rotate(312deg); /* ~90 PSI */
+  }
+}
+
+@keyframes slide-left-right {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(4px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes bounce-slow {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.animate-slide {
+  animation: slide-left-right 1.5s ease-in-out infinite;
+}
+
+.group:hover .group-hover\:animate-slide {
+  animation: slide-left-right 1.5s ease-in-out infinite;
+}
+
+.animate-bounce-slow {
+  animation: bounce-slow 3s ease-in-out infinite;
+}