Figma-to-Code Responsive Component Library
UI System Foundations
A portfolio study translating a Figma UI system into reusable, responsive and developer-ready web components.
Component gallery
Documented patterns
Each page contains responsive, semantic and keyboard-friendly live HTML examples.
Action Buttons
Action hierarchy, sizes, icon controls and paired navigation actions.
Status & Filter Chips
Semantic statuses, filter menus and removable values.
Form Controls
Inputs, validation, selects, checkboxes, radio controls and toggles.
Alerts & Callouts
Contextual guidance and semantic feedback messages.
Progress Bars
Determinate progress indicators with multiple visual weights.
Tabs
Underline, icon-supported and segmented section navigation.
Breadcrumbs
Standard trails, collapsed paths and focused back navigation.
Pagination
Numbered page navigation and compact table footer controls.
Stepper
Completed, current and upcoming states for guided flows.
Accordion
Grouped disclosure rows and standalone expandable cards.
Profile Cards
Team member summaries and expandable directory entries.
Navbar
Guest and role-based desktop navigation with mobile submenus.
Foundations
Small token layer, shared throughout
Color
Indigo action hierarchy, slate neutrals and six semantic roles.
Type & shape
Manrope typography, 8px controls and subtle bordered surfaces.
Sizing
32px, 40px and 48px controls with 16px action icons.