Seed

Overview

Seed is a clinically-backed probiotic and prebiotic brand that transforms gut health into systemic wellness through precision science and nature-inspired design. The design system embodies 'Organic Minimalism'—a philosophy that balances scientific rigor with the living, approachable aesthetics of nature. The brand serves health-conscious consumers seeking evidence-based solutions, evoking a sense of calm clarity and biological authenticity. Every interface element is designed to feel both sophisticated and accessible, reflecting the brand's commitment to making complex microbiome science understandable and actionable.

Seed's voice is precise, grounded, and optimistic without hyperbole. The tone avoids breathless marketing language in favor of clear, benefit-driven statements rooted in clinical evidence. Vocabulary emphasizes 'systemic health,' 'formulations,' 'clinical outcomes,' and 'microbiome science.' The brand personality is that of a trusted scientific partner—knowledgeable, transparent, and genuinely invested in user outcomes. Example sentence in Seed's voice: 'Our DS-01® Daily Synbiotic is clinically studied to support gut barrier function, energy production, and immune resilience—measurable benefits for your whole body.'

Colors

The Seed color palette centers on a deep forest green primary (#1c3a13) paired with a vibrant lime secondary (#68b631), creating a nature-rooted yet energetic visual identity. Primary (#1c3a13) is used exclusively for CTAs ('Get Started,' 'Take the Quiz'), navigation focus states, and brand-critical interactive elements—it commands attention through depth rather than brightness. Secondary (#68b631) appears on accent badges, highlights, and supporting CTAs ('Shop Now'), providing visual rhythm and approachability. The tertiary error color (#ff4136) is reserved for alerts and critical feedback, maintaining visual hierarchy through restraint.

The surface stack uses warm, off-white neutrals (#fcfcf7 base, #f6f6f4 dim, #eeeeee container-lowest) that evoke natural paper and organic materials, n

Typography

Seed Sans is the proprietary typeface family, paired with Helvetica as a fallback, creating a clean, modern foundation that avoids generic system fonts. The type system uses seven distinct scales: display (60px, 700 weight) for hero statements, headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, title-lg (20px, 600 weight) for card headers, body-lg (18px, 400 weight) for rich content, body-md (16px, 400 weight) for standard copy, and label-md/sm (14px/12px, 350–500 weight) for UI labels and badges. Letter-spacing ranges from -0.04em on display (creating visual tightness and authority) to +0.02em on body-lg (improving readability in longer passages). Line-height scales proportionally: display uses 68px (1.13x), headlines use 36–48px (1.2–1.3x),

Layout

Seed uses a fluid 12-column grid with a 1280px container max-width, allowing responsive scaling from mobile (single column) to desktop (full grid). The page rhythm is governed by the lg spacing token (40px) for section separation, creating generous white space that mirrors the brand's 'breathing room' philosophy. Gutter spacing is consistently 24px (md token), applied to all card and content padding. The hero section uses asymmetric layout: headline and CTAs occupy the left 50% (with md/lg spacing for breathing room), while product imagery fills the right 50% with a soft blur effect (backdrop-filter: blur(8px) on background elements). Secondary sections alternate between full-width containers and constrained card grids (3–4 columns on desktop, 1–2 on tablet, 1 on mobile). All inputs and fo

Elevation & Depth

Depth in Seed's design system is achieved through a restrained shadow hierarchy that avoids harsh contrast, maintaining the warm, organic aesthetic. Level 1 (Base): No shadow; elements sit flush on the surface (#fcfcf7). Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift and definition without visual harshness. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), providing clear separation from the background while maintaining softness. Interactive elements (buttons, inputs) use no shadow by default; on hover, they transition

Shapes

Seed's shape philosophy is 'Organic Precision'—combining soft, approachable curves with sharp, scientific clarity. Buttons use full-radius (9999px / border-radius: 1000px) to evoke natural, pill-like forms that feel friendly and inviting; this is applied to primary CTAs ('Get Started,' 'Take the Quiz'). Secondary buttons use sm radius (4px / 0.25rem) to signal a more utilitarian, data-driven interaction. Cards and containers use DEFAULT radius (8px / 0.5rem) for a balanced, modern appearance. Input fields use md radius (12px / 0.75rem) to create a softer, more approachable form experience. Mod

Components

Action Elements Primary buttons use a deep forest green background (#1c3a13), white text (#fcfcf7), full radius (1000px), and 10px 16px padding, creating a 40px height. Font weight is 350 (Seed Sans Light-weight variant) for a refined, non-aggressive appearance. On hover, the background shifts to #2d5a1f (a darker forest tone) with a 200ms ease-out transition. Focus state adds a 2px outline at {colors.primary} with 2px offset. Secondary buttons use lime-green background (#d3fa99), dark text (#1c3a13), sm radius (4px), and 8px 56px padding. Tertiary buttons are transparent with a bottom border (1px solid {colors.on-surface}), creating a text-link appearance; on hover, the text color shifts to primary (#1c3a13) and the border thickens to 2px.

Containers & Surfaces Cards use a warm o

Do's and Don'ts

**Do**

• Do use primary (#1c3a13) exclusively for high-priority CTAs and interactive focus states—it commands attention through depth, not brightness.
• Do apply lg spacing (40px) between major sections to create the 'breathing room' that defines Seed's organic aesthetic.
• Do use full-radius (1000px) on primary buttons to evoke natural, approachable forms that align with the 'living health' brand message.
• Do pair Seed Sans with Helvetica fallback—never substitute with generic system fonts like -apple-system or sans-serif.
• Do use Level 2 shadows (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and Level 3 (0 16px 40px rgba(0, 0, 0, 0.12)) for modals to maintain visual hierarchy without harshness.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) on small labels over product imagery to ensure legibility.

**Don't**

• Don't use pure white (#ffffff) as a surface color—always use the warm off-white (#fcfcf7) to maintain the organic, paper-like aesthetic.
• Don't apply shadows to buttons or inputs by default; reserve shadows for hover/active states to maintain visual clarity.
• Don't use secondary (#68b631) for primary CTAs—it's reserved for accent badges and supporting actions; primary (#1c3a13) must own the main call-to-action.
• Don't exceed lg radius (16px) on any element except full-radius buttons—over-rounding dilutes the scientific precision of the brand.
• Don't use letter-spacing below -0.04em or above +0.02em outside the defined typography scale—it disrupts the carefully calibrated readability hierarchy.
• Don't apply backdrop-filter blur effects to anything other than modal overlays—they should be used sparingly to avoid visual confusion.