Design Systems

This directory contains starter design systems for tokka.

v1 Systems

1. soft-saas (default) - Low contrast, friendly, rounded
2. corporate - High contrast, sharp, dense, professional
3. dark-mode - Dark-first design with vibrant accents
4. accessible - WCAG AAA compliant, high contrast
5. brutalist - Raw aesthetic, no radius, bold

System Structure

Each system directory contains:

system-name/
├── system.json           # System metadata
├── tokens/
│   ├── primitives.json   # Primitive tokens
│   ├── semantics.json    # Semantic tokens
│   └── components/       # Component tokens (optional, Tier 2)
└── preview/              # Preview assets
    ├── thumbnail.png
    └── README.md

Contributing Systems

The registry format supports 100+ systems. To contribute:

1. Follow the system quality bar:

   • Coherent color strategy (brand + neutrals + semantic states)
   • Typography set (body + heading scales)
   • Spacing, radius, motion, shadow policies

2. Test your system:

   tokka init --system your-system
   tokka build

3. Submit a PR with your system directory

System Quality Bar

Each system must include:

• Brand colors + neutral palette
• Semantic states (success, warning, error, info)
• Typography scale
• Spacing scale
• Radius policy
• Motion policy
• Shadow/elevation policy
• Both light and dark modes