Switch between the rendered Visual preview and the Raw DESIGN.md.
Chill Tea Atelier embodies a serene, minimalist luxury aesthetic rooted in Swiss heritage and wellness rituals. The design language prioritizes calm sophistication through restrained color palettes, abundant whitespace, and organic imagery of tea ceremonies, botanical elements, and mountain landscapes. Every visual choice reflects intentionality—from the delicate typography to the carefully curated product photography—creating an atmosphere of mindful indulgence. The system balances warm, earthy tones (dusty rose, soft terracotta, gentle cream) with cool neutrals and deep charcoal, evoking both the natural origin of tea and the refined sensibility of a contemporary Swiss tea house.
Key Characteristics
#1B1B1B): Primary text, navigation, primary UI elements; the foundational neutral anchor used extensively across the interface#1A1B18): Secondary primary tone for headings and high-contrast backgrounds; slightly warmer than pure black#000000): Accent text, strong CTAs, footer backgrounds, high-impact visual hierarchy#EED6D6): Soft accent for product packaging and wellness-themed elements; conveys luxury and calming ritual#108474): Secondary accent for organic/bio certification marks and wellness indicators#008060): Tertiary accent for subtle botanical accents and eco-conscious messaging#0000EE): Link underlines and focus states; reserved for interaction affordance#049CFF): Hover states and secondary interactive indicators#35EE7A): Success states and positive confirmations#282828): Interactive element backgrounds and pressed button states#F3F3F3): Light backgrounds, subtle containers, section dividers#D2D5D9): Disabled text, secondary borders, reduced-emphasis UI#DEDEDE): Border strokes, dividing lines, subtle separation#E4EDFD): Hover background for light-themed sections#FFFFFF): Highest contrast backgrounds, card overlays, text on dark#212326): Structural borders, card edges, form field outlines#FFB503): Warning states, alerts, cautionary messaging#F1E04D): Alternative warning tone for badges and notices#D72C0D): Error states, critical alerts, destructive actions#F9423A): Alternative error tone for form validation failuresPrimary Font: Cabin (sans-serif)
Fallback stack: Cabin, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
Secondary Font: Jost (sans-serif, contemporary)
Fallback stack: Jost, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
System Font: Arial (UI controls and buttons)
Fallback stack: Arial, 'Helvetica Neue', Helvetica, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Cabin | 51.2px | 600 | 51.2px | 0px | Large page titles, hero sections, primary messaging |
| H1 | Cabin | 32px | 600 | 38.4px | 0px | Section headings, prominent page titles |
| H2 | Cabin | 28px | 600 | 33.6px | 0px | Sub-section headings, collection titles |
| H3 | Cabin | 16px | 600 | 20.8px | 0px | Component headings, card titles, subsections |
| Body | Jost | 16px | 400 | 28.8px | 0px | Primary paragraph text, descriptions |
| Body Small | Jost | 14px | 400 | 21px | 0px | Secondary body text, metadata |
| Caption | Jost | 12px | 400 | 21.6px | 0px | Fine print, disclaimers, image captions |
| Link | Jost | 12px | 600 | 14.4px | 0px | Navigation links, inline hyperlinks |
| Button | Arial | 13.3px | 400 | 23.4px | 0px | Button labels, form controls |
| Button Small | Arial | 13px | 400 | 23.4px | 0px | Compact button text, secondary CTAs |
| Code / Monospace | Courier | 12px | 400 | 18px | 0px | Order codes, promotional codes |
#1B1B1B) for text; avoid pure black except in high-contrast CTAs#1B1B1B#FFFFFF8px 20px1px solid #1B1B1B0px44px28px#282828, border #282828#000000, border #0000002px solid #0000EE (inset)rgba(0, 0, 0, 0) (transparent)#1B1B1B8px 20px1px solid #1B1B1B0px44px28px#F3F3F3#E4EDFD2px solid #0000EErgba(0, 0, 0, 0)#1B1B1B0px0px none0pxautonormal#0000EE#2828281px solid #0000EE#FFFFFF#1B1B1B0px (image-driven)0px none0pxrgb(168, 232, 226) 0px 0px 0px 0px (subtle teal elevation)28.8px#FFFFFF or #F3F3F3 (alternating)52px 40px (vertical 52px, horizontal 40px)0px0px nonenone#FFFFFF1px solid #D2D5D90px40pxrgb(210, 213, 217) 0px 0px 0px 2pxrgba(255, 255, 255, 0.9)#1B1B1B12px 12px1px solid #D2D5D90px50px24px1px solid #0000EE, outline none#A0A0A0rgba(255, 255, 255, 0.95)#424B4C0px 12px1px solid rgba(0, 0, 0, 0) (borderless)0px45px21px1px solid #0000EE#1B1B1B8px21px#D72C0D4px21.6px#FFFFFF#1B1B1B0px per item0px none0px28.8px#0000EE, underline 1px solid #0000EE#000000, underline 2px solid #000000#1A1B1815px 22px 15px 0px32.4px#0000EE#FFFFFF12px 16px1px solid #F3F3F3#1B1B1B#F3F3F3#FFB503#FFFFFF4px 8px4px0px noneauto14.4px#1B1B1B28.8pxBase Unit: 8px
Spacing Scale:
4px — Micro gaps (between inline elements)8px — Compact padding (button icon spacing)12px — Form field padding, small component gaps16px — Standard padding for cards, components20px — Medium gaps between sections32px — Component group spacing36px — Section padding (vertical)40px — Container horizontal padding, large gaps52px — Major section padding (top/bottom)56px — Extra-large gaps (between distinct sections)60px — Footer spacing72px — Hero section vertical paddingUsage Context:
8px 20px (vertical/horizontal)16px internal padding52px vertical, 40px horizontal56px–72px1200px (main content container)#FFFFFF) and light gray (#F3F3F3)40px on desktop, 24px on tablet, 16px on mobile20px between grid columnsGenerously employ negative space to convey luxury and calm. Sections are separated by substantial vertical gaps (56px–72px) rather than visual dividers. Product grids maintain equal breathing room around items. Large hero sections anchor content with 50–60% of screen real estate as image; overlaid text sits center-justified with high contrast. Never let text or components crowd edges; maintain minimum 40px padding from viewport edges on desktop.
0px — All primary components (buttons, inputs, cards, navigation), maintaining sharp, editorial aesthetic4px — Badge elements only; subtle rounding for status indicators| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | No shadow, box-shadow: none | Primary buttons, inputs, navigation, most UI |
| Subtle (L1) | box-shadow: rgb(168, 232, 226) 0px 0px 0px 0px | Product cards, light elevation |
| Mild (L2) | box-shadow: rgb(210, 213, 217) 0px 0px 0px 2px | Dropdowns, modals, overlays |
| Hover (L1+) | box-shadow: rgb(168, 232, 226) 0px 2px 8px 0px rgba(0,0,0,0.08) | Card hover state |
Shadow Philosophy:
Chill Tea Atelier employs minimal, rarely-visible shadows that feel like soft underpainting rather than drastic depth. Shadows use desaturated, cool-toned colors (teal, gray) rather than black to maintain the serene aesthetic. Most components (buttons, inputs) remain shadowless to preserve flatness. Only product cards and modal overlays receive subtle elevation, signaling their interactive or featured status. Hover states introduce a whisper of shadow (rgba(0,0,0,0.08)) to indicate interactivity without disruption.
56px–72px gaps between major sections4px)#0000EE) underlines meet WCAG AA contrast on light backgrounds#1B1B1B) for body text#D2D5D9, #DEDEDE, or #1B1B1B); avoid colored strokes0px); only badges use 4px radius#EED6D6), sage (#008060), and teal (#108474) are highlights, not dominant; keep them sparse2px solid #0000EE only on non-dark backgrounds| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 767px | 1-column grid, single product card full-width; nav collapses to hamburger; padding 16px; font sizes -2px for body |
| Tablet | 768px – 1023px | 2-column grid for products; nav expands to inline; padding 24px; font hierarchy maintained |
| Desktop | 1024px+ | 4-column product grid; full nav with all items visible; padding 40px; max-width container 1200px |
| Large Desktop | 1440px+ | Optional 5-column product grid; increased gap spacing to 28px |
44px × 44px (buttons, form inputs, navigation items)48px × 48px for primary CTAs8px gap to prevent accidental taps24px × 24px minimum; 32px × 32px preferred for mobile1px; provide ≥2px padding above/below for touch comfort16px (desktop) to 14px (tablet) to 13px (mobile)52px (desktop/tablet); reduces to 36px on mobile; horizontal padding 40px → 24px → 16px20px → 16px → 12px12px padding, full-width cards90vw on mobile with 16px padding; 600px max-width on tablet/desktop100% width; labels stack above inputs (mobile) vs. beside (desktop, if 2-column layout)16px padding at all sizes; image-driven cards scale proportionally; text never compresses below 12px#1B1B1B) background, white text#F3F3F3) or Pure White (#FFFFFF)#1A1B18) or Deep Charcoal (#1B1B1B)#1B1B1B)#0000EE) underline#EED6D6), Teal (#108474), Sage (#008060)#D2D5D9), Softer Gray (#DEDEDE)#D72C0D)#FFB503)#35EE7A)Always use 0px border-radius for all components except badges (4px); maintain sharp, editorial aesthetic aligned to Chill's Swiss minimalism.
Apply typography hierarchy strictly: Cabin 600 for all headings (h1–h3); Jost 400 for body; Arial 400 for buttons; no exceptions prevent visual clarity.
Enforce whitespace discipline: Section gaps minimum 56px (vertical); component padding minimum 8px (compact) to 40px (standard); never compress below these thresholds.
Respect color roles: Deep Charcoal (#1B1B1B) dominates; warm accents (rose, peach) appear sparingly; pure white and off-white alternate section backgrounds; reserve blues (#0000EE, #049CFF) for interaction only.
Shadow minimalism: Only product cards and modals receive shadows; hover states add subtle teal-based shadow only; buttons remain flat to reinforce restraint.
Button design is signaled through transparency: Primary buttons use solid Dark Charcoal; secondary buttons use transparent backgrounds with borders; ghost buttons have no border and underline only on hover—never invert this pattern.
Responsive scaling reduces padding before font size: At mobile, 52px section padding → 36px; body text 16px → 14px; grid columns 4 → 2 → 1; maintain 40px min horizontal padding on desktop to preserve breathing room.
Focus states must be visible: Use 2px solid #0000EE outline (inset on buttons, outset on form fields); test contrast ratios to ensure accessibility against all backgrounds.
Product imagery anchors every component: Cards remain image-driven (no internal padding); overlaid text centered with high contrast; never place text atop low-contrast regions without 40% opacity overlay in background.
All spacing values are multiples of 4px: 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 52px, 56px, 60px, 72px—scale consistently across all breakpoints to ensure grid alignment.