Design System · Shree Hanuman Power Tools
Industrial Black.
The system behind the storefront. I designed and documented the color and type tokens, component specs, motion, and the eight rules that kept fourteen pages coherent without a new decision on each. Authoritative, stark, dense, professional.
01 · Color
Every color carries a role.
Brand-red is reserved for action, WhatsApp green for exactly one button, and a long zinc scale does the structural work.
Brand & accent
Blood-dark Crimson
#7A0009
Primary brand: hero, CTAs, active nav, focus rings
Muted Crimson
#9E1B1B
Hover state for brand-red elements
WhatsApp Jungle
#25D366
WhatsApp CTA only, never other elements
WhatsApp Active
#1DA851
WhatsApp button hover state
Surface scale
Paper White
#FFFFFF
Cards, modals, table cells
Faint Whisper
#F9F9F9
Page body background
Light Ash
#F3F3F3
Section alternates, sidebar
Warm Pebble
#EEEEEE
Borders in disguise, dividers
Zinc neutrals & ink
Near Black (zinc-950)
#09090B
Deepest backgrounds, mobile menu
Gunmetal (zinc-900)
#18181B
Navbar, footer, dark buttons
Dark Steel (zinc-800)
#27272A
Search input, secondary borders
Iron (zinc-600)
#52525B
Secondary body text, filter labels
Pewter (zinc-500)
#71717A
Muted metadata
Warm Silver (zinc-400)
#A1A1AA
Placeholders, disabled, icon neutrals
Feather (zinc-200)
#E4E4E7
Input and card borders
Near Black Ink
#1A1C1C
Body text (on-surface)
Product-card brand rails
INGCO
#FF6B00
DEWALT
#FFCD11
STANLEY
#F0A500
OZAR
#3B3B3B
LENOX
#1B4EAB
IRWIN
#CC0000
02 · Typography
Archivo Black for weight, Inter for reading.
Archivo Black Expanded for display, labels, and buttons; Inter for body. Weight 900 dominates, and uppercase with wide tracking is the system's signature. The specimens below are labeled by role.
Display
clamp text-3xl to text-6xl
Section titles, hero headings
900
Heading
text-2xl to text-3xl
Sub-sections, card titles
900
Body
text-sm to text-base
Descriptions, supporting copy
500
Label / Eyebrow
text-xs (12px)
Nav items, badges, button text (uppercase, tracking-widest)
700
Numeric badge
text-[10px]
Cart count, wishlist count only
700
Specimens are labeled by role. This page renders in the portfolio's own fonts, so sizes are indicative of the system rather than a pixel clone of the live storefront.
03 · Spacing & breakpoints
A four-point base, a five-step ladder.
One unit is 4px, and the breakpoint ladder is always scaled through in sequence, never skipped.
Spacing scale
Breakpoints
04 · Motion
Restrained by design.
Short, composited transforms, and a full stop under reduced-motion. Library: Motion for React.
Enter / exit panels
opacity 0 to 1, y 10 to 0, duration 0.2s
Product card stagger
opacity 0 to 1, y 20 to 0, delay index x 0.04 (max 8)
Mobile drawer slide
Spring: damping 28, stiffness 220, from x: -100%
Filter sheet slide
Spring from y: 100%
Nav hide / show
CSS transition-transform duration-300, no JS library
05 · Components
Sharp-cornered, uppercase, built to repeat.
Buttons, cards, navbar, forms, and badges follow one grammar: zero radius, uppercase labels, brand-red for action. Every specimen below is rendered from the real token values, not described in a table.
Buttons
.btn-lg / .btn-md / .btn-sm. Dark hover to brand-red, red hover to red-700, ghost is text-only. active:scale-[0.97] on press.
Product card
Jigsaw 570W
₹3,299
Sharp rectangle, brand-colored top rail (1px or 3px), zinc-900 brand badge, wishlist heart. Image at 70% with mix-blend-multiply. Hover: image scales 110% + blur, shadow lifts.
Cart item
Jigsaw 570W
₹3,299
White card, zinc-100 border, flex row. 80 to 96px zinc-50 image. Inline quantity control with zinc-200 border and no radius.
Navbar
Full-width zinc-900 sticky header with a 2px brand-red top line. Logo left, search center, actions right. Category row below. Hides on scroll-down past 80px, shows on scroll-up.
Forms & inputs
zinc-800 in dark contexts, white or zinc-50 in light. Border zinc-700 to brand-red on focus with a 30% ring. No radius. font-size max(16px, 1rem) to stop iOS zoom.
Badges & tags
Spec tags: zinc-100 bg, zinc-600 text, uppercase, tracking-wider. Cart count: brand-red bg, white, text-[10px], the one rounded-full exception.
Iconography
Lucide React, 2px stroke. 10 to 11px micro, 14px inline nav, 16 to 18px button, 20 to 28px headers. Brand-red for actions, zinc-400 for neutral affordances.
06 · Interaction states
The same components, under pressure.
Hover (dark button)
bg-zinc-900 to brand-red
Hover (red button)
brand-red darkens to red-700
Hover (ghost / link)
zinc-400 to brand-red, no underline, no blue
Active / press
active:scale-[0.97] on all sizes
Focus visible
ring-2 brand-red/40, offset zinc-900
Disabled
opacity-50, cursor-not-allowed, no color change
Hover (card)
image scales 110% + blur, card shadow lifts
07 · The rules
Eight rules every screen obeys.
Eight non-negotiables. Every new screen had to obey them, which is what let the system scale without drift.
Zero border-radius everywhere. Only numeric badge pills are exempt.
No lowercase labels or button text. Uppercase is mandatory.
No blue links. Navigation uses zinc-400 to brand-red, never browser blue.
No font below 12px. text-xs is the floor.
Brand-red is not decorative. Primary CTA, active states, and focus only.
WhatsApp green is exclusive. #25D366 appears on WhatsApp CTAs alone.
Product images use mix-blend-multiply so white backgrounds vanish into white cards.
All page backgrounds start at #f9f9f9, not pure white, not zinc.
08 · Accessibility
Built into the tokens, not bolted on.
These are design decisions taken from the system, not the result of a formal audit; a production build would still need real testing.
Text selection
brand-red at 30% opacity, white text
Focus ring
2px brand-red/40 ring with a zinc-900 offset, on every interactive element
Skip-to-content
off-screen link that moves to top:0 on focus, keyboard-first
iOS zoom guard
inputs use font-size: max(16px, 1rem) to stop auto-zoom
Reduced motion
all animation and transition durations drop to 0.01ms
Skeletons
rendered at the exact dimensions of real content to prevent layout shift
Back to the case study