Alchemist

Overview

Alchemist is a specialty coffee brand that transforms the everyday coffee experience into a moment of quiet consistency and care. The design system embodies Architectural Minimalism—a refined aesthetic that prioritizes clarity, precision, and understated elegance. The UI uses a sophisticated navy-and-cream palette (primary #112c47, surface #f5f5f5) paired with warm wood tones in photography and retail environments, evoking both the craftsmanship of coffee preparation and the calm, unhurried ritual of consumption. The emotional response is one of approachability without compromise: premium quality made accessible, never pretentious.

The brand voice is warm, precise, and grounded. Alchemist speaks in clear, direct language—no marketing hyperbole, no breathless enthusiasm. The vocabulary is tactile and sensory: 'warmth,' 'care,' 'consistency,' 'pour,' 'ritual.' Tone example: 'For those who can't dwell for long, but still make time for a good cup.' The typography system (Futura PT, weights 400–600) reinforces this balance: geometric precision in the typeface paired with generous, human-scaled spacing creates an interface that feels both modern and inviting.

Colors

The color system is anchored by a deep navy primary (#112c47) that appears on all call-to-action buttons, active states, and primary text. This color is the brand's signature accent—it commands attention without aggression, reflecting the brand's quiet confidence. The secondary color (#467c99, a softer blue-gray) provides a supporting accent for secondary buttons, hover states, and supporting UI elements. The tertiary accent (#d8e449, a warm yellow-green) is reserved for highlights, badges, and status indicators, adding warmth and energy without overwhelming the palette.

The surface stack is built from a light, neutral foundation: surface (#f5f5f5) serves as the default background, with surface-container (#dadee2) used for elevated cards and modals. Surface-container-low (#e7e9ec) is appl

Typography

The typography system is built on Futura PT, a geometric sans-serif that communicates both precision and warmth. The hierarchy spans from display (100px, weight 500, line-height 90px, letter-spacing -1px) down to label-sm (12px, weight 500, line-height 16px, letter-spacing 0.05em). Headlines use weight 500 with tight line-heights (0.9–1.0) and negative letter-spacing (-1px) to create visual impact and geometric cohesion; body text uses weight 400 with generous line-height (24–28px) for readability and breathing room. Labels and buttons use weight 600 at smaller sizes (12–15px) to maintain hierarchy and scannability. When applying text over busy backgrounds or photography, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. The type system reinforces the brand's dual natu

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1250px, centered on the viewport. The grid is fluid below 768px (mobile), then transitions to fixed columns at tablet (768px) and desktop (1024px+) breakpoints. White-space is generous and intentional: section separation uses lg spacing (40px) vertically, with md spacing (24px) used for component padding and gutter spacing. The gutter between columns is 24px, maintaining consistent breathing room throughout. Container padding is md (24px) on tablet and desktop, reducing to sm (12px) on mobile. This spacing philosophy reflects the brand's 'quiet consistency'—every element has room to breathe, and no section feels cramped or rushed. The rhythm is unhurried, mirroring the ritual of coffee consumption itself.

Elevation & Depth

Visual hierarchy is conveyed through a three-tier shadow system that creates subtle depth without visual heaviness. Level 1 (Base/Surface) uses no shadow, establishing the default plane. Level 2 (Standard Cards & Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), lifting cards and form elements slightly above the background. Level 3 (Modals & Elevated Surfaces) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating clear separation for overlays and prominent containers. Hover states on cards transition to Level 3 shadows (0 8px 24px rgba(0, 0, 0, 0.12)) with a 200ms ease-out timi

Shapes

The shape system follows Soft-Technical Minimalism: rounded corners are used sparingly and purposefully, never decoratively. Buttons and inputs use a subtle 5px border-radius (DEFAULT), creating a soft edge without appearing playful or rounded. Cards and elevated surfaces use 8px (md) for slightly more breathing room. Dropdowns and modals use 10px (lg) to signal elevation and importance. The full (50%) radius is reserved exclusively for avatar images and circular badges. This restraint in rounding reinforces the brand's architectural precision—the interface feels refined and intentional, not s

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses the navy primary (#112c47) background with white text, 15px vertical padding, 40px horizontal padding, and a 5px border-radius. Font size is 15px (label-md weight 600), with a 48px minimum height. On hover, the background transitions to the primary-container color (#467c99) with a 200ms ease-out transition. On active/pressed state, the background darkens to primary-fixed-dim (#38637a). The button-secondary variant uses a transparent background with a 1px outline in the outline color (#cccccc), maintaining the same padding and height. On hover, the background fills with surface-container-high (#cccccc). All buttons use the label-md typography (15px, weight 600, line-height 20px).

Contai

Do's and Don'ts

**Do**

• Do use the navy primary (#112c47) exclusively for CTAs, active states, and primary text—it is the brand's signature accent and must remain distinctive.
• Do maintain generous spacing (md/lg) between sections and components; the brand's 'quiet consistency' relies on breathing room and unhurried rhythm.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all elevated surfaces (cards, inputs, dropdowns) to establish clear visual hierarchy.
• Do use Futura PT at weights 400–600 only; the geometric precision of the typeface is core to the brand identity.
• Do apply focus rings (0 0 0 3px rgba(17, 44, 71, 0.1)) to all interactive elements for accessibility and visual feedback.

**Don't**

• Don't use bright, saturated colors or high-contrast accents outside the defined palette; the brand's sophistication depends on restraint.
• Don't apply border-radius greater than 10px to any component; excessive rounding contradicts the architectural minimalism aesthetic.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or blur-heavy effects like glassmorphism; the elevation system is restrained and architectural.
• Don't mix typefaces or use system fonts; Futura PT is the sole brand typeface and must be loaded via Typekit for consistency.
• Don't reduce spacing below sm (12px) or gutter (24px) in layouts; the brand's approachability relies on generous white-space and unhurried pacing.