The Rally Hotel

Overview

The Rally Hotel design system embodies 'Warm Minimalism'—a sophisticated aesthetic that balances earthy, heritage-inspired color palettes with clean, contemporary typography and generous white space. The brand serves luxury travelers seeking authentic Denver experiences in the vibrant LoDo neighborhood, evoking a sense of welcoming warmth, local pride, and refined comfort. The UI prioritizes clarity and hospitality, using rich terracotta (#71271b) and chocolate tones as anchors against light, breathable surfaces (#eae7e0, #ffffff), creating visual rhythm that feels both grounded and aspirational.

The brand voice is conversational yet authoritative—knowledgeable about Denver's culture without being pretentious. Tone is confident, approachable, and occasionally playful. Vocabulary favors concrete, sensory language: 'vibrant neighborhood,' 'locally inspired,' 'your home away from home.' Example sentence: 'Wake up to mountain views, step out to LoDo's best restaurants—this is where Denver happens.'

Colors

The color system is anchored by a signature primary terracotta (#71271b), used exclusively on call-to-action buttons, interactive states, and brand-critical elements. This warm, earthy tone conveys luxury and local heritage without coldness. The on-primary text color (#eae7e0) is a soft cream that ensures legibility while maintaining warmth; avoid pure white (#ffffff) on primary backgrounds as it creates excessive contrast and feels clinical.

Surface colors follow a light, neutral stack: surface (#ffffff) as the base, surface-container-lowest (#eae7e0) for subtle card backgrounds, and surface-container-high (#dddddd) for hover states. The outline color (#8b765e) is a warm taupe used for borders, dividers, and secondary UI elements—never use pure gray (#777777) for primary borders. Seconda

Typography

The type system pairs Anton (display, headlines) with Karla (body, labels), creating visual contrast between bold, geometric headlines and humanist body text. Anton's geometric weight conveys confidence and modernity; use it at 60px (display), 40px (headline-lg), and 28px (headline-md) with tight line-heights (68px, 48px, 36px) to create visual impact. Karla at 14–18px with 1.5 line-height ensures readability in body copy and forms. Labels use Anton at 15px with 0.75px letter-spacing (uppercase) for CTAs, or Karla at 12px with 1.2px letter-spacing for secondary labels. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) on small labels (#label-sm) when placed over photography or busy backgrounds to ensure legibility. Never reduce line-height below 1.4 for body text; maintain minimum 16px font-

Layout

The layout uses a fixed 12-column grid with a max-width of 1285px and 40px horizontal gutter (padding: 0 40px on desktop, 0 10px on mobile). Sections are separated using lg spacing (40px) for breathing room; card-based content uses md spacing (24px) internally. The design favors asymmetrical white space—hero sections occupy 60–70% of viewport height, allowing imagery to dominate while text remains scannable. Container widths: primary content at 1285px, narrow content (forms, testimonials) at 1046px. Mobile breakpoint is 767px; at this point, padding reduces to 10px and typography scales down by 2–4px. Use the spacing scale semantically: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section margins, lg (40px) for major section breaks, xl (64px) for hero-to-

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic drop-shadows. Level 1 (base surfaces) has no shadow; Level 2 (cards, modals) uses box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to create gentle separation from the background. Level 3 (elevated modals, overlays) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) for more pronounced depth. Avoid shadows darker than rgba(0, 0, 0, 0.12) as they feel heavy against the warm, light palette. Borders are preferred over shadows for UI structure: use 1px solid #d1d1d1 (outline-variant) for form inputs and dividers, 1px solid #8b765

Shapes

The design system employs 'Architectural Minimalism'—sharp, precise corners with minimal rounding. Border-radius follows a restrained scale: 3px (sm) for small inputs and badges, 4px (DEFAULT) for buttons and standard cards, 6px (md) for larger cards and modals, 10px (lg) for hero sections and feature blocks, and 9999px (full) only for circular avatars or icon buttons. Buttons use 4px radius to feel contemporary without softness; inputs use 4px to align with form hierarchy. Never apply radius > 10px to rectangular elements—it dilutes the architectural precision. Decorative elements (dividers,

Components

Action Elements Buttons are the primary interaction pattern. The standard button (button-primary) uses background: #71271b, color: #eae7e0, font: 500 15px/50px Anton with 0.75px letter-spacing, uppercase text-transform, and 0 20px padding (min-width: 220px). Hover state shifts to rgba(113, 39, 27, 0.9) with all 0.35s ease-in-out transition. Active state uses #000000 background. Decorative pseudo-elements (::before and ::after) render 10px rotated squares at left and right edges (border: 1px solid hsla(42, 19%, 90%, 0.5)) to add visual interest; remove these on .no-squares variant. Secondary buttons use transparent background with #71271b text and a 1px bottom border in #8b765e, creating an underline effect; on hover, text shifts to #23201e and border to #23201e. Small buttons (.button.

Do's and Don'ts

**Do**

• Do use Anton for all headlines and display text; it conveys confidence and modernity while remaining readable at scale.
• Do apply the primary terracotta (#71271b) exclusively to CTAs, active states, and brand-critical interactive elements—never use it for backgrounds or body text.
• Do maintain minimum 40px horizontal padding on desktop and 10px on mobile to preserve breathing room and readability.
• Do use the warm outline color (#8b765e) for borders and dividers instead of neutral grays; it reinforces the warm palette.
• Do apply box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to cards and modals for subtle depth; avoid shadows darker than rgba(0, 0, 0, 0.12).
• Do use uppercase text-transform with 0.75px letter-spacing on all button labels for visual hierarchy and luxury positioning.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) for text; default to on-surface (#23201e) for warmth and reduced eye strain.
• Don't apply border-radius > 10px to rectangular UI elements; it dilutes the architectural precision and feels soft.
• Don't use secondary accent (#54baba) on primary CTAs; reserve it for highlights, status indicators, and supporting elements.
• Don't reduce line-height below 1.4 for body text or font-size below 16px without explicit accessibility review.
• Don't mix Anton and Karla weights arbitrarily; use Anton for headlines (400 weight) and Karla for body (400 regular, 700 bold only for emphasis).
• Don't remove the decorative pseudo-element squares from primary buttons without design review; they are brand-distinctive and aid visual recognition.