My Design System (@jimmythefish01/my-design-system)

The source of truth for all "vibecoded" apps.

🚀 Installation

1. npm install @jimmythefish01/my-design-system
2. Add to tailwind.config.js:

   presets: [require('@jimmythefish01/my-design-system')]
   
   ## 🎨 Token Usage Guide
   

1. Colors (Text & Backgrounds)

| Token | Semantic Use | | :--- | :--- | | bg-primary | Main buttons, active states | | bg-primary-subtle | Light backgrounds for badges/accents (No opacity hacks!) | | text-copy-primary | Main Headings | | text-copy-secondary | Body text | | text-copy-muted | Captions, timestamps |

2. Borders & Dividers

• Standard Cards: border (Defaults to light gray)
• Inputs: border-input (Slightly darker)
• Dividers: border-muted

3. Typography

• Headings: text-h1, text-h2, text-h3
• Body: text-body
• Legal/Caption: text-small

4. Shapes

• Buttons: rounded-btn
• Cards/Containers: rounded-card
• Inputs: rounded-input