Nespresso

Overview

Nespresso is a luxury coffee brand that democratizes café-quality espresso and coffee for home use. The design system reflects this dual nature: premium sophistication meets everyday accessibility. The aesthetic is "Refined Minimalism"—clean, purposeful layouts with strategic use of forest green (#257a57) as the signature accent, warm earth tones (bronze #986f38), and a crisp white canvas. The brand personality is confident yet approachable: precise, knowledgeable, and never condescending. The UI evokes the ritual of coffee-making—deliberate, elegant, and rewarding. Example sentence in brand voice: "Vertuo machines brew café-quality espresso in under one minute—no barista training required."

Colors

The color system anchors on a forest green primary (#257a57) used exclusively for primary CTAs, active states, and brand-critical interactions. This green conveys both luxury (deep, sophisticated) and sustainability (Nespresso's environmental commitment). Secondary accent is a warm bronze (#986f38) for supporting elements, promotional badges, and secondary navigation. Tertiary blue (#57a7f0) provides contrast for links, focus states, and informational elements. The surface stack uses pure white (#ffffff) as the primary surface with a carefully calibrated gray scale: surface-container (#eeeeee) for subtle card backgrounds, surface-container-high (#e8e8e8) for hover states, and outline (#c5c5c5) for borders. On-surface text is a near-black (#17171a) for maximum readability at 16px body size.

Typography

The type system uses NespressoLucas (custom brand typeface) paired with Helvetica Neue as fallback, establishing a distinctive voice across all scales. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major announcements; Headline-lg (40px, 700 weight) anchors section titles; Headline-md (28px, 700 weight) structures subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and product descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the standard paragraph text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and UI controls; Label-sm (12px, 500 weight) is used for helper text and secondary information. All text over 12px uses 0.015625em letter-spacing for optical con

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across all breakpoints. The gutter spacing is 24px (md spacing unit), creating breathing room between grid columns. Page sections are separated using lg spacing (40px) for major rhythm breaks and md spacing (24px) for subsection separation. The hero section uses a full-width background with 64px (xl spacing) padding on desktop, creating generous white space around the headline and CTA cluster. Container elements (cards, modals, input groups) use md spacing (24px) for internal padding and sm spacing (12px) for element-to-element gaps. The design favors asymmetrical layouts: hero text occupies 50% width on desktop with product imagery on the right, creating visual balance without rigi

Elevation & Depth

Depth is conveyed through subtle shadow layering rather than dramatic z-index stacking. Level 1 (Base/Surface): no shadow, flat white background (#ffffff). Level 2 (Cards/Containers): box-shadow: 0 0 8px 0 rgba(23, 23, 26, 0.051), 0 2px 8px 0 rgba(23, 23, 26, 0.078)—a soft, diffused shadow suggesting gentle lift. Level 3 (Modals/Overlays): box-shadow: 0 8px 32px rgba(23, 23, 26, 0.12)—a more pronounced shadow for modal dialogs and floating panels. Hover states on cards transition to Level 3 shadow over 300ms, creating tactile feedback. Input fields use a 1px solid border (#c5c5c5) with no shad

Shapes

The shape philosophy is "Soft-Technical"—rounded corners signal approachability while maintaining geometric precision. Buttons use full radius (999px) to create pill-shaped affordances that feel modern and clickable; this 999px value is applied to all interactive elements (buttons, input fields, badges) to create visual cohesion. Cards and containers use sm radius (3px) for subtle definition without softness, maintaining a professional appearance. Modals and floating panels use md radius (8px) to distinguish them from standard cards while remaining refined. Form inputs use full radius (999px)

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use forest green (#257a57) background with white text, 48px height, 10px 24px padding, and full radius (999px). On hover, the background darkens to #1b5b40 over 300ms. On active/pressed state, the background remains #1b5b40 with no visual change to indicate sustained interaction. Disabled primary buttons use #17171a background with 30% opacity. Secondary buttons (outline style) use transparent background with a 1px border in primary green (#257a57) and green text; on hover, the background fills with green and text becomes white. Tertiary buttons use transparent background with a 1px gray border (#c5c5c5) and dark text (#17171a); on hover, the background becomes surface-container-high (#e8e8e8). All buttons inc

Do's and Don'ts

**Do**

• Do use forest green (#257a57) exclusively for primary CTAs and brand-critical interactions—it is the signature accent and should never be diluted or overused.
• Do maintain 48px minimum height for all touch targets (buttons, input fields, list items) to ensure accessibility and comfortable interaction on mobile devices.
• Do apply the full-radius (999px) consistently to buttons and input fields to create a unified, modern interaction language.
• Do use the 300ms ease-in-out transition on all interactive state changes (hover, focus, active) to provide tactile feedback without jarring motion.
• Do pair NespressoLucas with Helvetica Neue fallback to preserve the brand's distinctive voice; never substitute with generic system fonts.
• Do use Level 2 shadow (0 0 8px 0 rgba(23, 23, 26, 0.051), 0 2px 8px 0 rgba(23, 23, 26, 0.078)) for standard cards and Level 3 shadow (0 8px 32px rgba(23, 23, 26, 0.12)) for modals to create clear visual hierarchy.
• Do apply md spacing (24px) as the primary gutter and padding value; use lg spacing (40px) only for major section breaks.
• Do use the warm yellow (#f4e4a6) hero background sparingly—only for major promotional sections—to maintain visual impact and prevent fatigue.

**Don't**

• Don't use primary green (#257a57) for secondary UI elements like borders, backgrounds, or decorative accents—reserve it exclusively for actionable elements.
• Don't apply shadows larger than Level 3 (0 8px 32px rgba(23, 23, 26, 0.12)) as this creates visual heaviness and breaks the refined aesthetic.
• Don't use sharp corners (0px radius) on interactive elements; maintain sm radius (3px) minimum for cards and md radius (8px) for modals.
• Don't mix typefaces—NespressoLucas is the brand voice; using multiple font families dilutes recognition and professionalism.
• Don't create touch targets smaller than 44px × 44px or buttons shorter than 48px in height, as this violates accessibility standards and frustrates mobile users.
• Don't apply transitions longer than 300ms on interactive elements; anything slower feels sluggish and reduces perceived responsiveness.
• Don't use the error red (#dd3232) for non-error states; reserve it exclusively for validation failures and destructive actions.
• Don't override the 1px border on input fields with thicker strokes—the thin border maintains the refined, technical aesthetic.