skills.rest
astoeffer
astoefferCOMMUNITY
Explore all skills by this author →
GitHub

cloodle-design-tokens

Define design tokens for colors, typography, spacing, and components across platforms.

Updated Aug 27, 2026
Search Tags:#typography#ui#tokens#color#spacing#design-tokens
One-click install
npx skills add https://github.com/astoeffer/plugin-marketplace --skill cloodle-design-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cloodle-design-tokens
Source: https://github.com/astoeffer/plugin-marketplace/tree/main/plugins/cloodle-design-system/skills/design-tokens
Command: npx skills add https://github.com/astoeffer/plugin-marketplace --skill cloodle-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Centralizes design tokens for colors, typography, spacing, and components to ensure consistent styling across platforms.

Core Features & Use Cases

  • Color & Typography Tokens: Define a unified palette and typography scale.
  • Spacing & Borders: Consistent spacing and radii across components.
  • Cross-Platform Mapping: Map tokens to Kirby UIkit and Moodle Bootstrap equivalents.

Quick Start

Use tokens in CSS with var(--cloodle-*) variables and reference the provided reference.md for full token definitions.

Frequently Asked Questions about cloodle-design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens to maintain consistent styling across UI components?▼

Design tokens centralize colors, typography, spacing, and component styles as reusable CSS variables (var(--cloodle-*)) applied consistently across platforms. Reference the token definitions in reference.md to implement unified styling that ensures brand consistency and reduces duplicate style definitions.

Can I apply design tokens to Kirby CMS and Moodle pages?▼

Yes. Design tokens map to both Kirby UIkit and Moodle Bootstrap equivalents, enabling token-based styling across these platforms. Use the cross-platform mapping to apply the same token system whether building Kirby components, Moodle pages, or React web components.

What spacing and accessibility standards does this design system enforce?▼

The system uses an 8px breath-based spacing scale for consistent layouts and enforces a 4.5:1 contrast minimum for accessible typography and color combinations. These specifications ensure responsive, accessible designs that meet WCAG standards across all UI components.

How do I get started with CSS variables for design tokens?▼

Begin by referencing the token definitions in reference.md, then apply tokens in your CSS using var(--cloodle-*) variable syntax. The reference document provides the complete token palette for colors, typography, spacing, and borders ready to implement immediately.

Do design tokens work with React and web components?▼

Yes. Design tokens support cross-platform mapping including React and web components alongside Kirby UIkit and Moodle Bootstrap. CSS variable tokens function natively in all these frameworks for consistent component styling.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
pytagoraspublishingpytagoraspublishing

book

Manage LaTeX book structures via CLI for parts, chapters, sections, and appendices.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

visual-design-foundations

Establish design systems with typography scales, 8-point grids, and semantic color tokens.

Community
Intermediate
anthrilanthril
3

design-tokens

Generate W3C Design Tokens JSON and export CSS variables, Tailwind v4, and Style Dictionary formats.

Official
Advanced