Style Guide

Design system reference and component library

Color Palette

Brand
950
#16191A
900
#202324
800
#2A2D2E
700
#4F696A
600
#75664D
500
#909894
400
#ADABAE
300
#BFC5C2
Accent
700
#32788C
600
#42869F
500
#4FA4B7
400
#78B9C8
300
#A2C4F5
200
#B4D7E1
100
#DCF0F5
Warm
700
#91653B
600
#AA8C5E
500
#CBB38A
400
#DCC8A5
300
#F6E5B8
Cream / Page Bg
100
#F8F2E6
50
#FDF9F4

Typography

Heading 1 - Garnett 2.7rem

Heading 2 - Garnett 2rem

Heading 3 - Garnett

Heading 4 - Garnett

Heading 5 - Garnett
Heading 6 - Garnett

Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small Text: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

"Design is not just what it looks like and feels like. Design is how it works."

Buttons

Primary Button Secondary Button

Components

Feature Card

This is a standard feature card component used to highlight key functionality. It has a hover effect.

Standard
$29/mo
  • ✓ 10GB Storage
  • ✓ Unlimited Bandwidth
  • ✓ 5 Email Accounts
Choose Plan

Dark Support Card

Used for call-to-action sections with a dark background gradient.

Contact Support →