Pattern Gallery
Reusable UI and Interaction patterns. Each card includes live demos, usage guidance, and accessibility notes — click class chips to copy.
Principles
The Zix admin experience is built for operators who manage thousands of users and messages. These principles guide every pattern below.
Clarity for operators
Dense data must remain scannable. Strong hierarchy, explicit labels, and consistent iconography reduce cognitive load during high-stakes tasks.
Efficiency at scale
Bulk actions, inline filters, and expandable rows keep experts in flow. Minimize page loads for repetitive admin work.
Trust through consistency
Teal commits, blue operates, magenta destroys — everywhere. Operators build muscle memory when semantics never shift.
Progressive disclosure
Show summary first; reveal export options, audit rules, and row actions on demand. Never dump full complexity on first paint.
Ship-ready system states
Prototypes are built against requirements, tested, and refined until releasable. Success, error, undo, and failure patterns are system components — not page-specific afterthoughts.
Accessibility by default
Larger interaction targets, increased spacing, and simplified flows are properties of the system — not one-off fixes applied at the end of a sprint.
Getting started
- Start from CSS tokens in
:root— never hard-code sizes or colors. - Copy a pattern, not a full page. Compose filters + table + pagination as needed.
- Click any class chip or swatch in this gallery to copy it to your clipboard.
Color semantics
Map intent to token before picking a button or badge variant.
| Token | Semantic intent | Example usage |
|---|---|---|
--green / .btn-teal | Commit & create | Save, Add User, Add Customer |
--blue / .btn-blue | Operate & process | Export, Filter, Update, Hold, Edit |
--red / .btn-magenta | Destroy (irreversible) | Delete user, Delete message |
--yellow | Highlight & entity tag | Customer badge, admin star |
Foundations
Design tokens derived from an 18px base. All sizes scale proportionally. Start every new screen from tokens — never one-off pixel values.
Color Tokens
Brand and semantic colors used across the admin UI.
When to use
- Apply semantic tokens instead of raw hex
- Use --text-muted for secondary copy
- Use --grey-light for expanded rows
When not to use
- Hard-code hex values
- Use --red for non-destructive warnings
- Use --yellow as large fills
Accessibility
Maintain 4.5:1 contrast for body text on white.
Typography Scale
Font sizes calculated from --font-size-base: 18px.
When to use
- Derive sizes from --font-size-base
- Use --font-size-panel for page headings only
- Use --font-size-md for table headers
When not to use
- Mix arbitrary px outside scale
- Use panel size in table cells
- Skip heading hierarchy levels
Accessibility
calc() sizes respect user font preferences when base changes.
Spacing & Controls
Shared dimensions for inputs, buttons, and table cells.
When to use
- 48px for toolbar inputs and buttons
- 32px .btn-sm in tables
- 42px table cell height everywhere
When not to use
- Shrink rows below 42px
- Mix 1px and 2px borders on controls
- Use inconsistent radii
Accessibility
48px controls meet touch target minimums.
| Token | Value | Usage |
|---|---|---|
--control-height | 48px | Default buttons and inputs |
--control-height-sm | 32px | Table action buttons (.btn-sm) |
--table-cell-height | 42px | Table row and header height |
--radius | 6px | Buttons, inputs, cards |
--control-border-width | 2px | Input and button borders |
Typography & Page Structure
Heading hierarchy and page-level chrome for settings and list views. These patterns establish scan path: page name → panel regions → fields.
Heading Hierarchy
Standard titles used across admin screens.
When to use
- One .section-title per page
- .panel-heading for Filters and Bulk regions
- h3.sub for subsections
When not to use
- Skip heading levels
- Use panel-heading in cells
- Bold body instead of .sub
Accessibility
Preserve h2 → h3 order for screen reader landmarks.
Section Title
Panel Heading
Sub Section
Page Header
Settings pages with title, subtitle, and save actions.
When to use
- Settings pages with Save/Cancel
- Teal Save in .footer-btns
- .subtitle for context
When not to use
- Duplicate titles
- Destructive actions without confirm
- On simple list-only screens
Accessibility
Label Save/Cancel consistently; never icon-only commits.
Appliance System Settings
The web interface is currently configured to use:
Portal Tab Label
Section label above tabbed admin tables.
When to use
- Static label above tabbed tables
- Place above .tabs or toolbar
When not to use
- Use as clickable tab
- Use for breadcrumbs
- Stack multiple vertically
Accessibility
Label should match active tab context.
Buttons
Primary actions use teal; table and bulk actions use blue; destructive actions use magenta. Color encodes commitment level — not decoration.
Solid Buttons
Primary, secondary, and destructive CTAs at default height.
When to use
- Teal: Save, Add User, Add Customer
- Blue: Export, Filter, Update
- Magenta: irreversible Delete only
When not to use
- Teal in-table row actions
- Magenta for undoable remove
- Blue alone on destructive confirm
Accessibility
Never rely on color alone — use DELETE label.
Teal commit, blue row ops, magenta delete.
Teal in-table or blue for destructive.
Outline Buttons
Secondary actions and disabled states.
When to use
- Cancel and non-commit paths
- Grey DELETE when nothing selected
- Outline-teal for secondary add
When not to use
- Outline Cancel as teal solid
- Outline for primary filter
- Enabled DELETE with no selection
Accessibility
Outline buttons inherit focus ring from input focus token.
Table & Toolbar Sizes
Small in-row actions vs. toolbar action buttons.
When to use
- .btn-sm for EDIT/MANAGE in rows
- .btn-action for toolbar CTAs
- .footer-btns for page saves
When not to use
- .btn-action in table cells
- Mixed heights in one toolbar
- footer-btns mid-page
Accessibility
32px row buttons are OK in dense tables, not for sole primary CTA.
Form Controls
Inputs, selection controls, and inline field layouts for filters, settings, and bulk action panels across the admin portal.
Text Inputs & Selects
Standard stacked fields at 48px control height.
When to use
- Stack .field-label above input
- Constrain width with utilities
- .textarea-multiline for comments
When not to use
- Labels inside inputs only
- Native unstyled inputs
- Unlabeled inputs in production
Accessibility
Associate every input with a label via for/id.
Radio & Checkbox Groups
Inline label groups for bulk action scope and settings.
When to use
- Bulk scope: Selected vs Entire set
- .check-group for boolean settings
- Inline radios when options are short
When not to use
- Radios for on/off — use switch
- More than 5 radios without select
- Duplicate name attributes
Accessibility
Use fieldset/legend for radio groups in apps.
Apply Actions to
Inline Input + Button
Save search and add-email patterns.
When to use
- .inline-input-btn for Save Search
- .row-flex for add-email
- Align button to input baseline
When not to use
- Separate row when inline fits
- More than two controls without wrap
- Unlabeled inline fields
Accessibility
Tab order: input then button, left to right.
Toggles & Tabs
Switch controls, toggle rows, and tab navigation for binary settings and sibling views at the same hierarchy level.
Switch Toggle
Blue when active; used in tables and settings.
When to use
- Boolean permissions in admin tables
- Enable/disable in audit rows
- Blue when active
When not to use
- Switches for mutually exclusive options
- Switches for confirmed actions
- Switches without column header
Accessibility
Associate switch with visible label text.
Toggle Row & Inline
Label + status + switch layouts.
When to use
- Settings feature flags with status
- .toggle-inline in audit bulk
- Show Enabled/Not Enabled text
When not to use
- toggle-row for table permission grid
- Hide status text
- Destructive enable without confirm
Accessibility
Update status text when switch changes.
Tabs
Section navigation with active underline.
When to use
- 2–4 sibling views at same level
- Blue underline on active
- Short scannable labels
When not to use
- Tabs for one view
- Tabs for wizard steps
- Nested tabs
Accessibility
Use role=tablist, aria-selected, arrow keys.
Static reference:
2–4 sibling views at the same level.
Single tab or wizard steps as tabs.
Badges, Icons & Status
Entity badges, service indicators, severity levels, and links — used in partner portal, user management, and audit reports.
Entity Badges
Customer type labels in partner portal tables.
When to use
- Partner portal entity type in cells
- One badge type per entity
- Uppercase badge text
When not to use
- Badges for transient status
- Multiple badges per cell
- Yellow badge as only type indicator
Accessibility
Include text label, not color alone.
Key Legend & Service Icons
User management table legend and cell indicators.
When to use
- Above complex service matrix tables
- All icons documented
- Grey .key-legend background
When not to use
- Legend on every simple table
- New icons without legend update
- Dots without legend nearby
Accessibility
Mirror legend labels in cell aria-labels.
Severity & Links
Audit report severity columns and action links.
When to use
- Audit severity columns
- .link for progressive disclosure
- Distinct warn/high/low icons
When not to use
- Severity colors decoratively
- Links as buttons
- High severity for info
Accessibility
Icons need alt text; links need descriptive text.
Feedback & System States
Edge cases and failure states are first-class system components. Every settings save, bulk action, and filter submission should account for success confirmation, recoverable mistakes, clear errors, and empty results — with accessibility baked into the tokens below.
Success Banner
Page-level confirmation after a save or configuration change.
When to use
- After successful Save on settings pages
- One banner per page — dismiss or auto-clear
- Plain-language outcome, not error codes
When not to use
- Inline field validation (use field errors)
- Transient copy-to-clipboard (use toast)
- Warning-level partial success
Accessibility
Use role=status or aria-live=polite; include text label, not color alone.
Error States
Page-level failure banner and inline field validation.
When to use
- Banner for request or server failures
- .field-error on invalid inputs
- Specific recovery guidance in copy
When not to use
- Red banner for warnings
- Icon-only error indicators
- Generic “Something went wrong” without next step
Accessibility
Associate .field-error-msg with input via aria-describedby; use aria-invalid on fields.
Enter a valid email address.
Undo Action
Recoverable destructive or bulk changes with a time-limited undo affordance.
When to use
- After delete, remove, or bulk update
- Describe what changed in plain language
- UNDO as text button — not icon-only
When not to use
- Irreversible deletes (use confirm modal)
- Magenta DELETE for undoable actions
- Undo without stating the affected item count
Accessibility
aria-live=polite on bar; undo action reachable by keyboard before timeout.
Undo bar for recoverable bulk delete.
Magenta DELETE without confirm for irreversible actions.
Empty & Failure Edge Cases
Zero-result tables and policy failure notifications — designed as reusable states.
When to use
- Empty tables after filter with guidance
- Warning banner for partial failures
- Failure notification toggles in settings cards
When not to use
- Blank white space with no explanation
- Empty state without a next action
- Hide failure paths behind advanced settings only
Accessibility
Empty states need heading + description; failure checkboxes need visible labels.
Accessibility Tokens
Touch targets, spacing, and simplified control heights applied system-wide.
When to use
- 48px default controls in toolbars and forms
- 32px .btn-sm only inside dense tables
- 42px minimum row height for scanability
When not to use
- Shrink primary CTAs below 48px
- 32px buttons as sole page-level actions
- Compress table rows for decorative density
Accessibility
Targets meet 44×44px minimum; spacing tokens reduce mis-taps; simplified flows limit steps per task.
Default control · 48px
Toolbar inputs, Save/Cancel, FILTER — primary interaction target.
Table action · 32px
In-row EDIT/DELETE only — not for sole page commits.
Table row · 42px
Minimum cell height for readable spacing and tap accuracy.
Pagination
Item count, page controls, and per-page selector. Always duplicate top/bottom on long lists; info text stays right-aligned with controls.
Standalone Pagination Bar
Above or below tables without action buttons.
When to use
- Top and bottom on long lists
- Info right-aligned with controls
- Show filtered counts
When not to use
- Info isolated on far left
- No pagination over 25 items
- Missing per-page selector
Accessibility
aria-current on active page; label prev/next.
Info text right-aligned with page controls.
Info text isolated on the far left.
Table Toolbar
Action buttons left; pagination group right.
When to use
- ADD left, pagination right
- .list-section-toolbar for ADD+DELETE
- Same row at desktop width
When not to use
- Pagination stacked below on wide screens
- DELETE enabled with no selection
- Unrelated actions ungrouped
Accessibility
Disabled DELETE needs aria-disabled.
ADD left, pagination right on one row.
Pagination stacked above buttons.
Data Tables
Sortable headers, zebra striping, checkboxes, and in-table controls — the core data density patterns for admin operators.
Basic Data Table
Sortable columns, link cells, auto zebra striping.
When to use
- Sort icons on sortable columns
- Links for drill-down cells
- Zebra striping for density
When not to use
- Checkbox without bulk actions
- 8+ columns without scroll
- Remove row hover
Accessibility
th scope=col; announce sort direction in apps.
| SUBJECT | TO | FROM | DATE |
|---|---|---|---|
| Sample message subject line | admin@example.com | user@example.com | Dec 30, 2021 12:43 PM |
| Another archived message | admin@example.com | sender@example.com | Dec 30, 2021 11:38 AM |
| Third row example | ops@example.com | user@example.com | Dec 29, 2021 4:15 PM |
Checkbox & Actions Column
Selectable rows with in-table action buttons.
When to use
- When bulk actions apply
- Checkbox column first
- .col-actions for row EDIT
When not to use
- Checkboxes without bulk panel
- Checkboxes for single-select
- DELETE with zero selected
Accessibility
Header checkbox selects visible rows.
| DISPLAY NAME | ACTIONS | ||
|---|---|---|---|
| Jane Smith | jane@example.com | ||
| John Doe | john@example.com |
In-Table Switches
Portal administrator permission toggles.
When to use
- Per-row boolean permissions
- Center in .svc-toggle
- Header describes switch meaning
When not to use
- Switches for tri-state values
- Mixed column types
- Permissions without page save
Accessibility
Each switch needs accessible name from header.
| USER | EXPIRE MESSAGES | MANAGE ADMINS | |
|---|---|---|---|
| Name 001 | |||
| Name 002 |
Expanded Table Content
Inline expansion beneath table rows for actions, audit detail, and domain settings without navigating away from the list.
Expanded Inner Row
Status change controls with comment and update.
When to use
- Archive message inline update
- Status + change options + UPDATE
- One expanded row at a time
When not to use
- All rows expanded on load
- UPDATE off-screen on mobile
- Static read-only detail
Accessibility
Toggle keyboard accessible; use aria-controls.
| SUBJECT | ACTIONS |
|---|---|
| Message with expanded actions | |
One expanded row, toggled by operator.
All rows expanded on load.
Expanded Panel & Domain Row
Action button panel and inline domain settings.
When to use
- MANAGE, GUEST ADMIN actions
- .expanded-domain for inline edit
- Grey background distinction
When not to use
- Full forms inside panel
- Primary navigation
- Panel without user toggle
Accessibility
Buttons need clear labels; follows row in tab order.
Audit Meta & Rule Grid
Expanded audit details for mailbox rule reports.
When to use
- Mailbox audit drill-down
- meta row + rule grid
- SHOW/HIDE INFO toggle
When not to use
- Grid without expand action
- 5 columns on mobile without scroll
- Mix with archive status pattern
Accessibility
Rule checkboxes need labels; grid scrolls on small screens.
| SEVERITY | ACTIONS | |
|---|---|---|
| user@example.com | ||
Composite Layouts
Multi-region page patterns combining filters, bulk actions, and tables — use when a screen has more than one concern at page level.
List Section
Subheading, description, toolbar, table, and bottom pagination.
When to use
- Category filters, allowed addresses
- Description + toolbar + table + pagination
- DELETE disabled until checked
When not to use
- No bottom pagination
- Read-only reports
- Save inside list-section
Accessibility
Description before controls; label checkboxes with row context.
Category Filters
Select categories to filter encrypted messages.
| CATEGORY | |
|---|---|
| Adult Content | |
| Gambling |
DELETE disabled until a row is checked.
Enabled DELETE with zero selection.
Filters + Bulk (50/50 Grid)
Two-column filters and bulk actions layout.
When to use
- 50/50 filters and bulk
- Apply Actions to radios always
- Delete with .action-pair
When not to use
- Filters-only pages
- Bulk scope below fold
- Unlabeled bulk rows
Accessibility
Filters column before bulk in tab order.
Filters
Bulk Actions
Apply Actions to
Filters + Bulk (Wide Flex)
25% filters column with grouped bulk actions.
When to use
- User Management layout
- Grouped .bulk-groups
- Accordion for export options
When not to use
- Wide layout for one filter field
- Delete before scope radios
- Hidden export options without accordion
Accessibility
Accordion toggles aria-expanded.
Filters
Bulk Actions
Apply Actions to
Export
25% filters + labeled bulk groups.
Delete before scope selection.
Filters + Bulk (Impersonation)
25%/50% grid with settings card below table area.
When to use
- 25%/50% impersonation grid
- Settings card below table
- Collapsible advanced policy
When not to use
- Settings in toolbar
- Tag field without checkbox gate
- Single-field filter pages
Accessibility
Settings header toggles aria-expanded.
Filters
Bulk Actions
Apply Actions to
Test Failure Action
Notifications
Collapsible settings card for policy.
Always-visible settings above table.
Results Summary + Bulk Actions
Archive search results with export, hold, and update rows.
When to use
- Archive search summary + bulk
- Inline export/hold/update rows
- Criteria in left column
When not to use
- No bulk operations
- Duplicate summary in title
- Vertical bulk on desktop
Accessibility
Summary uses semantic ul; labels precede controls.
Results Summary
100 messages where all criteria match:
- Dates include Dec 03, 2023
- Media Types include Email
Bulk Actions
Apply Actions to
Export
Litigation Hold
Update
Inline Filters Row
Horizontal filter fields with FILTER button.
When to use
- 3–5 horizontal filters
- FILTER button for server round-trip
- Info icons for help
When not to use
- 8+ fields inline
- Auto-submit every keystroke
- Missing Filter button
Accessibility
Info icons need aria-label in production.
Filters
Form Block with List Rows
Notifications section with removable email list.
When to use
- Notifications email lists
- .list-row per entry
- ADD EMAIL inline
When not to use
- Table data management
- Delete without confirm on sensitive lists
- Save inside form-block
Accessibility
Delete buttons need email in aria-label.