Home » Theme Elements

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.

Recent News

Headshots of Dr. Yunita Anwar (left) and Dr. John Winn (right), both of the Shenandoah University School of Business

WalletHub Taps Two SU Professors for Insight and Advice

Drs. Winn and Anwar Talk Insurance and Improving Credit

Shenandoah Pharmacy Graduates Secure Competitive PGY2 Residency Matches

Four pharmacy graduates advance into competitive PGY2 residencies in pediatric, psychiatric pharmacy, oncology, and investigational drugs and research

Professor explains content on a screen in a Shenandoah University educational leadership doctoral class.

New Higher Ed Concentration Offered in Shenandoah University’s Educational Leadership Doctoral Programs

Course topics delve into the primary responsibilities of higher education leaders

Headshot of J. Robert "Bobby" Spencer

Shenandoah University To Hold Special Performance To Benefit SSMT Living Legacy Endowment Fund

Original ‘Jersey Boy’ J. Robert Spencer headlines ensemble cast of Shenandoah Summer Music Theatre alumni

Shenandoah OT Programs Recognize Students & Educators of Distinction

2024-25 Awardees Hail From Four Occupational Therapy Programs

Students walk on campus with Sarah's Glen in the background.

Shenandoah University Participating In 2025 Virginia Private College Week

Prospective students who visit from July 21-26 will be entered to win an Amazon gift card and are eligible for an application fee waiver

Monthly Archives