cloodle-design-tokens
Cloodle Design Tokens
Apply consistent visual design across all Cloodle platform interfaces using these design tokens.
When to Use This Skill
- Creating new UI components for Cloodle
- Styling pages in Kirby CMS or Moodle
- Ensuring brand consistency across platforms
- Implementing responsive, accessible designs
Quick Reference
See reference.md for the complete token definitions.
Key Principles
- Warm and Grounding - Use earth tones (terracotta, forest, sand) as primary palette
- Breath-Based Spacing - Use the 8px breath unit for consistent rhythm
More from astoeffer/plugin-marketplace
moodle-standards
Moodle coding standards with PSR-12 compliance and Frankenstyle naming. Use when developing Moodle plugins, writing PHP code for Moodle, or ensuring code quality compliance.
9psr12-moodle
Automatically validate and fix Moodle PHP code for PSR-12 compliance with Moodle-specific exceptions (lowercase_with_underscores naming, frankenstyle prefixes). Activates when working with Moodle plugin PHP files or when code standards issues are detected.
4h5p-patterns
Create interactive H5P content for Moodle and web platforms. Use when building interactive exercises, quizzes, or multimedia learning content.
2ai-gateway
Build AI gateway services for routing and managing LLM requests. Use when implementing API proxies, rate limiting, or multi-provider AI services.
2design-tokens
Manage design tokens for consistent theming across platforms. Use when defining colors, typography, spacing, or other design system values.
1chatbot-widget
Build embeddable chatbot widgets for web applications. Use when creating chat UIs, iframe embeds, or widget-based AI interfaces.
1