Thicket Design System

A comprehensive design token system with Bauhaus theme, built with Style Dictionary.

🎨 Features

- Complete Color System: 66 colors across 6 families (Blue, Red, Green, Yellow, Purple, Orange, Gray)
- Semantic Colors: Predefined color combinations for consistent UI patterns
- Typography: Trispace (display) + Noto Sans (body) font combination
- Spacing Scale: Consistent spacing values (0-12 scale)
- Multi-Platform: CSS variables, JavaScript modules, iOS, Android, and more
- Visual Reference: Interactive HTML documentation

📦 Installation

$3

``bash
npm install @jennifer-spriggs/thicket-design-system
`

$3

`html
rel="stylesheet"
href="https://unpkg.com/@jennifer-spriggs/thicket-design-system@1.0.0/build/css/thicket.css"
/>

`

$3

`bash


Copy the built files to your project


cp node_modules/@jennifer-spriggs/thicket-design-system/build/css/thicket.css ./css/
cp node_modules/@jennifer-spriggs/thicket-design-system/build/js/thicket.js ./js/
`

🚀 Usage

$3

`css
.my-component {
background-color: var(--thicket-bauhaus-color-blue-500);
color: var(--thicket-bauhaus-color-gray-50);
font-family: var(--thicket-font-sans);
padding: var(--thicket-dimension-4);
}
`

$3

`javascript
import {
ThicketBauhausColorBlue500,
ThicketBauhausColorGray50,
} from "@jennifer-spriggs/thicket-design-system";

const styles = {
backgroundColor: ThicketBauhausColorBlue500,
color: ThicketBauhausColorGray50,
};
`

$3

`html












`

🎯 Design Tokens

$3

- Primary: Blue family (50-950 scale)
- Semantic: Brand, accent, positive, warning, negative
- Neutral: Gray family for text and backgrounds

$3

- Display: Trispace (monospace) for headings
- Body: Noto Sans (sans-serif) for content
- Weights: Light, Regular, Bold

$3

- Scale: 0-12 (4px increments)
- Values: 0px, 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 44px, 48px

🛠 Development

`bash


Install dependencies

npm install

Build design tokens

npm run build

Watch for changes

npm run dev

Clean build directory

npm run clean
`

📁 Project Structure

`
thicket-design-system/
├── tokens/ # Design token definitions
│ ├── bauhaus/
│ │ └── colors.json # Color tokens
│ ├── dimensions.json # Spacing tokens
│ ├── text.json # Typography tokens
│ └── object-values.json # Complex tokens
├── build/ # Generated output
│ ├── css/ # CSS variables
│ ├── js/ # JavaScript modules
│ ├── ios/ # iOS tokens
│ └── android/ # Android tokens
├── design-system-reference.html # Visual documentation
└── config.json # Style Dictionary config
`

🎨 Visual Reference

Open design-system-reference.html` in your browser to see:

- Complete color palettes with hex values
- Typography examples
- Spacing scale visualization
- Interactive copy-to-clipboard functionality

📝 License

MIT