Jahaan

Overview

Jahaan is a Lahore-based women's clothing brand that celebrates South Asian textile heritage through a refined aesthetic of Architectural Minimalism—clean lines, restrained color palettes, and deliberate negative space that allows the craftsmanship of stitched and unstitched suits to speak. The design system evokes quiet sophistication: warm, earthy neutrals (#1a1814 charcoal, #ebe6e0 cream, #e8e8e1 sand) paired with strategic accent colors (a deep indigo #334fb4 for secondary actions, a fresh green #2cb742 for tertiary highlights). The UI is intentionally understated, never loud—every pixel serves the product, not the interface.

The brand voice is precise, knowledgeable, and welcoming. Jahaan speaks to customers as equals who understand quality: "Be first to hear about new drops, restocks and private sales, by email and on WhatsApp." The tone avoids marketing hyperbole; instead, it emphasizes exclusivity through access and community. Typography pairs the serif elegance of Cormorant Garamond (headlines, display) with the geometric clarity of Jost (body, UI), creating a visual bridge between traditional textile craft and contemporary e-commerce.

Colors

The color system is rooted in a warm, neutral foundation that reflects the natural fibers of Pakistani textiles. Primary (#1a1814, a deep charcoal-brown) is the dominant text and button color—it grounds the interface and appears on all primary CTAs ("Join now" buttons use rgb(26, 24, 20) background with rgb(250, 248, 246) text). The surface stack progresses from pure white (#ffffff) through increasingly warm grays: surface-container-lowest (#ebe6e0), surface-container-low (#e8e8e1), and surface-container (#e8e8e1), creating subtle visual separation without harsh contrast. Secondary (#334fb4, a sophisticated indigo) is reserved for secondary actions, accent elements, and information-rich contexts (e.g., currency selector backgrounds use rgb(51, 79, 180) with white text). Tertiary (#2cb742,

Typography

The type system balances serif formality with geometric clarity. Cormorant Garamond (serif, 700 weight) is reserved for display and headline-lg contexts—its elegant letterforms evoke luxury and heritage, appropriate for hero messaging and collection titles. Jost (geometric sans-serif, 400–700 weights) handles all body copy, UI labels, and interactive elements, providing legibility and a contemporary feel. The scale is conservative: display at 60px / 68px line-height with -0.04em letter-spacing creates visual drama without excess; headline-md drops to 28px / 36px for section headers; body-md sits at 16px / 24px with 0.06rem letter-spacing (a subtle widening that aids readability on screens). Labels use 12–14px weights (500–600) with 0.01–0.05em tracking. On small labels over busy background

Layout

The page uses a fluid 12-column grid with a max-width of 1400px (--page-width: 160rem in CSS), centered on desktop. Gutter spacing is 20px (--grid-desktop-horizontal-spacing), with 16px vertical grid spacing (--grid-desktop-vertical-spacing). Mobile uses 10px horizontal and 8px vertical grid spacing. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section margins, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container max-width is 1400px, but content often centers within narrower bounds (e.g., modals at ~750px) to maintain focus. White-space is generous: sections are separated by lg spacing (40px) on desktop, creating visual breathing room. The hero modal in the screenshot uses a two-co

Elevation & Depth

Depth is conveyed through subtle shadows and strategic layering rather than aggressive drop-shadows. The elevation system defines three levels: sm (0 1px 2px rgba(26, 24, 20, 0.06)) for hover states and minor lifts, md (0 4px 12px rgba(26, 24, 20, 0.08)) for cards and popovers, and lg (0 0 20px -3px rgba(204, 204, 204, 1), 0 -7px 20px -15px rgba(204, 204, 204, 1)) for modals and prominent overlays. The lg shadow is distinctive: a soft, spread shadow with a negative vertical offset that creates a floating, ethereal effect—appropriate for the modal overlay seen in the screenshot. Buttons and inp

Shapes

The shape philosophy is Architectural Sharpness—the brand favors sharp corners and minimal rounding, reflecting the precision of tailored garments and contemporary minimalist design. Default border-radius is 0px across the entire system (--buttons-radius: 0px, --inputs-radius: 0px, --text-boxes-radius: 0px, --product-card-corner-radius: 0.0rem). Rounding is introduced selectively: buttons use 5px (--rounded-DEFAULT) to signal interactivity without softness; cards and containers use 5px for consistency; modals and popovers use 10px (--rounded-lg) to create a sense of elevation and focus. Varian

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (rgb(26, 24, 20)) background with {colors.on-primary} (rgb(250, 248, 246)) text, 12px font-size, 500 font-weight, 15px vertical padding, 20px horizontal padding, and 5px border-radius. On hover, the background shifts to #2a2522 with a 200ms ease transition. The button-secondary component is transparent with a 1px border in {colors.outline-variant}, 16px horizontal padding, and 12px vertical padding; on hover, it fills with {colors.surface-container-high} (rgba(204, 204, 204, 1)). Both buttons use Jost font-family for consistency with UI text.

Containers & Surfaces Cards use {colors.surface} (rgb(255, 255, 255)) background, 5px border-radius, {spacing.md} (24px) padding

Do's and Don'ts

**Do**

• Do use Cormorant Garamond for all display and headline-lg contexts to evoke heritage and luxury; reserve Jost for body and UI to maintain clarity.
• Do apply {colors.primary} (#1a1814) to primary CTAs and text; it is the brand's signature dark tone and should dominate the visual hierarchy.
• Do maintain sharp corners (0px border-radius) as the default; introduce rounding only on buttons (5px), modals (10px), and pills (40px) to signal interactivity.
• Do use {spacing.lg} (40px) to separate major sections and create generous white-space; the brand thrives on breathing room, not density.
• Do apply {elevation.lg} shadow (0 0 20px -3px rgba(204, 204, 204, 1), 0 -7px 20px -15px rgba(204, 204, 204, 1)) to modals and prominent overlays for a floating, ethereal effect.

**Don't**

• Don't use {colors.secondary} (#334fb4) or {colors.tertiary} (#2cb742) as primary button colors; they are supporting accents only.
• Don't apply border-radius to body text, cards, or inputs by default; the architectural aesthetic requires sharp corners as the baseline.
• Don't use system fonts or generic sans-serifs; Jost and Cormorant Garamond are non-negotiable for brand consistency.
• Don't exceed {spacing.lg} (40px) for section margins; the layout should feel spacious but not cavernous.
• Don't apply heavy shadows (lg elevation) to buttons or small components; reserve lg shadows for modals and full-screen overlays only.