Nutrition Warehouse Brand
The Nutrition Warehouse Brand Guide meticulously details our designated colors, fonts, and standardized styles, serving as the cornerstone for maintaining uniformity across all our web platforms and ensuring a cohesive brand identity.
Typography
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Body Text
Brand Colours
Main Brand Colours
Red#E31E31
Black#1A1818
White#FFFFFF
General Grey#EFEFEF
Text Grey#637381
Background Grey#F8F9FA
Border Grey#c7cbd3
Mint#37D0A6
Yellow#F8AE06
Blue#479CCF
Reds
nwh-red-50#FCE8EA
nwh-red-100#F9D2D6
nwh-red-200#F4A4AC
nwh-red-300#EE7783
nwh-red-400#E84A59
nwh-red-500#E31E31
nwh-red-600#B51726
nwh-red-700#88111D
nwh-red-800#5B0B13
nwh-red-900#2D060A
nwh-red-950#170305
Greys
nwh-grey-50#f9fafb
nwh-grey-100#f1f5f9
nwh-grey-200#e5e7eb
nwh-grey-300#d1d5db
nwh-grey-400#9ca3af
nwh-grey-500#9ca3af
nwh-grey-600#4b5563
nwh-grey-700#374151
nwh-grey-800#1f2937
nwh-grey-900#111827
nwh-grey-950#030712
Box Shadows
0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)Standard
0 1px 2px 0 rgb(0 0 0 / 0.05)Small (sm)
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)Medium (md)
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)Large (lg)
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)Extra Large (xl)
0 25px 50px -12px rgb(0 0 0 / 0.25)Extra Extra Large (2xl)
0px 2.7px 3.3px rgba(0, 0, 0, 0.04), 0px 8.9px 11.2px rgba(0, 0, 0, 0.06), 0px 40px 50px rgba(0, 0, 0, 0.1)Original shadow
0px 0.5px 0.3px rgba(0, 0, 0, 0.053), 0px 1.6px 1.1px rgba(0, 0, 0, 0.077), 0px 7px 5px rgba(0, 0, 0, 0.13);Original shadow 2
Border Radius
4pxStandard
2pxSmall
6pxMedium
8pxLarge
12pxExtra Large
16pxExtra Extra Large
24px3x Large
9999pxFull