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

# Vibrants · Design System

> Calm editorial design for everyday wellness

**Theme:** light · **Industry:** health · **Source:** https://vibrants.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._

A wellness storefront pairs bold editorial headings with bright, product-led imagery and a restrained palette. White space keeps the shopping experience clear, while pale blue-violet panels and deep navy anchors bring warmth and structure.

## North star

Keep the interface calm and legible on white, letting editorial New Kansas headings and colorful product photography provide the personality.

## Overview

Vibrants balances a mostly white storefront with a deep blue-black anchor: the announcement strip, hero CTA, and footer use #021422, while the legal footer deepens to #02101b. Product imagery supplies the vivid red, green, and blue color, so these package colors should remain within photography rather than becoming extra interface accents. Pale blue #f2f6ff and warm cream #fff6ea, alongside the screenshot’s soft blue-violet washes, distinguish editorial wellness panels without breaking the airy canvas. New Kansas gives headings a rounded, expressive editorial character; Montserrat keeps body copy, product details, and links readable. The page alternates full-width image-led stories with compact product and bundle shopping grids. Borders are thin and quiet, corners are gently rounded, and depth comes mostly from imagery and background transitions rather than shadows. The result feels approachable and commercial, but not like a conventional discount-heavy marketplace.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, navigation, and testimonial speech cards; preserves the page’s bright, open base. |
| Midnight Ink | `#021422` | `--color-midnight-ink` | brand | Announcement strip, primary CTA, prominent headings, and main footer; the principal dark anchor. |
| Soft Slate | `#ccd2d7` | `--color-soft-slate` | neutral | Thin product-card outlines and quiet structural borders. |
| Mist Line | `#e6e8e9` | `--color-mist-line` | neutral | Navigation, button, and card hairlines; keep borders subtle against white. |
| Sale Green | `#0c9a3d` | `--color-sale-green` | accent | Small sale badges in product and bundle merchandising. |
| Muted Graphite | `#67727a` | `--color-muted-graphite` | neutral | Secondary body copy and subdued navigation or footer text. |
| Warm Cream | `#fff6ea` | `--color-warm-cream` | surface | Pale warm card or section surface, complementing the softer editorial panels. |
| Deep Blue | `#001f38` | `--color-deep-blue` | brand | Dark blue heading and text variant within content areas. |
| Link Blue | `#0000ee` | `--color-link-blue` | accent | Measured link text and footer links; use sparingly as a functional accent. |
| Cloud Blue | `#f2f6ff` | `--color-cloud-blue` | surface | Pale blue nav, card, and editorial surfaces; supports soft background transitions. |
| Blue Gray | `#808f9c` | `--color-blue-gray` | neutral | Secondary copy color observed in text; subordinate to the darker primary text. |
| Forest CTA | `#00852e` | `--color-forest-cta` | accent | Measured Shop All Products button; distinct from the dark navy hero CTA shown in the screenshot. |
| Sky Link | `#91c3ff` | `--color-sky-link` | accent | Light blue link accent; reserve for limited interactive text. |
| Lilac Haze | `#ede9f7` | `--color-lilac-haze` | surface | Pale violet gradient stop visible in soft editorial background washes. |
| Footer Midnight | `#02101b` | `--color-footer-midnight` | brand | Deeper lower legal footer band, visually separated from the main footer. |
| Frost Blue | `#e9f0f7` | `--color-frost-blue` | surface | Pale blue gradient stop used in understated background transitions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#021422` (Midnight Ink) · `--color-surface-2` → `#f2f6ff` (Cloud Blue) · `--color-surface-3` → `#fff6ea` (Warm Cream) · `--color-surface-4` → `#02101b` (Footer Midnight) · `--color-text` → `#021422` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#67727a` (Muted Graphite) · `--color-border` → `#e6e8e9` (Mist Line) · `--color-accent` → `#0000ee` (Link Blue) · `--color-accent-2` → `#00852e` (Forest CTA) · `--color-accent-3` → `#91c3ff` (Sky Link) · `--color-on-accent` → `#f7f7f7`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#021422` | `#ffffff` | 18.65:1 | AAA |
| `#021422` | `#f2f6ff` | 17.23:1 | AAA |
| `#021422` | `#fff6ea` | 17.43:1 | AAA |
| `#ffffff` | `#021422` | 18.65:1 | AAA |
| `#ffffff` | `#f2f6ff` | 1.08:1 | fail |
| `#ffffff` | `#fff6ea` | 1.07:1 | fail |
| `#67727a` | `#ffffff` | 4.92:1 | AA |
| `#67727a` | `#021422` | 3.79:1 | AA-large |
| `#67727a` | `#f2f6ff` | 4.55:1 | AA |
| `#67727a` | `#fff6ea` | 4.6:1 | AA |

