iDistrictSYNC Design System

Design Principles

Three Core Tenets

These principles guide every decision in iDistrictSYNC, from a single icon choice to the architecture of an entire screen. When in doubt, return here.

01

Clarity Over Cleverness

Every element must earn its place. Administrators managing payroll, benefits, and staff records cannot afford ambiguity. Labels are explicit, actions are predictable, and hierarchy is immediately legible. We never sacrifice comprehension for visual novelty.

Example: A "Terminate Employee" button uses danger red with a confirmation modal, not a subtle icon that might be missed or misread.

02

Trustworthy by Default

School districts handle sensitive PII, payroll data, and policy records. The interface must communicate security and authority without feeling cold. Consistent patterns, restrained color use, and immediate, honest feedback build confidence in every interaction.

Example: Form submissions always show a timestamped confirmation. Data deletions require a typed confirmation phrase, not just a checkbox.

03

Respectful Efficiency

Admins and HR reps are busy professionals, not casual browsers. The interface respects their expertise and time. Keyboard shortcuts exist, bulk actions are surfaced, and common tasks take fewer steps. We honor their workload by removing every unnecessary click.

Example: The bulk enrollment import accepts CSV with clear error reporting per row, not a row-by-row manual entry flow.

Foundations

Color System

The iDistrictSYNC palette is anchored in deep navy authority with a verdant accent that signals action. The system is fully dark mode compatible with verified contrast ratios at every level.

Primary Palette

Six core colors form the entire visual language. Each has a defined role and should not be used outside of that role.

#1B2A4A

Navy

HEX: #1B2A4A
RGB: 27, 42, 74
HSL: 219, 47%, 20%

AAA 18.5:1

#383838

Charcoal

HEX: #383838
RGB: 56, 56, 56
HSL: 0, 0%, 22%

AAA 11.2:1

#2E8B6F

Verdant

HEX: #2E8B6F
RGB: 46, 139, 111
HSL: 157, 50%, 36%

AA 4.6:1

#5BB897

Sage

HEX: #5BB897
RGB: 91, 184, 151
HSL: 157, 36%, 54%

AA 3.0:1 on dark

#E8F5F0

Mist

HEX: #E8F5F0
RGB: 232, 245, 240
HSL: 153, 36%, 94%

Decorative only

#FFFFFF

White

HEX: #FFFFFF
RGB: 255, 255, 255
HSL: 0, 0%, 100%

Background only

Semantic Colors

Four intent-driven colors communicate system states. These are never used decoratively.

Success

#15803D / bg: #F0FDF4

Completed actions, positive states, approval

Warning

#B45309 / bg: #FFFBEB

Pending review, expiring data, caution required

Error

#B91C1C / bg: #FEF2F2

Validation failures, destructive actions, alerts

Info

#25755D / bg: #E8F5F0

Informational notices, help text, tips

Dark Mode Equivalents & Contrast Ratios

Token	Light	Dark	Contrast (dark bg)	WCAG
`--color-primary`	#2E8B6F	#5BB897	5.2:1 on #111827	AA
`--color-text-primary`	#1B2A4A	#F9FAFB	17.8:1 on #111827	AAA
`--color-text-secondary`	#6B7280	#9CA3AF	7.1:1 on #111827	AAA
`--color-surface`	#FFFFFF	#1F2937	Background	N/A
`--color-border`	#E5E7EB	#374151	Decorative	N/A
`--color-success`	#15803D	#34D399	8.9:1 on #111827	AAA
`--color-error`	#B91C1C	#F87171	6.1:1 on #111827	AA

Color Usage Rules

Color	Use for	Never use for
Navy	Primary text, app header/sidebar backgrounds, section headings, table headers	Body text blocks longer than 2 sentences (use Charcoal instead), decorative elements
Verdant	Primary action buttons, links, active state indicators, focus rings, selected tabs	Large background fills, body text, decorative borders
Sage	Dark mode primary actions, accent highlights, icon fills in dark contexts	Light mode interactive elements (insufficient contrast on white)
Mist	Hover backgrounds, selected row highlights, info card backgrounds, sidebar hover states	Text color, icon fills, borders as sole visual indicator
Success	Success alerts, confirmed status indicators, positive change metrics	Decorative greenery, brand accents, any non-status use
Error	Form validation errors, destructive action buttons, critical system alerts	Emphasis text, decorative accents, warnings that require no action
Warning	Approaching deadlines, pending review states, items requiring attention	Errors, neutral information, decorative use

