GIVA Jewellery

Overview

GIVA Jewellery is a contemporary luxury e-commerce platform that democratizes fine jewellery through certified lab-grown diamonds, BIS Hallmark gold, and 925 sterling silver. The design system embraces a "Playful Luxury" aesthetic—a movement that combines accessible price points with vibrant, emotionally resonant visual language. Rather than austere minimalism, GIVA's interface celebrates colour, warmth, and personality through a carefully orchestrated palette of rose-pink (#e9718b), golden amber (#ffb214), and soft lavender (#928bf1) accents layered over clean white surfaces. The emotional response is one of joy and confidence: shopping for jewellery should feel celebratory, not intimidating.

The brand voice is conversational, confident, and inclusive. GIVA speaks to young professionals, gift-givers, and jewellery enthusiasts who value transparency and craftsmanship. Vocabulary patterns favour clarity over pretension: "925 Sterling Silver" not "fine silver," "Lab-Grown Diamonds" not "synthetic stones." The tone is warm but never patronizing, playful but never frivolous. Example sentence in GIVA's voice: "Your perfect piece is waiting—and it comes with a lifetime of confidence."

Colors

GIVA's colour philosophy centres on emotional accessibility and visual warmth. The primary accent, Rose-Pink (#e9718b), is the signature CTA colour applied to buttons, interactive links, and focus states—it signals action and brand identity without aggression. Secondary accent, Golden Amber (#ffb214), is reserved for ratings, highlights, and promotional badges, evoking luxury and celebration. Tertiary accent, Soft Lavender (#928bf1), appears in hero sections and collection backgrounds, adding sophistication and visual rhythm.

The surface stack uses a near-white foundation (#ffffff) with carefully calibrated container layers: surface-container-low (#f4e5eb) for subtle hover states, surface-container (#ecdcc4) for mid-tone backgrounds, and surface-container-highest (#d0d0d0) for disabled or

Typography

GIVA's type system balances approachability with sophistication through a two-family pairing: Lato (body and headings) paired with Assistant (display and accent headings) and Figtree (UI labels). This combination conveys modern friendliness without sacrificing legibility. Display text (60px, 700 weight, -0.04em tracking) anchors hero sections with bold confidence; headline-lg (48px, 400 weight) provides breathing room for section titles. Body text is set at 16px with 0.06rem letter-spacing and 1.6x line-height (24px), ensuring readability on mobile and desktop. Labels use 15px with 0.01em tracking for precision in CTAs and form fields. On busy product backgrounds or over imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. Font weights are intentionally restraine

Layout

GIVA uses a fluid 12-column grid with a maximum container width of 1200px, centred with symmetric margins. The spacing scale follows an 8px base unit: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero breathing room. Desktop sections use 20px vertical spacing; mobile uses the same 20px to maintain rhythm across breakpoints. The grid-desktop-horizontal-spacing is 16px between columns, grid-mobile-horizontal-spacing is 8px. Page width is set to 188rem (3008px at 16px base), with 0rem margins to allow full-bleed hero sections. Product cards and collection cards use 0rem padding and 0rem border-radius by default, allowing imagery to extend edge-to-edge; collection cards override this w

Elevation & Depth

Depth in GIVA is achieved through a three-tier shadow system that avoids heavy drop-shadows in favour of subtle, directional lighting. Level 1 (Base/Flat): no shadow; used for cards on white backgrounds and primary CTAs. Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to hover states on cards, modals, and secondary containers to lift them 4-8px. Level 3 (Maximum Depth): box-shadow: 2px 2px 10px 2px hsla(0, 0%, 60%, 0.2); reserved for dropdowns, tooltips, and overlay panels. All shadows use a neutral grey (60% lightness) rather than pure black, maintaining warmth. Buttons

Shapes

GIVA's shape philosophy is "Soft-Technical"—rounded corners that feel contemporary without sacrificing clarity. The rounded scale progresses from sm (4px) for inputs and small UI elements, DEFAULT (6px) for buttons and standard cards, md (10px) for product cards and collection containers, lg (15px) for featured cards and modals, xl (20px) for hero sections and large containers, and full (50%) for circular badges and avatars. Buttons use 6px radius (--buttons-radius: 6px) with a 7px outset (--buttons-radius-outset: 7px) for focus states. Inputs use 4px radius (--inputs-radius: 4px) with a 5px o

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use rose-pink (#e9718b) background with white text, 44px height, 12px vertical / 30px horizontal padding, and 6px border-radius. On hover, the background darkens to #d85a77 over 200ms. Secondary buttons use transparent background with a 2px rose-pink border and matching text colour; on hover, the background fills with surface-container-low (#f4e5eb). Tertiary buttons use golden amber (#ffb214) background with dark text for promotional or secondary actions. All buttons include a 1px border (--buttons-border-width: 1px) at 100% opacity (--buttons-border-opacity: 1.0) to define edges crisply. Focus states add a 3px ring of rgba(233, 113, 139, 0.1) (primary colour at 10% opacity) with 0.3px offset (--buttons-borde

Do's and Don'ts

**Do**

• Do use rose-pink (#e9718b) exclusively for primary CTAs and interactive focus states—it's the brand's signature and must remain distinctive.
• Do apply 24px (md spacing) as the default padding for cards and containers; use lg (40px) only for major section breaks.
• Do maintain the 4.5:1 contrast ratio minimum on all text; test on-surface (#1c1c1c) at 75% opacity against surface backgrounds.
• Do use Lato for body and UI labels; reserve Assistant for display and hero headings to maintain visual hierarchy.
• Do apply the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on card hover and interactive elevation; never exceed Level 3 shadow (2px 2px 10px 2px hsla(0, 0%, 60%, 0.2)).
• Do use 6px border-radius for buttons and 4px for inputs; this is the soft-technical standard.
• Do transition all interactive states over 150-200ms using ease-in-out timing; never use instant state changes.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on coloured backgrounds; use on-primary (#ffffff) or on-secondary (#1c1c1c) from the token system.
• Don't apply shadows to buttons in their default state; reserve shadows for hover and active states only.
• Don't mix Figtree and Assistant in the same heading; use Lato + Assistant for consistency.
• Don't exceed 20px border-radius on standard cards; reserve xl (20px) and full (50%) for hero sections and badges only.
• Don't use secondary (#ffb214) or tertiary (#928bf1) as primary CTA colours; these are accent colours for highlights and badges.
• Don't set letter-spacing below -0.04em or above 0.1em; maintain readability at all sizes.
• Don't apply more than one shadow layer to a single element; use the elevation scale (sm/md/lg) instead of stacking shadows.