UI Kit
UI Colors
Primary colors
#0F0F0F
#000000
#FCF8EE
#81242D
Secondary colors
#B81C27
#4D4D4D
#BE1E2D
#95CAE0
#309F46
#F36F5D
#B81C27
#60003B
#7ED3F7
#F9AE42
#ACBE5A
#FFD045
#FF40B4
#FFD146
#F19826
#55BA47
#ED5338
#EF4125
#C41425
#9D1F60
#F26657
#F0B933
#EC1F79
#7893A6
#F89C4D
#00A19B
#95D3C3
#002E45
#DAA900
Grayscale
#474545
#767676
#B9B9B9
Utility Colors
#E62D19
#78C36D
#767676
Borders & Dividers
Off-White - 1px #FCF8EE
GrayMd - 1px #767676
Fonts
FONT FAMILY
FONT WEIGHT NAME
FONT WEIGHT
Adobe Fonts Snippet
Bebas Neue Pro SemiExpanded
Regular
400
<link rel="stylesheet" href="https://use.typekit.net/phd6wkw.css">
Bebas Neue Pro SemiExpanded
ExtraBold
700
Global Headline Styles
Notes:
- All Typography should be set in Off-White or Dark Black (depending on background-color)
- Headings use [text-transform: uppercase]
DESKTOP
MOBILE
Header text 1
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 56px | Line Height: 60px | Letter Spacing: 2%
Header text 1
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 35px | Line Height: 42px | Letter Spacing: 2%
Header text 2
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 48px | Line Height: 56px | Letter Spacing: 2%
Header text 2
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 32px | Line Height: 40px | Letter Spacing: 2%
Header text 3
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 40px | Line Height: 48px | Letter Spacing: 2%
Header text 3
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 28px | Line Height: 32px | Letter Spacing: 2%
Header text 4
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 32px | Line Height: 42px | Letter Spacing: 2%
Header text 4
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 24px | Line Height: 30px | Letter Spacing: 2%
header text 5 (Eyebrow)
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 24px | Line Height: 26px | Letter Spacing: 2%
header text 5 (Eyebrow)
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 22px | Line Height: 24px | Letter Spacing: 2%
header text 6
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 18px | Line Height: 24px | Letter Spacing: 2%
header text 6
Font: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%
Body Copy Styles
desktop + Inline Links
Mobile + Inline Links
Body Copy Large /
Body Copy Large LinkFont: Bebas Neue Pro SemiExpanded | Weight: 400 | Size: 24px | Line Height: 28px | Letter Spacing: 2%
Body Copy Large /
Body Copy Large LinkFont: Bebas Neue Pro SemiExpanded | Weight: 400 | Size: 24px | Line Height: 28px | Letter Spacing: 2%
Body Copy Base /
Body Copy Base LinkFont: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%
Body Copy Base /
Body Copy Base LinkFont: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%
Body Copy Small /
Body Copy Small LinkFont: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%
Body Copy Small /
Body Copy Small LinkFont: Bebas Neue Pro SemiExpanded | Weight: 900 | Size: 14px | Line Height: 20px | Letter Spacing: 2%
Buttons + Links
Primary CTA
Secondary CTA
CTA Spacing
Icons
Logo - Desktop
Logo - Mobile
Utility
Pagination
Form Elements
Input Field
Dropdown
Default
Filled
Focused
Disabled
Filter Elements
Notes:
- For any Disabled elements, change cursor type to ‘not-allowed’
- Use 12px padding between selects on Desktop