Design System & Style Guide

Colors

Brand, background, text, border, and status colors. Always use CSS custom properties — never hardcode hex values.

Brand

Primary

--color-primary: var(--color-primary)

Secondary / Dark

--color-secondary: #007AFF

Primary Light

--color-primary-light: #93C5FD

Primary Pale

--color-primary-pale

Background

--color-bg: #FAFAF8

Bg Subtle

--color-bg-subtle: #F1F5F9

Bg Dark

--color-bg-dark: #0A1628

Text

--color-text: #0f172a

Text Muted

--color-text-muted: #64748b

Text Subtle

--color-text-subtle: #94a3af

Status

Success

--color-success: #3B82F6

Error

--color-error: #ef4444

Warning

--color-warning: #f59e0b

Info

--color-info: #3b82f6

Gold / Accent

--color-gold: #F5A623

Typography

Three font families: Instrument Serif for display/headings, DM Sans for body, JetBrains Mono for code.

Font Families

Instrument Serif — Headings

--font-heading: 'Instrument Serif', Georgia, serif

DM Sans — Body Text

--font-body: 'DM Sans', system-ui, sans-serif

JetBrains Mono — Code

--font-mono: 'JetBrains Mono', 'Fira Code', monospace

Type Scale

text-5xl (48px)

text-4xl (36px)

text-3xl (30px)

text-2xl (24px)

text-xl (20px)

text-lg (18px)

text-base (16px) — Default body text

text-sm (14px)

text-xs (12px)

Font Weights

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

Black (800)

Spacing

Consistent spacing scale used for padding, margin, and gap throughout the platform.

xs — 4px

sm — 8px

md — 16px

lg — 24px

xl — 32px

2xl — 48px

3xl — 64px

Shadows

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-brand

Border Radius

sm
6px

md
10px

lg
16px

xl
24px

pill
100px

round
50%

Buttons

Six button variants, three sizes. All inherit the design system tokens.

Variants

Sizes

Inputs

Standard form controls for all tool pages.

Text Input

Select

Disabled Input

Cards

Default Card

Basic card with border and subtle shadow. Use .card

Hover Card

Lifts on hover. Use .card .card-hover

Badges & Chips

Badges

Live Tier 1 Updated Breaking Deprecated

Tier Badges

Tier 1 Tier 2 Tier 3

Chips

All Countries Nigeria Kenya Ghana

Alerts

This PAYE calculator uses the 2025/2026 tax tables from FIRS.

Calculation complete! Your take-home pay has been updated.

Tax rates may change. Please verify with your local tax authority.

Invalid salary amount. Please enter a positive number.

Skeleton Loading

Placeholder elements shown while content loads. Use .skeleton

Animations

Scroll reveal, fade, slide, pulse, and skeleton animations. All respect prefers-reduced-motion.

Classes

Class	Effect	Trigger
.fade-in	Opacity 0 to 1	Add .is-visible
.slide-up	Translate Y + fade	Add .is-visible
.rv	Legacy scroll reveal	Add .in
.pulse	Opacity pulse loop	Auto (CSS)
.skeleton	Shimmer loading	Auto (CSS)
.spin	360deg rotation	Auto (CSS)

Live Demo

Pulse animation

Spin animation (loading spinner)

Utility Classes

Layout

.container	max-width: 1200px, auto margins, 24px padding
.container--narrow	max-width: 800px
.container--wide	max-width: 1400px
.grid-2 / .grid-3 / .grid-4	CSS Grid with 2/3/4 equal columns
.flex-center	Flex with center alignment
.sr-only	Visually hidden, accessible to screen readers

Text Utilities

.text-primary — Primary color text

.text-muted — Muted text

.text-subtle — Subtle text

.text-error — Error text

.font-mono — Monospace font

.tabular-nums — 1,234,567.89 (tabular figures)

Tooltip

Divider

Content above divider

Content below divider

AfroTools Design System