Foundations

Typography

One typeface family, two roles. Lato Black (900) for authority and hierarchy, Lato Regular (400) for clarity and readability. IBM Plex Mono handles all code and data values.

Type Specimens

Display
56px / 1.05 lh
-1.5px ls
Lato 900

District Overview

Headline
40px / 1.1 lh
-1px ls
Lato 900

Employee Records

Title 1
28px / 1.2 lh
-0.5px ls
Lato 700

Benefits Administration

Title 2
22px / 1.3 lh
-0.3px ls
Lato 700

Open Enrollment Period

Callout
20px / 1.5 lh
0px ls
Lato 400

This section contains sensitive HR records. Access is logged.

Body
16px / 1.6 lh
0px ls
Lato 400

Employee data is synchronized across all district systems automatically. Changes made here will propagate within 24 hours to connected platforms.

Subheadline
13px / 1.5 lh
0.02em ls
Lato 700

PAYROLL CYCLE / DEPARTMENT HEAD

Footnote
12px / 1.5 lh
0px ls
Lato 400

Last updated March 15, 2026. Changes require approval from district HR director.

Caption
11px / 1.4 lh
0.04em ls
Lato 400

RECORD ID: EMP-0042-TN

Type Scale: Desktop / Tablet / Mobile

Style	Desktop	Tablet	Mobile	Weight	Line Height	Letter Spacing	Min for a11y
Display	56px	44px	36px	400 (serif)	1.05	-1.5px	24px
Headline	40px	32px	28px	400 (serif)	1.1	-1px	24px
Title 1	28px	24px	22px	700	1.2	-0.5px	18px
Title 2	22px	20px	18px	700	1.3	-0.3px	16px
Callout	20px	18px	17px	400	1.5	0px	14px
Body	16px	16px	16px	400	1.6	0px	14px
Subheadline	13px	13px	12px	700	1.5	0.08em	12px
Footnote	12px	12px	12px	400	1.5	0px	12px
Caption	11px	11px	11px	400	1.4	0.04em	11px*

Caption note

11px captions are permissible only for supplementary metadata (record IDs, timestamps) and must never carry critical information that users need to act on.

Font Pairing Strategy

Display / Headers

Lato Black

Used for hero headings, page titles, section headers, and large display numbers. The 900 weight creates clear visual hierarchy while maintaining the single-family consistency.

Body / UI / Data

Lato Regular

The workhorse weight for all UI labels, body copy, table data, form fields, and navigation items. Its geometric clarity and humanist warmth make it ideal for data-heavy interfaces.

Code / Data Values / IDs

IBM Plex Mono

All hexadecimal IDs, code snippets, API keys, token names, and numerical data requiring precise column alignment.

Foundations

Layout Grid

A 12-column grid scales gracefully from 1440px desktop to 375px mobile. The sidebar subtracts from available width on desktop.

Desktop: 1440px

Total Width

1440px

Columns

12

Margin

64px

Gutter

24px

Column Width

~75px

Max Content

1312px

Breakpoints

Breakpoint	Width	Columns	Margin	Gutter	Sidebar
Desktop	`1440px`	12	64px	24px	240px fixed
Laptop	`1024px`	12	48px	20px	240px fixed
Tablet	`768px`	8	32px	16px	Collapsed (icon-only)
Mobile	`375px`	4	16px	12px	Bottom navigation

Safe Areas (Notched Devices)

On iOS, bottom navigation must respect env(safe-area-inset-bottom). Recommended: padding-bottom: calc(16px + env(safe-area-inset-bottom)). Lateral safe areas apply at full bleed. Use env(safe-area-inset-left) and env(safe-area-inset-right) for sidebar and edge elements.

Foundations

Spacing System

All spacing is built on an 8px base unit. The scale includes half-steps (4px, 12px) for fine-grained control and larger multiples for macro layout. Never use arbitrary values outside this scale.

4px

--space-1

Icon-to-label gaps, input padding adjustments, tight nudges within components

8px

--space-2

Badge padding, chip spacing, inline element gaps, icon margins from text

12px

--space-3

Table row padding, compact list items, label-to-input gap, navigation item height padding

16px

--space-4

Card padding (compact), form field padding, button padding, list item spacing

24px

--space-6

