thicket-design-system

v1.9.0

Published

7 months ago

Thicket Design System - A comprehensive design token system with Bauhaus theme

0High
0Medium
0Low

jenniferspriggs

design-system design-tokens style-dictionary bauhaus css-variables typography colors

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

Option 1: NPM Package (Recommended)

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

Option 2: CDN (No build process)

<link
  rel="stylesheet"
  href="https://unpkg.com/@jennifer-spriggs/[email protected]/build/css/thicket.css"
/>
<script src="https://unpkg.com/@jennifer-spriggs/[email protected]/build/js/thicket.js"></script>

Option 3: Direct Files (GitHub Pages/Static Sites)

# 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

CSS Variables (All Methods)

.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);
}

JavaScript/ES6 (NPM/CDN)

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

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

HTML (CDN/Direct Files)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="thicket.css" />
  </head>
  <body>
    <div class="my-component">Content</div>
    <script src="thicket.js"></script>
  </body>
</html>

🎯 Design Tokens

Colors

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

Typography

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

Spacing

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

🛠 Development

# 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