Design system Monday, May 4, 2026 ⌘K
Atlas Component library
Design system
Every reusable component in Atlas — colors, typography, buttons, chips, alerts, modals, toasts, empty & loading states. Source of truth for engineering handoff.

Colors

All tokens come from a single CSS-variables block defined in the shell. Use semantic names (--green for success, --rose for error) not raw hex.

Brand

Navy#0E1E35
Navy-2#152844
Navy-3#1E3A5F
Blue#2563EB
Blue-mid#3B82F6
Blue-light#DBEAFE

Semantic

Greensuccess
Amberwarning
Rosedanger
PurpleAI / Guru
Goldprestige
Tealstewardship

Neutrals

Text#0F172A
Text-2#334155
Text-3#64748B
Border#E2E8F0
Surface#F8FAFC
White#FFFFFF

Typography

DM Serif Display for hero headlines and donor-portal accents · DM Sans for everything else · Lora for the donor-facing portal logo.

Hero headline (DM Serif Display 40)
Section title (DM Serif Display 28)
Body text (DM Sans 14) · base size 14px / line-height 1.55 / Atlas runs on this
UPPERCASE LABEL (DM Sans 11/700)

Buttons

Primary for the one most-important action per surface · ghost for secondary · rose for destructive · success for confirm.

.btn .btn-primary · .btn .btn-ghost · .btn .btn-rose

Form inputs

All form fields share the same border-radius and focus halo. Always pair with an UPPERCASE label above and an optional help message below.

Donor email
We'll send the tax receipt to this address.
Amount with error
Amount must be greater than $0.
Gift type
Disabled field

.lbl .fld · .fld:focus · .fld.error

Chips & tags

Use to label state (Active / Lapsed), gift type (Cash / DAF), or filter selections. Always semantic — green = good, amber = caution, rose = bad, blue = info, purple = AI.

Status chips

Active Lapsed Overdue New Hot VIP Archived Pinned

.tag.green · .tag.amber · .tag.rose · etc.

Gift type chips

Cash Check Credit card ACH Stock DAF Matching Pledge pmt QCD

Badges

Smaller than chips, all caps, for phase indicators and feature flags.

Phase 1 Phase 2 Phase 3 New Beta

Avatars

Initial-based circles · color derived from constituent type or hashed from name. 4 sizes: xs (20) · sm (28) · md (36) · lg (56).

M MO MO M xs · sm · md · lg
M P RL A B SR JK

Alerts & banners

Inline messages with a leading icon, bold title, and supporting text. 5 variants: info · success · warn · danger · ai.

i
No duplicates detected so far.Atlas checks for matches on name, email and address as you type. If a match is found, you'll see a side-by-side merge prompt before saving.
✓
Gift posted · receipt R-2026-0148 emailedMargaret O'Brien's $10,000 gift is now on her Donor 360 timeline. GL entry will export to QuickBooks tonight.
!
iWave trial ends in 56 daysReach out to Bridget about converting to a paid plan, or wealth-screening will pause on Jun 30.
✗
Receipt blocked · DAF gift cannot issue a tax receiptThe donor already received their deduction when they funded the DAF. Atlas will send a soft-credit acknowledgement letter instead.
G
Guru AI suggests · mark this as high priorityDonors who receive a cultivation visit and don't get a follow-up artifact within 5 days convert to a gift 28% less often.

.alert.info · .alert.success · .alert.warn · .alert.danger · .alert.ai

Modals & dialogs

Atlas uses three modal patterns: confirmation dialog (centered, short), info modal (centered, scrollable), and slide-over drawer (right edge, full task flows like Log activity / Add task / Invite user).

Confirmation dialog

Disconnect QuickBooks?

Atlas will stop syncing immediately and the nightly export will not run tonight. Existing data stays.

You can reconnect anytime by re-authorizing. Past exports are preserved in atlas-sync.html.

Info modal · used for documentation pop-ups

Why we ask for your address

The IRS requires your name and mailing address on every tax receipt over $250.

We never share your address with anyone outside the Diocese, and we'll never sell it. Atlas encrypts addresses at rest and you can update yours anytime in your donor profile.

Slide-over drawer · already used across 6 screens

Open Log activity drawer → Open Add task drawer → Open Edit constituent drawer → Open Invite user drawer →

.scrim + .drawer + .drawer-head + .drawer-body + .drawer-foot

Toasts

Bottom-right corner notification. Auto-dismiss after 5 seconds. Use for "you've done something" feedback (gift saved, email sent, audit-log fired).

✓
Gift saved · receipt sentR-2026-0148 emailed to margaret.obrien@email.com
Undo
i
Sync completed142 gifts posted · reconciled with GL
!
Couldn't send emailSendGrid returned 503. We'll retry in 30s.
Retry now

Empty states

When a list is empty by design (no tasks today, no pending duplicates). Always explain why, and what the user can do.

You're all caught up!

No tasks due today. Take a moment to log activities from yesterday or plan tomorrow.

+ Plan a task

No pending duplicates

Atlas hasn't flagged any matches above 75% confidence. Last scan was 14 minutes ago — runs every time a new constituent is created.

View resolved (42)

Loading states

Use skeleton blocks for predictable content (lists, tables, cards), and the centered spinner only for unpredictable async (sync to GiveCentral, sending email).

Skeleton

.skel.circle · .skel.short · .skel.med · .skel.long · .skel.tall

Spinner

Posting to GiveCentral · syncing to Atlas… avg 23s · don't refresh the page