Lion

Overview

Lion is a heritage spirits brand established in 1840, commanding the premium beverage market through bold, unapologetic design. The brand aesthetic is 'Architectural Confidence'—a design philosophy that pairs commanding typography (Sons Wide Bold at 72px with 3% letter-spacing) with a vibrant, saturated color palette dominated by a vivid orange accent (#FF8F1C). The UI evokes authority and celebration simultaneously: the bright orange background creates an immediate sense of energy and warmth, while the deep charcoal text (#050608) and refined spacing maintain sophistication. Users feel welcomed into an exclusive, celebratory space—not intimidated, but invited to participate in a moment of significance.

The brand voice is direct, confident, and unapologetic. Sentences are declarative and punchy: 'You must be over 18 to enter this site.' The vocabulary avoids hedging language; there are no 'perhaps' or 'might' constructions. The tone is warm but authoritative, like a sommelier or bartender who knows exactly what they're recommending. The design system reflects this through generous use of white space, bold typography weights (600–700 across headlines), and a restrained but impactful color palette that lets the primary orange (#FF8F1C) do the communicative heavy lifting.

Colors

Lion's color system is built on a 'Vibrant Minimalism' principle: a dominant, saturated accent color (#FF8F1C—a warm, energetic orange) paired with a near-monochromatic neutral foundation. Primary (#FF8F1C) is the signature brand accent, used exclusively for CTAs, focus states, and moments of emphasis. It appears on buttons, links, and interactive elements, commanding attention without aggression. On-primary is pure white (#FFFFFF), ensuring maximum contrast and legibility at 48px button heights. The secondary palette introduces depth: Secondary (#6D2E59, a deep plum) and Tertiary (#0061A1, a corporate blue) serve as supporting accents for status indicators, badges, and secondary CTAs, though they appear sparingly on the age-gate page. The surface stack is deliberately light and warm: Surf

Typography

The type system is anchored in Sons, a custom typeface family with Regular, Medium, Semi Bold, and Wide Bold weights. Display and Headline levels use Sons Wide Bold (72px, 3% letter-spacing) for maximum impact and brand distinctiveness; the wide letter-spacing creates a luxurious, spacious feel appropriate to a premium brand. Body text uses Sons Regular at 16px with 24px line-height and 0.5% letter-spacing, providing comfortable readability at standard sizes. The label system (12–14px) uses Sons Medium with 1% letter-spacing, adding subtle emphasis to interactive elements and form labels. The rationale: Wide Bold headlines command attention and communicate confidence, while Regular body text remains approachable and warm. Apply text rendering: font-smoothing: antialiased on all text to ens

Layout

Lion uses a fluid 12-column grid with a max-width of 1440px, allowing the design to breathe on large screens while maintaining focus on smaller viewports. The age-gate page demonstrates this through centered, vertically-stacked content: the logo sits at the top with lg spacing (40px) above and below, the headline uses md spacing (24px) for breathing room, and the input fields are grouped with sm spacing (12px) between them. The gutter is consistently 24px, applied to all horizontal margins and padding. White space is treated as a design element, not a void: the orange background extends edge-to-edge, creating a full-bleed hero effect, while the form elements are centered and given generous vertical padding (40px+ above and below the input group). This creates a 'breathing room' aesthetic w

Elevation & Depth

Lion's elevation system is minimal and purposeful, avoiding the soft-shadow aesthetic in favor of sharp, defined layers. The base level (Level 1) is the full-bleed orange background (#FF8F1C), establishing the primary visual plane. Level 2 (standard cards and containers) uses a subtle 1px border in Surface-Variant (#D4D5D6) with no shadow, maintaining flatness while defining boundaries. Level 3 (elevated states, hover effects) introduces a precise shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a 3px vertical offset with 8px blur—enough to lift the element without creating visual n

Shapes

Lion's shape philosophy is 'Technical Precision'—a design language that favors small, controlled border-radius values over organic or heavily rounded forms. Buttons and inputs use 4px border-radius (rounded.DEFAULT), creating a subtle softness that feels refined rather than playful. Cards and larger containers use 8px (rounded.lg), providing slightly more visual breathing room. The checkbox in the age-gate form uses 3px (rounded.sm), maintaining consistency with input fields while preserving a sharp, technical aesthetic. The 'Remember me' checkbox is a perfect example: 20px × 20px with a 2px b

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 24px horizontal padding. Primary buttons (button-primary) have a solid background in Primary (#FF8F1C), white text, and a 1px border matching the background. On hover (button-primary-hover), the background shifts to Primary-Container (#FCD853) with On-Primary-Container text (#050608), creating a clear, predictable interaction. The transition should use CSS: transition: background-color 150ms ease-out, border-color 150ms ease-out to provide responsive feedback without feeling sluggish. Secondary buttons use a transparent background with a 1px border in Primary (#FF8F1C) and Primary text; on hover, they fill with Surface-Container-High (#E9ECEF), maintaining the border. All

Do's and Don'ts

**Do**

• Do use the primary orange (#FF8F1C) as the dominant accent for all CTAs, focus states, and moments of emphasis—it is the brand's signature color and should appear frequently enough to feel intentional, not rare.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, checkboxes) to ensure touch-friendly sizing and visual consistency across the interface.
• Do apply the Sons typeface family consistently: Wide Bold for display/headlines (72–48px), Semi Bold for subheadings (36–28px), Regular for body text, and Medium for labels and UI text.
• Do use the full-bleed background approach (extending color edge-to-edge) for hero sections and age-gate pages to create a commanding, immersive visual experience.
• Do pair the vibrant primary color with generous white space and restrained secondary colors to avoid visual chaos—the orange is loud enough to carry the design alone.

**Don't**

• Don't use rounded corners larger than 8px on standard UI elements; the brand's 'Technical Precision' aesthetic requires sharp, controlled shapes that feel intentional, not soft or playful.
• Don't introduce competing accent colors (secondary, tertiary) on the same page as the primary orange unless they serve a clear functional purpose (e.g., status indicators); the design should feel cohesive and focused.
• Don't apply shadows larger than 2px 8px 23px 3px rgba(0, 0, 0, 0.2) or use soft glows; Lion's elevation system is architectural and precise, not atmospheric or dreamy.
• Don't use typefaces other than the Sons family for body text or UI labels; the custom typeface is a core brand asset and should be protected across all touchpoints.
• Don't reduce letter-spacing below 0.5% on body text or below 1% on labels; the brand's generous spacing is part of its premium, confident aesthetic and should not be compromised for space savings.