One language for the entire experience
The Huxly Design System guarantees cohesion.
Tokens define brand and spacing rules. Components implement accessibility and responsiveness out of the box. Patterns codify proven workflows. Teams compose these primitives into application experiences that feel uniform across the enterprise.
Design Tokens
Design tokens are the foundation of our visual language. They capture core attributes like color, typography, spacing, and radius in a way that can be applied consistently across applications and platforms. By centralizing these values, tokens ensure brand alignment, accessibility, and flexibility—allowing our experiences to adapt and scale without sacrificing consistency.
Color
Defines the base color system. Primary anchors brand identity, surface establishes background layers, and accent highlights actions or key states.--hilton-primary, --hilton-surface, --hilton-accent
Use for: consistent theming, light/dark mode adaptation.
Avoid: introducing ad-hoc hex values that break visual cohesion.
Type
Typography tokens ensure hierarchy, readability, and accessibility. The type scale is tuned for headings, body, captions, and display text.--hilton-sans, scale: 12 / 14 / 16 / 20 / 24 / 32
Use for: building page hierarchy, ensuring minimum 14px body text for legibility.
Avoid: mixing fonts outside of the system or skipping scale values.
Spacing
A spacing scale that drives rhythm and balance across layouts. Increments allow predictable margin and padding decisions.--space-2 … --space-24
Use for: consistent gaps between components, aligning across breakpoints.
Avoid: hardcoding pixel values that don’t map to the system.
Radius
Corner radius tokens control visual softness. They give buttons, cards, and inputs a familiar and modern feel.--radius-xl
Use for: reinforcing brand personality and ensuring consistency.
Avoid: inconsistent rounding across similar elements.
Core Components
Core components represent the essential building blocks of our user interfaces. Buttons, inputs, navigation, and layout primitives are designed once and reused everywhere, reducing complexity while improving efficiency. These components embody best practices for usability and accessibility, giving product teams a trusted toolkit to deliver experiences faster and with greater confidence.
Buttons, Inputs, Selects, Text Areas
Interactive primitives built for clarity and accessibility. Variants (primary, secondary, destructive) communicate intent.
Use for: forms, user flows, confirmations.
Avoid: overloading too many variants — stick to defined styles.
Cards, Tables, Tabs, Accordions
Information organizers that group, display, and toggle content.
Use for: dashboards, data sets, or structured navigation.
Avoid: nesting too deeply, which adds complexity and reduces scannability.
Alerts, Notifications, Toasts, Badges
Lightweight feedback components. Alerts signal blocking issues, toasts provide transient updates, and badges highlight statuses.
Use for: communicating system states without disrupting flow.
Avoid: overusing toasts or alerts that distract from the task.
Layout Primitives: Grid, Stack, Container
Structural tools for responsive layouts. Grid handles alignment, stack manages vertical rhythm, container ensures max-width consistency.
Use for: predictable layouts that scale across devices.
Avoid: custom CSS hacks that fight against primitives.
Navigation: Header, Top Nav, Search, Filters
Navigation scaffolding for orientation and wayfinding. Provides a balance between global, local, and contextual navigation.
Use for: keeping users grounded in complex applications.
Avoid: duplicating navigation elements or nesting beyond 3 levels.
Patterns
Patterns bring tokens and components together into repeatable solutions for common user needs. From multi-step wizards to inline edits and empty states, patterns provide proven approaches that streamline complex interactions. They create familiarity for users, consistency for teams, and efficiency for the organization—ensuring that every product feels intuitive, purposeful, and aligned.
Data List + Detail Panel
Master-detail layout lets users browse items and drill into details without losing context.
Use for: admin tools, dashboards, catalog browsing.
Avoid: forcing context switches into new pages when inline works better.
Wizard for Multi-step Flows
Breaks complex tasks into guided steps with progress indicators.
Use for: onboarding, setup, multi-form submissions.
Avoid: hiding navigation — allow users to move back and forth.
Inline Edit with Optimistic Updates
Users edit content directly in place, with immediate visual feedback while changes sync.
Use for: tables, lists, dashboards with frequent edits.
Avoid: slow blocking saves — the value is speed and flow.
Empty-State with Helpful Action
When no data exists, provide context and guidance. Use illustrations, copy, and primary actions.
Use for: onboarding new users or freshly reset states.
Avoid: dead-ends like “No data found” with no next step.