Design
Koala Design
The design system for Koala. Components, patterns, and conventions used across the Portal, Legal, and Tech applications.
Foundation
Colours
Brand, semantic, and neutral palettes with dark mode variants.
Typography
Font families, sizes, weights, and heading hierarchy.
Icons
Full icon library with the koala-icon tag helper.
Components
Avatars
User and partner avatars with initials fallback.
Status badges in all colours, variants, and sizes.
Breadcrumbs
Navigation trail with mobile back-link and desktop path.
All button colours, variants, and loading states.
Cards
Card containers with padding and flush variants.
Empty states
Info alerts for empty list pages with action buttons.
Spinners
Loading indicator for in-page AJAX (search, autocomplete, load-more).
Tables
Responsive tables with search, filters, card collapse, and load more.
Tabs
Tab navigation, count pills, skeleton loading, and period filters.
Tooltips
Hover context via koala-tooltip and Tippy.js.
Patterns
Action menus
Desktop inline buttons with mobile 3-dot dropdown.
Forms
Validation, currency inputs, selects, and tag helper conventions.
Autocomplete
Mega search, address lookup, person and branch autocomplete.
Filter popovers
Compact filter trigger that opens an Alpine popover with multi-dimension controls.
List filter modals
Inline-on-desktop, full-screen-on-mobile filter row for index pages via koala-list-filters.
Modals
Confirmation dialogs with full-screen mobile support.
Notifications
Toast notifications for success and error feedback.
Side trays
Slide-in tray with form, validation, and redirect handling.
Edit assignment tray
Cascading dropdowns for atomic partner/branch/referrer edits.
Bulk reassign
Per-affected-branch reassignment partial for membership and disable flows.
Account settings
Per-user settings page; owns referral codes by partner.