skills.rest
marcioaltoe
marcioaltoeCOMMUNITY
Explore all skills by this author →
GitHub

gesttione-design-system

Applies Gesttione brand colors, typography, and metric tokens to UI components.

14|1|Updated Oct 23, 2025
Search Tags:#accessibility#React#UI/UX#design system#brand identity#Tailwind CSS#Gesttione
One-click install
npx skills add https://github.com/marcioaltoe/claude-craftkit --skill gesttione-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gesttione-design-system
Source: https://github.com/marcioaltoe/claude-craftkit/tree/main/plugins/ui/skills/gesttione-design-system
Command: npx skills add https://github.com/marcioaltoe/claude-craftkit --skill gesttione-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures all UI components align perfectly with Gesttione's specific brand identity, color palette, typography, and component patterns. It eliminates manual checks and inconsistencies, guaranteeing brand compliance and accessibility.

Core Features & Use Cases

  • Brand-Compliant UI: Automatically applies Gesttione's exact brand colors, typography (Geist, Lora, Geist Mono), and component patterns.
  • Semantic Metric Visualizations: Uses predefined metric color tokens (e.g., revenue, CMV, costs) for consistent data dashboards.
  • Accessibility Assurance: Guides on WCAG AA/AAA compliant color combinations and design tokens.
  • Use Case: "Design a dashboard for revenue metrics using Gesttione's brand colors and metric card components."

Quick Start

Create a revenue metric card using Gesttione brand colors and the standard metric card component.

Frequently Asked Questions about gesttione-design-system

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

FAQPage Schema
How do I ensure UI components comply with Gesttione brand guidelines?▼

Brand-compliant UI components automatically apply Gesttione's exact colors, typography (Geist, Lora, Geist Mono), and patterns. This Skill resolves inconsistencies across your interface by enforcing brand identity standards, ensuring every component aligns with Gesttione guidelines without manual verification.

Can I design accessible dashboards with semantic metric colors?▼

Yes. This Skill applies predefined metric color tokens for revenue, CMV, costs, and other business metrics while maintaining WCAG AA/AAA color contrast compliance. Semantic colors ensure consistent, accessible data visualizations across your dashboard components.

What accessibility standards does the design system enforce?▼

The design system enforces WCAG AA/AAA compliant color contrasts and provides guidance on accessible color combinations. Design tokens are vetted for contrast ratios, ensuring your UI meets accessibility requirements without manual color auditing.

How do I create metric visualization cards using Gesttione patterns?▼

Use the standard metric card component with Gesttione's brand colors and typography. This Skill provides ready-to-use patterns for revenue cards and other metric visualizations, eliminating design inconsistencies and reducing implementation time.

Does this work with React and Tailwind CSS?▼

Yes. This Skill integrates with React and Tailwind CSS, applying design tokens and component patterns that work seamlessly within your existing stack. Gesttione brand compliance is built into the component architecture.

Related Skills

Explore More Design & Creative Skills→
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
pradyumnasagarpradyumnasagar
6

roadmap-author

Guide authors through creating and validating ORS SKILL.md files.

Community
Intermediate
csim-sgcsim-sg

tailwindcss-advanced-design-systems

Build scalable Tailwind CSS design systems with design tokens and @theme configuration.

Community
Advanced
Hey-ViswaHey-Viswa

zapier-design-skill

Apply Zapier design-system patterns to product interfaces.

Community
Intermediate