Styleguide
Typography Style Guide
Complete reference for all typography styles and ASRoma font variants available in this theme.
Headline 1 - 48px/28px mobile
Desktop: 48px, Mobile: 28px, Line-height: 1.2
Headline 2 - 36px/24px mobile
Desktop: 36px, Mobile: 24px, Line-height: 1.2
Headline 3 - 28px/20px mobile
Desktop: 28px, Mobile: 20px, Line-height: 1.2
Headline 4 - 20px/18px mobile
Desktop: 20px, Mobile: 18px, Line-height: 1.2
Headline 5 - 18px/16px mobile
Desktop: 18px, Mobile: 16px, Line-height: 1.2
Body text - 16px - Line-height: 1.5
Standard body text for content
Small text - 14px - Line-height: 1.5
Used for captions and secondary information
Extra small text - 12px - Line-height: 1.5
Used for fine print and labels
Exception text - 10px - Line-height: 1.5
Smallest text size for disclaimers
Color Palette
Brand colors and utility classes for AS Roma theme.
Red
#8e001c
Classes: .text-red, .bg-red, .border-red
Red Gradient
Light to Red
Classes: .bg-red-gradient
Yellow
#ffb300
Classes: .text-yellow, .bg-yellow, .border-yellow
Black
#170207
Classes: .text-black, .bg-black, .border-black
Red Light
#af062f
Classes: .text-red-light, .bg-red-light, .border-red-light
Red Lighter
#f1e2e6
Classes: .text-red-lighter, .bg-red-lighter, .border-red-lighter
Yellow Light
#ffedc2
Classes: .text-yellow-light, .bg-yellow-light, .border-yellow-light
Grey 100
#f6f6f6
Classes: .text-grey-100, .bg-grey-100, .border-grey-100
Grey 300
#e3e3e3
Classes: .text-grey-300, .bg-grey-300, .border-grey-300
Grey 500
#c2c2c2
Classes: .text-grey-500, .bg-grey-500, .border-grey-500
Grey 700
#656565
Classes: .text-grey-700, .bg-grey-700, .border-grey-700
Grey 900
#4b4b4b
Classes: .text-grey-900, .bg-grey-900, .border-grey-900
Error
#dc3545
Classes: .text-error, .bg-error, .border-error
Warning
#ffb300
Classes: .text-warning, .bg-warning, .border-warning
Success
#28a745
Classes: .text-success, .bg-success, .border-success
Buttons
Button components with primary, secondary and link variants.
Primary Buttons
style: 'solid', variant: 'button-primary'
disabled: true
style: 'outline', variant: 'button-primary'
disabled: true
Secondary Buttons
style: 'solid', variant: 'button-secondary'
disabled: true
style: 'outline', variant: 'button-secondary'
disabled: true
Link Buttons
Primary
style: 'link', variant: 'primary'
disabled: true
Secondary
style: 'link', variant: 'secondary', href: '#'
disabled: true