Skip to content

Instantly share code, notes, and snippets.

@quickredfox

quickredfox/color-codes.md

Created October 30, 2012 16:37
Show Gist options
  • Save quickredfox/3981386 to your computer and use it in GitHub Desktop.
Save quickredfox/3981386 to your computer and use it in GitHub Desktop.
Download ZIP
Initial Design Specs.
Raw
color-codes.md

Need HEX color codes for:

Hero Unit

  • Yellow text: #fde46e

Badges

Orange

  • Base Orange: #e7470f
  • Orange gradient Light: #f2521a
  • Orange gradient Dark: #da3a02
  • Orange border top: #f89549
  • Orange border bottom (thick): #8d1f06

Green

  • Base Green: #699801
  • Green gradient Light: #7ea300
  • Green gradient Dark: #508c02
  • Green border top: #aac821
  • Green border bottom (thick): #2f601b

Blue

  • Base Blue: #0f8ba3
  • Blue gradient Light: #1fbbd0
  • Blue gradient Dark: #0d7f94
  • Blue border top: #1fbbd0
  • Blue border bottom (thick): #0a505d

Purple

  • Base Purple: #773b90
  • Purple gradient Light: #853ba5
  • Purple gradient Dark: #673b79
  • Purple border top: #b05acc
  • Purple border bottom (thick): #3d2249

Grey

  • Base Grey: #32302e
  • Grey gradient Light: #45443e
  • Grey gradient Dark: #3c3a34
  • Grey border top: #8a8a88
  • Grey border bottom (thick): #000000

Buttons Default

Big Buttons

  • Button Height: 50px
  • Corner Radius: 5px
  • Top border Height:1 px
  • Bottom border Height: 3px
  • Type Size: 18px

Small Buttons

  • Button Height: 34px
  • Corner Radius: 3px
  • Top border Height: 1px
  • Bottom border Height: 1px
  • Type Size: 14px

Orange

  • Base Orange: #e7470f
  • Orange gradient Light: #ef4a20
  • Orange gradient Dark: #da3a02
  • Orange border top: #f89549
  • Orange border bottom (thick): #8d1f06

Green

  • Base Green: #699801
  • Green gradient Light: #7ea300
  • Green gradient Dark: #508c02
  • Green border top: #aac821
  • Green border bottom (thick): #2f601b

Blue

  • Base Blue: #0f8ba3
  • Blue gradient Light: #1fbbd0
  • Blue gradient Dark: #0d7f94
  • Blue border top: #1fbbd0
  • Blue border bottom (thick): #0a505d

Purple

  • Base Purple: #773b90
  • Purple gradient Light: #853ba5
  • Purple gradient Dark: #673b79
  • Purple border top: #b05acc
  • Purple border bottom (thick): #3d2249

Grey

  • Base Grey: #32302e
  • Grey gradient Light: #45443e
  • Grey gradient Dark: #3c3a34
  • Grey border top: #8a8a88
  • Grey border bottom (thick): #000000

Buttons inactive

Orange

  • Base Orange: #e7470f
  • Orange gradient Light: #e86a2d
  • Orange gradient Dark: #b42f05
  • Orange border top: #f89549
  • Orange border bottom (thick): #8d1f06
  • Orange Type: #dd714b
  • Orange Type inner shadow: #ce5930

Green

  • Base Green: #699801
  • Green gradient Light: #3d720a
  • Green gradient Dark: #3d720a
  • Green border top: #aac821
  • Green border bottom (thick): #2f601b
  • Green Type: #7c9c3d
  • Green Type inner shadow: #688e20

Blue

  • Base Blue: #0f8ba3
  • Blue gradient Light: #1293ab
  • Blue gradient Dark: #0a6579
  • Blue border top: #1fbbd0
  • Blue border bottom (thick): #0a505d
  • Blue Type: #3d90a2
  • Blue Type inner shadow: #298396

Purple

  • Base Purple: #773b90
  • Purple gradient Light: #7b3698
  • Purple gradient Dark: #4b285b
  • Purple border top: #b05acc
  • Purple border bottom (thick): #3d2249
  • Purple Type: #7d588e
  • Purple Type inner shadow: #714884

Grey

  • Base Grey: #32302e
  • Grey gradient Light: #4b4a46
  • Grey gradient Dark: #1e1d1a
  • Grey border top: #8a8a88
  • Grey border bottom (thick): #000000
  • Grey Type: #595854
  • Grey Type inner shadow: #4e4d4a

Buttons Mouse Over

Orange

  • Base Orange: #e7470f
  • Orange gradient Light: #f56420
  • Orange gradient Dark: #e24703
  • Orange border top: #f89549
  • Orange border bottom (thick): #8d1f06

Green

  • Base Green: #699801
  • Green gradient Light: #9ab700
  • Green gradient Dark: #62a503
  • Green border top: #aac821
  • Green border bottom (thick): #2f601b

Blue

  • Base Blue: #0f8ba3
  • Blue gradient Light: #15adc1
  • Blue gradient Dark: #109bac
  • Blue border top: #1fbbd0
  • Blue border bottom (thick): #0a505d

Purple

  • Base Purple: #773b90
  • Purple gradient Light: #a048b8
  • Purple gradient Dark: #7e4894
  • Purple border top: #b05acc
  • Purple border bottom (thick): #3d2249

Grey

  • Base Grey: #32302e
  • Grey gradient Light: #54534c
  • Grey gradient Dark: #494740
  • Grey border top: #8a8a88
  • Grey border bottom (thick): #000000

Nav Bar

  • Base Background: #312f2d
  • Background gradient light: #3a3836
  • Background gradient dark: #201f1e
  • Top border: #000000
  • Bottom border: #000000
  • button separator border light: #43413f
  • button separator border dark: #171716

Filter Bar

  • Base Background: #312f2d
  • Background gradient light: #3a3836
  • Background gradient dark: #201f1e
  • Top border: #000000
  • Bottom border: #000000
  • Bottom coloured border: #db3b03
  • button separator border light: #43413f
  • button separator border dark: #171716

Content

  • Page background light grey:
  • Page background text default:
  • Page background text darker: #202020
  • Page background text lighter: #6a6868
  • Super big text: 56px
  • Big text: 21px
  • Medium: 18px
  • Default: 14px
  • Small: 13.5px
  • Smaller: 12.5px
  • Tiny: 11.5px

Cards

  • Bottom border color: #d1d1d1 (with blur!?)
  • Right border colour: #d1d1d1 (with blur!?)
  • Corner radius: 6px
  • line color: #ededed
  • Contractor business name: Proxima Nova Semibold, 18px, #202020
  • Contractor name: Proxima Nova Semibold, 12.5px, #6a6868
  • Small text: Proxima Nova Semibold, 11.5px, #6a6868
  • lighter text:
  • Popdown background color: #f3f3f3

Need fonts/font sizes also but not as urgent.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment