01
Colour System
Brand Palette
Navy
#223342
--color-navy
Green
#008148
--color-green
Yellow
#F9BE17
--color-yellow
Orange
#FF9900
--color-orange
Blue
#2274A5
--color-blue
Tints & Shades
Navy
100 · #223342
80 · #4e5c69
60 · #7a8590
20 · #d8dde1
10 · #ebeff1
Green
100 · #008148
80 · #33a36d
20 · #cceedd
10 · #e5f6ee
Yellow / Orange / Blue
Yellow 100
Yellow 20
Orange 100
Orange 20
Blue 100
Blue 20
Semantic Colours
Text Primary
--color-text-primary
Text Secondary
--color-text-secondary
Success
--color-success
Warning
--color-warning
Error
--color-error
Info
--color-info
02
Typography
Display
SmartTHING
Intelligent Solutions
Headings
H1 — Page Title
H2 — Section Title
H3 — Sub-section Title
H4 — Card Heading
H5 — Label Heading
H6 — Overline Label
Body & UI Text
SmartTHING provides intelligent solutions for Blackbaud products. Seamlessly connect your data, automate your workflows.
Body copy for standard reading. Used across product UIs, documentation, and marketing pages to communicate clearly.
Small body text for captions, supporting copy, and UI labels within dense layouts.
Caption text — metadata, timestamps, helper text
Overline Label
03
Fluid Spacing Scale
Space Tokens — viewport range 375px → 1440px
--space-1
4 → 6px
--space-2 (xs)
8 → 10px
--space-3 (sm)
12 → 16px
--space-4
16 → 20px
--space-5 (md)
20 → 24px
--space-6
24 → 32px
--space-8 (lg)
32 → 40px
--space-10
40 → 56px
--space-12 (xl)
48 → 72px
--space-16
64 → 96px
--space-20 (2xl)
80 → 128px
--space-24
96 → 160px
--space-32
128 → 224px
04
Components
Badges
Active
Enterprise
Beta
New
Integration
Integration
SmartSYNC for Raiser's Edge
Automatically sync your donor data between platforms, eliminating manual data entry and reducing errors.
Tool
SmartNXT Free Tools
A suite of free productivity tools built specifically for Blackbaud users — no setup required.
Alerts
Sync complete
All 1,423 records were successfully synced to Raiser's Edge NXT.
Review required
12 records have potential duplicates that need your attention.
Connection failed
Unable to connect to Blackbaud API. Check your credentials.
Update available
SmartSYNC v2.4 is available with improved matching algorithms.
Form Elements
05
CSS Custom Properties
Copy-ready :root token block
/* ====================================================
SMARTTHING DESIGN TOKENS — v1.0
==================================================== */
:root {
/* COLOURS */
--color-navy: #223342;
--color-green: #008148;
--color-yellow: #F9BE17;
--color-orange: #FF9900;
--color-blue: #2274A5;
/* FLUID TYPE — clamp(min, preferred, max) */
--text-display-xl: clamp(3rem, 5vw + 1rem, 6rem);
--text-display: clamp(2.5rem, 4vw + 0.75rem, 4.5rem);
--text-h1: clamp(2rem, 3vw + 0.75rem, 3.5rem);
--text-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.75rem);
--text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
--text-h4: clamp(1.125rem, 1vw + 0.5rem, 1.5rem);
--text-h5: clamp(1rem, 0.5vw + 0.75rem, 1.25rem);
--text-body-lg: clamp(1.125rem, 0.75vw + 0.75rem, 1.375rem);
--text-body: clamp(1rem, 0.5vw + 0.75rem, 1.125rem);
--text-body-sm: clamp(0.875rem, 0.25vw + 0.75rem, 1rem);
--text-caption: clamp(0.75rem, 0.25vw + 0.625rem, 0.875rem);
--text-overline: clamp(0.625rem, 0.25vw + 0.5rem, 0.75rem);
/* FLUID SPACING */
--space-1: clamp(0.25rem, 0.25vw + 0.125rem, 0.375rem);
--space-2: clamp(0.5rem, 0.5vw + 0.25rem, 0.625rem);
--space-3: clamp(0.75rem, 0.5vw + 0.5rem, 1rem);
--space-4: clamp(1rem, 0.75vw + 0.625rem, 1.25rem);
--space-5: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
--space-6: clamp(1.5rem, 1.5vw + 0.75rem, 2rem);
--space-8: clamp(2rem, 2vw + 1rem, 2.5rem);
--space-10: clamp(2.5rem, 2.5vw + 1.25rem, 3.5rem);
--space-12: clamp(3rem, 3vw + 1.5rem, 4.5rem);
--space-16: clamp(4rem, 4vw + 2rem, 6rem);
--space-20: clamp(5rem, 5vw + 2.5rem, 8rem);
--space-24: clamp(6rem, 6vw + 3rem, 10rem);
--space-32: clamp(8rem, 8vw + 4rem, 14rem);
/* CONTAINERS */
--container-default: 1366px;
--container-2xl: 1440px;
--container-xl: 1280px;
--container-lg: 1024px;
--container-md: 768px;
/* FONT */
--font-primary: 'Poppins', sans-serif;
--font-print: 'Avenir', 'Nunito Sans', sans-serif;
}