Problem Statement

"Sometimes the color mismatching looks completely different. It should just blend in so the user doesn't have doubts."

Currently, there is a significant visual disconnect between the core Harness UI and custom-built Catalog plugins. Because developers must build their own design and CSS styling from scratch, plugins often fail to match the Harness aesthetic. This lack of synchronization creates a fragmented user experience, making custom plugins feel like external, untrusted additions rather than native features. Developers are currently forced to "guess" styles, leading to:

Color Mismatching: Inconsistent palettes between the platform and the plugin.

Theming Friction: Difficulty supporting Light/Dark mode transitions automatically.

Design Silos: High effort required to recreate standard Harness components (buttons, cards, inputs).

Proposed Solution

The introduction of a Standardized Plugin Boilerplate and Theme Provider SDK. This solution will provide a "Harness-native" foundation for all new plugins, ensuring they inherit the global design system automatically. By exposing Harness design tokens and providing a pre-configured starter kit, developers can focus on plugin functionality while the UI "blends in" by default.

Key Functional Requirements

Universal Design Tokens: Provide a library of CSS variables (e.g., primary colors, surface backgrounds, font scales) that stay updated with the Harness brand.

Theme Provider Wrapper: A wrapper component that detects the user's active theme (Light/Dark/System) and propagates those styles to the plugin's CSS context.

Ready-to-Use Boilerplate: A CLI or repository template that comes pre-integrated with the Harness Design System (HDS) styling bridge.

Standardized Component Library: Access to lightweight, pre-styled UI elements (buttons, typography, tables) that match the platform’s look and feel.

User Benefits

Seamless UX: Users experience a cohesive interface where plugins look and feel like native parts of the Harness ecosystem, increasing trust and adoption.

Accelerated Development: Developers save hours of CSS work by using a "plug-and-play" boilerplate instead of recreating styles from scratch.

Future-Proofing: When the Harness UI evolves or updates its brand colors, plugins utilizing the boilerplate will update automatically without requiring manual code changes.

Reduced Cognitive Load: A consistent UI reduces the learning curve for users interacting with new custom-built features.