Card padding (default), section sub-elements gap, sidebar padding, modal inner padding

32px

--space-8

Card padding (spacious), between major form groups, page content horizontal padding on tablet

48px

--space-12

Between page sections, between major content blocks, empty state padding vertical

64px

--space-16

Page section vertical padding (desktop), hero vertical padding (tablet), desktop page margins

96px

--space-24

Hero vertical padding (desktop), between major landing page sections

128px

--space-32

Maximally generous sections, full-page feature spacers, landing page hero heights

Components

Navigation

Navigation components orient users within the application and provide consistent access to the most important destinations.

1. Application Header

Full-width bar anchored to the top of the viewport. Houses branding, global navigation, and user controls.

iDistrictSYNC

Dashboard Employees Reports Settings

JD

Jane D.

Header anatomy:

1
Wordmark / Logo
Left-aligned. Links to the dashboard. Min touch target 44x44px.
2
Global Navigation Links
Center-aligned. Active state: white text, 2px verdant underline. Max 6 items.
3
User Identity Area
Avatar + name. Triggers user menu on click. Always right-aligned.

height56px

background--color-navy

positionsticky, top: 0, z-index: 100

padding0 64px

aria-labelrole="banner"

2. Breadcrumbs

font-size13px

separator› (U+203A), color gray-300

ariaaria-label="Breadcrumb", aria-current="page" on last item

when NOT to useOn top-level pages with no parent hierarchy

3. Tab Bar

Overview

Employment

Benefits

Documents

History

item height44px min (touch target)

active indicator2px verdant bottom border

ariarole="tablist", role="tab", aria-selected="true/false"

keyboardArrow keys navigate, Enter/Space activates

max items7 before overflow with "More" trigger

4. Sidebar Navigation

Main

Dashboard

Employees

Benefits

Reports

Payroll

Compliance

width240px (fixed, desktop)

item height36px (min 44px touch on mobile)

active left border2px solid --color-verdant

ariarole="navigation", aria-label="Primary navigation"

keyboardTab to enter, Up/Down arrows, Enter to activate

Components

Input Components

All interactive controls follow Apple HIG touch targets (44x44px minimum), clear focus states, and meet WCAG 2.1 AA across all states.

5. Buttons (6 Variants)

1
Primary
Verdant fill. One per form or page section. The single most important action.
2
Secondary
Verdant outline. Complementary to primary. Used for "cancel" or alternative actions.
3
Ghost
Gray border. Tertiary utility actions. Export, filter, view options.
4
Danger
Red fill. Irreversible destructive actions only. Always paired with confirmation modal.
5
Success
Green fill. Approval workflows, positive confirmations.
6
Sizes (sm/md/lg)
sm: 12px/6px 14px padding. md (default): 14px/10px 20px. lg: 16px/14px 28px.

min touch target44x44px (HIG requirement)

focus ring0 0 0 3px rgba(46,139,111,0.4)

disabled opacity0.4, cursor: not-allowed

loading statespinner icon replaces label, pointer-events: none

aria (danger)aria-describedby pointing to consequence text

keyboardEnter and Space both activate

6. Text Fields

Employee ID Auto-generated on save

Last Name * Last name must be at least 2 characters

Email Address Managed by SSO

height40px (min 44px on mobile)

padding9px 12px

border1.5px solid --color-gray-300

focusborder: verdant, box-shadow: 0 0 0 3px rgba(46,139,111,0.15)

errorborder: --color-error, aria-invalid="true", aria-describedby to error msg

label-to-field gap6px

required indicatorRed asterisk after label, aria-required="true" on input

7. Dropdowns / Select

trigger height40px

menu border-radius12px

menu max-height280px with overflow scroll

ariarole="combobox", aria-expanded, aria-haspopup="listbox", role="option" on items

keyboardAlt+Down opens, Arrow keys navigate, Enter selects, Escape closes

8-11. Toggle / Checkbox / Radio / Slider

TOGGLE

Active Enrollment

CHECKBOX

Medical Insurance

Dental Insurance

RADIO

Full Time

Part Time

SLIDER

Salary Range

$30k$120k

toggle size44x26px, thumb: 20px circle

checkbox size18x18px, border-radius: 4px

radio size18x18px circle, inner: 8px

all min touch44x44px touch target wrapper

animation200ms ease transition on all state changes

Components

Feedback Components

