Agio Hospitality

Overview

Agio Hospitality embodies a design philosophy rooted in Warm Minimalism—a sophisticated aesthetic that balances architectural precision with organic, inviting warmth. The brand serves discerning hospitality professionals and affluent homeowners seeking to craft outdoor spaces that transcend function and become memorable gathering experiences. The UI evokes a sense of curated elegance: a light, neutral canvas (rgb(239, 239, 239)) punctuated by a confident red accent (rgb(224, 57, 61)) that signals action and premium positioning. Every interaction feels intentional, never rushed—the visual language whispers rather than shouts.

The brand voice is refined, knowledgeable, and understated. Agio speaks with the confidence of a design authority, using precise language and avoiding hyperbole. The tone is conversational yet authoritative, grounded in real craftsmanship and material understanding. Example sentence in Agio's voice: "Our collections are designed for spaces where every detail matters—where the quality of light, the texture of materials, and the flow of conversation shape the entire experience."

Colors

The color system is anchored by a warm, neutral foundation (surface: rgb(239, 239, 239)) that provides visual calm and allows product imagery to dominate. The primary accent, a vibrant red (rgb(224, 57, 61)), is reserved exclusively for high-priority CTAs (Subscribe button, primary navigation highlights) and communicates urgency and brand confidence without aggression. Secondary colors include a muted sage (rgb(141, 145, 125)) used for contextual highlights and tertiary accents, and a deep charcoal (rgb(33, 25, 24)) for typography and structural elements. The on-surface text color (rgb(33, 25, 24)) provides 15.5:1 contrast against the light background, ensuring legibility across all contexts. Error states use a deep burgundy (rgb(190, 18, 60)) for critical warnings. Surface containers are

Typography

The type system employs Articulat CF as the primary typeface, a geometric sans-serif that conveys contemporary sophistication while maintaining warmth. Display sizes (56px, fontWeight 400) anchor hero sections with generous line-height (64px) for breathing room; headlines (40px, 30px) establish clear information hierarchy without excessive weight variation. Body text (15px, fontWeight 600) is set at a deliberate weight to ensure legibility on the light background and convey the brand's premium positioning. The letter-spacing remains tight (0em to -0.02em) to maintain visual cohesion and prevent the typeface from feeling airy or insubstantial. For small labels over busy backgrounds (e.g., product tags, metadata), apply text-shadow: 0 2px 4px rgba(33, 25, 24, 0.1) to ensure readability. Line

Layout

The layout employs a fluid 12-column grid with a maximum container width of 1280px, allowing the design to scale gracefully from mobile (page-padding: 20px) to desktop (page-padding: 48px on 1024px+, 96px on 1536px+). The page width variable (1900px) accommodates ultra-wide displays without breaking the visual rhythm. Spacing follows a semantic scale: unit (4px), xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) to create clear visual breaks between content blocks; internal card padding uses md (24px). The gap-padding variable (clamp(20px, 2.526vw, 48px)) ensures responsive gutters that scale with viewport width, preventing awkward spacing shifts at breakpoints. Container max-width is enforced at 1280px to maintain optimal line length and visua

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the brand's minimalist aesthetic. Level 1 (base surfaces) uses no shadow; Level 2 (cards, modals) applies box-shadow: 0 3px 8px rgba(33, 25, 24, 0.15), a soft, diffuse shadow that suggests gentle lift without drama. Level 3 (elevated modals, popovers) uses box-shadow: 0 8px 24px rgba(33, 25, 24, 0.12), a larger blur radius (24px) and vertical offset (8px) that creates clear separation from the background. Shadows use the on-surface color (rgb(33, 25, 24)) at controlled opacity to maintain warmth and avoid harsh black shadows. N

Shapes

The shape philosophy is Architectural Warmth—sharp enough to feel contemporary and intentional, yet rounded enough to avoid coldness. Buttons use a distinctive asymmetric radius (2px 2px 20px), creating a subtle visual signature: the top corners remain nearly square (2px) while the bottom corners round dramatically (20px), suggesting forward motion and approachability. Cards and containers use a responsive radius (clamp(10px, 1.053vw, 20px)) that scales with viewport, maintaining visual proportion across devices. Input fields use a minimal radius (6px) to feel integrated with the overall syste

Components

Action Elements Buttons are the primary interaction mechanism and use the asymmetric radius (2px 2px 20px) as a distinctive brand signature. Primary buttons (button-primary) use the brand red (rgb(224, 57, 61)) with white text, padding 12px 25px 14px, and typography label-md (15px, fontWeight 600). On hover (button-primary-hover), the background shifts to rgb(201, 42, 47) with a 200ms ease transition; no shadow is added, maintaining flatness. Secondary buttons (button-secondary) invert the color scheme, using the brand red background with warm off-white text (rgb(249, 243, 239)), signaling a slightly lower priority action. Tertiary buttons use transparent backgrounds with a 1px border (rgb(208, 208, 208)) and on-surface text, suitable for less prominent actions like "Learn More." All b

Do's and Don'ts

**Do**

• Do use the brand red (rgb(224, 57, 61)) exclusively for primary CTAs and high-priority interactions—reserve it to maintain visual impact.
• Do maintain the asymmetric button radius (2px 2px 20px) across all button variants to reinforce brand recognition and visual consistency.
• Do apply the 200ms ease transition to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use the responsive border-radius (clamp(10px, 1.053vw, 20px)) on cards and containers to maintain visual proportion across all viewport sizes.
• Do layer shadows using the on-surface color (rgb(33, 25, 24)) at controlled opacity to preserve warmth and avoid harsh, cold shadows.

**Don't**

• Don't use the brand red for body text, backgrounds, or non-interactive elements—its power lies in its scarcity and specificity.
• Don't apply sharp corners (0px radius) to any interactive element; even input fields should use at least 6px to maintain warmth.
• Don't exceed a 300ms transition duration on interactive elements; keep animations snappy (200ms is optimal) to feel responsive and premium.
• Don't introduce new accent colors outside the defined palette (primary, secondary, tertiary, error); consistency is the foundation of brand trust.
• Don't use pure black (rgb(0, 0, 0)) for shadows or text—always use the on-surface color (rgb(33, 25, 24)) to maintain the warm, curated aesthetic.