BrassHelm Design System

Internal Styles & Components Library

World's First AI-Native Design System

Where every component is not just documentation, but a training prompt for future AI agents.

Welcome to the Design System

This page contains all button styles and components used across BrassHelm internal systems. Each example includes a live preview, usage notes, and a "Copy Code" button that provides everything Claude needs to implement the button (HTML, CSS, JavaScript, and context).

How to use: Click any "Copy Code" button to get a complete package with: HTML structure, CSS styles (including hover/active states), SVG icons, JavaScript functionality, and usage notes. Paste into Claude to implement immediately.

Icon-Only Navigation Buttons

Square glassmorphism buttons with SVG icons. Used in top navigation for actions like logout, settings, schema view. Features entrance animations, shimmer hover effect, and custom tooltips.

Icon-Only Nav Button

42×42px glassmorphism button with SVG icon, shimmer effect, and tooltip.

Use for: Top navigation actions, icon-only controls

States: Default, hover (shimmer + lift), active

Classes: .schema-btn or .logout-btn
/* CSS */ .schema-btn, .logout-btn { position: relative; width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; cursor: pointer; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; color: white; } .schema-btn::before, .logout-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transform: translateX(-100%) rotate(45deg); transition: transform 0.6s ease; } .schema-btn:hover, .logout-btn:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.4); transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 0 20px rgba(255,255,255,0.2); } .schema-btn:hover::before, .logout-btn:hover::before { transform: translateX(100%) rotate(45deg); } .schema-btn:active, .logout-btn:active { transform: translateY(0) scale(0.98); } .schema-btn svg, .logout-btn svg { width: 20px; height: 20px; position: relative; z-index: 1; pointer-events: none; } // JavaScript (for tooltip - optional) function showIconTooltip(event, text) { // Your tooltip implementation } function hideIconTooltip() { // Your tooltip implementation } /* Usage Notes */ - Use on gradient backgrounds (admin header, tracker header) - Always include meaningful tooltip text - SVG icons should be 20×20px, stroke weight 2 - Can use as

Logout Button (Icon-Only)

Same style as nav button, specifically for logout action with log-out icon.

Use for: Logout action in top navigation

Classes: .logout-btn
/* CSS - Same as .schema-btn (see above) */ /* Usage Notes */ - Always use the log-out SVG icon shown above - Place at far right of top navigation - Tooltip should say "Logout" - Call logout() function on click

Primary Action Buttons (With Text)

Gradient purple buttons for primary actions. Used for "Add Lead", "Save User", form submissions.

Primary Button

Purple gradient button with text. Main call-to-action style.

Use for: Primary actions, form submissions, add/create operations

States: Default, hover (lift + shadow), active, disabled

