skills.rest
HarmonicInsight
HarmonicInsightCOMMUNITY
Explore all skills by this author →
GitHub

design-system

The all-in-one platform for your virtual and hybrid events.

Updated Aug 23, 2026
Search Tags:#typography#consistency#design-system#ui-components#color-tokens#brand-guidelines
One-click install
npx skills add https://github.com/HarmonicInsight/lib-insight-common --skill design-system-harmonicinsight
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/HarmonicInsight/lib-insight-common/tree/main/plugins/harmonic-insight/skills/design-system
Command: npx skills add https://github.com/HarmonicInsight/lib-insight-common --skill design-system-harmonicinsight

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams and developers face drift in color, typography, and component styles across Harmonic Insight products.

Core Features & Use Cases

  • Enforces color tokens, typography, spacing, and component styling across platforms.
  • Provides centralized design references and guidelines for designers and developers.
  • Used during UI implementation and design reviews to ensure consistency.

Quick Start

Start a new UI module by applying Ivory & Gold tokens from the design system.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I enforce consistent UI design across web, mobile, and desktop platforms?▼

To enforce consistent UI design across platforms, apply centralized design tokens for color, typography, and spacing. This ensures unified component styling and prevents visual drift across different product interfaces.

What is a design system and when do I need centralized design tokens?▼

A design system provides centralized references and guidelines for UI components. You need design tokens when managing color, typography, and spacing across multiple platforms to prevent style drift during implementation.

How do I apply Ivory & Gold brand guidelines to a new UI module?▼

Apply Ivory & Gold brand guidelines by referencing centralized design tokens during UI implementation. This enforces consistent color, typography, spacing, and component styling across the new module.

Can I use these design references during UI implementation and design reviews?▼

Yes, you can use these design references during UI implementation and design reviews. They provide centralized guidelines and tokens that support designers and developers in delivering unified experiences across platforms.

Why does UI component styling drift across different products?▼

UI component styling drifts across products when teams lack centralized design references and guidelines. Without standardized color tokens and typography rules, consistent application of visual elements across web and mobile platforms fails.

What's the best way to maintain typography and color consistency across multiple products?▼

The best way to maintain typography and color consistency is to enforce centralized design tokens. Applying standardized brand guidelines during UI implementation ensures unified component styling across all product surfaces.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
529-studio529-studio
2

add-shadcn-component

Install shadcn/ui components and create CVA-based wrappers in Next.js applications.

Official
Intermediate
gagan114662gagan114662

figma-expert

Guide Figma design systems with auto-layout, variants, and design tokens.

Community
Intermediate
Prathviraj-jadhavPrathviraj-jadhav

visual-design-foundations

Apply typography, color, spacing, and iconography to create design tokens and style guides.

Community
Intermediate