config.design-tokens.yml

# Design Tokens
# Define basic design variables here.
gesso:
  palette:
    brand:
      blue:
        base: '#0071BC'
        light: '#4773aa'
        light-1: '#8ba6ca'
        light-2: '#dce4ef'
        dark: '#205493'
        dark-1: '#112E51'
      ocean-blue:
        base: '#02bfe7'
        light: '#9bdaf1'
        light-1: '#e1f3f8'
        dark: '#00a6d2'
        dark-1: '#046b99'
      org-default:
        uw-black:
          lvl1: '#dfdfdf'
          lvl2: '#a2a2a2'
          lvl3: '#787878'
          lvl4: '#000'
          primary: '#000'
        uw-gold:
          lvl1: '#fffaaa'
          lvl2: '#ffea30'
          lvl3: '#fdd54f'
          lvl4: '#e4b429'
          primary: '#fdd54f'
        uw-white:
          lvl1: '#fff'
          primary: '#fff'
      org-ahs:
        lvl1: '#97dfef'
        lvl2: '#00bed0'
        lvl3: '#0098a5'
        lvl4: '#005963'
        primary: '#005963'
      org-art:
        lvl1: '#ffd5a5'
        lvl2: '#fbaf00'
        lvl3: '#e78100'
        lvl4: '#d93f00'
        primary: '#d93f00'
      org-eng:
        lvl1: '#d0b4ef'
        lvl2: '#be33da'
        lvl3: '#8100b4'
        lvl4: '#57058b'
        primary: '#57058b'
      org-env:
        lvl1: '#daf582'
        lvl2: '#bed500'
        lvl3: '#b4be00'
        lvl4: '#607000'
        primary: '#607000'
      org-mat:
        lvl1: '#ffbeef'
        lvl2: '#ff63aa'
        lvl3: '#df2498'
        lvl4: '#c60078'
        primary: '#c60078'
      org-sci:
        lvl1: '#b4d5ff'
        lvl2: '#63a0ff'
        lvl3: '#0073ce'
        lvl4: '#0033be'
        primary: '#0033be'
      org-ren:
        green: '#00693c'
        red: '#de3831'
        gold: '#d2c295'
      org-stj:
        green: '#01573e'
        gold: '#c88a11'
      org-stp:
        green: '#879637'
        brown: '#584528'
      org-cgc:
        red: '#c4262e'
      org-school:
        lvl1: '#ffa5aa'
        lvl2: '#e41740'
        lvl3: '#b71233'
        lvl4: '#80001f'
        primary: '#b71233'
    grayscale:
      white: '#fff'
      gray-1: '#fafafa'
      gray-2: '#eee'
      gray-3: '#ccc'
      gray-4: '#A2A2A2'
      gray-5: '#757575'
      gray-6: '#4e4e4e'
      gray-7: '#333'
      black: '#000'
    other:
      yellow:
        base: '#fad980'
        light: '#fff1d2'
      yellow-neon:
        base: '#ff0'
      green:
        base: '#4d8f46'
        dark: '#0a6700'
        light: '#e7f4e4'
      red:
        base: '#e31c3d'
        light: '#e59393'
        light-1: '#f9dede'
        dark: '#cd2026'
        dark-1: '#981b1e'
        orange-light: '#f69231'
        orange-dark: '#ef6114'
  box-shadow:
    0: none
    1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
    2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)
    4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)
    5: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)
    6: 0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3)
  constrains:
    sm: 800px
    md: 1440px
    lg: 2200px
  breakpoints:
    xs: 480px
    sm: 641px
    md: 769px
    lg: 1011px
    xl: 1200px
    xxl: 1640px
    onek: 1920px
    twok: 2559px
  colors:
    text:
      primary: grayscale.black
      secondary: grayscale.gray-6
      on-light: grayscale.black
      on-dark: grayscale.white
      link: grayscale.gray-6
      link-hover: grayscale.black
      link-active: grayscale.gray-6
      link-visited: grayscale.gray-6
    background:
      site: grayscale.white
    button:
      default:
        background: grayscale.gray-5
        background-hover: grayscale.gray-2
        background-active: grayscale.gray-5
        text: grayscale.white
        text-hover: grayscale.gray-6
        text-active: grayscale.white
      primary:
        background: other.green.base
        background-hover:  other.green.dark
        background-active: other.green.dark
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
      secondary:
        background: brand.ocean-blue.base
        background-hover: brand.ocean-blue.dark
        background-active: brand.ocean-blue.dark-1
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
      disabled:
        background: grayscale.gray-2
        text: grayscale.gray-4
      danger:
        background: other.red.base
        background-hover: other.red.dark
        background-active: other.red.dark-1
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
      cancel:
        background: other.red.orange-light
        background-hover: other.red.orange-dark
        background-active: other.red.orange-dark
        text: grayscale.white
        text-hover: grayscale.white
        text-active: grayscale.white
    form:
      background: grayscale.gray-1
      background-active: grayscale.white
      background-checked: brand.blue.base
      background-unchecked: grayscale.white
      border: grayscale.gray-3
      border-dark: grayscale.gray-5
      border-light: grayscale.gray-1
      input:
        input-background: grayscale.white
        input-border: grayscale.gray-3
        input-border-focus: grayscale.gray-5
        input-color: grayscale.gray-6
        input-outline: grayscale.gray-2
        input-focus: grayscale.gray-5
      fieldset:
          fieldset-background: grayscale.gray-1
      thumb: grayscale.gray-5
      track: grayscale.gray-4
    mark:
      background: other.yellow-neon.base
      text: grayscale.black
    selection:
      background: brand.blue.base
      text: grayscale.white
    table:
      border: grayscale.gray-5
      background: grayscale.white
      background-head: grayscale.gray-2
      background-foot: grayscale.gray-2
    ui:
      generic:
        background: grayscale.gray-4
        background-darker: grayscale.black
        background-dark: grayscale.gray-5
        background-light: grayscale.gray-2
        background-lighter: grayscale.gray-1
        border: grayscale.gray-4
        border-dark: grayscale.gray-6
        border-light: grayscale.gray-2
        text-lighter: grayscale.white
        text-light: grayscale.gray-4
        text-dark: grayscale.gray-5
        text-darker: grayscale.black
        accent: brand.org-default.uw-black.primary
        accent-dark: brand.org-default.uw-gold.lvl4
        accent-light: brand.org-default.uw-gold.lvl2
        focus: brand.org-default.uw-black.primary
      error:
        background: other.red.light-1
        border: other.red.light
      success:
        background: other.green.light
        border: other.green.base
      warning:
        background: other.yellow.light
        border: other.yellow.base
  typography:
    font-family:
      primary:
        name: Primary
        stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
      secondary:
        name: Secondary
        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
      book:
        name: Book
        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      condensed:
        name: Condensed
        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      condensedbook:
        name: Condensed-Book
        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
      system:
        name: System  Typ1451-Regular
        stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      systemlight:
        name: System light Typ1451-Light
        stack: 'Typ1451-light,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      systemmedium:
        name: System Medium  Typ1451-Medium
        stack: 'Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      systembold:
        name: System Bold  Typ1451-Bold
        stack: 'Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
      monospace:
        name: Monospace
        stack: 'Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif'
      iconfont:
        name: icon-font
        stack: 'fdsu-rwd'
    base-font-size: 16px
    font-size:
      -6: 7.888px
      -5: 8.88px
      -4: 9.984px
      -3: 11.232px
      -2: 12.64px
      -1: 14.22224px
      0: 16px
      1: 18px
      2: 20.256px
      3: 22.784px
      4: 25.632px
      5: 28.832px
      6: 32.432px
      7: 36.496px
      8: 41.056px
      9: 46.192px
      10: 51.952px
      11: 58.448px
      12: 65.76px
      13: 73.984px
      14: 83.232px
      15: 93.632px
      16: 105.328px
    font-weight:
      hairline: 200
      light: 300
      regular: 400
      bold: 600
      semibold: 600
      extrabold: 700
      black: 800
    line-height:
      tight: 1.1
      base: 1.45
      loose: 1.7
    display:
      display:
        font-family: primary.stack
        font-size: 8
        font-weight: regular
      h1:
        font-family: condensedbook.stack
        font-size: 8
        font-weight: regular
        line-height: tight
      h2:
        font-family: condensedbook.stack
        font-size: 5
        font-weight: regular
        line-height: tight
      h3:
        font-family: condensedbook.stack
        font-size: 3
        font-weight: regular
        line-height: tight
      h4:
        font-family: condensedbook.stack
        font-size: 2
        font-weight: regular
        line-height: tight
      h5:
        font-family: condensedbook.stack
        font-size: 1
        font-weight: regular
        line-height: tight
      h6:
        font-family: condensedbook.stack
        font-size: 0
        font-weight: regular
        line-height: tight
      blockquote:
        font-family: primary.stack
        font-size: 3
        font-weight: regular
        line-height: base
      body:
        color: text.primary
        font-family: primary.stack
        font-size: 0
        font-weight: regular
        line-height: base
      body-large:
        color: text.primary
        font-family: primary.stack
        font-size: 2
        font-weight: regular
        line-height: base
      cite:
        color: text.secondary
        font-family: primary.stack
        font-size: 0
        font-style: normal
        font-weight: semibold
        letter-spacing: .02rem
        line-height: tight
      input:
        color: text.secondary
        font-family: systemmedium.stack
        font-size: 0
        font-style: normal
        font-weight: semibold
        letter-spacing: .02rem
        line-height: tight

  transitions:
    ease:
      ease-in-out: 'cubic-bezier(0.4, 0, 0.2, 1)'
      ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)'
      ease-in: 'cubic-bezier(0.4, 0, 1, 1)'
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
    duration:
      shortest: 150ms
      short: 200ms
      standard: 375ms
      long: 400ms
      intro: 270ms
      outro: 195ms
  z-index:
    modal: 10
    drawer: 9
    overlay: 9
    nav: 8
    logo: 8
    dropdown: 7
    mobilemenu: 6
    interact: 5
    header: 4
    content: 3
    footer: 2
    slides: 2
    wrapper: 2
    background: 1
  spacing:
    xxs: 4px
    xs:  8px
    sm: 16px
    md: 24px
    lg: 32px
    xl: 56px
    xxl: 96px
  gutter-width: 40px