UI Components Library

EL Library Design System components for Hot Nugget

Buttons

Text Buttons

Icon Buttons

Size Tokens

Form Inputs

Select / Dropdown

Currently selected: Draft

Communicate unavailable actions with the muted treatment.

Cards

Study Card
October 2024

This is a sample study card showing how content is displayed.

Active
Another Card
November 2024

Cards can contain any type of content and are flexible in their layout.

Draft

Badges

CompleteIn QANeeds ReviewAction RequiredDraft

EL status chips use a 4px indicator dot, 10px Inter type, and lowercase casing for friendly inline metadata.

Loading Spinners

LoadingSmall
LoadingMedium
LoadingLarge

Avatars

CNJDAB

Dialog / Modal

Toast Notifications

Trigger lightweight feedback without interrupting researchers or participants mid-task.

Toasts auto-dismiss after a few seconds but stay actionable from the activity tray.

Color Palette

Neutrals

neutral-100

—

neutral-95

—

neutral-90

—

neutral-80

—

neutral-65

—

neutral-50

—

neutral-40

—

neutral-0

—

Brand

brand-primary

—

brand-primary-hover

—

brand-primary-active

—

brand-primary-surface

—

brand-primary-border

—

brand-primary-soft

—

brand-secondary

—

brand-secondary-surface

—

brand-secondary-border

—

Destructive & Utility

destructive-default

—

destructive-hover

—

destructive-active

—

destructive-disabled

—

button-surface

—

button-surface-hover

—

button-surface-pressed

—

neutral-border-soft

—

field-border

—

field-border-hover

—

field-border-focus

—

field-border-disabled

—

field-placeholder

—

field-ring

—

Semantic

success

—

success-surface

—

success-border

—

success-overlay

—

warning

—

warning-surface

—

warning-border

—

warning-overlay

—

error

—

error-surface

—

error-border

—

error-overlay

—

info

—

info-surface

—

info-border

—

info-overlay

—

focus-ring

—

focus-ring-error

—