Nourish

Overview

Nourish is a digital health platform that transforms personalized nutrition counseling into an accessible, human-centered experience. The design system embodies "Warm Minimalism"—a philosophy that combines the clarity and restraint of minimalist design with the approachability and emotional resonance of warm, natural materials. The brand serves patients seeking evidence-based dietary guidance, and the UI evokes the comfort of a trusted healthcare provider's office: clean, organized, and genuinely welcoming. The aesthetic relies on a sophisticated palette of warm neutrals (cream, taupe, soft grays) anchored by a vibrant, energetic orange (#fe5000) that signals action, health, and optimism. Voice: conversational yet authoritative, never clinical or cold. Example: "Your personalized nutrition plan is ready—let's start with what you eat today."

Colors

The color system is built on a foundation of warm, accessible neutrals that create visual calm while maintaining excellent contrast for readability and accessibility. Primary (#fe5000) is the brand's signature accent—used exclusively on call-to-action buttons, active states, and key interactive elements. It conveys energy and health without aggression. On-primary is pure white (#ffffff) for maximum contrast and legibility. Primary-container (#ffd9c4) provides a soft, approachable tint for secondary emphasis or background fills. The surface stack (surface #f8f7f6 → surface-container #e5dfd9 → surface-container-highest #d5cfc8) creates subtle visual hierarchy through warm gray tones, never pure white or black. On-surface (#151513) is a near-black with warm undertones for body text and primar

Typography

The type system uses CircularXX (a humanist sans-serif) across all weights—Book (400), Regular (400), and Medium (500)—to maintain warmth and approachability while ensuring clarity at all sizes. Display (60px, 500 weight, -0.02em tracking) anchors hero sections with confident presence. Headline-lg (40px, 500 weight) and headline-md (28px, 500 weight) establish information hierarchy for page titles and section breaks. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are optimized for readability on mobile and desktop; the 1.5x line-height ratio ensures comfortable scanning. Label-md (14px, 500 weight, 0.02em tracking) is used for button text, form labels, and UI microcopy—the increased tracking adds clarity and visual distinction. All type uses -

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible responsive scaling from mobile (single column) to desktop (multi-column layouts). The gutter is consistently 24px (md spacing), creating breathing room between sections. Container max-widths vary by context: hero sections use 1280px, content cards use 1024px, and modals use 800px. White-space is generous—lg spacing (40px) separates major sections, md spacing (24px) separates cards and components, and sm spacing (12px) separates inline elements. This rhythm creates a calm, unhurried visual experience that mirrors the brand's healthcare positioning. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently to padding, margins, and gaps. Mobile-first responsive breakpoints:

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast while maintaining clear visual separation. Level 1 (Base): no shadow; flat surfaces on the background. Level 2 (Cards & Inputs): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating subtle definition. Level 3 (Elevated Cards & Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), providing clear lift. Level 4 (Floating Actions & Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for modals and dropdowns. On hover, cards transition to Level 3 with a 200ms ease-out timing function and a subtle 2px upward tr

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the interface while maintaining clarity and usability. Buttons use full radius (9999px / border-radius: 624.938rem in computed styles) to create a pill shape that feels friendly and approachable, signaling safety and trust. Cards and containers use lg radius (1rem / 16px) for a subtle, professional softness. Input fields and smaller components use DEFAULT radius (0.5rem / 8px) for a balanced, neutral appearance. Modals and overlays use xl radius (1.5rem / 24px) for a more prominent, intentional shape. The

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#fe5000) background with {colors.on-primary} (white) text, full radius (9999px), and padding 10px 24px for a 48px height. On hover, the background shifts to #e64a00 with an enhanced shadow (0 6px 16px rgba(254, 80, 0, 0.25)) and a 200ms ease-out transition. On active/pressed, the background darkens to #c85a1a with a reduced shadow (0 2px 4px rgba(0, 0, 0, 0.12)). Button-secondary uses {colors.surface-bright} background with a 1px border in {colors.outline-variant}, maintaining the same height and radius. On hover, the background shifts to {colors.surface-container-low} with an elevated shadow. All buttons use {typography.label-md} (14px, 500 weight, 0.02em tracking) for crisp, legible tex

Do's and Don'ts

**Do**

• Do use primary (#fe5000) exclusively for CTAs, active states, and key interactive elements—never for backgrounds or body text.
• Do maintain the 1.5x line-height ratio (28px for 18px body, 24px for 16px body) to ensure comfortable reading on all screen sizes.
• Do apply the full radius (9999px) only to buttons and badges; use lg radius (1rem) for cards and DEFAULT (0.5rem) for inputs.
• Do use the warm neutral surface stack (surface → surface-container → surface-container-highest) to create visual hierarchy without harsh contrast.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) as the standard card shadow; elevate to 0 8px 24px rgba(0, 0, 0, 0.12) only for modals and floating elements.
• Do use CircularXX-Medium (500 weight) for headlines and labels; use CircularXX-Regular (400 weight) for body text and descriptions.
• Do implement focus rings with a 3px colored outline (rgba(254, 80, 0, 0.1) for primary focus) to meet WCAG AA accessibility standards.

**Don't**

• Don't use primary color (#fe5000) for body text, backgrounds, or non-interactive elements—it should feel special and actionable.
• Don't apply rounded corners greater than lg (1rem) to cards or containers; reserve xl (1.5rem) and full (9999px) for modals and buttons only.
• Don't use pure white (#ffffff) or pure black (#000000) for text or backgrounds; always use the warm-tinted on-surface (#151513) and surface (#f8f7f6) tokens.
• Don't stack multiple shadows or use blur filters (backdrop-filter, filter: blur) on surfaces; the system relies on clean shadows and color contrast for depth.
• Don't reduce line-height below 1.4x for body text; the 1.5x ratio (28px for 18px, 24px for 16px) is essential for readability and accessibility.
• Don't use secondary (#7670d8) or tertiary (#9a94e2) as primary CTAs; reserve them for badges, secondary buttons, and supporting UI elements.
• Don't apply hover effects with transition times shorter than 150ms or longer than 300ms; use 200ms ease-out as the standard for button and card interactions.