Gamba – Design System

Overview

The Gambaru Design System is a shared UI foundation for the Tech Talent Platform. It supports both candidate and recruiter experiences with consistent patterns, scalable components, and accessibility-first defaults.

The system is designed for speed and clarity—helping users scan skill signals, compare candidates, and take action with confidence.

Why a Design System

As Gambaru grew, new features introduced UI drift across different flows and teams. A design system was needed to keep the product consistent and maintainable.

• Inconsistent UI patterns across candidate and recruiter journeys
• Duplicate components and repeated styling decisions
• Slower design-to-dev handoff with frequent rework
• Missing accessibility and interaction standards

Scope

• Candidate: onboarding, profile builder, verification, applications
• Recruiter: search, filters, shortlists, messaging, pipeline
• Shared: typography, color, spacing, iconography, motion, and states

Foundations

• Typography scale for high scannability and dense data
• Semantic color system for status, confidence, and alerts
• Spacing grid for predictable layouts and consistent rhythm
• Elevation, radius, and icon rules for a cohesive feel

Component Library

Core components are designed with consistent variants and states to support both audiences:

• Buttons, inputs, selects, checkboxes, and search
• Cards, lists, table rows, and content blocks
• Badges for skills, levels, and verification status
• Feedback: alerts, toasts, empty states, loading, and error

Patterns

• Candidate profile layout with predictable sections and highlights
• Recruiter search and filter patterns with saved presets
• Skill verification presentation: badges, scores, and evidence blocks
• Action-first UI: shortlist, message, invite, and pipeline steps

Documentation & Governance

• Usage guidelines with do/don’t examples
• Naming conventions and variant rules for components
• Contribution workflow for adding or evolving components
• Accessibility checks for contrast, focus, and touch targets

Implementation

Components align with Bootstrap 5 patterns to keep implementation fast and consistent, while design tokens define the brand layer and interaction rules.

• Token-driven UI decisions for color, spacing, and typography
• Reusable component variants mapped directly to UI states
• Clear rules for dense content and responsive behavior

Impact

• Faster delivery with fewer UI regressions and rework
• More consistent experience across candidate and recruiter flows
• Clearer collaboration between Product, Design, and Engineering
• Improved accessibility and interaction consistency

Next Steps

• Expand components for pipeline, scheduling, and collaboration
• Introduce theming support for hiring campaigns
• Add visual regression checks to protect UI consistency
• Create richer templates for profiles, jobs, and dashboards