Santioni Spirits

Overview

Santioni Spirits embodies **Austere Luxury Minimalism**—a design philosophy that strips away excess while amplifying intention. The brand serves discerning adults who view indulgence not as guilt but as a deliberate, refined choice. The visual language is deliberately monochromatic: a near-black canvas (#1d1d1d) dominates 36% of the interface, creating an almost austere, gallery-like backdrop. Against this restraint sits a single, vivid crimson accent (#c82924) that appears on all interactive moments—buttons, hover states, and the age-gate confirmation. This chromatic economy mirrors the brand's philosophy: every element earns its place, every color choice signals permission and pleasure. The aesthetic draws from high-end spirits packaging, architectural minimalism, and the restraint of mid-century modernist design.

The voice is conversational yet authoritative, never breathless or apologetic. Santioni speaks to adults as peers, using phrases like "Cocktails to Indulge Now, Atone Later" and "Choose pleasure with Santioni Spirits: where intentional indulgence meets effortless enjoyment." The tone balances sophistication with accessibility—refined enough for a cocktail connoisseur, approachable enough for someone discovering craft spirits for the first time. Typography reinforces this duality: Charles Rosie Regular (a flowing, elegant serif) handles headlines with 0.005em letter-spacing and 1.2 line-height, creating an almost calligraphic presence, while GT-Era-Text-Light (a 300-weight geometric sans) delivers body copy at 15px with 1.5 line-height, ensuring readability with

Colors

The color system operates on a principle of **chromatic restraint with strategic accent**. The primary surface stack uses near-black and charcoal tones to create visual depth without relying on traditional shadows: surface (#1d1d1d) serves as the default canvas, surface-dim (#121212) for the darkest backgrounds (loader, text DOM playground), and surface-bright (#2a2a2a) for subtle elevation. The surface-container stack (lowest: #0f0f0f through highest: #303030) provides 8 distinct layers for interactive states, hover effects, and modal backgrounds—critical for a design that must communicate hierarchy without color variation. On-surface is pure white (#ffffff), while on-surface-variant (#cccccc) provides a softer alternative for secondary text and disabled states.

The **primary accent is c

Typography

The type system is built on a **two-family hierarchy**: Charles Rosie Regular (a custom serif with flowing letterforms) commands all display and headline scales, while GT-Era-Text-Light (a 300-weight geometric sans) handles body and label text. This pairing creates a visual tension that mirrors the brand's philosophy—the elegant, almost calligraphic headlines suggest indulgence and craft, while the light, geometric body copy ensures clarity and modernity. Display (217px, 1.2 line-height, 0.005em letter-spacing) is used sparingly for hero moments; headline-lg (200px) and headline-md (82px) scale responsively via fluid typography (e.g., calc(8.49673vw + 36.8627px) on tablet breakpoints). Body-lg (18px, 1.5 line-height) is the default for long-form content, while body-md (15px) handles UI lab

Layout

The layout operates on a **full-viewport, fixed-height story model** rather than traditional scrolling sections. Each major section (hero, age-gate, collection, footer) occupies 100vh with margin-top and margin-bottom controlled via CSS custom properties (--margin-top, --margin-bottom). The container max-width is 1280px, centered via flexbox (justify-content: center). Padding follows a responsive scale: 32px on mobile, scaling to 136px on desktop (calc(9.02778vw - 37.3333px) on tablet, 136px at 1920px). The gutter spacing is 32px, used between major sections and within grid layouts. White-space is generous—the age-gate, for example, uses 40px margin-top and margin-bottom on the top/bottom text sections, creating breathing room around the central action buttons. The grid is 12 columns, thou

Elevation & Depth

Depth in this system is achieved through **layered darkness and selective shadows**, not through glassmorphism or blur effects. The elevation stack uses three levels: sm (0 2px 4px rgba(0, 0, 0, 0.2)) for subtle card lifts and small interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.25)) for elevated modals and hover states. The age-gate button uses a 3px solid white border (border: 3px solid #fff) with a hover transition to the primary accent (border-color: #c82924, color: #c82924, transition: border-color 0.1s ease-in-ou

Shapes

The shape philosophy is **Architectural Precision**—sharp, geometric corners that reflect the brand's austere minimalism and refusal of softness. Border-radius follows a strict scale: sm (2px) for subtle rounding on inputs and small UI elements, DEFAULT (4px) for buttons and standard cards, md (8px) for larger cards and modals, lg (12px) for prominent containers, and full (9999px) for badges and circular elements. The age-gate action button uses a 3px border with 0px border-radius (sharp corners), reinforcing the stark, no-nonsense aesthetic. The loading bar uses 2em border-radius (approximate

Components

Action Elements

Buttons are the primary interactive currency. The button-primary uses background: {colors.primary} (#c82924), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 48px, border: 3px solid {colors.primary}, and rounded: {rounded.DEFAULT} (4px). On hover, button-primary-hover transitions to background: {colors.primary-container} (#e74c3c) and borderColor: {colors.primary-container}, with transition: border-color 0.1s ease-in-out, color 0.1s ease-in-out. The button-secondary uses a transparent background, border: 3px solid {colors.on-surface} (#ffffff), and textColor: {colors.on-surface}; on hover (button-secondary-hover), it transitions to backgroundColor: {colors.surface-container-high} (#262626), textColor: {colors.primary} (#c82924), and borderColor: {