Cafe Blue Stone

Overview

Cafe Blue Stone is a premium café brand in Dehradun that celebrates artisanal craftsmanship, curated moments, and refined hospitality. The design system embodies 'Sophisticated Minimalism'—a movement that strips away visual noise to reveal intentional, high-craft details. The aesthetic evokes a quiet corner of the Doon valley: serene, contemplative, and deeply rooted in place. Every interface element is designed to feel like a carefully curated object, from the serif typography to the warm gold accents that punctuate the neutral palette. The brand personality is warm yet authoritative, intimate yet aspirational—it speaks to guests who value quality over quantity, ritual over rush.

The voice is precise, unhurried, and poetic. Cafe Blue Stone uses language that honors both the craft and the moment: 'Six rituals we serve every day,' 'An edited selection, served with intent,' 'Signature momos, gourmet burgers, handcrafted coffee—and unforgettable moments in the heart of the Doon valley.' The tone never rushes; it invites. Example: 'Reserve your table and join us for a quiet corner of the valley, staged for stories.'

Colors

The color system is anchored in a sophisticated black-and-cream foundation (#000000 primary, #f8fafc surface) that conveys luxury and restraint. The secondary accent, warm gold (#d6b16a), is deployed sparingly on CTAs, highlights, and brand moments—it represents the café's signature warmth and craftsmanship. This gold appears in the logo gradient (from royal blue #4a5f8f to gold), on the 'Café' word in headlines, and as the active indicator in navigation. The surface stack uses soft grays (#e9ecef, #f0f9fa) for subtle layering without visual clutter. On-surface text is near-black (#050505) for maximum legibility over light backgrounds. The secondary color palette includes warm browns (#8b7355 tertiary) for supporting UI elements like badges and secondary containers. All interactive states

Typography

The type system pairs Instrument Serif (a refined, high-contrast serif) for display and headline contexts with Inter (a modern, neutral sans-serif) for body and UI text. This pairing communicates heritage and craft (serif) grounded in contemporary clarity (sans). The display size (107px, 400 weight, -0.035em tracking) is reserved for the hero headline and creates immediate visual impact through scale and negative space. Headline sizes (48px, 36px) use the same serif family to maintain brand voice across sections. Body text (16–18px, 400 weight) in Inter ensures readability at smaller scales. Labels and navigation use Inter at 12–14px with increased tracking (0.01–0.05em) to add sophistication and visual separation. All serif text receives -0.02em to -0.035em letter-spacing to tighten the e

Layout

The layout follows a 12-column grid with a max-width of 1400px, creating a spacious, breathing canvas that honors the café's unhurried philosophy. The hero section occupies 100svh (100% of the small viewport height) to immerse the user in the brand moment. Content sections use lg spacing (40px) for vertical separation, creating clear visual rhythm. The navigation bar is fixed at the top, centered, and uses a glass panel (backdrop-filter: blur(24px)) to float above the hero without anchoring to the page edge. Horizontal padding scales responsively: 20px on mobile (5vw), 32px on tablet (8vw), 40px on desktop (10vw), ensuring the gutter token (24px) is respected in the content area. The container max-width of 1400px prevents text from becoming uncomfortably wide on ultra-large screens. White

Elevation & Depth

Depth is conveyed through subtle layering and glassmorphism rather than heavy shadows. The base layer is the light background (#f8fafc) with a soft radial gradient overlay. Level 1 (standard cards) uses rgba(255, 255, 255, 0.6) background with backdrop-filter: blur(8px) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 2 (elevated panels, like the navigation bar) uses rgba(255, 255, 255, 0.1) with backdrop-filter: blur(24px) saturate(160%), a 1px border at rgba(255, 255, 255, 0.2), and box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5). This creates a crystalline, floating effect without the

Shapes

The shape philosophy is 'Refined Geometry'—sharp where it signals action, soft where it invites rest. Buttons and CTAs use full border-radius (9999px) to create pill-shaped forms that feel premium and approachable. Cards and content containers use lg radius (1rem / 16px) for a subtle roundness that softens the grid without appearing playful. Input fields have no border-radius (0px) on the top, with only a bottom border (1px solid #cccccc) to create a minimalist, editorial feel—this reinforces the serif typography's elegance. The glass navigation panel uses full radius (9999px) to float as a di

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses black background (#000000) with white text (#f8fafc), full radius (9999px), padding 16px 28px, and height 48px. On hover, the background shifts to dark gray (#2a2a2a) with a smooth 200ms transition. The secondary button uses a semi-transparent white background (rgba(255, 255, 255, 0.75)) with black text and a 1px outline (#cccccc), maintaining the same dimensions. On hover, it transitions to the surface-container-high (#e9ecef) with a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Both buttons use label-md typography (14px, 600 weight, 0.01em tracking) for visual consistency. The gold accent (#d6b16a) appears as a trailing arrow or icon within buttons to signal forward motion.

Containers & Surface

Do's and Don'ts

**Do**

• Do use the serif typeface (Instrument Serif) for headlines and hero moments to establish brand authority and craft.
• Do apply the gold accent (#d6b16a) sparingly—on CTAs, active states, and brand moments—to maintain its impact and luxury feel.
• Do use full border-radius (9999px) on all interactive buttons and the navigation panel to signal interactivity and approachability.
• Do layer glass surfaces with backdrop-filter: blur(24px) and semi-transparent backgrounds (rgba(255, 255, 255, 0.1–0.75)) to create depth without heavy shadows.
• Do maintain generous white space (lg spacing: 40px between sections) to honor the brand's unhurried, contemplative philosophy.
• Do use Inter sans-serif for body text and UI labels to ensure legibility and contemporary clarity alongside the serif headlines.

**Don't**

• Don't use the gold accent on backgrounds or large surfaces—reserve it for interactive elements, highlights, and brand moments only.
• Don't apply heavy shadows (box-shadow > 0 16px 40px) on cards; use subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) paired with glass effects instead.
• Don't mix serif and sans-serif at the same size or weight; use serif for display/headlines (48px+) and sans-serif for body/labels (16px and below).
• Don't use rounded corners on input fields or form elements; keep them sharp (0px radius) to emphasize precision and editorial minimalism.
• Don't reduce the letter-spacing on serif headlines below -0.035em; maintain the elegant, open feel of the typeface.
• Don't override the glass panel's backdrop-filter blur value below 24px; the effect must remain visually distinct from the background.