These components communicate system state and outcomes. They must be unambiguous and accessible to users with color vision deficiencies (always pair color with icon + text).

12. Alerts

✓

Benefits Updated

Open enrollment changes for Sarah Mitchell have been saved and will take effect January 1.

⚠

I-9 Expires in 14 Days

Marcus Johnson's employment verification documents expire on March 15, 2026.

✕

Payroll Export Failed

Connection to Skyward timed out. Please retry or contact your system administrator.

ⓘ

Open Enrollment Begins Soon

Annual open enrollment opens November 1. Employees can update benefits through the portal.

padding16px 24px

border-radius12px

border1px solid semantic color (light)

ariarole="alert" for errors, role="status" for success

icon requirementAlways include icon alongside color; never rely on color alone

13. Toasts / Notifications

Employee record saved successfully ✕

positionbottom-right, 24px from edges

max-width380px

auto-dismiss4s for success, 8s for errors, never for critical

stackingStack vertically, max 3 visible, gap: 8px

ariaaria-live="polite", role="status" (assertive only for errors)

animationSlide in from right 200ms, fade out 150ms

14. Modal Dialog

max-width480px (confirm), 720px (form), 1040px (full)

border-radius24px

overlayrgba(11,31,58,0.5) backdrop

ariarole="dialog", aria-modal="true", aria-labelledby, focus trap inside

keyboardEscape closes (unless destructive action required confirmation), Tab cycles within

scrollBody scroll locked when modal is open

15. Progress Indicators

Benefits Completion68%

I-9 Verification100%

Onboarding Steps12%

track height8px (standard), 4px (compact), 12px (large)

ariarole="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100", aria-label

color semanticsVerdant: in progress, Green: complete, Amber: attention, Red: blocked

16. Skeleton Screens

animationShimmer left-to-right, 1.5s infinite, ease-in-out

colorsgray-200 to gray-100, avoids harsh blink

usageOnly for initial page loads, not re-fetches. Show spinner for <300ms waits.

ariaaria-busy="true" on container, aria-label="Loading employee data"

Components

Data Display

Data display components handle the core HR administrative workflow: reviewing, sorting, and acting on employee and district data.

17. Stat Cards

Total Employees

1,247

▲ 23 this month

Open Positions

34

▼ 5 from last week

Benefits Enrolled

89%

▲ 2% vs last year

Compliance Rate

97%

— No change

stat value fontLato 900, 36px

border-radius16px

padding24px

ariaWrap each in article, aria-label="Total employees: 1247, up 23 this month"

18. Data Table

Employee	Department	Status	Start Date
JD Jane Doe [email protected]	Human Resources	Active	2019-08-14
MJ Marcus Johnson [email protected]	Special Education	Review	2022-01-10
SR Sarah Reyes [email protected]	Transportation	Inactive	2017-03-22

row height52px (standard), 40px (compact), 64px (with avatar)

cell padding12px 16px

headerNavy background, 11px uppercase, sortable via button role

hover rowbackground: --color-mist

ariarole="table", column headers aria-sort="ascending/descending/none"

keyboardTab navigates cells, actions reachable, checkbox focus visible

empty stateInline empty state row with icon + message + CTA

19. Cards

Marcus Johnson

ID: EMP-0247 • Special Education

MJ

Under Review Full Time

20. Charts

Enrollment by Month

Aug

Sep

Oct

Nov

Dec

Jan

libraryRecharts or Chart.js. Never use D3 for simple charts.

colorsUse primary palette only. One series = verdant. Multi-series = verdant + sage + charcoal

ariaaria-label on chart wrapper, data table fallback for screen readers

tooltipsAlways include value + label + units in tooltips. Keyboard accessible.

21. Badges & Status Indicators

HR Review Approved Expired Pending Archived Active Inactive Under Review

badge padding2px 10px

lozengeIncludes colored dot indicator, never color alone

ariaInclude in aria-label of parent: "Status: Active"

Components

Media Components

JD

MJ

SR

JD

MJ

SR

+4

22. Avatars

Initials-based. Colors auto-assigned per user for consistency. Photo avatars show image with fallback to initials.

sizes28 / 40 / 56px

ariaaria-label="Jane Doe's avatar"

group overlap-8px margin-left

23. Image Containers

Standardized aspect ratio containers for document thumbnails, school logos, and photo IDs.

doc thumbaspect-ratio: 4/3

profileaspect-ratio: 1/1, border-radius: 50%

