Colors

The Teamshares Design System color palette combines high contrast and matte hues that are chosen to work functionally and harmoniously with one another.

Brand palette

Blue

Teamshares’ primary brand color family, used in the UI for primary actions, links, and informative alerts.
  • Tailwind classes: .bg-blue-{n} .border-blue-{n} .text-blue-{n}
  • Shoelace tokens: --ts-color-blue-{n} --ts-color-primary-{n}
50 #F6FAFD rgb(246, 250, 253)
100 #E1EFF9 rgb(225, 239, 249)
200 #B7D8F0 rgb(183, 216, 240)
300 #84BAFA rgb(132, 186, 250)
400 #539EF8 rgb(83, 158, 248)
500 #3B74FC rgb(59, 116, 252)
600 #2C5ED6 rgb(44, 94, 214)
700 #3A5DAE rgb(58, 93, 174)
800 #29427B rgb(41, 66, 123)
900 #353D5F rgb(53, 61, 95)
950 (1000 in Figma) #2F3654 rgb(47, 54, 84)

Green

Used in the UI to convey a mood or message of “success” and positivity. Note that we don’t currently use a green button for positive actions. Opt instead to use the primary (blue) button.
  • Tailwind classes: .bg-green-{n} .border-green-{n} .text-green-{n}
  • Shoelace tokens: --ts-color-green-{n} --ts-color-success-{n}
100 #EEF6E8 rgb(238, 246, 232)
200 #D4E8C3 rgb(212, 232, 195)
300 #72D0A3 rgb(114, 208, 163)
400 #21BC9C rgb(33, 188, 156)
500 #17A688 rgb(23, 166, 136)
600 #10985F rgb(16, 152, 95)
700 #068466 rgb(6, 132, 102)
800 #164E3E rgb(22, 78, 62)
900 #004D49 rgb(0, 77, 73)

Yellow

Used in the UI to convey a mood or message of moderate negativity or “warning”.
  • Tailwind classes: .bg-yellow-{n} .border-yellow-{n} .text-yellow-{n}
  • Shoelace tokens: --ts-color-yellow-{n} --ts-color-warning-{n}
50 #FFFBF0 rgb(255, 251, 240)
100 #FAF4EA rgb(250, 244, 234)
200 #F2EADE rgb(242, 234, 222)
300 #FCE491 rgb(252, 228, 145)
400 #FAD860 rgb(250, 216, 96)
500 #FFC328 rgb(255, 195, 40)
600 #F6AF47 rgb(246, 175, 71)
700 #CA861E rgb(202, 134, 30)
800 #956419 rgb(149, 100, 25)
900 #694712 rgb(105, 71, 18)

Red

Used in the UI to convey a mood or message of high negativity or “danger”.
  • Tailwind classes: .bg-red-{n} .border-red-{n} .text-red-{n}
  • Shoelace tokens: --ts-color-red-{n} --ts-color-danger-{n}
100 #FCF1EF rgb(252, 241, 239)
200 #F7D7D2 rgb(247, 215, 210)
300 #EEC9C1 rgb(238, 201, 193)
400 #F0948B rgb(240, 148, 139)
500 #F65747 rgb(246, 87, 71)
600 #D64E41 rgb(214, 78, 65)
700 #D7351C rgb(215, 53, 28)
800 #B92E18 rgb(185, 46, 24)
900 #9B2614 rgb(155, 38, 20)

Gray

Used in the UI to convey a “neutral” mood or message, as well as the default color for many UI elements. Gray 300 is the default border color; Gray 700 and Gray 900 are default text colors. Gray 100 is used as a page background color in some apps.
  • Tailwind classes: .bg-gray-{n} .border-gray-{n} .text-gray-{n}
  • Shoelace tokens: --ts-color-gray-{n} --ts-color-neutral-{n}
100 #F6F8FA rgb(246, 248, 250)
200 #F0F0F0 rgb(240, 240, 240)
300 #E8E8E8 rgb(232, 232, 232)
400 #CDCFD1 rgb(205, 207, 209)
500 #B3B5B8 rgb(179, 181, 184)
600 #93999E rgb(147, 153, 158)
700 #6D7176 rgb(109, 113, 118)
800 #444C59 rgb(68, 76, 89)
900 #2E333C rgb(46, 51, 60)

White

  • Tailwind classes: .bg-white .border-white .text-white
  • Shoelace tokens: --ts-color-white
#FFFFFF rgb(255, 255, 255)

Teal

Used as an accent color in components, illustrations, and icons.
  • Tailwind classes: .bg-teal-{n} .border-teal-{n} .text-teal-{n}
  • Shoelace tokens: --ts-color-teal-{n}
