A design system built on trust, clarity, and the energy of pure ingredients.
For volumeusa.com — a single source of truth for every visual decision across product, marketing, and packaging. Built to scale, designed to convert, engineered for the long term.
The four design principles.
Every decision in this system traces back to one of these. When in doubt, optimize for trust first — wellness customers buy from brands they believe in.
Trust over decoration.
Customers buying supplements they ingest need to believe the brand. Strip away ornament. Show ingredients, certifications, lab tests, and real customer evidence. The brand green is energy — earn the right to use it with substance.
Type does the work.
One typeface, six weights, used decisively. Strong hierarchy creates confidence. Body copy is generous but never small enough to hide. Big numbers communicate scale. Bold short headlines communicate certainty.
Green is the accent, not the substrate.
The brand green appears on call-to-actions, badges, prices, accent lines, and the logo — not as backgrounds or large color blocks. Restraint makes #84BD00 powerful where it appears.
Density where it serves.
Reviews, ingredients, specifications, FAQs — all need to fit on screen. Whitespace is used to separate sections and frame hero moments, not as filler. Product information stays close to the buy button.
A purposeful palette.
Three families: Volume Green for energy and brand, neutral warm grays for surfaces, and reserved semantic colors for system feedback. Every color earns its place.
Reserved colors for specific roles. Used identically on every surface — never substitute or remix.
| Token | Hex | Use |
|---|---|---|
--color-success | #84BD00 | Confirmations, in-stock indicators, success alerts |
--color-warning | #F59E0B | Low stock warnings, caution states |
--color-error | #C9302C | Sale prices, errors, out-of-stock, validation failures |
--color-info | #3B82F6 | Informational alerts, shipping updates |
--color-rating | #D4A017 | Star ratings on products and reviews |
--color-price | #25251F | Default product prices |
--color-price-sale | #C9302C | Discounted/sale prices |
--color-price-original | #A8A892 | Strikethrough original prices |
One typeface. Six weights. Total clarity.
Nunito is the entire system. Its rounded humanist forms echo the heart-shaped V mark of the logo, while its strong weight range delivers Apple-grade hierarchy. The Playfair logo is the only exception.
Major-third scale (1.2 ratio), aligned to 4px grid line heights.
The building blocks.
Every component below is engineered for e-commerce conversion: clear hierarchy, generous tap targets, obvious affordances. Reuse these — do not invent variants.
Five variants, three sizes. Primary green is reserved for the single most important action on each surface.
Used on product cards and PDPs to communicate status. Maximum 2 per product.
Always paired with a label above. Focus ring uses brand green.
Used for inline page-level feedback. Cart drawer uses these for stock or shipping messages.
The atomic unit of the entire site. Used in collection grids, search results, related products, and recommendations.
How wellness customers learn to believe you.
For ingestible and topical products, trust is the conversion. Use these patterns on PDPs, collection pages, and the homepage hero. Density matters — show several at once.