Inness

Overview

Inness is a luxury wellness and golf resort in the Hudson Valley that embodies a design philosophy rooted in 'Cultivated Naturalism'—a refined aesthetic that honors the landscape while introducing curated, understated elegance. The brand serves affluent travelers seeking respite from urban life, offering a retreat where countryside authenticity meets boutique hospitality. The visual identity evokes calm sophistication through warm, earthy tones (warm beige #dfd9c6, terracotta #d74f36) paired with a proprietary typeface (ABC Arizona Flare) that conveys both heritage and contemporary ease. The UI is intentionally spacious and unhurried, mirroring the pace of a countryside escape.

The brand voice is warm, inviting, and grounded—never pretentious, always genuine. Inness speaks in the language of experience: 'An inspired country retreat where cultivated moments unfold naturally.' Tone vocabulary emphasizes wellness, connection, and place: 'grounded,' 'guided,' 'locally sourced,' 'panoramic,' 'retreat.' The personality is that of a gracious host who understands luxury as comfort, not ostentation.

Colors

The color system centers on a warm, earthy palette that reflects the Hudson Valley landscape and the resort's wellness ethos. Primary (#d74f36, a warm terracotta-rust) is reserved exclusively for call-to-action buttons and interactive highlights—it commands attention without aggression, evoking both natural clay and hospitality warmth. The surface stack anchors the design in a sophisticated beige (#dfd9c6 for base surface, #fffbf0 for bright surfaces, #d8d2c9 for container-highest), creating visual depth through subtle tonal shifts rather than stark contrast. On-surface text (#26241e, a warm near-black) maintains legibility while preserving the warm color temperature throughout. Secondary (#6b5b52, a muted taupe) and tertiary (#7d5c52, a softer brown) provide supporting accents for seconda

Typography

The typography system is built entirely around ABC Arizona Flare, a proprietary typeface that defines Inness's visual identity. The type hierarchy spans from display (69px, weight 100) for hero statements down to label-sm (12px, weight 300) for metadata and tertiary information. All weights use a consistent light-to-regular range (100–300), reinforcing the brand's unhurried, refined character—there are no bold weights in the system, as heaviness contradicts the cultivated-naturalism aesthetic. Display and headline-lg employ negative letter-spacing (-0.02em and -0.01em respectively) to tighten the elegant, elongated letterforms, while body and label tiers use neutral or slightly positive spacing (0 to 0.01em) for readability. Line heights are generous (display at 76px for 69px type, body-lg

Layout

The layout system uses a 12-column grid with a maximum container width of 1240px, providing flexibility for both desktop and mobile experiences. The grid operates at two breakpoints: 821px+ (desktop, 12 columns with 2.5rem column gap) and ≤820px (mobile, 5 columns with 0.625rem gap), allowing content to reflow gracefully. White-space is treated as a design material: section separation uses lg spacing (40px) on desktop and md spacing (24px) on mobile, creating visual breathing room that mirrors the resort's unhurried atmosphere. The gutter (24px) defines the margin between content and viewport edges, ensuring content never feels cramped. Container max-widths vary by section (820px for narrow editorial, 1024px for standard content, 1240px for full-width experiences), allowing designers to ch

Elevation & Depth

Depth in the Inness design system is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements like buttons and small cards, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals that sit above the base surface, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and full-screen overlays. Shadows use warm-tinted blacks (rgba values with slight brown undertones via the color system) to maintain tonal harmony with the warm pal

Shapes

The shape philosophy is 'Soft Architectural'—rounded corners are used sparingly and intentionally, reflecting the brand's balance between refined structure and natural ease. Buttons and inputs use a minimal radius (4–5px, {rounded.sm} and {rounded.DEFAULT}), providing subtle softness without appearing playful or casual. Cards and larger containers use {rounded.md} (8px) to create gentle definition while maintaining the understated aesthetic. Modal dialogs and floating elements use {rounded.lg} (12px) for slightly more pronounced softness, signaling their elevated status in the hierarchy. Badge

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (background #d74f36, text #fff9ec, padding 10px 16px, height 44px) for main calls-to-action like 'Book' and 'View Offer,' and secondary (transparent background, #d74f36 text, 1px border) for supporting actions. Both use {typography.label-md} (14px, weight 300) and {rounded.DEFAULT} (5px). On hover, primary buttons transition to #c43f2a (a darker terracotta) over 300ms using cubic-bezier(0.25, 0.1, 0.25, 1), while secondary buttons shift to {colors.primary-container} (#f5e8e3) with {colors.on-primary-container} text. All button transitions use the same easing curve to create a cohesive interaction feel.

Containers & Surfaces Cards are the primary container component, using {colors.surface-

Do's and Don'ts

**Do**

• Do use ABC Arizona Flare at weights 100–300 exclusively; never introduce heavier weights or alternative typefaces, as they break the refined aesthetic.
• Do apply primary color (#d74f36) only to CTAs, focus states, and critical interactive elements; overuse dilutes its impact and confuses hierarchy.
• Do maintain generous white-space: use lg spacing (40px) for section breaks and md spacing (24px) for internal card margins to preserve the unhurried, retreat-like atmosphere.
• Do use the warm beige surface palette (#dfd9c6 base, #fffbf0 bright) consistently across all backgrounds; never introduce cool grays or pure whites, as they conflict with the cultivated-naturalism aesthetic.
• Do apply subtle shadows ({elevation.md} and {elevation.lg}) to create depth; avoid harsh, high-contrast shadows that feel corporate or cold.

**Don't**

• Don't use bold or heavy typeface weights; the brand voice is refined and unhurried, not emphatic.
• Don't apply primary color (#d74f36) to body text, backgrounds, or non-interactive elements; reserve it exclusively for actions and focus states.
• Don't use sharp corners (0px border-radius) on any component; all elements must use at least {rounded.sm} (4px) to maintain the soft-architectural aesthetic.
• Don't introduce cool-toned colors (blues, purples, cool grays) into the palette; the brand is rooted in warm, earthy tones that reflect the Hudson Valley landscape.
• Don't compress white-space or use tight padding; the design thrives on breathing room and spaciousness that mirrors the resort's tranquil environment.