🧱 Inventario de Componentes – Design System Tazki

Objetivo: tener una visión integral de todos los elementos que conforman el Design System — incluyendo foundations, componentes UI, interacciones, y patrones visuales.

  1. Foundations
Elemento Subcategorías Tokens relacionados Estado
Color System Paleta base, semánticos, surface color-primary, color-success, color-error, color-neutral 🟢
Tipografía Display, Headings, Body, Caption font-family, font-size, font-weight 🟢
Espaciado Grid, margin, padding spacing-2, spacing-4, spacing-8 🟢
Elevation Sombras, profundidad shadow-xs, shadow-md, shadow-lg 🟢
Radio XS, SM, MD, LG radius-sm, radius-md, radius-lg 🟢
Iconografía Outline, Filled, System icon-size, icon-color 🟢
Estados Hover, Focus, Active, Disabled, Error state-hover-bg, state-focus-ring, state-disabled-opacity 🟢
Grilla / Grid System Layout, columnas, breakpoints grid-12, gap-md, container-xl 🟢
  1. Componentes

Inputs & Forms

Componente Variantes esperadas Estados Tokens clave Estado
Input / Text Field Outline, Filled, Password Default, Focus, Error Color, Border 🟢
Select / Dropdown Single, Multi, Search Default, Active, Disabled Elevation, Border 🟢
Checkbox Default, Indeterminate Checked, Hover Border, Radius 🟢
Radio Button Default, Label position Checked, Hover Color, Border 🟢
Toggle / Switch On/Off Hover, Disabled Motion, Color 🟢
Date & Time Picker Calendar, Range Focus, Disabled Color, Spacing â­•
Upload Field Drag & Drop, Button Hover, Loading Border, Icon â­•

Feedback & Status

Componente Variantes esperadas Estados Tokens clave Estado
Alertas / Notification Info, Warning, Error, Success Visible, Dismissed Color semantic, Icon 🟢
Badge Numeric, Dot, Label Default, Active Radius, Color 🟢
Chip / Tag Filter, Input, Static Selected, Disabled Border, Color 🟢
Barra de progeso Linear, Circular Indeterminate Animation, Color â­•
Stepper Horizontal, Vertical Active, Completed Color, Font â­•
Loader / Spinner Sizes, Types Active, Paused Motion, Color â­•

Navegacion

Componente Variantes esperadas Estados Tokens clave Estado
Navbar / Header With Search, Actions Scroll, Sticky Color, Spacing 🟢
Sidebar Open, Closed, Style Hover, Active Icon, Spacing, Color 🟢
Tabs Horizontal, Vertical Active, Hover Border, Font 🟢
Breadcrumbs With Icons, Ellipsis Active Font, Color 🟡
Spotlight / Search Command bar, Global search Focus Elevation, Animation â­•
Pagination Hover, Pressed, Disabled State 🟢

Overlays & Interactions

Componente Variantes esperadas Estados Tokens clave Estado
Modal / Pop-up Centered, Fullscreen Open, Close Overlay, Elevation â­•
Tooltip Top, Bottom, Left, Right Visible, Hidden Radius, Color 🟢
Dropdown Menu With Icons, Nested Active Elevation, Motion 🟢

Data Display

Componente Variantes esperadas Estados Tokens clave Estado
Tabla Basic, Sortable, Paginated Hover, Selected Border, Spacing 🟢
Card Basic, With Header/Footer Hover, Active Radius, Shadow 🟢
Lista / Task Item Checkable, Expandable Completed, Pending Font, Icon 🟢
Chart / Gráficos Bar, Line, Pie, Donut Animated, Static Color, Font ⭕
Tag / Label Small, Large Active, Disabled Color semantic 🟢
Widgets KPI, Metric, Mini Chart Hover, Loading Color, Shadow â­•
Download / Descargas File list, Button, Icon Default, Hover, Progress Icon, Progress, Label â­•

Utilities & Misc

Componente Variantes esperadas Estados Tokens clave Estado
Toast / Snackbar Temporary feedback Visible, Timeout Motion, Shadow 🟢