alt textAlways required, descriptive

▶

1:23

4:10

24. Video Player

For onboarding training videos and recorded HR announcements.

captionsRequired for all HR content (ADA)

controlsPlay/pause, progress, volume, fullscreen, captions toggle

ariaaria-label on all controls, keyboard fully operable

Patterns

Page Templates

Pre-validated layout structures for the most common screens in iDistrictSYNC.

Dashboard Template

iDistrictSYNC

Dashboard

Employees

Reports

HR

Good morning, Jane.

Thursday, March 15, 2026

Staff

1,247

Open

34

Alerts

7

⚠ 3 I-9 Documents Expiring Soon

Review and act before March 31 to maintain compliance.

Patterns

User Flows

👤 Employee Onboarding Flow

1

Personal Information

Name, contact details, emergency contacts. Progress indicator shows 4 total steps. All required fields marked with asterisk.

2

Employment Details

Department, position, start date, employment type, salary band. Dropdowns pull from district catalog.

3

Benefits Enrollment

Insurance elections, retirement contribution, voluntary benefits. Deadlines surfaced prominently.

4

Document Upload & Review

I-9, W-4, direct deposit. Drag-and-drop with file type validation. Review summary with edit links before final submission.

🔍 Search & Filter Pattern

🔍 Search employees...

Department: HR ✕ Status: Active ✕ Clear all

Patterns

Feedback Patterns

✓

Record Saved

ID: EMP-0248 • 9:41 AM

Success State

Always confirm with record ID and timestamp. Never just say "Done."

✕

Export Failed

Error code: SYNC-4021

Error State

Error code for support reference. Clear retry path. Never a dead end.

📁

No Documents Found

This employee has no documents on file. Upload the first document to get started.

Empty State

Always explain why empty and provide a clear path forward. Never leave a blank screen.

Developer

Design Tokens

Complete JSON token file for developer handoff. Import into your theme provider, CSS custom properties, or design tool.