### Gradients

- `linear-gradient(90deg, rgb(233, 240, 247), rgb(237, 233, 247))`
- `linear-gradient(360deg, rgb(254, 247, 236) 41.79%, rgb(254, 239, 236) 98.82%)`
- `linear-gradient(300deg, rgba(114, 77, 153, 0.05) 0px, rgba(58, 61, 138, 0.05) 17.39%, rgba(2, 175, 224, 0.05) 34.81%, rgba(95, 183, 62, 0.05) 51.04%, rgba(255, 237, 0, 0.05) 66.67%, rgba(237, 116, 43, 0.05) 83.16%, rgba(`
- `radial-gradient(96.88% 50%, rgb(255, 255, 255) 0px, rgb(238, 233, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| new-kansas | `--font-display` | webfont | 600, 500, 400, 700 | Display headings, navigation, captions, and product titles | DM Serif Display |
| Montserrat | `--font-body` | webfont | 500, 400, 700, 600 | Body copy, links, product details, badges, and testimonial text | Montserrat |
| inter | `--font-inter` | webfont | 500, 400, 700, 600 | Product-card labels and product or bundle links | Inter |
| rift-soft | `--font-rift-soft` | webfont | 600 | Uppercase eyebrow labels above editorial headings | Oswald |

- **new-kansas:** Use measured 500–600 weights for headings, with clean tracking and sentence case.
- **Montserrat:** Use readable regular-to-semibold weights; body copy has generous leading, while badges use uppercase.
- **inter:** Compact, neutral product information; regular weight and restrained presentation.
- **rift-soft:** Use the measured semibold style, uppercase, with visibly expanded tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.25 | 0 | — | new-kansas | Large editorial hero headline. |
| h2 | 32px | 500 | 1.13 | 0 | — | new-kansas | Major section headings such as Our Patches. |
| h3 | 28px | 500 | 1.29 | -0.02em | — | new-kansas | Secondary editorial and feature headings. |
| h4 | 24px | 600 | 1.17 | -0.01em | — | new-kansas | Product, bundle, and smaller content headings. |
| body | 16px | 500 | 1.8 | 0 | — | Montserrat | Descriptive copy, benefits, and supporting paragraphs. |
| caption | 14px | 600 | normal | 0 | — | new-kansas | Compact labels and short supporting metadata. |
| nav | 16px | 600 | 1.5 | -0.01em | — | new-kansas | Announcement and primary navigation labels. |
| link | 14.5px | 400 | normal | 0 | — | Montserrat | Product links and secondary calls to action. |
| eyebrow | 16px | 600 | 1 | 0.063em | uppercase | rift-soft | Uppercase section labels above feature headings. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 3, 6, 8, 10, 12, 16, 18, 20, 22, 24, 32, 40, 48, 64, 80 px.
- Section rhythm 40px · element gap 6px · card padding — · max content width 1280px.

The measured content uses a 1280px maximum page width and a compact density, with a 12-column product area and two-column bundle and editorial sections. The hero and mission stories are full-bleed media-led panels; surrounding merchandise sits in aligned card grids. Most sections are left-aligned, with select trust and testimonial blocks centered. A measured 40px section gap provides a consistent cadence, while generous white canvas around cards keeps the overall page from feeling crowded.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `50%` · badge `4px` · nav `12px` · link `20px` · xs `3px` · sm `4px` · md `5px` · lg `8px` · xl `10px` · 2xl `12px`
- Shadow `hairline` (other): `rgb(242, 242, 248) 1px 0px 0px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat: thin measured gray borders define product cards, with no prominent shadows recorded. Rounded card and button corners soften the otherwise crisp grid. Background color and photography create separation between editorial sections; reserve layering for image compositions and testimonial message bubbles rather than adding heavy drop shadows.

