Koala Design

The design system for Koala. Components, patterns, and conventions used across the Portal, Legal, and Tech applications.

Foundation

Brand, semantic, and neutral palettes with dark mode variants.

Font families, sizes, weights, and heading hierarchy.

Full icon library with the koala-icon tag helper.

User and partner avatars with initials fallback.

Status badges in all colours, variants, and sizes.

Navigation trail with mobile back-link and desktop path.

All button colours, variants, and loading states.

Card containers with padding and flush variants.

Info alerts for empty list pages with action buttons.

Responsive tables with search, filters, card collapse, and load more.

Tab navigation, count pills, skeleton loading, and period filters.

Hover context via koala-tooltip and Tippy.js.

Desktop inline buttons with mobile 3-dot dropdown.

Validation, currency inputs, selects, and tag helper conventions.

Mega search, address lookup, person and branch autocomplete.

Confirmation dialogs with full-screen mobile support.

Toast notifications for success and error feedback.

Slide-in tray with form, validation, and redirect handling.