Theme Elements
Colors
Primary Red
RGB: 152, 0, 46
Hex: 98002E
CSS variable: var(--su-color-primary-red)
Primary Blue
RGB: 152, 0, 46
Hex: 002D62
CSS variable: var(--su-color-primary-blue)
Red 500
RGB: 209, 18, 66
Hex: AE0636
CSS variable: var(--su-color-primary-red-500)
Tonal Black
RGB: 19, 19, 19
Hex: 131313
CSS variable: var(--su-color-tonal-black)
White
RGB: 255, 255, 255
Hex: FFFFFF
CSS variable: var(--su-color-white)
Accent Gold
RGB: 224, 201, 177
Hex: E0C99D
CSS variable: var(--su-color-accent-gold)
Gray 700
Hex: 404245
CSS variable: var(--su-color-gray-700)
Gray 500
Hex: 626970
CSS variable: var(--su-color-gray-500)
Gray 400
Hex: CFD4D8
CSS variable: var(--su-color-gray-400)
Gray 300
Hex: EEF2F5
CSS variable: var(--su-color-gray-300)
Gray 200
Hex: F6F9FC
CSS variable: var(--su-color-gray-200)
Primary Blue 700
Hex: 011F42
CSS variable: var(--su-color-primary-blue-700)
Primary Blue 500
Hex: 00397a
CSS variable: var(--su-color-primary-blue-500)
Primary Blue 400
Hex: 004594
CSS variable: var(--su-color-primary-blue-400)
Primary Blue 300
Hex: 0051ad
CSS variable: var(--su-color-primary-blue-300)
Primary Blue 200
Hex: 005dc7
CSS variable: var(--su-color-primary-blue-200)
Primary Blue 100
Hex: afd2fa
CSS variable: var(--su-color-primary-blue-100)
Primary Red 500
Hex: ae0636
CSS variable: var(--su-color-primary-redd-500)
Primary Red 400
Hex: ba0a3a
CSS variable: var(--su-color-primary-red-400)
Primary Red 300
Hex: 0051ad
CSS variable: var(--su-color-primary-red-300)
Primary Red 200
Hex: 005dc7
CSS variable: var(--su-color-primary-red-200)
Above are the colors available from selection within the WP editor. There are additional colors defined in the theme’s SASS variables to be used as necessary in custom/core block styles. Within the SASS file are color scheme settings to control how colors interact together. Example: the primary blue background will have white text and gold links.
Color variables file path: themes/su-framework/src/variables/_color.scss
Gradients
Primary Red to Red 200 (Athletic red)
linear-gradient( 77deg, $color-primary-red 18%, $color-primary-red-200 75% );
CSS variable: var(--su-color-gradient-red-red200)
Primary Blue 700 to Primary Blue 400
linear-gradient( 72deg, $color-primary-blue-700 0%, $color-primary-blue-400 100% );
CSS variable: var(--su-color-gradient-blue700-blue400)
Primary Red to Primary Blue
linear-gradient( 116deg, $color-primary-red -5.8%, $color-primary-blue 81.58% );
CSS variable: var(--su-color-gradient-red-blue)
Primary Blue to Primary Red
linear-gradient( 135deg, $color-primary-blue 0%, $color-primary-red 100% );
CSS variable: var(--su-color-gradient-blue-red)
Buttons
Default Size:
‘Medium’ size in Figma (corresponds to ‘base’ font size in typography settings)
‘Small’ size in Figma (corresponds to ‘small’ font size in typography settings)
Available button styles are Fill (blue), Red Fill, Light Fill (white), White Outline, Red Outline, Blue Outline and Plain Text. Buttons have the option to include an icon. Icons have been preliminarily determined from reviewing the current site. Other icon options can be added via code. Icons can either be aligned left or right.
