Single source of truth for Iron Sport storefront. Every color, typeface, button, and animation on the live site references one of these tokens. Click any chip to copy the class.
01 · Color
Palette
Restrained red accent on a white-and-ink base. Hairline rules instead of heavy borders. No grays beyond the ink/paper ramp.
#B8301C
CTA, price
#9A2818
Hover
#0F0F0F
Primary text
#404040
Secondary text
#6B6B6B
Muted text
#FFFFFF
Default surface
#FAFAFA
Off-white
#F2F2F2
Skeleton / placeholder
#E8E8E8
Hairline border
#0F0F0F
Strong border
#7360F2
Viber CTA
02 · Type
Scale
Archivo display + body, JetBrains Mono for labels. Display sizes use clamp() for fluid scaling between 320px and 1440px viewports.
Aa — Iron
clamp(13px, 2vw, 17px)
Aa — Iron
clamp(16px, 2vw, 21px)
Aa — Iron
clamp(18px, 2.2vw, 24px)
Aa — Iron
clamp(20px, 2.5vw, 28px)
Aa — Iron
clamp(24px, 3vw, 34px)
Aa — Iron
clamp(26px, 3.2vw, 38px)
Aa — Iron
clamp(30px, 4vw, 44px)
Aa — Iron
clamp(36px, 6vw, 60px)
Archivo
Body 16/1.5
JetBrains 13
03 · Buttons
Variants
One Button component, six variants via CVA. Active scale 0.98, hover state per variant, shared focus-ring on tab.
04 · Forms
Inputs
Native primitives styled with project tokens. No @medusajs/ui. Input has floating label and password toggle.
checked / unchecked
05 · Cards
Surfaces
Three card patterns power the entire site: surface-card (default), tile (product), and feature link.
Hover me
Hover for shadow-pop + ink border. Used in store grids and account widgets.
№ 01 · Hex
Hex teg 10 kg
4 900 RSD
Square thumbnail + meta. Used in /shop, related, rails.