{
  "idistrictsync": {

    /* ---- COLOR ---- */
    "color": {
      "brand": {
        "navy":   { "value": "#1B2A4A", "type": "color" },
        "charcoal": { "value": "#383838", "type": "color" },
        "verdant":  { "value": "#2E8B6F", "type": "color" },
        "sage":     { "value": "#5BB897", "type": "color" },
        "mist":   { "value": "#E8F5F0", "type": "color" },
        "white":  { "value": "#FFFFFF", "type": "color" }
      },
      "semantic": {
        "success": { "value": "#15803D", "type": "color" },
        "warning": { "value": "#B45309", "type": "color" },
        "error":   { "value": "#B91C1C", "type": "color" },
        "info":    { "value": "#25755D", "type": "color" }
      },
      "dark": {
        "primary":       { "value": "#5BB897", "type": "color" },
        "surface":       { "value": "#1F2937", "type": "color" },
        "surface-raised":{ "value": "#374151", "type": "color" },
        "text-primary":  { "value": "#F9FAFB", "type": "color" },
        "text-secondary":{ "value": "#9CA3AF", "type": "color" },
        "border":        { "value": "#374151", "type": "color" },
        "success":       { "value": "#34D399", "type": "color" },
        "error":         { "value": "#F87171", "type": "color" },
        "warning":       { "value": "#FBBF24", "type": "color" }
      },
      "neutral": {
        "50":  { "value": "#F9FAFB" }, "100": { "value": "#F3F4F6" },
        "200": { "value": "#E5E7EB" }, "300": { "value": "#D1D5DB" },
        "400": { "value": "#9CA3AF" }, "500": { "value": "#6B7280" },
        "600": { "value": "#4B5563" }, "700": { "value": "#374151" },
        "800": { "value": "#1F2937" }, "900": { "value": "#111827" }
      }
    },

    /* ---- TYPOGRAPHY ---- */
    "font": {
      "family": {
        "display": { "value": "'Lato', -apple-system, sans-serif" },
        "body":    { "value": "'Lato', -apple-system, sans-serif" },
        "mono":    { "value": "'IBM Plex Mono', monospace" }
      },
      "size": {
        "display":     { "value": "56px" }, "headline": { "value": "40px" },
        "title1":      { "value": "28px" }, "title2":   { "value": "22px" },
        "callout":     { "value": "20px" }, "body":     { "value": "16px" },
        "subheadline": { "value": "13px" }, "footnote": { "value": "12px" },
        "caption":     { "value": "11px" }
      },
      "weight": {
        "regular": { "value": "400" }, "semibold": { "value": "600" }, "bold": { "value": "700" }, "black": { "value": "900" }
      },
      "lineHeight": {
        "tight": { "value": "1.1" }, "snug": { "value": "1.3" },
        "normal": { "value": "1.5" }, "relaxed": { "value": "1.65" }
      }
    },

    /* ---- SPACING ---- */
    "spacing": {
      "1":  { "value": "4px"   }, "2":  { "value": "8px"   },
      "3":  { "value": "12px"  }, "4":  { "value": "16px"  },
      "6":  { "value": "24px"  }, "8":  { "value": "32px"  },
      "12": { "value": "48px"  }, "16": { "value": "64px"  },
      "24": { "value": "96px"  }, "32": { "value": "128px" }
    },

    /* ---- BORDER RADIUS ---- */
    "radius": {
      "sm":  { "value": "4px"    }, "md":  { "value": "8px"    },
      "lg":  { "value": "12px"   }, "xl":  { "value": "16px"   },
      "2xl": { "value": "24px"   }, "full": { "value": "9999px" }
    },

    /* ---- SHADOW ---- */
    "shadow": {
      "sm": { "value": "0 1px 2px rgba(11,31,58,0.06)"          },
      "md": { "value": "0 4px 12px rgba(11,31,58,0.10)"         },
      "lg": { "value": "0 8px 24px rgba(11,31,58,0.14)"         },
      "xl": { "value": "0 16px 40px rgba(11,31,58,0.18)"        }
    },

    /* ---- ANIMATION ---- */
    "animation": {
      "duration": {
        "instant": { "value": "100ms" }, "fast": { "value": "150ms" },
        "normal": { "value": "200ms" }, "slow":  { "value": "400ms" }
      },
      "easing": {
        "default": { "value": "ease"        },
        "spring":  { "value": "cubic-bezier(0.34,1.56,0.64,1)" },
        "smooth":  { "value": "cubic-bezier(0.4,0,0.2,1)"      }
      }
    },

    /* ---- BREAKPOINTS ---- */
    "breakpoint": {
      "mobile":  { "value": "375px"  }, "tablet":  { "value": "768px"  },
      "laptop":  { "value": "1024px" }, "desktop": { "value": "1440px" }
    },

    /* ---- Z-INDEX ---- */
    "zIndex": {
      "base":    { "value": "0"   }, "raised":  { "value": "10"  },
      "overlay": { "value": "50"  }, "nav":     { "value": "100" },
      "modal":   { "value": "200" }, "toast":   { "value": "300" }
    }
  }
}

Developer

Implementation Guide

Steps to integrate the iDistrictSYNC design system into a React / Next.js codebase.

Setup Step 1: CSS Custom Properties

Import and define tokens as CSS custom properties in your global stylesheet. This enables theming and dark mode via a single [data-theme="dark"] selector override.

:root {
  --color-primary:     #2E8B6F;
  --color-text:        #1B2A4A;
  --color-surface:     #FFFFFF;
  --color-border:      #E5E7EB;
  --radius-md:         8px;
  --radius-xl:         16px;
  --space-4:           16px;
  --font-body:         'Lato', sans-serif;
  --font-display:      'Lato', -apple-system, sans-serif;
}

[data-theme="dark"] {
  --color-primary:     #5BB897;
  --color-text:        #F9FAFB;
  --color-surface:     #1F2937;
  --color-border:      #374151;
}

Fonts Step 2: Typography Setup

// next/font (Next.js 13+)
import { Lato, IBM_Plex_Mono } from 'next/font/google';

const lato = Lato({
  subsets: ['latin'],
  weight: ['300', '400', '700', '900'],
  variable: '--font-body'
});

// Display uses Lato Black (900) — same family, no second import
const fontDisplay = lato;  // --font-display shares the Lato family

const ibmMono = IBM_Plex_Mono({
  subsets: ['latin'],
  weight: ['400', '500'],
  variable: '--font-mono'
});

A11y Step 3: Accessibility Checklist

1

Focus Management

All interactive elements must have a visible focus indicator. Never use outline: none without a replacement. Use :focus-visible to only show for keyboard users. Minimum focus ring: 0 0 0 3px rgba(46,139,111,0.4).

2

ARIA Labels

