Sonata Watches

Overview

Sonata Watches embodies 'Accessible Luxury Modernism'—a design philosophy that democratizes premium watchmaking for India's aspirational middle class. The brand serves style-conscious consumers aged 18–45 seeking contemporary timepieces that balance heritage craftsmanship with bold, trend-forward aesthetics. The UI evokes clarity and confidence: a clean white canvas (rgb(255, 255, 255)) anchors the experience, while a vibrant cobalt primary (rgb(8, 64, 219)) energizes CTAs and key interactions, creating visual momentum without overwhelming the user. The secondary cyan accent (rgb(0, 161, 224)) and tertiary green (rgb(0, 136, 39)) introduce playful, lifestyle-driven moments—think seasonal campaigns and promotional badges.

Sonata's voice is direct, optimistic, and inclusive. Copy avoids pretension; instead, it speaks to real moments: 'Poze Cards from Summer,' 'Book an Appointment,' 'Shop Now.' The brand personality is youthful but grounded—energetic enough to feel contemporary, measured enough to respect the craftsmanship behind each watch. Vocabulary favors action verbs and lifestyle language ('trending,' 'exclusive,' 'statement') over technical jargon. Example sentence in Sonata's voice: 'Elevate your everyday with a watch that's as bold as your ambitions—explore our latest collection and find your perfect match.'

Colors

Sonata's color system prioritizes clarity and accessibility across India's diverse digital landscape. The primary color, rgb(8, 64, 219) / #0840db, is the signature cobalt blue deployed on all primary CTAs ('Book An Appointment,' 'Shop Now'), focus states, and brand-critical interactive elements. This blue is intentionally saturated and confident—it commands attention without aggression, reflecting the brand's premium-yet-approachable positioning. Secondary cyan, rgb(0, 161, 224) / #00a1e0, supports lifestyle imagery and seasonal campaigns (e.g., the 'Poze Cards from Summer' hero), creating visual rhythm and preventing monotony. Tertiary green, rgb(0, 136, 39) / #008827, is reserved for success states, sustainability messaging, and promotional badges—it signals growth and positive action.

Typography

Montserrat Variable drives the entire type system, chosen for its geometric clarity and versatility across weights (100–900). The hierarchy is built on contrast and scale rather than multiple typefaces: display (60px, weight 700) anchors hero sections with commanding presence; headline-lg (40px, weight 600) and headline-md (32px, weight 600) structure content sections with clear visual breaks; body-md (16px, weight 400) and body-lg (18px, weight 400) ensure comfortable reading at 24px line-height. Label-md (14px, weight 600) and label-sm (12px, weight 500) handle UI labels, buttons, and metadata. Letter-spacing is conservative (0 to -0.04em) to maintain Montserrat's inherent legibility; negative tracking on display text (-0.04em) tightens large headlines for visual impact. All body text us

Layout

Sonata employs a 12-column fluid grid with a max-width of 1400px, allowing responsive scaling from mobile (320px) to desktop (1920px+). The gutter is consistently 24px, creating rhythm and breathing room between content blocks. Container max-widths cascade: 1400px (full-width hero), 1240px (product grids), 1090px (content sections), ensuring content never stretches beyond comfortable reading width. Spacing follows the 8px unit system: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The homepage uses lg spacing (40px) between hero, 'Just In' section, 'Trending,' and 'Poze Cards' blocks, creating visual hierarchy and preventing cognitive overload. Margins are applied

Elevation & Depth

Sonata's elevation system is subtle and functional, avoiding heavy shadows that would contradict the clean, modern aesthetic. Level 1 (Base): no shadow; elements sit flush on the white surface. Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift of ~4px. This shadow is used on product cards, input fields, and standard UI containers. Level 3 (Modals, Popovers): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), establishing a ~12px lift for modal overlays and elevated popovers. Hover states transition from Level 2 to Level 3 over 200ms, providing tactile feedback w

Shapes

Sonata's shape philosophy is 'Geometric Precision with Warmth'—sharp enough to feel contemporary and technical, rounded enough to feel approachable and human. Border-radius follows a 5-step scale: sm (0.25rem / 4px) for minimal rounding on small UI elements (close buttons, micro-interactions); DEFAULT (0.5rem / 8px) for standard components (input fields, cards); md (0.75rem / 12px) for medium containers; lg (1rem / 16px) for larger cards and modals; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for pill-shaped buttons and badges. Buttons use sm (4px) to maintain

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (rgb(8, 64, 219) background, white text, 13px Montserrat 600, 12px vertical + 10px horizontal padding, 4px border-radius) are used for high-priority CTAs: 'Book An Appointment,' 'Shop Now,' 'Add to Cart.' Hover state transitions to #0630b8 over 200ms, providing visual feedback without animation lag. Secondary buttons use transparent background with a 1px primary-colored border and primary text, reserved for lower-priority actions like 'Help & Contact' or 'Learn More.' All buttons maintain a minimum 48px height for touch targets on mobile, with padding adjusted to accommodate smaller screens. Focus state adds a 3px outline in rgba(8, 64, 219, 0.3) at 2px offset, ensuring keyboard navigation is visible and acc

Do's and Don'ts

**Do**

• Do use primary blue (rgb(8, 64, 219)) exclusively on CTAs and interactive elements—never on passive text or backgrounds.
• Do maintain 24px line-height on all body text to ensure readability on mobile devices and reduce cognitive load.
• Do apply 200ms transitions on hover/focus states to provide tactile feedback without jarring animation.
• Do use the full 8px spacing unit system (4px, 12px, 24px, 40px, 64px) for consistent rhythm across all layouts.
• Do layer secondary cyan (rgb(0, 161, 224)) and tertiary green (rgb(0, 136, 39)) on lifestyle imagery and promotional sections to create visual variety without overwhelming the white canvas.
• Do test all interactive elements at 48px minimum height to ensure touch-friendly targets on mobile devices.
• Do use Montserrat weights 400, 600, and 700 only—avoid weights 100, 200, 300, 800, 900 to maintain visual consistency.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use #505d6e (on-surface) for body text and #1a1a1a (inverse-surface) for high-contrast headings.
• Don't apply shadows heavier than 0 8px 16px rgba(0, 0, 0, 0.15)—excessive shadows contradict the clean, modern aesthetic.
• Don't mix typefaces; Montserrat Variable is the sole font family across all scales and weights.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—arbitrary rounding breaks visual consistency.
• Don't apply color transitions longer than 200ms on interactive elements; slower transitions feel sluggish and reduce perceived responsiveness.
• Don't layer text directly on photographic backgrounds without a semi-transparent overlay or text-shadow; ensure 4.5:1 contrast ratio for WCAG AA compliance.
• Don't use secondary or tertiary colors on primary CTAs; reserve primary blue for the most important user actions.