Design System

Visual language, components, and patterns for Verdant & Co.

Colors

Core palette used across all products. All swatches use CSS custom properties.

Warm Cream
#FAF7F0
Forest Green
#1F3D2B
Charcoal
#212121
Terracotta
#C4622D
Sand
#E8E0D0
Sage
#4A7C59
Moss
#2D5A3D
White
#FFFFFF

Typography

Fraunces (display) paired with Inter (body). Strong size contrast between headings and body.

H1 — Fraunces 48px / 600

Packaging the Planet Can Live With

H2 — Fraunces 36px / 600

Sustainable Solutions for Every Industry

H3 — Fraunces 24px / 600

Volume Pricing Tiers

H4 — Fraunces 18px / 600

Order Summary

Body — Inter 16px / 400

Premium kraft paper bowl with PLA lining. Microwave-safe, leak-resistant, and fully compostable in commercial facilities.

Small — Inter 14px / 400

BPI Certified Compostable • FSC Certified Paper • Carbon Neutral Shipping

Label — Inter 12px / 600 uppercase
Section Label

Buttons

All buttons use pill shape (border-radius: 100px) with bounce transition on hover.

Badges & Tags

Status indicators, certifications, and product labels.

Compostable MOQ: 500 Best Seller New FSC Certified In Stock

Form Elements

Inputs, toggles, checkboxes, and steppers used across the platform.

500

Card Elevations

Four levels of box-shadow depth for visual hierarchy.

None
border only
Soft
shadow-soft
Medium
shadow-medium
Heavy
shadow-heavy

Product card with hover lift and shadow transition:

Product Image
Kraft Paper Bowl
$0.42 / unit

Animations

CSS @keyframes used throughout the site. All are performant and respect prefers-reduced-motion.

fadeUp
@keyframes fadeUp
Verdant & Co. Sustainable • Verdant & Co. Sustainable •
marquee
@keyframes marquee
pulse
@keyframes pulse
shimmer
@keyframes shimmer
bounce
@keyframes bounce
scalePulse
@keyframes scalePulse