## Imagery

Realistic product-pack photography is the core shopping asset, shown in vivid color against bright, uncluttered backdrops. Lifestyle photos of people applying or holding patches anchor the editorial stories. Images are often arranged as full-width split panels, with text alongside the subject; subtle pastel blue and violet washes soften content backgrounds. Testimonials use floating white message cards rather than illustrations.

## Components

### Announcement bar

A narrow #021422 strip with repeating promotional text in small New Kansas navigation styling.

### Main navigation

White header with wordmark, category links, and account and cart icons; restrained dark text and subtle separators.

### Hero panel

Full-width lifestyle/product image with left-aligned New Kansas headline, supporting copy, and a dark navy Shop Patches CTA.

### Product card

Compact product grid card with package imagery, thin #ccd2d7 or #e6e8e9 outline, title, price, and occasional sale badge.

### Bundle feature

Two-column bundle merchandising with large pack imagery, bundle name, rating, price, green discount badge, and dark Shop Now button.

### Editorial feature panel

Image-and-copy split with uppercase rift-soft eyebrow, New Kansas heading, body text, and a simple outlined action.

### Testimonial bubbles

Small white rounded quote cards layered over a pale blue-violet surface, with concise customer messages.

### Footer

Three-column deep navy link area followed by a darker legal band, small text, and social icons.

### Measured component styles

- **Primary button** (“Shop All Products”): background #00852e · text #f7f7f7 · radius 8px · padding 16px 32px · 600 16px new-kansas
- **Secondary button** (“Calm Down For Stress”): transparent background · text #0000ee · border 1px solid #e3e5e6 · radius 8px · padding 12px · 400 14.4px Montserrat
- **Link** (“Bounce Back Patches Essential Pack $59 $”): transparent background · text #000000 · radius 0px · padding 0px · 400 14.4px inter
- **Card** (“SAVE $25”): transparent background · text #000000 · border 1px solid #ccd2d7 · radius 8px · padding 0px · 400 14.4px inter
- **Badge** (“16% OFF”): background #0c9a3d · text #ffffff · radius 4px · padding 8px · 500 12px Montserrat · uppercase
- **Navigation item** (“Save on Your Next Order Shop Deals Save ”): transparent background · text #ffffff · radius 0px · padding 0px · 600 14px new-kansas

## Do

- Keep the main canvas white and bright.
- Use Midnight Ink for strong structural anchors.
- Let package photography supply the strongest saturated colors.
- Set prominent headings in an expressive serif display face.
- Use pale blue or lilac washes for selected editorial panels.
- Keep card outlines thin and understated.

## Don't

- Do not turn product package colors into extra interface accents.
- Do not add heavy shadows to cards.
- Do not make every section use a tinted background.
- Do not crowd product cards with decorative elements.
- Do not use generic sans-serif styling for every heading.
- Do not replace the bright canvas with a dark overall theme.

## Agent prompt

