00 A Palettes

  • Scarborough Beach: .qh__t__scarborough
  • Scarborough Beach dark: .qh__t__scarborough--dark
  • Federal Hill: .qh__t__federal-hill
  • Federal Hill dark: .qh__t__federal-hill--dark
  • Wickaboxet Forest: .qh__t__wickaboxet
  • Wickaboxet Forest dark: .qh__t__wickaboxet--dark
  • Block Island Lighthouse: .qh__t__block-island
  • Block Island Lighthouse: .qh__t__block-island--dark
  • Blue Shutters Beach: .qh__t__blue-shutters
  • Blue Shutters Beach: .qh__t__blue-shutters--dark

00 B Colors

  • White: hsl(0, 0%, 100%) var(--c__white)
  • White 33% transparent: hsla(0, 0%, 100%, 0.33) var(--c__white--trans33)
  • White 25% transparent: hsla(0, 0%, 100%, 0.25) var(--c__white--trans25)
  • White 15% transparent: hsla(0, 0%, 100%, 0.15) var(--c__white--trans15)
  • White 100% transparent: transparent var(--c__transparent)
  • Quahog dark: hsl(0, 0%, 8%) var(--c__quahog--darker)
  • Quahog dark 33% transparent: hsla(0, 0%, 8%, 0.33) var(--c__quahog--dark--trans33)
  • Quahog dark 25% transparent: hsla(0, 0%, 8%, 0.25) var(--c__quahog--dark--trans25)
  • Quahog dark 15% transparent: hsla(0, 0%, 8%, 0.15) var(--c__quahog--dark--trans15)
  • Quahog: hsl(0, 0%, 18%) var(--c__quahog--dark)
  • Quahog: hsl(0, 0%, 25%) var(--c__quahog)
  • Quahog medium: hsl(0, 0%, 43%) var(--c__quahog--medium)
  • Quahog light: hsl(0, 0%, 83%) var(--c__quahog--light)
  • Quahog lightest: hsl(0, 0%, 95%) var(--c__quahog--lightest)
  • Navy dark: hsl(224, 37%, 17%) var(--c__navy--dark)
  • Navy: hsl(224, 36%, 25%) var(--c__navy)
  • Navy 50% transparent: hsla(224, 36%, 25%, 0.5) var(--c__navy--trans50)
  • Navy light: hsl(224, 54%, 73%) var(--c__navy--light)
  • Navy saturated: hsl(224, 80%, 40%) var(--c__navy--sat)
  • Navy saturated light: hsl(224, 60%, 55%) var(--c__navy--sat-lgt)
  • Navy warm: hsl(244, 45%, 54%) var(--c__navy--warm)
  • Navy warm light: hsl(254, 62%, 80%) var(--c__navy--wrm-lgt)
  • Rhody Red dark: hsl(356, 47%, 38%) var(--c__rhody-red--dark)
  • Rhody Red: hsl(360, 79%, 62%) var(--c__rhody-red)
  • Rhody Red 50% transparent: hsla(360, 79%, 62%, 0.5) var(--c__rhody-red--trans50)
  • Rhody Red 15% transparent: hsla(360, 79%, 62%, 0.15) var(--c__rhody-red--trans15)
  • Calamari: hsl(23, 100%, 64%) var(--c__calamari)
  • Hope Gold: hsl(46, 95%, 61%) var(--c__hope-gold)
  • Green Animals: hsl(110, 49%, 51%) var(--c__green-animals)
  • Green Animals dark: hsl(110, 59%, 30%) var(--c__green-animals--dark)
  • Green Animals 15% transparent: hsla(110, 49%, 51%, 0.14) var(--c__green-animals--trans15)
  • Cliff Walk darkest: hsl(160, 75%, 30%) var(--c__cliff-walk--darkest)
  • Cliff Walk darkest 15% transparent: hsla(160, 75%, 30%, 0.15) var(--c__cliff-walk--darkest--trans15)
  • Cliff Walk dark: hsl(160, 85%, 60%) var(--c__cliff-walk--dark)
  • Cliff Walk 33% transparent: hsla(160, 85%, 60%, 0.25) var(--c__cliff-walk--dark--trans25)
  • Cliff Walk: hsl(160, 100%, 74%) var(--c__cliff-walk)
  • Cliff Walk light: hsl(160, 75%, 88%) var(--c__cliff-walk--light)
  • Ocean State dark: hsl(208, 12%, 32%) var(--c__ocean--dark)
  • Ocean State: hsl(208, 54%, 73%) var(--c__ocean)
  • Ocean State light: hsl(208, 58%, 92%) var(--c__ocean--light)
  • Ocean State 25% transparent: hsla(208, 54%, 73%, 0.25) var(--c__ocean--trans25)
  • Ocean State 10% transparent: hsla(208, 54%, 73%, 0.1) var(--c__ocean--trans10)
  • Coffee Milk: hsl(47, 26%, 76%) var(--c__coffee-milk)
  • Coffee Milk light: hsl(47, 27%, 92%) var(--c__coffee-milk--light)
  • Coffee Milk 25% transparent: hsla(47, 26%, 76%, 0.25) var(--c__coffee-milk--trans25)
  • Coffee Milk 10% transparent: hsla(47, 26%, 76%, 0.1) var(--c__coffee-milk--trans10)

00 C A 11 Y Contrast

coffee-milk--trans10 coffee-milk--trans25 coffee-milk--light coffee-milk ocean--trans10 ocean--trans25 ocean--light ocean ocean--dark cliff-walk--light cliff-walk cliff-walk--dark--trans25 cliff-walk--dark cliff-walk--darkest--trans15 cliff-walk--darkest green-animals--trans15 green-animals--dark green-animals hope-gold calamari rhody-red--trans15 rhody-red--trans50 rhody-red rhody-red--dark navy--wrm-lgt navy--warm navy--sat-lgt navy--sat navy--light navy--trans50 navy navy--dark quahog--lightest quahog--light quahog--medium quahog quahog--dark quahog--dark--trans15 quahog--dark--trans25 quahog--dark--trans33 quahog--darker white--trans15 white--trans25 white--trans33 white
coffee-milk--trans10
coffee-milk--trans25
coffee-milk--light
coffee-milk
ocean--trans10
ocean--trans25
ocean--light
ocean
ocean--dark
cliff-walk--light
cliff-walk
cliff-walk--dark--trans25
cliff-walk--dark
cliff-walk--darkest--trans15
cliff-walk--darkest
green-animals--trans15
green-animals--dark
green-animals
hope-gold
calamari
rhody-red--trans15
rhody-red--trans50
rhody-red
rhody-red--dark
navy--wrm-lgt
navy--warm
navy--sat-lgt
navy--sat
navy--light
navy--trans50
navy
navy--dark
quahog--lightest
quahog--light
quahog--medium
quahog
quahog--dark
quahog--dark--trans15
quahog--dark--trans25
quahog--dark--trans33
quahog--darker
white--trans15
white--trans25
white--trans33
white

Fonts

Primary font: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font italic: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Primary font bold: "Work Sans", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

Secondary font: "Roboto Slab", Georgia, Times, "Times New Roman", serif;

Secondary font bold: "Roboto Slab", Georgia, Times, "Times New Roman", serif;

Animations

Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)

Visibility