Theme Design System Style Guide

A visual validation page for Hello Hunk's D2C e-commerce design system.

1. Typography Scale

--wb-h1

H1 Heading (Poppins, 24px - 32px Bold)

--wb-h2

H2 Heading (Poppins, 20px - 24px Bold)

--wb-h3

H3 Product Title (Poppins, 18px - 20px Semibold)

--wb-text-body

Body copy (Inter, 14px - 16px Regular). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec efficitur ex, non volutpat urna.

--wb-text-small

Small metadata text (Inter, 12px - 13px Regular). Used for product SKU, timestamps, or captions.

Price Display
₹1,499 ₹2,999 50% OFF

2. Color Palette Swatches

Background

#FFFFFF

Soft BG

#F7F7F7

Muted BG

#F0F0F0

Brand Black

#111111

Accent Red

#E63946

Accent Soft

#FDEDEE

3. Interactive Elements

Primary Brand Button Secondary Button Text Link Button →
Brand Badge Sale New Bestseller

4. SVG Icons (nobero_icon Helper)

arrow-right
check
cloud
code
cpu
globe
shield
users
zap