100 #F0FAFA rgb(240, 250, 250)
200 #CAEBEC rgb(202, 235, 236)
300 #A4DBDD rgb(164, 219, 221)
400 #80CBCE rgb(128, 203, 206)
500 #5CBABD rgb(92, 186, 189)
600 #39A8AC rgb(57, 168, 172)
700 #288286 rgb(40, 130, 134)
800 #1A5B5D rgb(26, 91, 93)
900 #0D3233 rgb(13, 50, 51)

Purple

Used as an accent color in components, illustrations, and icons.
  • Tailwind classes: .bg-purple-{n} .border-purple-{n} .text-purple-{n}
  • Shoelace tokens: --ts-color-purple-{n}
100 #F4F0FA rgb(244, 240, 250)
200 #DBD0EF rgb(219, 208, 239)
300 #C3B1E2 rgb(195, 177, 226)
400 #AB92D6 rgb(171, 146, 214)
500 #9374C8 rgb(147, 116, 200)
600 #7B56BB rgb(123, 86, 187)
700 #6339AC rgb(99, 57, 172)
800 #482684 rgb(72, 38, 132)
900 #2E1658 rgb(46, 22, 88)

Fuchsia

Used as an accent color in components, illustrations, and icons.
  • Tailwind classes: .bg-fuchsia-{n} .border-fuchsia-{n} .text-fuchsia-{n}
  • Shoelace tokens: --ts-color-fuchsia-{n}
100 #FCF2FF rgb(252, 242, 255)
200 #F2CFFE rgb(242, 207, 254)
300 #E7AEFB rgb(231, 174, 251)
400 #DD8DF8 rgb(221, 141, 248)
500 #D16EF3 rgb(209, 110, 243)
600 #C550ED rgb(197, 80, 237)
700 #9839B8 rgb(152, 57, 184)
800 #692481 rgb(105, 36, 129)
900 #391247 rgb(57, 18, 71)

Text colors

Default text

The default UI text color for Teamshares products is gray 900 for text on light backgrounds and white for text on dark backgrounds.
  • Tailwind classes: .ts-text-default .ts-text-light
  • Shoelace tokens: --ts-color-text-default --ts-color-text-light
Default text
Default text, light
<div class="ts-text-default">Default text</div>
<div class="dark-background">
  <div class="ts-text-light">Default text, light</div>
</div>

.ts-text-default
  | Default text
.dark-background
  .ts-text-light
    | Default text, light

Subdued text

Subdued text with less emphasis is gray 700 for text on light backgrounds and gray 200 for text on dark backgrounds.
  • Tailwind classes: .ts-text-subdued .ts-text-light-subdued
  • Shoelace tokens: --ts-color-text-subdued --ts-color-text-light-subdued
Subdued text
Subdued text, light
<div class="ts-text-subdued">Subdued text</div>
<div class="dark-background">
  <div class="ts-text-light-subdued">Subdued text, light</div>
</div>

.ts-text-subdued" Subdued text
.dark-background"
  .ts-text-light-subdued Subdued text, light

Link text

Link text is blue 600 on light backgrounds and blue 300 on dark backgrounds.
  • Tailwind classes: .ts-text-link .ts-text-link-light
  • Shoelace tokens: --ts-color-link --ts-color-link-light
Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products.
Teamshares is an employee ownership platform for small business, driven by proprietary software, education, and financial products. 
<div class="ts-body-1">
  Teamshares is an <a href="#" class="ts-text-link">employee ownership platform</a> for small business, driven by
  proprietary software, education, and financial products.
</div>
<div class="dark-background">
  <div class="ts-body-1 ts-text-light">
    Teamshares is an <a href="#" class="ts-text-link-light">employee ownership platform</a> for small business, driven
    by proprietary software, education, and financial products.
  </div>
</div>

.ts-body-1
  | Teamshares is an
  a.ts-text-link href="#"
    | employee ownership platform
  | for small business, driven by proprietary software, education, and financial products.

.dark-background
  .ts-body-1.ts-text-light
    | Teamshares is an
    a.ts-text-link-light href="#"
      | employee ownership platform
    | for small business, driven by proprietary software, education, and financial products.

Accessibility & tools

Accessibility

The Teamshares Design System aims to meet the Web Content Accessibility Guidelines (WCAG) AA level requirements for text contrast.

Tools for checking accessibility

These tools are useful for checking contrast between text and background color pairings:

Tools for color exploration

These tools are useful for exploring new color families in shades, tints, and tones that will work well with our existing palette.