This is a living document - please check back often for updates.

Color Palettes

Primary Color Palette

These are the main brand colors for TrackR.

Black

  • SASS Variable $color-brand-black
  • RGB 26, 24, 24
  • Pantone Solid Coated Nuetral Black C
  • Pantone Solid Uncoated Neutral Black U
  • HSL 0, 4, 10
  • HSB 0, 8, 10
  • CMYK 0, 8, 8, 90
  • CSS RGB rgb(26, 24, 24);
  • CSS HSL hsl(0, 4%, 10%);
  • Hex #1a1818
  • Pantone Metallic 8603 C
  • RAL Colour 8022

Use for:

  • Logotype text
  • Title text
  • Backgrounds
  • Body Copy

Avoid for:

  • Calls to action
  • Borders

Shadow

  • SASS Variable $color-brand-shadow
  • RGB 46, 105, 115
  • Pantone Solid Coated 2214 C
  • Pantone Solid Uncoated 7715 U
  • HSL 189, 43, 32
  • HSB 189, 60, 45
  • CMYK 60, 9, 0, 55
  • CSS RGB rgb(46, 105, 115);
  • CSS HSL hsl(189, 43%, 32%);
  • Hex #2e6973
  • Pantone Metallic 8760 C
  • RAL Colour 5025

Use for:

  • Backgrounds
  • Subtitle text

Avoid for:

  • Body text
  • Calls to action
  • Borders

Primary

  • SASS Variable $color-brand-primary
  • RGB 70, 142, 135
  • Pantone Solid Coated 7473 C
  • Pantone Solid Uncoated 7717 U
  • HSL 174, 34, 42
  • HSB 174, 51, 56
  • CMYK 51, 0, 5, 44
  • CSS RGB rgb(70, 142, 135);
  • CSS HSL hsl(174, 34%, 42%);
  • Hex #468e87
  • Pantone Metallic 8284 C
  • RAL Colour 6033

Use for:

  • Logomark hexagon
  • Backgrounds
  • Title text

Avoid for:

  • Body text
  • Calls to action
  • Borders

Highlight

  • SASS Variable $color-brand-highlight
  • RGB 105, 178, 142
  • Pantone Solid Coated 2248 C
  • Pantone Solid Uncoated 2249 U
  • HSL 150, 32, 55
  • HSB 150, 41, 70
  • CMYK 41, 0, 20, 30
  • CSS RGB rgb(105, 178, 142);
  • CSS HSL hsl(150, 32%, 55%);
  • Hex #69b28e
  • Pantone Metallic 8302 C
  • RAL Colour 6027

Use for:

  • Calls to action
  • Backgrounds
  • Subtitle text

Avoid for:

  • Body text
  • Borders

Gray

  • SASS Variable $color-brand-gray
  • RGB 208, 213, 216
  • Pantone Solid Coated 427 C
  • Pantone Solid Uncoated 427 U
  • HSL 203, 9, 83
  • HSB 203, 4, 85
  • CMYK 4, 1, 0, 15
  • CSS RGB rgb(208, 213, 216);
  • CSS HSL hsl(203, 9%, 83%);
  • Hex #d0d5d8
  • Pantone Metallic 877 C
  • RAL Colour 7047

Use for:

  • Quiet text
  • Subtitle text
  • Borders

Avoid for:

  • Body text
  • Calls to action
  • Backgrounds

Secondary Color Palette

These are the secondary brand colors for TrackR. They're calculated to contrast well when combined with the primary color palette in instances when a larger palette is needed. They are also used as the logomark accents across the TrackR product line.

Plantation

  • SASS Variable $color-secondary-plantation
  • RGB 39, 78, 74
  • Pantone Solid Coated 5477 C
  • Pantone Solid Uncoated 627 U
  • HSL 174, 33, 23
  • HSB 174, 50, 31
  • CMYK 50, 0, 5, 69
  • CSS RGB rgb(39, 78, 74);
  • CSS HSL hsl(174, 33%, 23%);
  • Hex #274e4a
  • Pantone Metallic 8524 C
  • RAL Colour 6004

Use for:

Avoid for:

Zest

  • SASS Variable $color-secondary-zest
  • RGB 227, 129, 37
  • Pantone Solid Coated 7570 C
  • Pantone Solid Uncoated 138 U
  • HSL 29, 77, 52
  • HSB 29, 84, 89
  • CMYK 0, 43, 84, 11
  • CSS RGB rgb(227, 129, 37);
  • CSS HSL hsl(29, 77%, 52%);
  • Hex #e38125
  • Pantone Metallic 8963 C
  • RAL Colour 2000

Use for:

  • Alert Backgrounds
  • TrackR wallet logomark

Avoid for:

  • Large backgrounds

Astronaut

  • SASS Variable $color-secondary-astronaut
  • RGB 39, 35, 106
  • Pantone Solid Coated 2112 C
  • Pantone Solid Uncoated 281 U
  • HSL 243, 50, 28
  • HSB 243, 67, 42
  • CMYK 63, 67, 0, 58
  • CSS RGB rgb(39, 35, 106);
  • CSS HSL hsl(243, 50%, 28%);
  • Hex #27236a
  • Pantone Metallic 8802 C
  • RAL Colour 5022

Use for:

Avoid for:

Wedgewood

  • SASS Variable $color-secondary-wedgewood
  • RGB 69, 117, 155
  • Pantone Solid Coated 2159 C
  • Pantone Solid Uncoated 2151 U
  • HSL 207, 38, 44
  • HSB 207, 55, 61
  • CMYK 55, 25, 0, 39
  • CSS RGB rgb(69, 117, 155);
  • CSS HSL hsl(207, 38%, 44%);
  • Hex #45759b
  • Pantone Metallic 8182 C
  • RAL Colour 5023

Use for:

  • TrackR sticker logomark

Avoid for:

Turquoise

  • SASS Variable $color-secondary-turquoise
  • RGB 96, 216, 232
  • Pantone Solid Coated 2225 C
  • Pantone Solid Uncoated 2225 U
  • HSL 187, 75, 64
  • HSB 187, 59, 91
  • CMYK 59, 7, 0, 9
  • CSS RGB rgb(96, 216, 232);
  • CSS HSL hsl(187, 75%, 64%);
  • Hex #60d8e8
  • Pantone Metallic 8282 C
  • RAL Colour 6027

Use for:

Avoid for:

Typography

Header Base Styles

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Paragraph Base Style

In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing. An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays, lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income. The rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays, while on week-days he made a brave figure in his best homespun. He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place, who used to saddle the hack as well as handle the bill-hook. The age of this gentleman of ours was bordering on fifty; he was of a hardy habit, spare, gaunt-featured, a very early riser and a great sportsman. They will have it his surname was Quixada or Quesada (for here there is some difference of opinion among the authors who write on the subject), although from reasonable conjectures it seems plain that he was called Quexana. This, however, is of but little importance to our tale; it will be enough not to stray a hair's breadth from the truth in the telling of it.

Expanded Styles

Superheader h1

Superheader h2

Iconography

Icons, icon patterns, holiday icons, coming soon…

Illustrations

Coming soon…