Internal Reference

TrackShip Design System

The official reference for colors, typography, spacing, and UI components used across the TrackShip website.

Colors

Brand

Primary --primary #09d3ac

Primary Dark --primary-dark #07a885

Primary Light --primary-light #2fe0bc

Secondary --secondary #124ed6

Secondary Dark --secondary-dark #0d3aa0

Secondary Light --secondary-light #3d6fe8

Neutrals

Dark--dark#111827

Dark Gray--dark-gray#374151

Gray--gray#6B7280

Light Gray--light-gray#D1D5DB

Lighter Gray--lighter-gray#E5E7EB

Lightest Gray--lightest-gray#F3F4F6

Background Alt--background-alt#F9FAFB

White--white#FFFFFF

Status

Success--success#10B981

Warning--warning#F59E0B

Error--error#DC2626

Info--info#3B82F6

Typography

Font family: Rubik — used for headings, body, and UI elements.

h1 / --fs-5xl48px / 700

Heading One

h2 / --fs-4xl36px / 700

Heading Two

h3 / --fs-3xl30px / 700

Heading Three

h4 / --fs-2xl24px / 600

Heading Four

h5 / --fs-xl20px / 600

Heading Five

h6 / --fs-lg18px / 600

Heading Six

Body / --fs-base16px / 400

The quick brown fox jumps over the lazy dog. TrackShip auto-tracks your shipments with 1000+ shipping providers.

Small / --fs-sm14px / 400

Supporting text, captions, metadata, and helper copy.

XSmall / --fs-xs12px / 600

LABELS AND EYEBROWS

Spacing Scale

--spacing-xs

4px / 0.25rem

--spacing-sm

8px / 0.5rem

--spacing-md

16px / 1rem

--spacing-lg

24px / 1.5rem

--spacing-xl

32px / 2rem

--spacing-2xl

48px / 3rem

--spacing-3xl

64px / 4rem

--spacing-4xl

96px / 6rem

Buttons

Badges & Pills

Section Labels (Homepage style)

Key Features How It Works

Feature Page Badge (Blue)

Auto-Track Platform Overview

Icon Sizes

All icons are inline SVG using Feather/Lucide style — 1.75px stroke, rounded caps and joins.

16px
xs

20px
sm

24px
md (default)

32px
lg

40px
xl

Logo

On light background — ts-white-bg.svg

On dark background — ts-dark-bg.svg