All icon-only buttons need aria-label. Form inputs must have associated <label> elements (not just placeholder). Error messages linked via aria-describedby. Dynamic content updates use aria-live regions.

3

Color Independence

Every color-coded status (success/error/warning) must also include an icon or text label. Run Sim Daltonism or Chrome's color vision deficiency simulator on every new component before shipping.

4

Keyboard Navigation

Tab order must match visual order. Modals trap focus. Dropdowns respond to arrow keys. Data tables are navigable with keyboard. All custom components implement onKeyDown for Enter/Space activation.

5

Motion & Reduce Motion

Wrap all animations in @media (prefers-reduced-motion: no-preference). Provide instant fallbacks for all transitions when reduced motion is active. Never use parallax or auto-playing content.

Tooling Step 4: Recommended Stack

Framework

React 18 + Next.js 14

Styling

CSS Modules or Tailwind with token config

Components

Radix UI primitives for accessible base

Testing

axe-core, Lighthouse CI, jest-axe

Design Tool

Figma with Tokens Studio plugin

Storybook

v7+ with a11y addon for component docs

Guidelines

Do's & Don'ts

Ten critical guidelines illustrated with specific iDistrictSYNC examples.

✓ Do

Use semantic status colors with icons

When showing I-9 expiration status, display a warning amber with a caution icon and text: "Expires in 14 days." Color + icon + text together serve users with color blindness.

✕ Don't

Convey status through color alone

Don't use a red cell background as the only indicator that a document is expired. 8% of users cannot distinguish red from green.

✓ Do

Confirm destructive actions explicitly

Terminate employee, delete a position, or bulk archive records must always trigger a modal with the consequences stated clearly and a typed confirmation or two-step button.

✕ Don't

Use a single click for irreversible actions

Never let a single "Delete" button permanently remove a record without a confirmation step. HR errors have real-world consequences for people's employment.

✓ Do

Include timestamps on all confirmations

After saving or submitting, show: "Benefits updated. Record ID: EMP-0247. Saved March 15, 2026 at 9:41 AM by Jane Doe." This creates an auditable, trustworthy record.

✕ Don't

Show vague success messages

Don't display only "Saved!" without context. Admins process dozens of records; they need to know exactly what was saved and when.

✓ Do

Provide a clear path in empty states

If an employee has no documents on file, show: "No documents found. Upload the first document to begin the I-9 verification process." Include the upload button inline.

✕ Don't

Leave empty states blank or generic

Never display a blank panel or just "No data." This leaves admins uncertain whether it is a bug, a permission issue, or genuinely empty.

✓ Do

Use one primary button per form section

Each card or form section has one verdant primary action. Secondary actions (cancel, download) use ghost or secondary button styles. This creates an unmistakable action hierarchy.

✕ Don't

Stack multiple primary buttons

Don't place two verdant-filled buttons side by side. It signals equal importance and forces the user to read carefully, slowing down high-volume admin work.

✓ Do

Maintain spacing system discipline

Use only spacing tokens (4, 8, 12, 16, 24, 32, 48, 64, 96, 128px). Consistent rhythm across the app makes it feel polished and intentional, not assembled from parts.

✕ Don't

Use arbitrary spacing values

Don't use values like 7px, 11px, or 20px. These create visual inconsistency that users cannot articulate but definitely feel as "something's off."

✓ Do

Persist filter and search state

If an admin filters the employee table by Department: HR and navigates to a record and back, their filters should still be applied. Store filter state in URL params.

✕ Don't

Reset state on navigation

Don't clear search inputs or table filters when users navigate away and return. Forcing admins to re-filter repeatedly erodes their trust and efficiency.

✓ Do

Show error codes in failure states

When a payroll sync fails, display the error code prominently: "Error: SYNC-4021." This allows admins to communicate precisely with IT support without screenshots.

✕ Don't

Show generic error messages

Don't show "Something went wrong. Please try again." without context. This frustrates experienced admins who need to diagnose and report issues accurately.

✓ Do

Use Lato Black for display hierarchy

Reserve Lato 900 weight for page titles, hero stat values, and greeting text. The weight difference from body copy (400) creates clear visual hierarchy within a single type family.

✕ Don't

Mix display weight into UI chrome

Don't use Lato Black (900) for button labels, table cells, or navigation items. Reserve it for display-level headings only — overuse dilutes the hierarchy it creates.