Nuzest

Overview

Nuzest is a premium plant-based nutrition brand that transforms whole-food ingredients into accessible, science-backed supplements. The brand serves health-conscious consumers seeking transparency, efficacy, and clean nutrition without compromise. The aesthetic is "Warm Minimalism"—a design language that balances organic, earthy tones (#07272d deep navy, #a4d65e vibrant lime-green) with generous whitespace and refined typography, evoking both natural authenticity and modern wellness sophistication. The UI conveys calm clarity: every interaction feels intentional, every surface breathes, and every call-to-action invites rather than demands. Voice: conversational yet authoritative, grounded in science but never clinical. Example: "Your body deserves ingredients you can pronounce—and nutrition that actually works."

Colors

The color system anchors on a sophisticated dark navy primary (#07272d, rgb(7, 39, 45)) used for text, buttons, and interactive elements—this is the brand's signature, appearing on all CTAs and navigation. The secondary accent is a vibrant, energetic lime-green (#a4d65e) that signals vitality and plant-based authenticity; it appears on badges, highlights, and supporting UI elements. A tertiary blue (#467c99) provides a calm, trustworthy accent for secondary actions and informational components. The surface stack is built on warm, off-white tones: #faf8f3 (surface, the default page background), #ffffff (surface-bright for elevated cards), and #e5e5e5 (surface-variant for subtle dividers). On-surface text is the primary navy (#07272d) at 100% opacity for body copy, with #525252 (on-surface-v

Typography

The type system uses Lausanneon as the primary typeface—a geometric, humanist sans-serif that conveys both approachability and premium quality. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) introduces major sections; Headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) provide readable, generous text blocks with 0.01–0.02em letter-spacing to maintain the brand's refined character. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are reserved for buttons, badges, and UI labels. All headings use negative letter-spacing (-0.04em to -0.01em) to tighten their visual weight and create a premium fee

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid design on mobile (single column, 24px gutter) and expanding to multi-column layouts on desktop. The spacing scale is semantic: use lg (40px) for section separation, md (24px) for component padding and card spacing, sm (12px) for internal element spacing, and xs (4px) for micro-interactions. The hero section uses 64px vertical padding to create breathing room; product cards sit in a 2–3 column grid on desktop with 24px gaps. Container max-width is enforced at 1280px to prevent content from stretching excessively on ultra-wide screens. Whitespace is intentional and abundant—avoid cramping elements; the warm off-white background (#faf8f3) is not a filler but an active design element that frames content. Margin

Elevation & Depth

Depth is achieved through a restrained shadow system that respects the minimalist aesthetic. Level 1 (Base): no shadow; elements sit flush on the surface (#faf8f3). Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); used for product cards, input fields, and standard containers. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); applied on card-hover and modal overlays to signal interactivity. Shadows use a warm black (rgba(0, 0, 0, X)) rather than cool blue-tinted shadows, maintaining the organic, earthy feel. No gradients or blur effects are used; the syste

Shapes

The shape philosophy is "Warm Geometric"—rounded corners are used strategically to soften the modern aesthetic without sacrificing clarity. Buttons use full radius (9999px, border-radius: 9999px) to create pill-shaped CTAs that feel approachable and clickable; this is the most distinctive shape in the system. Cards and containers use lg (20px) or md (10px) radius depending on prominence: hero sections and featured cards use 20px, standard product cards use 10px. Input fields use DEFAULT (8px) radius for a subtle, functional appearance. Badges and small UI elements use full radius (9999px) to m

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses the navy primary (#07272d) background with white text, 12px horizontal padding, 48px height, and full radius (9999px border-radius). On hover, the background shifts to the primary-container (#1a1a1a, a slightly darker navy) with a 200ms ease-out transition—no shadow added, keeping the interaction flat and responsive. The button-secondary variant uses a transparent background with a 1px solid border in outline color (#707070) and navy text; on hover, it gains a subtle background (#f0ede9, surface-container-high) while maintaining the border. Both button variants use label-md typography (14px, 600 weight) for consistent, scannable text.

Containers & Surfaces Cards (card component) use surf

Do's and Don'ts

**Do**

• Do use the navy primary (#07272d) on all primary CTAs and interactive elements—it is the brand's signature and must be instantly recognizable.
• Do apply full radius (9999px) exclusively to buttons to create a distinctive, inviting interaction pattern that signals primary actions.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to allow content to breathe and guide the user's eye.
• Do use the lime-green secondary (#a4d65e) sparingly on badges, highlights, and supporting accents to signal vitality without overwhelming the palette.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers to create depth without introducing blur or glassmorphism effects.
• Do use Lausanneon typography with negative letter-spacing (-0.04em to -0.01em) on headings to maintain the premium, refined aesthetic.

**Don't**

• Don't use the primary navy as a background color for large sections—reserve it for text, buttons, and small UI elements; the warm off-white (#faf8f3) is the primary surface.
• Don't apply rounded corners to the promotional banner or urgent alerts—sharp edges signal urgency and distinction from the rest of the interface.
• Don't add shadows to buttons in their default state; keep them flat and let color and typography convey their interactive nature.
• Don't use the secondary green (#a4d65e) on body text or large text blocks—it is an accent color for highlights and badges only; use navy (#07272d) for all body copy.
• Don't exceed a 1280px container max-width on desktop; content should never stretch excessively, maintaining the refined, controlled aesthetic.
• Don't mix typefaces; Lausanneon is the sole typeface for all UI text—avoid system fonts or serif alternatives that would break the cohesive brand identity.