---
title: "Seed design system"
variant: extended
source: https://seed.com/
captured_at: 2026-10-12
theme: light
industry: health
generator: Design DNA (https://four.wiralomi.com/style/seed-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Seed · Design System

> Clinical science, grounded in a living world

**Theme:** light · **Industry:** health · **Source:** https://seed.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Seed pairs clinical wellness products with an editorial visual language rooted in botanical greens and warm off-white. Immersive product and lifestyle imagery is balanced by clear science-led content, rounded cards, and spacious transitions between sections.

## North star

Let warm cream, botanical green, and authentic product imagery carry the story, keeping science content as clear as the commerce.

## Overview

The page is built around a warm near-white canvas (#fcfcf7) and deep botanical green (#1c3a13), with bright lime (#d3fa99) reserved for the slim quiz announcement and small promotional badges. Seed Sans carries nearly all text: large, lightly weighted headlines create an editorial feel, while compact navigation and body copy stay understated. The opening is a full-bleed lifestyle photograph with text aligned to the left; product jars occupy the opposite side and remain the focal point. A dark green product band follows, using a row of rounded product cards, then the layout returns to light backgrounds for bundles, capsule science, education, and member stories. The page alternates broad, calm sections with denser product and media groupings rather than relying on decorative effects. Borders are restrained hairlines; cards and buttons provide the main soft geometry. Green-on-cream contrasts keep calls to action legible and consistent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Seed Cream | `#fcfcf7` | `--color-seed-cream` | neutral | Primary page canvas and light text on dark green; also appears in navigation, cards, buttons, and footer details. |
| Botanical Ink | `#1c3a13` | `--color-botanical-ink` | brand | Core brand green for headings, text, primary CTAs, dark section bands, product cards, and footer. |
| Lime Signal | `#d3fa99` | `--color-lime-signal` | accent | High-visibility announcement strip and small bestseller or bundle badges; use sparingly against green and cream. |
| Soft Mineral | `#d3d5d3` | `--color-soft-mineral` | semantic | Subtle hairline border on science and product information cards. |
| Moss Divider | `#486040` | `--color-moss-divider` | surface | Secondary green detected in the footer; keep to supporting footer details rather than a major page surface. |
| Stone Gray | `#c4c7c4` | `--color-stone-gray` | surface | Muted section or button surface detected in measured styles; use as a restrained neutral block, not a defining brand color. |
| Parchment Gray | `#eeeee9` | `--color-parchment-gray` | surface | Quiet card or supporting surface; a subtle warm-gray neutral rather than a dominant canvas. |

### Semantic aliases

`--color-canvas` → `#fcfcf7` (Seed Cream) · `--color-surface` → `#1c3a13` (Botanical Ink) · `--color-surface-2` → `#c4c7c4` (Stone Gray) · `--color-surface-3` → `#eeeee9` (Parchment Gray) · `--color-text` → `#1c3a13` (Botanical Ink) · `--color-text-muted` → `#fcfcf7` (Seed Cream) · `--color-border` → `#d3d5d3` (Soft Mineral) · `--color-accent` → `#1c3a13` (Botanical Ink) · `--color-on-accent` → `#fcfcf7` (Seed Cream)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c3a13` | `#fcfcf7` | 12.26:1 | AAA |
| `#1c3a13` | `#c4c7c4` | 7.4:1 | AAA |
| `#1c3a13` | `#eeeee9` | 10.84:1 | AAA |
| `#fcfcf7` | `#1c3a13` | 12.26:1 | AAA |
| `#fcfcf7` | `#c4c7c4` | 1.66:1 | fail |
| `#fcfcf7` | `#eeeee9` | 1.13:1 | fail |
| `#1c3a13` | `#fcfcf7` | 12.26:1 | AAA |
| `#1c3a13` | `#c4c7c4` | 7.4:1 | AAA |
| `#1c3a13` | `#eeeee9` | 10.84:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Seed Sans | `--font-body` | webfont | 350, 400, 500, 300 | Headlines, body copy, navigation, links, buttons, and labels throughout the page. | Inter |
| Seed Sans Mono | `--font-mono` | webfont | 300, 400 | Small technical or code-like labels, including uppercase microcopy. | Roboto Mono |

- **Seed Sans:** Use light-to-regular weights; headlines are generously sized with tight negative tracking, while navigation and body copy remain compact and sentence case.
- **Seed Sans Mono:** Use sparingly at small sizes, with light weight and uppercase treatment for technical labels.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 350 | 1.1 | -0.015em | — | Seed Sans | Hero statement introducing a health routine built for the microbiome. |
| h2 | 40px | 350 | 1.1 | -0.01em | — | Seed Sans | Major section headlines and prominent editorial or product statements. |
| h3 | 32px | 400 | 1.1 | 0 | — | Seed Sans | Secondary feature headings and prominent content-card titles. |
| h4 | 24px | 350 | 1.2 | -0.02em | — | Seed Sans | Compact section and product-group headings. |
| body | 16px | 350 | 1.3 | -0.01em | — | Seed Sans | Product descriptions, explanatory science copy, and editorial paragraphs. |
| caption | 12px | 350 | 1.4 | -0.003em | — | Seed Sans | Badges, image captions, and compact supporting labels. |
| button | 16px | 350 | normal | -0.002em | — | Seed Sans | Primary and secondary action labels. |
| nav | 14px | 350 | 1.4 | 0 | — | Seed Sans | Main navigation and utility links. |
| link | 16px | 350 | normal | -0.002em | — | Seed Sans | Inline and standalone shopping or discovery links. |
| code | 12px | 300 | 1.5 | 0 | uppercase | Seed Sans Mono | Small technical labels and uppercase scientific microcopy. |

OpenType features in use: `"ss05"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 7, 8, 10, 11, 12, 16, 20, 24, 32, 40, 48, 56, 80 px.
- Section rhythm 32px · element gap 16px · card padding 88px · max content width 1376px.

The homepage uses a wide desktop canvas, with content reaching close to the viewport edges in immersive media sections and a measured page max width of 1376px. The hero aligns text left over full-bleed photography; subsequent content shifts between a full-width dark product band, split bundle and education layouts, and multi-column cards or media rails. Sections are generously separated, with comfortable density and clear alignment. Product cards create the densest commerce area, while editorial and testimonial sections retain open space.

## Shape & elevation

- Radius: button `9999px` · input `8px` · card `16px` · badge `9999px` · nav `9999px` · link `24px` · xs `8px` · sm `16px` · md `24px` · lg `32px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The visual system is mostly flat: no measured shadows or gradients define the page. Separate content through background-color changes, restrained borders such as #d3d5d3, and rounded card silhouettes. Image and video panels may feel layered through their crops and placement, while buttons use filled green or lime treatments rather than shadow-based elevation.

## Imagery

Use real, softly lit lifestyle and product photography as the main visual asset. The hero places Seed jars in a natural interior, with subdued green and cream surroundings; later sections mix product still lifes, human stories, ingredient or capsule visuals, and video-led science content. Keep imagery immersive and photographic rather than adding decorative illustration. Image cards use rounded corners and uncluttered framing.

## Components

### Announcement strip

A narrow lime (#d3fa99) bar above navigation, centering a product-finder link in dark green.

### Primary pill CTA

Deep green (#1c3a13) filled button with warm cream (#fcfcf7) text and a fully rounded silhouette.

### Product card

Rounded cards sit together in a dark green product band, combining concise labels, jar imagery, and a compact Shop Now action.

### Promotion badge

Small lime pill with dark green text marks bestseller or bundle offers without competing with the product.

### Science information card

A rounded explanatory panel pairs concise capsule or benefit content with restrained mineral-gray hairlines.

### Media story tile

Rounded photographic or video tile overlays short light text and a clear action on immersive imagery.

### Newsletter form

Footer signup uses a simple email input, fine light border, compact explanatory text, and a clear submit action.

### Measured component styles

- **Primary button** (“Skip to main content”): background #1c3a13 · text #fcfcf7 · radius 8px · padding 12px 20px · 400 14px Seed Sans
- **Secondary button** (“Read More”): background #fcfcf7 · text #1c3a13 · radius 1000px · padding 16px 24px · 350 16px Seed Sans
- **Link** (“Bestseller DS–01 ® Daily Synbiotic Shop ”): transparent background · text #1c3a13 · radius 24px · padding 40px · 400 16px Seed Sans
- **Input**: transparent background · text #fcfcf7 · border 2px solid #fcfcf7 · radius 8px · padding 14px 20px · 400 16px Seed Sans
- **Card** (“● LIPARI, PANAREA — ITALY Seed Labs Beca”): background #1c3a13 · text #1c3a13 · radius 16px · padding 48px 128px · 400 16px Seed Sans
- **Badge** (“Bestseller”): background #d3fa99 · text #1c3a13 · radius 1000px · padding 6px 8px · 500 12px Seed Sans
- **Navigation item** (“Shop All”): transparent background · text #fcfcf7 · radius 0px · padding 0px · 350 14px Seed Sans

## Do

- Use #fcfcf7 as the principal light canvas.
- Reserve #1c3a13 for core text, dark bands, and primary actions.
- Keep #d3fa99 to announcement and small promotional accents.
- Let authentic product and lifestyle photography lead the hero.
- Use generous space between distinct content sections.
- Keep card corners soft and borders subtle.

## Don't

- Do not introduce unmeasured brand colors.
- Do not make every section a dark green band.
- Do not use heavy shadows or decorative gradients.
- Do not crowd editorial copy with product controls.
- Do not let badges overpower product imagery.
- Do not replace the restrained type with bold all-caps display styling.

## Agent prompt

Build a new Seed-style health-commerce page with an editorial, science-led feel. Use Seed Cream (#fcfcf7) for the main light canvas and Botanical Ink (#1c3a13) for headings, body text, dark section bands, and primary CTAs. Reserve Lime Signal (#d3fa99) for a narrow announcement or compact promotional badge. Set type in a clean sans-serif close to Seed Sans, favoring light-to-regular weights and tight headline tracking. Use a strong lifestyle or product photograph as an immersive hero, then organize content into calm split layouts, rounded product cards, and clear science or editorial modules. Keep borders restrained, use little or no elevation, and preserve ample breathing room between sections. Make shopping actions obvious without sacrificing the considered, natural mood.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed lifestyle hero with left-aligned copy and product jars grouped on the right. | quiz entry, shop link, persistent top navigation | lime announcement strip, green primary CTA, full-bleed photography |
| 2 | product-grid | Deep green section with introductory copy above a horizontal row of product cards. | browse all products, shop individual products | dark green band, rounded product cards, small product labels |
| 3 | product-showcase | Light split layout with offer and description on the left, product photography on the right. | bundle promotion, shop bundle | lime offer badge, rounded image collage, green CTA |
| 4 | feature-split | Science-focused capsule feature arranged across multiple columns with a large visual panel. | explain product efficacy, scan capsule benefits | science labels, information card, large capsule visual |
| 5 | feature-split | Open editorial section on a warm light canvas with copy and a large media area. | learn about the microbiome, discover more | editorial headline, large rounded media panel, compact CTA |
| 6 | testimonials | Two-column testimonial area with a centered introduction and media-led member story. | view member experiences, browse story media | large headline, video or image panel, carousel controls |
| 7 | content-feed | A short introductory statement leads into a horizontally arranged story selection. | browse expert stories, select a story | editorial caption, compact content cards |
| 8 | gallery | Wide media rail of varied image and video cards arranged in a dense horizontal gallery. | browse media, open selected story | rounded image tiles, mixed card formats, media controls |
| 9 | feature-grid | Two large side-by-side rounded image panels with overlay copy and actions. | read lab story, shop featured product | photo-led panels, centered overlay text, pill actions |
| 10 | footer | Deep green footer with brand and newsletter content on the left and link columns alongside. | newsletter signup, browse site links, choose locale | light text on green, outlined signup field, multi-column navigation |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--color-dark-opacity-10: rgba(0, 0, 0, 0.1);
--color-dark-opacity-12: rgba(0, 0, 0, 0.12);
--color-dark-opacity-16: rgba(0, 0, 0, 0.16);
--color-dark-opacity-20: rgba(0, 0, 0, 0.2);
--color-dark-opacity-30: rgba(0, 0, 0, 0.3);
--color-dark-opacity-40: rgba(0, 0, 0, 0.4);
--color-dark-opacity-50: rgba(0, 0, 0, 0.5);
--color-dark-opacity-60: rgba(0, 0, 0, 0.6);
--color-dark-opacity-70: rgba(0, 0, 0, 0.7);
--color-dark-opacity-80: rgba(0, 0, 0, 0.8);
--color-dark-opacity-90: rgba(0, 0, 0, 0.9);
--color-dark-opacity-100: #000000;
--color-dark-opacity-00: rgba(0, 0, 0, 0);
--color-dark-opacity-08: rgba(0, 0, 0, 0.08);
--color-guidance-bright-green: #d3fa99;
--color-guidance-error: #eb5757;
--color-guidance-lemongrass: #e9f0ca;
--color-guidance-warning: #ebb057;
--color-light-opacity-10: rgba(255, 255, 255, 0.1);
--color-light-opacity-12: rgba(255, 255, 255, 0.12);
--color-light-opacity-16: rgba(255, 255, 255, 0.16);
--color-light-opacity-20: rgba(255, 255, 255, 0.2);
--color-light-opacity-30: rgba(255, 255, 255, 0.3);
--color-light-opacity-40: rgba(255, 255, 255, 0.4);
--color-light-opacity-50: rgba(255, 255, 255, 0.5);
--color-light-opacity-60: rgba(255, 255, 255, 0.6);
--color-light-opacity-70: rgba(255, 255, 255, 0.7);
--color-light-opacity-80: rgba(255, 255, 255, 0.8);
--color-light-opacity-90: rgba(255, 255, 255, 0.9);
--color-light-opacity-100: #ffffff;
--color-light-opacity-00: rgba(255, 255, 255, 0);
--color-light-opacity-08: rgba(255, 255, 255, 0.08);
--color-neutral-cool-neutral-20: #f9f9f9;
--color-neutral-cool-neutral-40: #efefef;
--color-neutral-cool-neutral-60: #e6e6e6;
--color-neutral-faded-green-20: #d2d8d0;
--color-neutral-faded-green-40: #a4b0a1;
--color-neutral-faded-green-60: #778971;
--color-neutral-foam-white: #eff1e4;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/seed-com