ByaaraClothing

Overview

ByaaraClothing embodies 'Relaxed Minimalism'—a design philosophy that merges contemporary comfort culture with refined editorial restraint. The brand serves style-conscious consumers aged 18–45 who reject fast-fashion excess and seek garments that feel as good as they look. The visual identity evokes a serene, aspirational lifestyle: soft natural lighting, lived-in interiors, and effortless elegance. The UI translates this into a clean, breathing interface where generous whitespace (surface: #ffffff, surface-dim: #f5f5f5) acts as the primary canvas, punctuated by a warm terracotta accent (primary: #d46d6e) that signals moments of action and emotional warmth.

The brand voice is conversational yet authoritative—never breathless or trend-chasing. Copy is grounded in tangible sensory language: 'From cozy nights to lazy days, dress the way you feel.' Tone markers include understated confidence, specificity over hyperbole, and an implicit understanding that comfort is not a compromise but a design principle. The vocabulary favors words like 'ease,' 'craft,' 'everyday,' and 'intention,' avoiding superlatives and urgency-driven language.

Colors

The color system is anchored in a warm, approachable palette that prioritizes legibility and emotional resonance over novelty. Primary (#d46d6e) is a muted terracotta—warm enough to feel human, desaturated enough to avoid aggression—deployed on CTAs ('SHOP NOW'), interactive states, and accent elements. It appears at 39 frequency points across the DOM, signaling its role as the brand's signature accent. On-primary is pure white (#ffffff), ensuring WCAG AAA contrast (21:1) on all interactive surfaces. The surface stack is deliberately minimal: surface (#ffffff) and surface-dim (#f5f5f5) form the dominant visual field, with surface-container (#eeeeee) and surface-container-highest (#dddddd) used sparingly for card backgrounds and subtle depth. On-surface (#222222) is a near-black that avoids

Typography

The type system is built on Poppins, a geometric sans-serif that balances warmth with clarity—essential for a brand that must feel both approachable and intentional. Display (60px, 700 weight, -0.04em tracking) anchors hero moments and brand statements; headline-lg (40px, 600 weight) frames section introductions; headline-md (28px, 600 weight) organizes content hierarchy. Body-lg (18px, 400 weight, 28px line-height) is the primary reading voice, with generous line-height (1.56x) to support extended product descriptions and editorial content. Body-md (16px, 400 weight) handles UI labels and secondary copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and interactive elements, with label-sm (12px, 500 weight, 0.05em tracking) reserved for metadata and fine print. On sma

Layout

The layout operates on a 12-column fluid grid with a max-width of 1280px (container-max), centered on viewport. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero to categories, categories to featured collection), md (24px) organizes component groups within sections, and sm (12px) handles internal component padding. Gutter spacing is fixed at 24px on desktop, collapsing to 15px on mobile to preserve content density. The hero section spans full-width with a 50/50 image-text split, using the primary accent (#d46d6e) sparingly on the CTA button to draw focus without overwhelming the lifestyle photography. Product cards (border-radius: 28px, padding: 0px) are arranged in a 4-column grid on desktop, collapsing to 2 columns on tablet and 1 on mobile

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual heaviness of drop shadows. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle UI elements like input fields and small badges; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and modals; lg (0 8px 25px rgba(0, 0, 0, 0.12)) for hero overlays and elevated modals. Product cards employ md elevation by default, escalating to lg on hover (transition: box-shadow 0.25s ease) to signal interactivity. The coverflow carousel component (migora-card) uses box-shadow: 0 8px 25px rgba(0,0,0,.12)

Shapes

The shape language is 'Soft-Technical'—rounded enough to feel approachable, geometric enough to maintain precision. Buttons use rounded.xl (1.5rem / 24px) for a distinctly friendly, pill-like appearance; the primary CTA 'SHOP NOW' applies border-radius: 40px (matching the computed style of primaryCta) to create a soft, inviting target. Cards and containers use rounded.lg (1rem / 16px) or rounded.md (0.75rem / 12px) depending on context: product cards employ 28px (a custom value between lg and xl) to balance softness with visual weight, while input fields use 30px (rounded.full-adjacent) to sig

Components

Action Elements Buttons are the primary interaction vehicle. The button-primary component uses backgroundColor: {colors.primary} (#d46d6e), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.xl} (24px), and padding: 5px 25px with height: 44px to ensure touch-friendly targets (minimum 44px per WCAG). Font-weight is 600 (label-md typography), with letter-spacing: 0.01em for clarity. On hover, button-primary-hover shifts backgroundColor to #c85556 (a 10% darkening) with transition: background-color 0.2s ease—no scale transform or shadow shift, preserving the minimalist aesthetic. Button-secondary uses a transparent background with a 1px solid border in primary color, inverting on hover to fill with primary-container (#f0d9da) and shift text to on-primary-container (#8b3a3b). The

Do's and Don'ts

**Do**

• Do use primary (#d46d6e) exclusively on CTAs, focus states, and brand-critical interactive elements—never on backgrounds or body text.
• Do maintain minimum 44px height on all touch targets (buttons, inputs, list items) and ensure 1.56x line-height on body-lg for readability.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between component groups to create visual breathing room.
• Do use the full rounded scale (28–40px on primary elements, 12–16px on secondary) to reinforce the 'Soft-Technical' shape language.
• Do layer shadows using the elevation scale (sm/md/lg) with soft, spread values (0 4px 12px, 0 8px 25px) rather than harsh drop shadows.
• Do preserve whitespace as a design material—surface backgrounds should remain #ffffff or #f5f5f5, never filled with secondary colors.

**Don't**

• Don't use primary color on body text, backgrounds, or non-interactive surfaces—it dilutes the accent's signal strength.
• Don't apply border-radius below 12px on interactive elements or above 40px on cards; the Soft-Technical language requires precision.
• Don't mix typeface families; Poppins is the sole typeface—avoid serif or monospace variants for brand consistency.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#222222) and on-primary (#ffffff) to reduce eye strain.
• Don't apply blur effects (backdrop-filter) or glassmorphism treatments; the brand prioritizes clarity and minimalism.
• Don't exceed 3 font weights (400, 600, 700) in a single view; visual noise undermines the 'ease' positioning.