Version 2.0

The goal of the DDS, as always, is to provide our partners across the university with a universal design system that makes it easier to maintain consistency across schools, colleges and beyond, to create a cohesive University look and feel, while still allowing for creativity in layout and content.

Colors

• Orange Dark `#CD3E00` (also updated tints)
• Gray Dark `#333333` (also updated tints)
• Gray Medium `#8C939B` (also updated tints)
• Gray Light `#F8F8F8` (also updated tints)

Background/Other Colors

• Blue Gradient background
• Orange Gradient (for text - as seen in large animated arrows)
• White Overlay (seen on home page hero)
• Updated hex for bg-blue-light to `$su-blue-primary-10` or `#E6E7EE`

Borders

• Lines Light `#E4E4E4`
• Border Light `1px solid #E4E4E4`
• Border Color default is now `#E4E4E4`
• Border Light 2 `2px solid #CCCFDD` as seen in new accordion and sidebar navigation blocks

Text/Typography

• Adjusted link styles, including focus and hover states
• Links with animated arrows
• Font sizes added:
  - 90px
  - 120px
  - 130px
  - 150px
  - 200px
• Headings
• H1 Block
• H1 Block Large
• H1 Block Small
• H3 Large
• H3 Small
• Page Intro Text
• Section Intro Text
• Updated body text sizes, body text is now Gray Dark by default

Font

• New font variable `$font-su-block`
• Block Condensed Font is now a variable font - one font file for all the weights and styles of the font vs. a file for each weight and style. New fallback font for this is Oswald.

Shadow

• Add box shadow 4 variable and utility class - found in site main navigation
• Box shadow 1 is on cards

Spacing

• Updated spacer values in layout. This will have ripple effects across the DDS, as the spacers are used everywhere, but the majority of them stayed the same. The ones that did change, are a difference of 2-5px each.

Buttons

Version 2.0 of the DDS only has 3 button variants.

• The design of the primary button has been changed
• The small button **looks** like a primary button, but is slightly smaller on desktop
• Button inverse has a new look
• There are no more rounded, outline or teriary buttons