Build a new wellness storefront page in the Vibrants visual style. Use Gallery White (#ffffff) as the dominant canvas, with Midnight Ink (#021422) for dark navigation bands, prominent headings, and primary CTAs; use Footer Midnight (#02101b) for a distinct legal footer. Set editorial headings in a New Kansas-like display serif and supporting copy in Montserrat. Organize products in a compact, aligned card grid with thin Soft Slate (#ccd2d7) or Mist Line (#e6e8e9) borders and rounded corners. Use Cloud Blue (#f2f6ff), Frost Blue (#e9f0f7), and Lilac Haze (#ede9f7) in a few soft editorial panels. Let vivid product photography carry the saturated colors. Include full-width image-and-copy stories, simple outlined secondary actions, and a clear multi-column footer. Keep shadows minimal and preserve generous white breathing room.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width image-led hero; copy and CTA on the left, colorful product packages on the right. | Primary shop CTA, Customer-count social proof | Editorial display headline, Dark CTA, Sky-toned imagery |
| 2 | product-grid | Horizontal 12-column product carousel with image-first cards and compact product details. | Carousel arrows, Product links, Price comparison | Thin card borders, Package imagery, Green sale badges |
| 3 | product-showcase | Two-column bundle comparison with large product imagery and purchase details below. | Bundle comparison, Ratings and review counts, Shop Now CTA | Large image panels, Discount badges, Dark buttons |
| 4 | feature-split | Full-width split panel with lifestyle photo on one side and editorial copy on the other. | Learn-more action, Benefit explanation | Uppercase eyebrow, Soft blue-violet surface, Outlined button |
| 5 | feature-grid | Two side-by-side trust panels; centered approval copy beside a physician endorsement. | Trust-building proof, Expert endorsement | Pale gradient panels, Centered heading, Portrait image |
| 6 | feature-split | Full-width image-and-copy composition with text on the left and lifestyle subject on the right. | Brand story, About Us link | Uppercase eyebrow, Editorial heading, Soft tinted background |
| 7 | testimonials | Centered introduction and CTA beside a pale testimonial area with floating quote cards. | Customer quotes, Shop Now action | White message bubbles, Soft blue-lilac panel, Centered heading |
| 8 | footer | Three-column dark footer with product, learning, support, and social links. | Grouped navigation, Social links | Midnight background, Small uppercase labels, Social icons |
| 9 | footer | Full-width darker legal strip with compact copyright, policies, and product disclaimer. | Policy links, Health disclaimer | Deeper navy band, Small muted text |

## Source CSS custom properties (selected)

```css
--primary-color: #2d5470;
--bg-gradient-primary: linear-gradient(274.86deg, #ffd9d6 7.84%, #d1dbff 53.85%, #daebff 100%);
--bg-gradient-secondary: linear-gradient(90deg, rgba(255, 247, 238, .85) 0%, #eef5ff 100%);
--color-blue: #06486d;
--color-grey: #6d7b88;
--color-grey-300: #9aa3aa;
--oke-widget-spaceAbove: 20px;
--oke-widget-spaceBelow: 20px;
--oke-starRating-spaceAbove: 0;
--oke-starRating-spaceBelow: 0;
--oke-button-backgroundColor: #2d5470;
--oke-button-backgroundColorHover: #f4f4f6;
--oke-button-backgroundColorActive: #2d5470;
--oke-button-textColor: #fff;
--oke-button-textColorHover: #2d5470;
--oke-button-textColorActive: #fff;
--oke-button-borderColor: #dbdde4;
--oke-button-borderColorHover: #2d5470;
--oke-button-borderColorActive: #2d5470;
--oke-button-borderRadius: 4px;
--oke-button-borderWidth: 1px;
--oke-button-fontWeight: 700;
--oke-button-fontSize: 14px;
--oke-button-fontFamily: inherit;
--oke-border-color: #e5e5eb;
--oke-border-width: 1px;
--oke-text-primaryColor: #2c3e50;
--oke-text-secondaryColor: #676986;
--oke-text-small: 12px;
--oke-text-regular: 14px;
--oke-text-large: 20px;
--oke-text-fontFamily: inherit;
--oke-avatar-backgroundColor: #e5e5eb;
--oke-avatar-placeholderTextColor: #2d5470;
--oke-highlightColor: #2d5470;
--oke-shadingColor: #f7f7f8;
--oke-attributeBar-shadingColor: #9a9db1;
--oke-attributeBar-borderColor: undefined;
--oke-attributeBar-backgroundColor: #d3d4dd;
--oke-attributeBar-markerColor: #00caaa;
```

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