Text

Font

Mulish

  • "to.co" should be formatted in lower-case with the dot when typed.
  • Logo is preferred over written product name.

Headings

  • Bold (700 Weight)
  • Dark Gray #374151

Body Text

  • Regular (400 Weight)
  • Mid Gray #6b7280

Heading 1

Heading 2

Heading 3

Heading 4

Body Text

Small Body

Extra Small Body

Icons

We use icons from these open-source libraries:

Components

Form

Panel Heading

Description

Buttons

Badges

Badge
Small Badge

Colours

Brand Colour Pallete

#fff

Panel Background

#f3f4f6

Page Background

#9ca3af

Subtle text

#6b7280

Body text

#374151

Heading text

#111827

Alt Background

#ccfbf1

Badge Background

#99f6e4
#2dd4bf

#14b8a6

Buttons + Links

#0d9488

Button/Link highlight

#115e59

Badge Background

Gradients

#14b8a6

Important Buttons

#0891b2

#0d9488

Important Button highlight

#0e7490

Additional Colours

#dcfce7
#bbf7d0
#22c55e
#16a34a
#15803d
#166534
#cffafe
#a5f3fc
#06b6d4
#0891b2
#0e7490
#155e75
#dbeafe
#bfdbfe
#3b82f6
#2563eb
#1d4ed8
#1e40af
#e0e7ff
#c7d2fe
#6366f1
#4f46e5
#4338ca
#3730a3
#ede9fe
#ddd6fe
#8b5cf6
#7c3aed
#6d28d9
#5b21b6
#fce7f3
#fbcfe8
#ec4899
#db2777
#be185d
#9d174d
#fee2e2
#fecaca
#fca5a5
#dc2626
#b91c1c
#991b1b
#fef3c7
#fde68a
#fcd34d
#d97706
#b45309
#92400e