What are the primary colors in the Harmonic Insight design system?

The primary colors are Gold (#B8942F) for accents and CTA, and Ivory (#FAF8F5) for the main background.

Can I use standard blue as a primary color?

No, using Blue (#2563EB) as a primary color is strictly prohibited; it is reserved only for information status indicators.

Does it support Tailwind CSS?

Yes, it includes specific configuration patterns for Tailwind CSS to map brand colors to utility classes.

How does the skill handle typography?

It standardizes Japanese text using Noto Sans JP and English/numerical text using the Inter font family across all platforms.

Which programming languages does this skill support?

The skill provides implementation guidance for TypeScript (React), C# (WPF), and Python (Tkinter).

Harmonic Insight Design System

Name: Harmonic Insight Design System
Author: HarmonicInsight

byHarmonicInsight

0•

Design Tools

Implements and enforces the Ivory & Gold design system across multi-platform applications to ensure brand consistency.

The Harmonic Insight Design System skill provides a comprehensive framework for applying the Ivory & Gold aesthetic to HARMONIC insight products. It acts as a digital brand guardian by enforcing specific color palettes, typography, and implementation patterns across various technology stacks including React, WPF, Python, and Tailwind CSS. The skill specifically prevents the use of unauthorized primary colors like blue, ensuring that every UI element adheres to the centralized design tokens defined in the repository's brand assets.

Key Features

01Automates the use of design tokens over hardcoded color values

02Enforces strict Ivory & Gold color palette and brand guidelines

03Provides platform-specific implementation snippets for React, C#, and Python

040 GitHub stars

05Standardizes typography for multilingual support including Japanese and English

06Integrates seamlessly with Tailwind CSS configuration for web projects

Use Cases

01Developing brand-compliant UI components for web and desktop applications

02Ensuring visual consistency when transitioning between different technical frameworks

03Refactoring legacy styles to align with the centralized Ivory & Gold design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add harmonicinsight/cross-lib-insight-common design-system

For use in Claude.ai and ChatGPT

Download Skill