Case Study · Design System
A scalable, WCAG-compliant design system built from the ground up for Civica's enterprise products. 33 fully documented components, Angular integration, and design tokens that eliminated 40% of sprint rework.
→ Click Here to view Design SystemOverview
Firefly emerged from a clear problem: 4 separate Civica products had built 6 different button styles, 3 incompatible icon sets, and 240+ inconsistent components. Designers were recreating work; developers were re-implementing patterns. 68% of existing components failed WCAG 2.1 AA contrast — making compliance an individual responsibility rather than a system property. Firefly addressed all three: consistency, velocity, and compliance.
Documentation
Each of the 33 components below ships with usage guidance, accessibility rules, and a live demo. Every component is keyboard-navigable, supports screen readers via proper ARIA roles, and meets 4.5:1 contrast minimums on all interactive states.
Use when content can be hidden and revealed in stacked sections to reduce visual complexity. Ideal for FAQs, settings, and grouped content where users need to scan headers first.
Always show a clear expand/collapse indicator. Only one panel open at a time by default. Ensure ARIA-expanded states and keyboard support (Enter/Space toggle).
Use to represent users, contacts, or entities. Provides quick visual recognition in lists, comments, and profile contexts.
Always include alt text describing the user. Use initials as fallback when no image. Maintain consistent sizing across contexts (32px, 40px, 48px).
Use to display short status indicators, counts, or labels attached to an element. Great for notification counts and tag-like statuses.
Keep text under 3 characters or short labels. Ensure 4.5:1 contrast against the background. Never rely on colour alone — pair with icon or text.
Use as containers for grouped content — typically with an image or icon, title, description, and optional action. Forms the building block of dashboards and listings.
Maintain consistent padding (16-24px). Use elevation or border to define edges. Make whole card interactive only if the entire card has the same destination.
Use for date selection in forms, scheduling, or event picking. Essential for booking flows and date-range filters.
Highlight today's date clearly. Disable invalid dates rather than allowing then erroring. Support keyboard navigation with arrow keys. Provide a clear month/year navigator.
Use for multiple-choice selections where users can pick zero, one, or many options independently. Also for binary yes/no decisions like terms agreement.
Always pair with a clickable label. Show clear focus and hover states. Use indeterminate state for parent checkboxes with mixed children. Minimum 24px touch target.
Use for compact entries representing filters, selections, or tags. Often used in filter bars and contact selection fields.
Make removable chips have a clear delete affordance. Group chips logically. Provide keyboard support — Tab to focus, Delete/Backspace to remove.
Use when users need to choose a specific colour — common in theming, design tools, and content creators.
Provide both visual swatches and hex/RGB input. Show selected colour clearly. Include preset palettes alongside the custom picker.
Use when users select one option from a list of 5-15 items. For longer lists, consider multiselect with search instead.
Always include a default placeholder. Sort options logically (alphabetical or by frequency). Support keyboard navigation and ARIA listbox role.
Use for rich-text content creation — emails, descriptions, comments with formatting. Provides bold, italic, lists, and link insertion.
Include only the formatting options users genuinely need. Provide both markdown and visual modes for power users. Ensure all toolbar buttons are keyboard accessible.
Use for any numeric input — quantities, prices, ages. Provides increment/decrement controls and number-specific validation.
Set sensible min/max bounds. Show formatted display (commas for thousands). Include step value appropriate to context. Support keyboard arrow keys.
Use for binary on/off settings where the change takes immediate effect (settings panels, feature toggles). Don't use for form submissions requiring save.
Show clear on/off visual states. Animate the transition smoothly (respect prefers-reduced-motion). Label clearly — never use the switch alone.
Use for short single-line text — names, emails, search queries, form fields. The most foundational input type.
Always pair with a visible label (not placeholder-only). Show clear focus state. Use type='email', 'tel', 'url' for semantic types. Include helpful inline validation.
Use for multi-line text — comments, descriptions, messages, long-form input. Allow vertical resize for longer content.
Show character count if there's a limit. Use rows attribute to set initial height. Allow vertical resize but disable horizontal. Maintain accessible labels.
Use for adjusting numeric values within a defined range — volume controls, settings dials. Less common than sliders; reserve for skeuomorphic contexts.
Show current value clearly. Provide keyboard support with arrow keys for fine control. Include a visible track showing range and current position.
Use when users can select multiple options from a list — tag selection, category filtering. Combine with search for long lists.
Show selected items as chips with remove buttons. Maintain a clear count of selections. Support keyboard navigation and bulk select/deselect actions.
Use for content requiring user attention or action that interrupts the current flow — confirmations, forms, important info. Don't use for non-critical content.
Provide a clear close button. Trap focus inside the modal. Close on Escape key. Dim and disable the background content. Set ARIA role='dialog'.
Use for inline feedback within forms or content areas — success notes, errors, warnings, informational tips. Different from toasts which are transient.
Use semantic colour (green/red/yellow/blue) plus icon plus text — never colour alone. Position close to the related content. Allow dismissal where appropriate.
Use to group related content with a title and optional toolbar — common in dashboards and forms. Different from cards in that panels are larger and may contain other components.
Maintain consistent header height. Include header actions (collapse, more menu) where relevant. Use elevation or border for definition.
Use to navigate through long lists of results — tables, search results, archives. Provides page numbers and prev/next controls.
Always show total result count. Include first/last shortcuts for long lists. Disable prev on first page and next on last page rather than hiding.
Use to indicate completion of a task with known duration — file uploads, form completion percentage, multi-step processes.
Show numeric percentage alongside the visual bar. Use ARIA progressbar role with value attributes. Indicate indeterminate state with animation.
Use for indeterminate loading states where duration is unknown — initial page loads, API calls. Use ProgressBar when duration is known.
Always pair with descriptive text (e.g. 'Loading...'). Ensure it spins even with prefers-reduced-motion (slowed but visible). Set ARIA live region for screen readers.
Use when users must select exactly one option from 2-7 mutually exclusive choices. For more than 7 options, use a dropdown.
Group radios with a clear group label. Default to a sensible option where possible. Use ARIA radiogroup role. Minimum 24px touch targets.
Use for collecting or displaying user ratings — products, content, services. Typically 5-star but can be any range.
Allow keyboard input via arrow keys. Show numeric value alongside stars for clarity. Use partial-fill states for granular ratings. Make read-only state visually distinct.
Use to display 2-5 mutually exclusive options as visible buttons — view toggles, time period selection, alignment controls. Replaces dropdowns when space allows.
Show clear selected state. Use consistent button widths. Group buttons visually with shared borders. Mark selected with ARIA pressed='true'.
Use for selecting a numeric value or range within bounds — volume, price filters, brightness. Better than input number when precision is flexible.
Show current value clearly above or beside the thumb. Support keyboard arrow keys with reasonable step values. Provide both single and range modes.
Use to organise related content into separate panes the user can switch between — settings sections, product details. Avoid deeply nested tabs.
Show clear active tab indicator. Support keyboard navigation with arrow keys. Use ARIA roles (tab, tablist, tabpanel). Don't hide critical information in non-default tabs.
Use to label, categorise, or mark items with semantic meaning — status, category, priority. Smaller and more decorative than chips.
Keep text concise (1-2 words). Use distinct colours for semantic categories consistently. Pair with icons for non-colour-dependent meaning.
Use for structured data with multiple attributes per row — user lists, transaction logs, reports. Provides sorting, filtering, and pagination.
Make column headers clickable for sorting where useful. Show sort direction. Support keyboard navigation. Use proper table semantics (th, scope).
Use for transient, non-blocking feedback — save confirmations, network errors. Auto-dismiss after 4-6 seconds. Don't use for critical actions that need user response.
Position consistently (typically top-right or bottom-centre). Allow manual dismiss. Stack multiple toasts cleanly. Use ARIA live='polite' for screen reader announcements.
Use as a more visual alternative to checkboxes for binary settings. Similar to Input Switch but with text labels showing both states.
Show both possible states (on/off labels). Animate the slider smoothly. Make the active state visually distinct (colour + position). Support keyboard activation.
Use to display hierarchical data — file systems, category navigation, org charts. Provides expand/collapse for nested levels.
Show clear expand/collapse indicators. Indent consistently for each level. Support keyboard arrow keys for navigation. Use ARIA tree role.
Use when users need to select from hierarchical options — categories with subcategories, organisational units. Combines Tree and Dropdown.
Show selected items as chips above the tree. Allow selecting both parent and child nodes. Maintain expand/collapse state per session. Support search across all levels.
Conclusion
Firefly proved that consistency, velocity, and accessibility are not competing priorities — they're complementary when compliance lives at the token level. Every component inherits WCAG-passing contrast automatically. Every interaction state is documented with ARIA requirements. Every team building on Firefly inherits accessibility as a given, not a goal.
→ Explore the live design system