skills.rest
Norfolk-Group
Norfolk-GroupOFFICIAL
Explore all skills by this author →
GitHub

hbg-design-philosophy

Define HBG Portal visual identity and UX design language with CSS tokens and typography rules.

Updated Aug 23, 2026
Search Tags:#typography#components#ux#design-system#visual-design#color-system#hospitality-ui
One-click install
npx skills add https://github.com/Norfolk-Group/H-Analytics --skill hbg-design-philosophy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hbg-design-philosophy
Source: https://github.com/Norfolk-Group/H-Analytics/tree/main/.claude/archive/agents-skills-snapshot/hbg-design-philosophy
Command: npx skills add https://github.com/Norfolk-Group/H-Analytics --skill hbg-design-philosophy

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about hbg-design-philosophy

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

FAQPage Schema
How do I maintain consistent typography and financial number alignment in a hospitality admin portal?▼

Use prescribed typography rules with Inter, IBM Plex Sans, and JetBrains Mono fonts, applying mandatory tabular-nums formatting for financial numbers to preserve readability and alignment in hospitality admin portal interfaces.

What CSS custom properties should I use for a hospitality UI design system?▼

A hospitality UI design system should use centralized CSS custom properties for primary, secondary, background, foreground, destructive, card, and chart color tokens to avoid hardcoded hex values and ensure consistent component styling.

How do I standardize layout and component patterns for hospitality reporting views?▼

Standardize hospitality reporting views by applying prescribed multi-column layouts, sidebar construction, page header and tab navigation patterns, card variants like standard glass and KPI, and declarative table components for consistent data presentation.

Does this visual design system support responsive behavior and accessibility conventions?▼

This visual design system specifies motion, responsive behavior, icon sizing, negative-value formatting, and data-testid conventions to support predictable engineering, QA workflows, and accessible hospitality-appropriate interfaces across portal screens.

When should I use a hospitality UI design system for building financial tables and charts?▼

Use a hospitality UI design system when designing new property detail pages, building financial tables or charts, or making visual decisions impacting branding, readability, and responsive behavior across admin portal and reporting views.

Why do my portal components have inconsistent styling and hardcoded color values?▼

Inconsistent styling and hardcoded color values occur when components lack centralized CSS custom properties; applying a unified visual identity with brand palette tokens eliminates design ambiguity and ensures brand-coherent experiences.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

modern

Apply editorial typography, minimal color palettes, and clean layouts to digital product designs.

Community
Intermediate
labs21-devlabs21-dev
28

design-foundations

Apply artifact-agnostic design rules for colors, typography, spacing, and charts.

Official
Advanced
evengulevengul

docs-css

Provide CSS component classes and layout utilities for MC-ORG web templates.

Community
Basic
AshesOfTheUndeadAshesOfTheUndead

trading-terminal

Generate dark-mode design tokens and components for financial trading interfaces.

Community
Intermediate