How does the spacing system work?

The system utilizes a 'breath-based' 8px unit for consistent rhythm, providing semantic tokens like 'rest' (24px) and 'settle' (32px).

What platforms does this skill support?

It provides tokens and patterns specifically optimized for Kirby CMS, Moodle (Boost Union), and general web environments using CSS custom properties.

Does this skill help with accessibility?

Yes, it includes principles for maintaining a minimum 4.5:1 contrast ratio and provides specific accessible color tokens out of the box.

Can I use these tokens in React projects?

Yes, the tokens are designed to be used as standard CSS custom properties (variables) which are compatible with React, Web Components, and vanilla JavaScript.

Cloodle Design Tokens

Name: Cloodle Design Tokens
Author: astoeffer

byastoeffer

Design Tools

Standardizes visual design across Cloodle platforms using specialized design tokens for colors, typography, and spacing.

About

This skill provides a comprehensive set of design tokens and implementation patterns for the Cloodle design system, ensuring visual consistency across various environments like Kirby CMS, Moodle, and modern web frameworks. It allows developers to quickly apply brand-compliant styling—from the warm and grounding color palette to breath-based spacing units—while maintaining accessibility standards and intentional motion principles across the entire Cloodle ecosystem.

Key Features

Comprehensive design token library for colors, typography, and spacing
0 GitHub stars
Platform-specific mapping for Kirby CMS (UIkit) and Moodle (Boost Union)
Semantic spacing system based on an 8px 'breath' unit
Built-in accessibility guidance for contrast and readability
Implementation-ready CSS variables for React and Web Components

Use Cases

Onboarding new developers to the Cloodle brand identity and visual patterns
Developing consistent UI components for the Cloodle platform
Styling custom pages within Kirby CMS or Moodle environments

About

Key Features

Comprehensive design token library for colors, typography, and spacing
0 GitHub stars
Platform-specific mapping for Kirby CMS (UIkit) and Moodle (Boost Union)
Semantic spacing system based on an 8px 'breath' unit
Built-in accessibility guidance for contrast and readability
Implementation-ready CSS variables for React and Web Components

Use Cases

Onboarding new developers to the Cloodle brand identity and visual patterns
Developing consistent UI components for the Cloodle platform
Styling custom pages within Kirby CMS or Moodle environments