Classes: .btn .btn-primary
/* CSS */ .btn { padding: 12px 24px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .btn-primary:active { transform: translateY(0) scale(0.98); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Usage Notes */ - Use for primary actions (save, submit, create) - Text should be action-oriented (verb) - Avoid multiple primary buttons on same page - Can add icons before text (e.g., "+ Add Lead")

Small Primary Button

Compact version of primary button for tight spaces or secondary prominence.

Use for: Table actions, inline operations, compact layouts

Classes: .btn .btn-primary .btn-sm
/* CSS */ .btn-sm { padding: 6px 12px; font-size: 13px; } /* Plus all .btn and .btn-primary styles from above */ /* Usage Notes */ - Use when space is limited - Same prominence as regular primary button - Common in table rows, inline forms

Secondary Buttons

White/outlined buttons for secondary actions. Used for "Cancel", "Clear", alternative actions.

Secondary Button

White background with purple border. For secondary/cancel actions.

Use for: Cancel, clear, alternative actions

Classes: .btn .btn-secondary
/* CSS */ .btn-secondary { background: white; color: #667eea; border: 2px solid #667eea; } .btn-secondary:hover { background: #f8f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); } .btn-secondary:active { transform: translateY(0) scale(0.98); } /* Plus base .btn styles */ /* Usage Notes */ - Use for cancel, clear, close actions - Pair with primary button in modal footers - Less prominent than primary

Purple Outlined Button

Similar to secondary but with purple (#764ba2) accent.

Use for: Alternative actions with purple theme

Classes: .btn .btn-purple
/* CSS */ .btn-purple { background: white; color: #764ba2; border: 2px solid #764ba2; } .btn-purple:hover { background: #f9f5ff; } /* Usage Notes */ - Use when you need multiple secondary actions - Differentiates from standard secondary button

Mini Square Buttons (No Text)

Small 32×32px square buttons with only icons. Compact version for tight spaces.

Mini Square Primary Button

32×32px purple gradient square button, icon only.

Use for: Compact primary actions in tight spaces

Custom 32×32px, inline styles
/* CSS */ .mini-square-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .mini-square-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .mini-square-primary:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); } .mini-square-btn svg { width: 16px; height: 16px; stroke: currentColor; } /* Usage Notes */ - Use when space is very limited - Icon only, no text - 32×32px square - Smaller than regular compact buttons (48×48px)

Mini Square Secondary Button

32×32px white button with purple border, icon only.

Use for: Compact secondary actions

Custom 32×32px, inline styles
/* CSS */ .mini-square-secondary { background: white; color: #667eea; border: 2px solid #667eea; } .mini-square-secondary:hover { background: #f8f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } /* Plus .mini-square-btn base styles */ /* Usage Notes */ - Less prominent than primary - Use for alternative/secondary compact actions - Icon only, no text

Mini Square Danger Button

32×32px red button, icon only. For compact delete actions.

Use for: Compact delete/remove actions

Custom 32×32px, inline styles
/* CSS */ .mini-square-danger { background: #ef4444; color: white; } .mini-square-danger:hover { background: #dc2626; transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); } /* Plus .mini-square-btn base styles */ /* Usage Notes */ - Use for compact delete/remove actions - Always confirm before destructive action - Icon only, no text

Additional Button Sizes

Small Secondary Button

Compact white button with purple border and text.

Use for: Secondary actions in compact spaces

Classes: .btn .btn-secondary .btn-sm
/* CSS */ .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-secondary { background: white; color: #667eea; border: 2px solid #667eea; } .btn-secondary:hover { background: #f8f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); } .btn-secondary:active { transform: translateY(0) scale(0.98); } /* Plus base .btn styles */ /* Usage Notes */ - Compact version of secondary button - Use in tight spaces, inline with other small elements - Common in table rows, compact forms

Danger/Delete Buttons

Red buttons for destructive actions. Used for delete, remove, reject operations.

Danger Button

Red button for destructive actions.

Use for: Delete, remove, reject, destructive operations

Classes: .btn .btn-danger
/* CSS */ .btn-danger { background: #ef4444; color: white; border: none; } .btn-danger:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); } .btn-danger:active { transform: translateY(0) scale(0.98); } /* Usage Notes */ - Always confirm before destructive actions - Use clear, direct text ("Delete User", not "Remove") - Consider requiring typed confirmation for critical deletes

Small Danger Button

Compact red button for inline delete actions.

Use for: Table row actions, compact delete buttons

Classes: .btn .btn-danger .btn-sm
/* CSS - Combines .btn-danger and .btn-sm */ /* Usage Notes */ - Common in user tables, admin lists - Still requires confirmation

Compact Action Buttons

48×48px square icon buttons for toolbars. Includes disabled states and conditional activation (e.g., only active when items selected).

Trash Button (Compact, Conditional)

48×48px square red button. Disabled (gray) until items selected.

Use for: Bulk delete operations in data tables

States: Disabled (default), Active (when items selected)

Classes: .trash-btn-compact, .trash-btn-compact.active
Disabled (no selection)

Check the box above to simulate selecting items in a table

/* CSS */ .trash-btn-compact { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; border-radius: 8px; cursor: not-allowed; transition: background 0.2s ease, transform 0.1s ease; background: #CED4DA; /* Disabled gray */ position: relative; } .trash-btn-compact svg { width: 20px; height: 20px; fill: #fff; } .trash-btn-compact.active { background: #f44336; /* Red when active */ cursor: pointer; } .trash-btn-compact.active:hover { background: #d32f2f; transform: scale(1.05); } .trash-btn-compact.active:active { background: #b71c1c; transform: scale(0.97); } // JavaScript - Toggle active when items selected const selectedCount = getSelectedItemsCount(); const trashBtn = document.getElementById('trashBtnCompact'); if (selectedCount > 0) { trashBtn.classList.add('active'); } else { trashBtn.classList.remove('active'); } /* Usage Notes */ - Starts disabled (gray) - can't click - Becomes active (red) when items selected - Always show confirmation dialog on click - Use in toolbars near data tables

Status Change Button (Compact, Conditional)

48×48px square purple button. Disabled until items selected.

Use for: Bulk status change operations

Classes: .status-btn-compact, .status-btn-compact.active
Disabled Active
/* CSS */ .status-btn-compact { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: none; border-radius: 8px; cursor: not-allowed; transition: background 0.2s ease, transform 0.1s ease; background: #CED4DA; position: relative; } .status-btn-compact svg { width: 20px; height: 20px; stroke: #fff; } .status-btn-compact.active { background: #667eea; /* Purple when active */ cursor: pointer; } .status-btn-compact.active:hover { background: #5568d3; transform: scale(1.05); } .status-btn-compact.active:active { background: #4451b8; transform: scale(0.97); } /* Usage Notes */ - Same pattern as trash button - Use for bulk status updates - Opens modal to select new status

Action Button (Compact, Always Active)

48×48px square button with purple border. Always clickable.

Use for: Refresh, export, filter toggle, always-available actions

Classes: .action-btn-compact
/* CSS */ .action-btn-compact { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid #667eea; border-radius: 8px; background: white; cursor: pointer; transition: all 0.2s ease; position: relative; } .action-btn-compact svg { width: 20px; height: 20px; stroke: #667eea; } .action-btn-compact:hover { background: #f8f9ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .action-btn-compact:active { transform: translateY(0); } /* Usage Notes */ - Always active/clickable (no disabled state needed) - Use for refresh, export, filter, search actions - Group with trash/status buttons in toolbars - Common actions: refresh, export CSV, filter toggle

Special Purpose Buttons

Review Button (Yellow)

Yellow button for review actions - stands out for attention-needed items.

Use for: Review workflows, pending approvals, items needing attention

Classes: .review-btn
/* CSS */ .review-btn { display: inline-flex; align-items: center; padding: 8px 16px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .review-btn:hover { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); } .review-btn:active { transform: translateY(0) scale(0.98); } /* Usage Notes */ - Use for review/approval workflows - Yellow indicates "needs attention" or "pending review" - Stands out visually to draw user attention - Don't overuse - reserve for items requiring review action

Results Button (Green)

Green button for viewing results and analytics - positive action indicator.

Use for: View results, show analytics, display reports, success metrics

Classes: .results-btn
/* CSS */ .results-btn { display: inline-flex; align-items: center; padding: 8px 16px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .results-btn:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); } .results-btn:active { transform: translateY(0) scale(0.98); } /* Usage Notes */ - Use for viewing results, analytics, or reports - Green indicates positive action or success - Stands out for important result viewing actions - Works well for campaign results, test results, performance metrics

iOS-Style Toggle Switch

Smooth animated toggle switch for enable/disable states.

Use for: Feature toggles, on/off switches, boolean settings

Classes: .ios-toggle (wrapper), .ios-toggle-slider
Enable Feature Enabled
/* CSS */ .ios-toggle { position: relative; display: inline-block; width: 50px; height: 28px; } .ios-toggle input { opacity: 0; width: 0; height: 0; } .ios-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; transition: 0.3s; border-radius: 28px; } .ios-toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .ios-toggle input:checked + .ios-toggle-slider { background-color: #667eea; } .ios-toggle input:checked + .ios-toggle-slider:before { transform: translateX(22px); } .ios-toggle:hover .ios-toggle-slider { background-color: #a0aec0; } .ios-toggle input:checked:hover + .ios-toggle-slider { background-color: #764ba2; } /* Usage Notes */ - Use for binary on/off settings - Gray = off, purple = on - Always label what the toggle controls - Common in settings, user permissions, feature flags

Modal Buttons

Buttons specifically styled for modal dialogs (footers, close buttons, tabs).

Modal Close Button (×)

White × button in modal header. Positioned absolutely in top right.

Use for: Closing modals

Classes: .close-btn (in modal header)

Modal Footer Buttons

Cancel (secondary) + Save (primary) button pair in modal footer.

Use for: Modal form submissions

Standard .btn classes in .modal-footer

Modal Tab Buttons

Tab navigation buttons for multi-tab modals.

Use for: Tabbed content in modals (e.g., Details/Notes/Activity)

Classes: .detail-tab, .detail-tab.active

Table Row Action Buttons

Small inline buttons used in table rows for edit/delete/approve/reject actions.

Edit Button (Table Row)

Green gradient button for editing table rows.

Use for: Edit actions in user tables, data tables

Custom inline styles (see code)
/* CSS (inline or add to stylesheet) */ .edit-btn { padding: 8px 16px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .edit-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .edit-btn:active { transform: translateY(0) scale(0.98); } /* Usage Notes */ - Use in table action columns - Opens edit modal/form - Green indicates positive/safe action

Delete Button (Table Row)

Red gradient button for deleting table rows.

Use for: Delete actions in user tables, data tables

Custom inline styles (see code)
/* CSS (inline or add to stylesheet) */ .delete-btn { padding: 8px 16px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .delete-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); } .delete-btn:active { transform: translateY(0) scale(0.98); } /* Usage Notes */ - Use in table action columns - Always confirm before deleting - Pair with edit button in action column

Approve/Reject Button Pair

Green approve + Red reject buttons for review workflows.

Use for: Approval workflows, request management

Custom inline styles (see code)
/* CSS */ .action-buttons { display: flex; gap: 8px; } /* Approve button styles */ .edit-btn.approve-btn { background: #d4edda; color: #155724; transition: all 0.2s; } .edit-btn.approve-btn:hover { background: #c3e6cb; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(21, 87, 36, 0.3); } .edit-btn.approve-btn:active { transform: translateY(0) scale(0.98); } /* Reject button - uses .delete-btn styles (see above) */ /* Usage Notes */ - Use in approval/request management tables - Green (approve) on left, red (reject) on right - Both should show confirmation dialogs - Common in user deletion requests, content moderation

Toast Notifications

Toast notifications appear in the top-right corner to provide user feedback. Auto-dismiss after 4 seconds with progress bar. Hover over any toast to pause the timer, move away to resume.

Success Toast

Green border-left, checkmark icon. For successful operations.

Use for: Save confirmations, successful deletions, data refreshes

showToast('message', 'success')
Success
Lead updated successfully!
// JavaScript function showToast(message, type = 'success', duration = 4000) { const container = document.getElementById('toastContainer'); const toast = document.createElement('div'); toast.className = `toast ${type}`; toast.innerHTML = `
${TOAST_ICONS[type]}
${TOAST_TITLES[type]}
${message}
`; container.appendChild(toast); // Hover-to-pause functionality let timeoutId; let startTime = Date.now(); let remainingTime = duration; const progressBar = toast.querySelector('.toast-progress'); // Initial auto-dismiss timeout timeoutId = setTimeout(() => { toast.classList.add('hiding'); setTimeout(() => toast.remove(), 300); }, duration); // Pause on hover toast.addEventListener('mouseenter', () => { clearTimeout(timeoutId); remainingTime -= (Date.now() - startTime); if (progressBar) { progressBar.style.animationPlayState = 'paused'; } }); // Resume on mouse leave toast.addEventListener('mouseleave', () => { startTime = Date.now(); timeoutId = setTimeout(() => { toast.classList.add('hiding'); setTimeout(() => toast.remove(), 300); }, remainingTime); if (progressBar) { progressBar.style.animationPlayState = 'running'; } }); } // Usage showToast('Lead updated successfully!', 'success'); /* See full CSS in toasts.css */ /* See TOAST_ICONS and TOAST_TITLES in config.js */ /* Hover over toast to pause auto-dismiss, move away to resume */

Error Toast

Red border-left, X-circle icon. For errors and failures.

Use for: API errors, validation failures, operation errors

showToast('message', 'error')
Error
Failed to save changes
// Usage showToast('Failed to save changes', 'error'); /* Same showToast() function as above */ /* Type: 'error' changes border color to red (#ef4444) */ /* Hover over toast to pause auto-dismiss, move away to resume */

Warning Toast

Orange border-left, triangle icon. For warnings and cautions.

Use for: Validation warnings, non-critical issues, user notifications

showToast('message', 'warning')
Warning
Please fill in all required fields
// Usage showToast('Please fill in all required fields', 'warning'); /* Same showToast() function as above */ /* Type: 'warning' changes border color to orange (#f59e0b) */ /* Hover over toast to pause auto-dismiss, move away to resume */

Info Toast

Blue border-left, info icon. For informational messages.

Use for: General info, tips, status updates, loading states

showToast('message', 'info')
Info
Data refreshed successfully
// Usage showToast('Data refreshed successfully', 'info'); /* Same showToast() function as above */ /* Type: 'info' changes border color to blue (#3b82f6) */ /* Hover over toast to pause auto-dismiss, move away to resume */

Loading Toast (Persistent)

Info toast with spinning loader icon. Manually removed when operation completes.

Use for: Long-running operations, bulk actions, waiting states

Manual creation + removal
Info
Deleting 5 leads...
// Create loading toast (persistent, no auto-dismiss) const container = document.getElementById('toastContainer'); const loadingToast = document.createElement('div'); loadingToast.className = 'toast info'; loadingToast.innerHTML = `
Info
Processing...
`; container.appendChild(loadingToast); // Later: Remove when operation completes loadingToast.remove(); /* Loading toasts do NOT auto-dismiss */ /* Must be manually removed when operation completes */ /* Use for bulk operations, API calls, etc. */

Modal Components

Modal dialog boxes used for forms, confirmations, and detailed views. All modals use backdrop blur, smooth entrance animations, and responsive layouts.

Basic Modal Structure

Standard modal with header, body, and footer. Purple gradient header with close button.

Use for: General purpose dialogs, forms, content display

Features: Backdrop click-to-close, ESC key support, smooth animations

Classes: .modal, .modal-content, .modal-header, .modal-body, .modal-footer

Modal Title

Modal body content goes here. This can contain forms, text, tables, or any other content.

Form Modal

Modal containing a form with input fields, labels, and validation.

Use for: Create/edit operations, user input collection

Features: Form validation, required fields, proper labels

Includes form elements with .form-group styling

Add New Lead

Delete Confirmation Modal

Destructive action modal with warning box and typed confirmation.

Use for: Delete operations, irreversible actions

Features: Warning banner, typed "DELETE" confirmation, disabled submit until confirmed

Requires user to type confirmation word

Confirm Deletion

⚠️
Warning
This action cannot be undone.

Tabbed Modal (Multi-Section)

Large modal with tab navigation for organizing complex content.

Use for: Lead details, user profiles, multi-section views

Features: Tab switching, independent content sections, scrollable body

Tabs: .detail-tab, Panels: .tab-panel

Lead Details

Name
John Doe
Phone
(555) 123-4567
Status
New Lead

Dropdown Components

Custom dropdown selectors used for template and expiration selection. Implemented as mini modals for reliability and consistent UX across all viewport sizes.

Mini Modal Selector

Centered modal overlay for selecting from a list of options. Replaces fixed-position dropdowns for better reliability.

Use for: Template selection, expiration selection, any list-based choices

Features: Scrollable content, smooth animations, works at any scroll position

Classes: .mini-modal, .mini-modal-content, .mini-modal-header, .mini-modal-body

Select Template

Standard Agreement
General purpose agreement template
NDA Template
Non-disclosure agreement
Service Agreement
Professional services contract

Select Template

/* CSS */ .mini-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); z-index: 3000; justify-content: center; align-items: center; transition: background 0.3s ease; } .mini-modal.show { display: flex; background: rgba(0,0,0,0.4); } .mini-modal-content { background: white; border-radius: 12px; width: 90%; max-width: 400px; max-height: 80vh; box-shadow: 0 10px 40px rgba(0,0,0,0.3); transform: scale(0.9); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; } .mini-modal.show .mini-modal-content { transform: scale(1); opacity: 1; } // JavaScript function openMiniModal() { const modal = document.getElementById('templateMiniModal'); modal.style.display = 'flex'; requestAnimationFrame(() => { modal.classList.add('show'); }); } function closeMiniModal() { const modal = document.getElementById('templateMiniModal'); modal.classList.remove('show'); setTimeout(() => { if (!modal.classList.contains('show')) { modal.style.display = 'none'; } }, 300); } /* Advantages over fixed-position dropdowns */ - Works at any scroll position - No complex positioning calculations - Consistent across viewport sizes - Better mobile experience - Natural focus trap for accessibility

Animations

Consistent animation patterns used throughout the dashboard. All animations use 300ms timing with cubic-bezier easing for smooth, professional motion.

Modal Entry Animation

Smooth fade-in with scale effect for all modal dialogs. Creates a polished, professional feel.

Technical Details:

  • Duration: 300ms
  • Easing: cubic-bezier(0.4, 0, 0.2, 1)
  • Transform: scale(0.9) → scale(1)
  • Opacity: 0 → 1
  • Background: rgba(0,0,0,0) → rgba(0,0,0,0.5)
Uses requestAnimationFrame for reliable triggering

Click to see the smooth modal entrance

Button Hover & Active States

Smooth transitions for interactive elements with proper visual feedback.

Features: Transform scale, opacity changes, background shifts

200ms for micro-interactions, 300ms for larger state changes
/* CSS */ .btn { transition: all 0.2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } .btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); } /* For critical actions */ .btn-danger:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); }

Skeleton Loading Pulse

Animated placeholder for loading states. Provides visual feedback during data fetches.

Use for: Table rows, cards, forms loading

Infinite animation with 2s duration
/* CSS */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: shimmer 2s infinite; border-radius: 8px; } /* Usage Examples */ .skeleton-row { height: 40px; margin-bottom: 8px; } .skeleton-text { height: 20px; width: 70%; } .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }

Toast Notification Animation

Slide-in from right with fade for notification toasts. Auto-dismisses after timeout.

Features: Smooth entrance/exit, stacking support, responsive

300ms slide-in, 3000ms display, 300ms fade-out
/* CSS */ .toast { position: fixed; top: 20px; right: -400px; min-width: 300px; padding: 16px 20px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 12px; z-index: 10000; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; opacity: 0; } .toast.show { right: 20px; opacity: 1; } // JavaScript function showToast(message, type) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }

Animation Best Practices

  • Performance: Use transform and opacity for GPU acceleration
  • Timing: 200ms for micro-interactions, 300ms for modals and significant changes
  • Easing: cubic-bezier(0.4, 0, 0.2, 1) for natural deceleration
  • Accessibility: Consider adding prefers-reduced-motion media queries
  • Consistency: Use the same timing and easing across similar interactions
  • Purpose: Animations should provide feedback, not just decoration

Accessibility Consideration

For users who prefer reduced motion, consider adding this CSS:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Video/Audio Recorder

Professional video/audio recorder with camera selection, countdown, live preview, secure badge, and playback. Used in company signing modal for verification recordings.

Ready to Record

Features

  • Camera Selection: Automatically detects multiple cameras and shows dropdown selector
  • Countdown: 3-2-1 countdown with audio beeps before recording starts
  • Live Preview: Real-time video preview with statement overlay
  • Audio Waveform: Animated frequency visualization for audio-only mode
  • Secure Badge: 256-bit encryption badge overlay during recording
  • Playback: Review recording before submission
  • Delete & Re-record: Easy restart without page refresh

States

  • Ready: Gray dot, "Ready to Record" status
  • Permission Request: Purple gradient overlay with spinner
  • Countdown: 3-2-1 countdown with beeps
  • Recording: Red pulsing dot, timer, live preview, secure badge
  • Playback: Green border, playback controls, secure badge

Implementation Notes

  • Requires MediaRecorder API support (all modern browsers)
  • Uses getUserMedia() for camera/microphone access
  • WebM format for recordings (VP9 video codec, 500kbps video, 64kbps audio)
  • Camera selection persists via localStorage
  • Audio visualization uses Web Audio API with frequency analysis
  • Countdown beeps use AudioContext oscillator (330Hz for countdown, 523Hz for start)

BrassHelm Page Header

Purple gradient sticky header used on sign page. Includes logo and title. Stays at top on scroll.

BrassHelm

BrassHelm

Features

  • Sticky positioning: Header stays at top of viewport when scrolling
  • Purple gradient: Matches BrassHelm brand colors (#667eea → #764ba2)
  • Logo + Title: 40px logo with 24px title text
  • Responsive padding: 20px vertical, 40px horizontal
  • High z-index: Stays above page content (z-index: 1000)

Usage Notes

  • Place at top of body, before main content
  • Logo path: assets/logo.png (or update to your logo)
  • Sticky behavior: Header follows scroll automatically
  • Works on all BrassHelm pages (sign, admin, client portal)
  • Box shadow provides depth separation from content

Customization

  • Change h1 text to page title or keep as "BrassHelm"
  • Add header-right div for navigation buttons/links
  • Adjust padding for mobile: reduce to 15px 20px
  • Remove position: sticky for non-sticky version
Code copied to clipboard!

Select Template

Standard Agreement
General purpose agreement template
NDA Template
Non-disclosure agreement
Service Agreement
Professional services contract
Employment Contract
Standard employment agreement