Koala Design
The design system for Koala. Components, patterns, and conventions used across the Portal, Legal, and Tech applications.
Foundation
Tokens
Every design primitive: colours, surfaces, status, type scale, radius, shadows, motion, z-index, focus.
Typography
Font families plus the page-title, money, reference, and you tag helpers.
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.
Environment banner
Top-of-viewport banner naming the current ASPNETCORE_ENVIRONMENT.
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.
Settings sidebar
Vertical tab nav for settings pages. Reuses TabNavModel; collapses to a dropdown on mobile.
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.
Note bubble
Inline list-row pill that opens a popover with the latest note.
Side trays
Slide-in tray with form, validation, and redirect handling.
Property map
Map / Satellite + 2D / 3D pill toggles overlaid on the map; Google Earth + Move-with-device pills.
Bulk reassign
Per-affected-branch reassignment partial for membership and disable flows.
Account settings
Per-user settings page; owns referral codes by partner.