Cloodle design system tokens for colors, typography, spacing, and components. Use when styling Cloodle interfaces, creating CSS, or implementing consistent visual design across the platform.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
reference.mdApply consistent visual design across all Cloodle platform interfaces using these design tokens.
See reference.md for the complete token definitions.
/* Primary accent */
background: var(--cloodle-coral);
/* Grounded CTA */
background: var(--cloodle-forest);
/* Warm background */
background: var(--cloodle-white); /* #FAF8F5, not stark white */
/* Headings */
font-family: var(--font-display); /* Outfit */
/* Body text */
font-family: var(--font-body); /* Source Serif Pro */
/* UI elements */
font-family: var(--font-ui); /* Inter */
/* Use semantic spacing tokens */
padding: var(--space-rest); /* 24px - inside cards */
margin-bottom: var(--space-settle); /* 32px - between cards */
Map tokens to UIkit variables in SCSS.
Map tokens to Bootstrap/Boost variables.
Use CSS custom properties directly.