hbg-design-philosophy

What problem does it solve?

This Skill provides a unified visual identity and UX rulebook to eliminate inconsistent UI decisions, reduce design ambiguity, and ensure all HBG Portal screens reflect a hospitality-appropriate, accessible, and brand-coherent experience.

Core Features & Use Cases

• Brand palette & tokens: Centralized CSS custom properties for primary, secondary, background, foreground, destructive, card, and chart color tokens to avoid hardcoded hex values in components.
• Typography & numeric formatting: Clear rules for fonts (Inter, IBM Plex Sans, JetBrains Mono) and mandatory tabular-nums usage for financial numbers to preserve readability and alignment.
• Layout & components: Prescribed multi-column layouts, sidebar construction, page header and tab navigation patterns, card variants (standard, glass, KPI), and declarative table components for consistent data presentation.
• Interaction & accessibility: Motion, responsive behavior, icon sizing, negative-value formatting, and data-testid conventions to support predictable engineering and QA workflows.
• Use Case: Use these guidelines when designing a new property detail page, building financial tables or charts, or making visual decisions that impact branding, readability, and responsive behavior.

Quick Start

Use the hbg-design-philosophy skill to design or audit a page ensuring it uses the CSS tokens, prescribed typography, layout rules, and chart color variables.