01
BullClothings Design System SS26

Brand
Style
Guide

The single source of truth for BullClothings visual language — colours, type, components, and rules for every touchpoint.

Version 2.0
Updated Jan 2026
Team Bull Studio
Live
01

Colour System

Red is the brand's heartbeat. Every other colour exists to support it.

Primary
Bull Red
#E8002D
--red
Red Dark
#b5001e
--red-d
Red Bright
#ff3355
--red-b
Red Light
#fff0f3
--red-light
Neutrals
Ink
#0d0d0d
--ink
Dark
#2a2a2a
--dark
Muted
#6b6b6b
--muted
Border
#e0dcd8
--border
Cream
#f7f5f2
--cream
White
#ffffff
--white
Accents
Gold
#b8860b
--gold
Success
#1a6b3a
--green
Info
#1a4db5
--blue
Limited
#7b4fcf
--purple
variables.css 
/* BullClothings CSS Custom Properties */
:root {
  --red       : #E8002D;
  --red-d     : #b5001e;
  --red-light : #fff0f3;
  --ink       : #0d0d0d;
  --cream     : #f7f5f2;
  --gold      : #b8860b;
  --green     : #1a6b3a;
  --blue      : #1a4db5;
  --border    : #e0dcd8;
}
02

Typography

Three typefaces with distinct personalities — display power, editorial grace, technical clarity.

Aa
Bebas Neue
Display / Hero
Headlines, hero text, large numbers
Aa
Syne
UI / Body
Navigation, labels, body copy, UI text
Aa
DM Serif Display
Editorial
Article titles, quotes, editorial headings
DisplayBebas · 120px
BullC
HeroBebas · 72px
SS26 Collection
H1Syne 800 · 40px
Spring / Summer 2026
H2Syne 700 · 28px
Shop the Collection
H3Syne 600 · 20px
Oversized Tee — Earth Brown
QuoteDM Serif i · 24px
"Fashion is writing your own story — one piece at a time."
BodySyne 400 · 16px
Crafted from 220 GSM organic cotton. Designed in Lucknow, made for everywhere. Built to last, worn to move.
SmallSyne 400 · 13px
Free shipping above ₹999 · 30-day returns · Ships from Lucknow within 2 working days
Syne 700 · 10px CAPS
NEW ARRIVALS · LIMITED EDITION · BESTSELLER
04

Spacing Scale

Consistent spacing built on a 4px base unit. Stick to these values — no custom margins.

TokenValueVisualUsage
--sp-14px
Tight gaps, icon padding
--sp-28px
Inner padding, small gaps
--sp-312px
Button padding Y
--sp-416px
Default padding, card gap
--sp-624px
Section padding X
--sp-832px
Card padding, form groups
--sp-1248px
Section gaps
--sp-1664px
Page section padding
--sp-2496px
Hero/page gutters
05

Icons & Symbols

Standard iconography across all BullClothings interfaces. Always use at 20×20 or 24×24.

🔍Search
🛒Cart
♡Wishlist
👤Account
🏠Home
📦Orders
🚚Delivery
📍Location
📱Mobile
💬Chat
☆Rating
📷Photo
🔥Trending
⚙Settings
✕Close
→Arrow
🔒Secure
✓Check
ℹInfo
06

Buttons

Every interactive call-to-action. One primary action per screen maximum.

Variants
Primary
Red
Outline
Ghost
Cream
Danger
Disabled
Sizes
XL
LG
MD
SM
XS
Icon Buttons
07

Form Elements

Inputs, selects, and controls for checkout, search, account, and contact flows.

As per delivery address
✓ Valid email address
✕ Enter a valid 10-digit number
08

Badges & Tags

Product labels, status pills, category filters, and size selectors.

Status Badges
New Arrival Bestseller In Stock Limited Exclusive Sold Out Free Ship
Category Filter Tags
All ✕ T-Shirts Hoodies Jackets Bottoms Caps Accessories
Size Tags
XS S M L XL XXL
09

Cards

Product, content, and info cards. Hover interactions are always present.

Oversized Tee New
+ Quick Add
Oversized
Drop-Shoulder Oversized Tee
₹649 ₹899 -28%
Hoodie Bestseller
+ Quick Add
Streetwear
Bull Classic Heavyweight Hoodie
₹1,499
Jacket Limited
+ Quick Add
Denim
Raw Denim Jacket SS26
₹3,299
10

Alerts & Notifications

System feedback, order status, stock warnings, and informational banners.

✓
Order Placed Successfully!
Your order #BC2026-4821 is confirmed. Estimated delivery in 3–5 working days.
✕
Payment Failed
Transaction could not be processed. Please check your card details and try again.
!
Low Stock — Only 3 Left in Size M
Add to cart now to avoid disappointment. This size is selling fast.
i
SS26 Drop — Friday 12:00 PM
The next limited collection drops this Friday at noon. Set your reminder.