Savette

Overview

Savette embodies Refined Minimalism—a design philosophy that strips away ornamentation to reveal the essential beauty of heritage craftsmanship. The brand serves discerning customers who value Italian artisanal quality, understated elegance, and timeless design. The visual language prioritizes negative space, restrained typography, and a neutral palette punctuated by a vibrant cobalt accent (#0048ff) that signals interactive moments and calls to action. The emotional response is one of quiet confidence: the interface feels curated, intentional, and respectful of the user's intelligence.

The brand voice is precise, sophisticated, and never breathless. Savette speaks in measured cadence—think editorial rather than promotional. Vocabulary leans toward craft terminology ("handmade," "refined," "heritage") and avoids hyperbole. Example sentence in brand voice: "Each carryall is constructed by hand in our Milan atelier, using vegetable-tanned leather that develops character over time."

Colors

The color system is anchored in a luminous white (#ffffff) background paired with a warm parchment palette (#f2f0e8, #f8f7f3) that evokes natural linen and aged paper. Body text is a deep graphite (#323232), chosen for legibility and warmth over pure black, creating a softer reading experience. The primary accent is a saturated cobalt blue (#0048ff), reserved exclusively for interactive elements—buttons, links, and focus states—ensuring it commands attention without overwhelming the refined aesthetic. Secondary grays (#989898 for muted text, #d6d6d6 for borders) provide visual hierarchy and breathing room. The surface stack uses subtle increments: surface-container-lowest (#f2f0e8) for cards and modals, surface-container-high (#e9ecef) for hover states, creating depth through luminosity ra

Typography

The type system pairs two distinct voices: IvyOra (a refined serif) for display and headline hierarchy, and Baskerville URW (a classical serif) for body text, creating a cohesive yet layered reading experience. Display (64px, 400 weight, -0.02em tracking) anchors hero moments with understated grandeur; headline-lg (48px) and headline-md (32px) maintain the same weight, allowing size alone to establish hierarchy. Body text at 13–16px in Baskerville URW with 0.01–0.02em tracking ensures legibility while preserving the brand's editorial sensibility. Labels use Moderat, a geometric sans-serif, set at 8–11px with 0.2em letter-spacing (uppercase) for UI labels, search placeholders, and form hints—this creates visual separation between prose and interface chrome. Apply text-shadow: 0 1px 2px rgba

Layout

The layout operates on a 12-column grid with a max-width of 1300px, centered on the viewport. The design favors generous white space: section separation uses lg spacing (40px) vertically, gutter spacing (24px) horizontally between columns. The hero section spans full-width with a 50/50 image-to-text split on desktop, collapsing to single-column on mobile. Product grids use a flexible 3-column layout on desktop (4 on ultra-wide), 2 columns on tablet, 1 on mobile, with md spacing (24px) between cards. The footer and newsletter signup maintain the same container width, ensuring visual continuity. Padding inside containers is consistently md (24px) on desktop, sm (12px) on mobile, creating a responsive rhythm that feels intentional rather than cramped.

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic contrast. Level 1 (Base): the white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): background #f2f0e8 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift. Level 3 (Modals & Overlays): background #ffffff with box-shadow: 0 5px 15px rgba(37, 44, 97, 0.15), 0 2px 4px rgba(93, 100, 148, 0.2), a dual-layer shadow that suggests depth without heaviness. Hover states on cards transition to the Level 3 shadow over 300ms, signaling interactivity. No drop-shadows exceed 15px blur radius; th

Shapes

The design employs Architectural Precision: border-radius values are minimal and purposeful. Buttons and inputs use 4px (DEFAULT), creating a subtle softness without appearing rounded. Cards use 5px (md), slightly more generous, suggesting containment without playfulness. The rare full-width divider or badge uses 9999px (full) for a pill shape, reserved for status indicators and accent elements. This restraint reinforces the heritage craftsmanship narrative—sharp corners would feel industrial; excessive rounding would feel casual. The 4px default is the workhorse: it appears on form fields, sm

Components

Action Elements Buttons follow a strict hierarchy. Primary buttons (#0048ff on white, 44px height, 12px 24px padding) use the cobalt accent with uppercase label-md typography (11px, 0.2em tracking). On hover, the background shifts to #326cff (primary-container) over 300ms, maintaining the same border and padding. Secondary buttons are transparent with a 1px outline in #cccccc, text in #323232; on hover, the background fills with #e9ecef and the outline darkens to #989898. Ghost buttons (no background, no border) are used for tertiary actions like "Learn More"—text-only in #323232, underline appears on hover. All buttons use transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Cards are the primary container: 5px border-radius, #f2f0e8 b

Do's and Don'ts

**Do**

• Do use the cobalt primary (#0048ff) exclusively for interactive elements—buttons, links, focus states—to maintain visual hierarchy and brand recognition.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) between related content blocks to create breathing room and editorial clarity.
• Do apply 4px border-radius consistently to buttons and inputs; reserve 5px for cards and 9999px only for badges and pill-shaped status indicators.
• Do use IvyOra for all headlines and display text; pair with Baskerville URW for body copy to create a cohesive yet layered typographic voice.
• Do transition all interactive state changes over 300ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, refined feedback.
• Do use the parchment palette (#f2f0e8, #f8f7f3) for card backgrounds and surface containers to evoke heritage and warmth.

**Don't**

• Don't use pure black (#000000) for text; always use #323232 (graphite) to maintain the warm, refined aesthetic.
• Don't apply the cobalt accent (#0048ff) to non-interactive elements; reserve it for buttons, links, and focus states only.
• Don't exceed 15px blur radius on shadows; the brand rejects dramatic depth in favor of subtle, architectural layering.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding undermines the precision aesthetic.
• Don't render small labels (8px) over busy product photography without a text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) for legibility.
• Don't use more than two typefaces; IvyOra and Baskerville URW are the complete system; Moderat is reserved for UI labels only.