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

0•

デザインツール

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

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.

主な機能

01Comprehensive design token library for colors, typography, and spacing

020 GitHub stars

03Platform-specific mapping for Kirby CMS (UIkit) and Moodle (Boost Union)

04Semantic spacing system based on an 8px 'breath' unit

05Built-in accessibility guidance for contrast and readability

06Implementation-ready CSS variables for React and Web Components

ユースケース

01Onboarding new developers to the Cloodle brand identity and visual patterns

02Developing consistent UI components for the Cloodle platform

03Styling custom pages within Kirby CMS or Moodle environments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add astoeffer/plugin-marketplace design-tokens

For use in Claude.ai and ChatGPT

Download Skill