SuperdindaDocs

Como o design system é mantido

Para quem mantém o DS. Figma, registros, código, tokens e o portão de paridade.

As páginas de componente mostram só o que quem usa precisa: stories, props e uso. Esta página junta o que quem mantém o DS precisa saber.

Figma

  • Arquivo de entrega: 20BFI2ZiW6s45zcRgbANTP. É o único arquivo que as lanes editam.
  • Páginas: Componentes 162:3 e Fundação 162:2 (design-system/ds.manifest.json).
  • Regras de build no Figma (variantes, tokens, nomes de propriedades = API em React): design-system/contract.md.

Registros

RegistroO que guardaQuem escreve
design-system/registry/<família>.jsonCada component set: node, eixos de variante, propriedades, codePath, status, tokens, notasA lane da família, no Figma
packages/ui/src/<família>/examples.tsAs matrizes de variante × estado em código (*.examples.tsx)A lane da família
packages/ui/src/examples-registry.tsQuais famílias existemT0

bun design-system/scripts/ds.ts examples <família> gera o esqueleto das células a partir dos eixos do registro; ds.ts lanes lista lane → componente.

Código

  • Fonte única: packages/ui/src/<família>/<kebab>.tsx (@superdinda/ui), com index.ts, <kebab>.examples.tsx, <kebab>.test.tsx e <kebab>.figma.tsx.
  • Platform e backoffice importam o pacote (@superdinda/ui/<família>); não há mais cópias geradas (ds.ts sync foi aposentado).
  • ds.ts lint garante as regras de import e de estilo (sem @/, sem next/*, só ds-hover:/ds-focus:/ds-pressed:, sem hex).
  • Este docs importa o mesmo pacote, sem cópia.

Pipeline de tokens

  1. Pull (feito por agente, fora do CI): o script read-only design-system/scripts/figma-export-variables.js lê variáveis, estilos de texto e de efeito do Figma; o resultado vira design-system/tokens/figma.json.
  2. Overrides: tokens/overrides.json guarda decisões tomadas em código antes do Figma refletir (ds.ts overrides lista as pendentes); tokens/code-only.json guarda o que o Figma não tem (radius, series-*).
  3. Build: ds.ts tokens gera packages/ui/src/styles/tokens.css (e tokens-console.css do backoffice) e os módulos hex (e-mail, tiles). ds.ts tokens --check falha se algo divergir.
  4. ds.ts check roda tokens e lint de uma vez.

Portão de paridade

  • A rota /__ds do platform (com DS_ROUTE_ENABLED=1) renderiza cada matriz, célula por célula, marcada com o node do Figma (data-figma-node).
  • As referências do Figma ficam em design-system/figma/<família>/ com o figma/manifest.json.
  • apps/platform/e2e/visual/ds.spec.ts roda, em claro e escuro, a regressão código × código, o axe, e a paridade código × Figma: a caixa precisa bater com o Figma em ±1 px (obrigatório) e, com a caixa certa, até 2 % dos pixels podem diferir (rasterização de texto). Células em design-system/figma/pending.json seguem uma decisão que o Figma ainda não espelhou: a geometria segue bloqueando, os pixels só são reportados.
  • ds.ts figma-diff resume os resultados e ds.ts report monta o relatório.

Componentes

Uma linha por matriz registrada. O node abre no Figma; o número depois dele é a quantidade de variantes; o nome leva à página do componente, quando existe.

ComponenteFamíliaFigmaCódigoStatus
Iconfoundations162:3 · 12packages/ui/src/foundations/icon.tsxcode-only wrapper
Logofoundations172:204 · 5packages/ui/src/foundations/logo.tsxevolved
Avatarfoundations168:151 · 16packages/ui/src/foundations/avatar.tsxexisting
Avatar · Badgefoundations168:151 · 3packages/ui/src/foundations/avatar.tsxexisting
Textfoundations162:2 · 18packages/ui/src/foundations/text.tsxcode-only
Headingfoundations162:2 · 8packages/ui/src/foundations/text.tsxcode-only
Separatorfoundations168:161 · 3packages/ui/src/foundations/separator.tsxexisting
Skeletonfoundations179:602 · 8packages/ui/src/foundations/skeleton.tsxevolved
Button · Productactions167:477 · 210packages/ui/src/actions/button.tsxevolved
Button (dense)actions166:773 · 168packages/ui/src/actions/button.tsxevolved
Icon Buttonactions167:105 · 252packages/ui/src/actions/icon-button.tsxevolved
Linkactions2056:62010 · 16packages/ui/src/actions/link.tsxnew
Form Fieldinputs185:1351 · 9packages/ui/src/inputs/form-field.tsxevolved (description)
Field Groupinputs185:1467 · 3packages/ui/src/inputs/field-group.tsxevolved (description)
Labelinputs170:231 · 2packages/ui/src/inputs/label.tsxevolved (description)
Help Hintinputs170:208 · 3packages/ui/src/inputs/help-hint.tsxevolved (description)
Field Errorinputs2022:2476 · 2packages/ui/src/inputs/field-error.tsxevolved (description; kit component)
Inputinputs169:221 · 32packages/ui/src/inputs/input.tsxevolved
Email Inputinputs169:314 · 7packages/ui/src/inputs/email-input.tsxevolved (description + focus style)
Phone Inputinputs185:1196 · 7packages/ui/src/inputs/phone-input.tsxevolved
OTP Inputinputs170:184 · 7packages/ui/src/inputs/otp-input.tsxevolved (description)
OTP Cellinputs170:115 · 6packages/ui/src/inputs/otp-input.tsxevolved
Textareainputs2056:52098 · 14packages/ui/src/inputs/textarea.tsxnew
Search Inputinputs2056:52176 · 10packages/ui/src/inputs/search-input.tsxnew (promotes BO / Search Trigger 2030:12207)
Date Inputinputs2056:52278 · 14packages/ui/src/inputs/date-input.tsxnew
Select Triggerinputs171:178 · 12packages/ui/src/inputs/select.tsxevolved
Select Contentinputs171:196 · 1packages/ui/src/inputs/select.tsxevolved (description)
Select Iteminputs171:195 · 4packages/ui/src/inputs/select.tsxevolved (description)
Checkboxinputs170:204 · 15packages/ui/src/inputs/checkbox.tsxevolved
Checkbox Fieldinputs2056:47820 · 30packages/ui/src/inputs/checkbox-field.tsxnew
Radioinputs2056:47450 · 20packages/ui/src/inputs/radio.tsxnew
Radio Groupinputs2056:47626 · 6packages/ui/src/inputs/radio-group.tsxnew
Switchinputs2056:47952 · 18packages/ui/src/inputs/switch.tsxnew (promotes BO / Switch 2043:27569)
Choice Cardinputs2056:55357 · 18packages/ui/src/inputs/choice-card.tsxnew (replaces Kind Option)
Segmented Controlinputs2056:55452 · 6packages/ui/src/inputs/segmented-control.tsxpromoted (BO / Segment 2029:11290)
Segmented Control Iteminputs2056:55391 · 10packages/ui/src/inputs/segmented-control.tsxpromoted (BO / Segment 2029:11290)
Calendarinputs2080:10866 · 5packages/ui/src/inputs/calendar.tsxnew
Calendar / Dayinputs2080:10279 · 14packages/ui/src/inputs/calendar.tsxnew
Inline Statusfeedback2056:43931 · 10packages/ui/src/feedback/inline-status.tsxnew
Count Pillfeedback2056:43962 · 15packages/ui/src/feedback/count-pill.tsxnew
System Bandfeedback2056:53449 · 2packages/ui/src/feedback/system-band.tsxpromoted
Global Bannerfeedback2056:53695 · 8packages/ui/src/feedback/global-banner.tsxpromoted
Badgefeedback168:113 · 30packages/ui/src/feedback/badge.tsxevolved
Tooltipfeedback168:173 · 6packages/ui/src/feedback/tooltip.tsxevolved
Loaderfeedback179:503 · 18packages/ui/src/feedback/loader.tsxevolved
Toastfeedback179:548 · 6packages/ui/src/feedback/toast.tsxevolved
Empty Statefeedback179:570 · 4packages/ui/src/feedback/empty-state.tsxevolved
Noticefeedback179:590 · 14packages/ui/src/feedback/notice.tsxevolved
Step Badgefeedback173:186 · 6packages/ui/src/feedback/step-badge.tsxevolved
Protection Statusfeedback2022:2460 · 36packages/ui/src/feedback/protection-status.tsxevolved
Calm Statefeedback2025:2719 · 3packages/ui/src/feedback/calm-state.tsxevolved
Progress Trackfeedback2022:2560 · 9packages/ui/src/feedback/progress-track.tsxevolved
Calloutfeedback2132:11078 · 4packages/ui/src/feedback/callout.tsxnew
App Headernavigation176:419 · 4packages/ui/src/navigation/app-header.tsxevolved
Pill Navnavigation173:268 · 3packages/ui/src/navigation/pill-nav.tsxevolved
Pill Nav Itemnavigation173:210 · 9packages/ui/src/navigation/pill-nav.tsxevolved
Tab Barnavigation173:288 · 2packages/ui/src/navigation/tab-bar.tsxevolved
Tab Bar Itemnavigation173:287 · 6packages/ui/src/navigation/tab-bar.tsxevolved
Section Nav Itemnavigation173:325 · 4packages/ui/src/navigation/section-nav.tsxevolved
Back Linknavigation2056:61582 · 4packages/ui/src/navigation/back-link.tsxnew
Onboarding Step Pillnavigation2056:61667 · 4packages/ui/src/navigation/onboarding-step-pill.tsxnew
Onboarding Step Pill / Itemnavigation2056:61609 · 4packages/ui/src/navigation/onboarding-step-pill.tsxnew
Person Switchernavigation2058:53080 · 1packages/ui/src/navigation/person-switcher.tsxnew
Person Switcher / Itemnavigation2058:53054 · 15packages/ui/src/navigation/person-switcher.tsxnew
Person Switcher / Addnavigation2058:53078 · 3packages/ui/src/navigation/person-switcher.tsxnew
Breadcrumbnavigation2058:53128 · 2packages/ui/src/navigation/breadcrumb.tsxnew
Breadcrumb / Itemnavigation2058:53126 · 4packages/ui/src/navigation/breadcrumb.tsxnew
Account Triggernavigation175:286 · 7packages/ui/src/navigation/account-trigger.tsxevolved
Account Menunavigation175:287 · 2packages/ui/src/navigation/account-menu.tsxevolved
Account Drawernavigation175:309 · 2packages/ui/src/navigation/account-menu.tsxevolved
Notifications Bell (Avisos)navigation175:371 · 8packages/ui/src/navigation/notices-bell.tsxevolved
Sticky Footernavigation176:611 · 10packages/ui/src/navigation/sticky-footer.tsxevolved
Page Headingnavigation192:1686 · 2packages/ui/src/navigation/page-heading.tsxevolved
Step Headingnavigation185:1175 · 2packages/ui/src/navigation/step-heading.tsxevolved
Welcome Headernavigation183:534 · 2packages/ui/src/navigation/welcome-header.tsxevolved
Scrimoverlays2056:42260 · 4packages/ui/src/overlays/scrim.tsxnew
Dialog Headeroverlays2056:42316 · 4packages/ui/src/overlays/dialog.tsxnew
Dialog Footeroverlays2056:42409 · 4packages/ui/src/overlays/dialog.tsxnew
Dialogoverlays2056:42821 · 12packages/ui/src/overlays/dialog.tsxnew
Sheetoverlays2056:45954 · 4packages/ui/src/overlays/sheet.tsxnew
Draweroverlays2056:46154 · 3packages/ui/src/overlays/drawer.tsxnew
Popoveroverlays2056:50978 · 9packages/ui/src/overlays/popover.tsxnew
Dropdown Menu Itemoverlays171:255 · 6packages/ui/src/overlays/dropdown-menu.tsxevolved
Dropdown Menu Checkbox Itemoverlays2056:51066 · 6packages/ui/src/overlays/dropdown-menu.tsxnew
Dropdown Menu Labeloverlays2056:51067 · 1packages/ui/src/overlays/dropdown-menu.tsxnew
Dropdown Menu Separatoroverlays2056:51069 · 1packages/ui/src/overlays/dropdown-menu.tsxnew
Dropdown Menuoverlays2056:51194 · 3packages/ui/src/overlays/dropdown-menu.tsxnew
Consequence Listoverlays2056:55520 · 2packages/ui/src/overlays/consequence-list.tsxpromoted
Reason Optionoverlays2056:55577 · 8packages/ui/src/overlays/reason-option.tsxpromoted
Confirm Dialogoverlays2056:55813 · 4packages/ui/src/overlays/confirm-dialog.tsxnew
Reason Dialogoverlays2056:56697 · 8packages/ui/src/overlays/reason-dialog.tsxnew
Settings Dialogoverlays193:2239 · 12packages/ui/src/overlays/settings-dialog.tsxevolved
Hero Statementprotection2056:51454 · 4packages/ui/src/protection/hero-statement.tsxpromoted
Alert Beamprotection2056:51400 · 4packages/ui/src/protection/alert-beam.tsxpromoted
Person Tileprotection2056:44857 · 40packages/ui/src/protection/person-tile.tsxpromoted
Person Tile · focus and status lineprotection2056:44857 · 3packages/ui/src/protection/person-tile.tsxpromoted
Muralprotection2056:45723 · 8packages/ui/src/protection/mural.tsxpromoted
Mural · tile-grid rulesprotection2056:45723 · 2packages/ui/src/protection/mural.tsxpromoted
Mural / Add Tileprotection2056:44892 · 3packages/ui/src/protection/mural.tsxpromoted
Dinda Panelprotection2130:10991 · 2packages/ui/src/protection/dinda-panel.tsxnew
Info Step Cardprotection2130:11605 · 1packages/ui/src/protection/info-step-card.tsxnew
Guide Tileprotection2056:51514 · 4packages/ui/src/protection/guide-tile.tsxpromoted
Weekly Stat Cardprotection2056:60094 · 2packages/ui/src/protection/weekly-stat-card.tsxpromoted
Fact Rowprotection2056:59995 · 10packages/ui/src/protection/fact-row.tsxnew
Week Stripprotection2056:59964 · 5packages/ui/src/protection/week-strip.tsxpromoted
Day Tileprotection2056:59859 · 15packages/ui/src/protection/week-strip.tsxpromoted
Risk Alertprotection2023:2983 · 48packages/ui/src/protection/risk-alert.tsxevolved
Risk Alert / Rowprotection2024:2735 · 24packages/ui/src/protection/risk-alert-row.tsxevolved
Alert Signalsprotection2058:52252 · 1packages/ui/src/protection/alert-detail.tsxnew
Alert Stepsprotection2058:52263 · 1packages/ui/src/protection/alert-detail.tsxnew
Conversation Scriptprotection2058:52297 · 2packages/ui/src/protection/alert-detail.tsxnew
Resolution Cardprotection2058:52326 · 2packages/ui/src/protection/alert-detail.tsxpromoted
Alert Status Cardprotection2058:52408 · 3packages/ui/src/protection/alert-detail.tsxpromoted
History Itemprotection2058:52409 · 1packages/ui/src/protection/alert-detail.tsxnew
Alert Historyprotection2058:52413 · 1packages/ui/src/protection/alert-detail.tsxpromoted
Share Bannerprotection2058:52429 · 1packages/ui/src/protection/alert-detail.tsxpromoted
Person Page Headerprotection2058:62926 · 15packages/ui/src/protection/person-header.tsxpromoted
Status Panelprotection2130:12171 · 6packages/ui/src/protection/status-panel.tsxnew
Person Cardprotection2024:2880 · 7packages/ui/src/protection/person-card.tsxevolved
Recipient Rowprotection2130:11917 · 1packages/ui/src/protection/recipient-row.tsxnew
Timeline Itemprotection2058:52517 · 7packages/ui/src/protection/timeline-item.tsxnew
Consent Headerconsent-billing189:1662 · 6packages/ui/src/consent-billing/consent-header.tsxevolved
Consent Statementconsent-billing189:1815 · 6packages/ui/src/consent-billing/consent-statement.tsxevolved
Consent Pointconsent-billing189:1666 · 1packages/ui/src/consent-billing/consent-point.tsxevolved
Info Blockconsent-billing189:1684 · 4packages/ui/src/consent-billing/info-block.tsxevolved
Card Pagerconsent-billing2130:12262 · 3packages/ui/src/consent-billing/card-pager.tsxnew
Phrase Cardconsent-billing2130:12404 · 1packages/ui/src/consent-billing/phrase-card.tsxnew
Help Rowconsent-billing2056:47206 · 8packages/ui/src/consent-billing/help-row.tsxnew
Permission Gateconsent-billing189:1760 · 4packages/ui/src/consent-billing/permission-gate.tsxevolved
Consent Footerconsent-billing189:1797 · 6packages/ui/src/consent-billing/consent-footer.tsxevolved
Consent Outcomeconsent-billing191:1936 · 12packages/ui/src/consent-billing/consent-outcome.tsxevolved
Consent Outcome · secondary actionconsent-billing191:1936 · 2packages/ui/src/consent-billing/consent-outcome.tsxevolved
Comprehension Check / Optionconsent-billing2056:56785 · 12packages/ui/src/consent-billing/comprehension-check.tsxnew
Comprehension Check / Feedbackconsent-billing2056:56797 · 2packages/ui/src/consent-billing/comprehension-check.tsxnew
Comprehension Checkconsent-billing2056:56872 · 3packages/ui/src/consent-billing/comprehension-check.tsxnew
Review Itemconsent-billing2056:57028 · 5packages/ui/src/consent-billing/review-item.tsxnew
Consent Status Cardconsent-billing186:1562 · 8packages/ui/src/consent-billing/consent-status-card.tsxevolved
Consent Roster Rowconsent-billing186:1743 · 8packages/ui/src/consent-billing/consent-roster-row.tsxevolved
Setup Dependent Rowconsent-billing186:1475 · 5packages/ui/src/consent-billing/setup-dependent-row.tsxevolved
Setup Person Cardconsent-billing2137:11156 · 2packages/ui/src/consent-billing/setup-person-card.tsxnew
Notification Shortcut Cardconsent-billing2130:12389 · 2packages/ui/src/consent-billing/notification-shortcut-card.tsxnew
Email Confirm Rowconsent-billing2056:47322 · 2packages/ui/src/consent-billing/email-confirm-row.tsxpromoted
Audio Playerconsent-billing2056:47284 · 2packages/ui/src/consent-billing/audio-player.tsxnew
Selfie Frameconsent-billing191:1728 · 4packages/ui/src/consent-billing/selfie-frame.tsxevolved
Voice Recorderconsent-billing191:1857 · 4packages/ui/src/consent-billing/voice-recorder.tsxevolved
Pairing Code Displayconsent-billing2056:61760 · 4packages/ui/src/consent-billing/pairing-code-display.tsxnew
Pairing Stepsconsent-billing2056:61774 · 1packages/ui/src/consent-billing/pairing-steps.tsxnew
Pairing Steps / Itemconsent-billing2056:61773 · 2packages/ui/src/consent-billing/pairing-steps.tsxnew
Pairing Verification Codeconsent-billing2130:12321 · 2packages/ui/src/consent-billing/pairing-verification-code.tsxnew
QR Fallback Rowconsent-billing2130:12353 · 2packages/ui/src/consent-billing/qr-fallback-row.tsxnew
Queue Cardconsent-billing188:1708 · 3packages/ui/src/consent-billing/queue-card.tsxevolved
Progress Ringconsent-billing188:1539 · 4packages/ui/src/consent-billing/progress-ring.tsxevolved
Mock QRconsent-billing188:1525 · 1packages/ui/src/consent-billing/mock-qr.tsxevolved
Pre-check Choiceconsent-billing2056:61941 · 3packages/ui/src/consent-billing/pre-check-choice.tsxnew
Price Summaryconsent-billing2058:60762 · 3packages/ui/src/consent-billing/price-summary.tsxnew
Price Impactconsent-billing2058:60780 · 2packages/ui/src/consent-billing/price-impact.tsxnew
Plan Seat Rowconsent-billing2058:60841 · 3packages/ui/src/consent-billing/plan-seat-row.tsxnew
Invoice Rowconsent-billing2058:60906 · 3packages/ui/src/consent-billing/invoice-row.tsxnew
Payment Method Cardconsent-billing2060:10084 · 4packages/ui/src/consent-billing/payment-method-card.tsxnew
Member Rowconsent-billing2060:10196 · 4packages/ui/src/consent-billing/member-row.tsxnew
Consequences Listconsent-billing2060:10207 · 1packages/ui/src/consent-billing/consequences-list.tsxnew
Consequence Itemconsent-billing2060:10200 · 1packages/ui/src/consent-billing/consequences-list.tsxnew
Backoffice / Console Headerbackoffice2056:43402 · 3packages/ui/src/backoffice/console-header.tsxpromoted
Backoffice / Area Tabbackoffice2056:42039 · 6packages/ui/src/backoffice/area-tab.tsxpromoted
Backoffice / Search Triggerbackoffice2056:42064 · 4packages/ui/src/backoffice/search-trigger.tsxpromoted
Backoffice / Notification Bellbackoffice2056:42086 · 3packages/ui/src/backoffice/notification-bell.tsxnew
Backoffice / Sidebarbackoffice2056:43445 · 1packages/ui/src/backoffice/sidebar.tsxnew
Backoffice / Sidebar Itembackoffice2056:43441 · 5packages/ui/src/backoffice/sidebar.tsxpromoted
Backoffice / Sidebar Group Labelbackoffice2056:43442 · 1packages/ui/src/backoffice/sidebar.tsxnew
Backoffice / Segmentbackoffice2056:43522 · 4packages/ui/src/backoffice/segment.tsxpromoted
Backoffice / Segment Groupbackoffice2056:43523 · 1packages/ui/src/backoffice/segment.tsxnew
Backoffice / Period Pickerbackoffice2056:48672 · 4packages/ui/src/backoffice/period-picker.tsxnew
Backoffice / Page Headerbackoffice2056:48673 · 1packages/ui/src/backoffice/page-header.tsxnew
Backoffice / KPI Tilebackoffice2056:48793 · 7packages/ui/src/backoffice/kpi-tile.tsxpromoted
Backoffice / KPI Tile · In stripbackoffice2056:48793 · 7packages/ui/src/backoffice/kpi-tile.tsxpromoted
Backoffice / Filter Chipbackoffice2056:48830 · 6packages/ui/src/backoffice/filter-chip.tsxnew
Backoffice / Filter Selectbackoffice2079:10277 · 4packages/ui/src/backoffice/filter-select.tsxnew
Backoffice / Columns Buttonbackoffice2079:10330 · 3packages/ui/src/backoffice/columns-button.tsxnew
Backoffice / Table Header Cellbackoffice2056:57085 · 10packages/ui/src/backoffice/data-table.tsxpromoted
Backoffice / Table Cellbackoffice2056:57120 · 9packages/ui/src/backoffice/data-table.tsxpromoted
Backoffice / Table Rowbackoffice2056:57276 · 5packages/ui/src/backoffice/data-table.tsxnew
Backoffice / Table Header Rowbackoffice2056:57277 · 1packages/ui/src/backoffice/data-table.tsxnew
Backoffice / Table Toolbarbackoffice2056:57424 · 2packages/ui/src/backoffice/table-toolbar.tsxnew
Backoffice / Paginationbackoffice2056:57471 · 5packages/ui/src/backoffice/pagination.tsxnew
Backoffice / Table Emptybackoffice2056:57525 · 3packages/ui/src/backoffice/table-empty.tsxnew
Data Table (composed)backoffice2056:57276 · 1packages/ui/src/backoffice/data-table.tsxnew
Backoffice / Statusbackoffice2056:42010 · 10packages/ui/src/backoffice/status.tsxpromoted
Backoffice / Chipbackoffice2079:10352 · 10packages/ui/src/backoffice/chip.tsxnew
Backoffice / Attention Itembackoffice2058:51998 · 9packages/ui/src/backoffice/attention.tsxpromoted
Backoffice / Attention Listbackoffice2058:51999 · 1packages/ui/src/backoffice/attention.tsxnew
Backoffice / Reveal Fieldbackoffice2058:52243 · 4packages/ui/src/backoffice/reveal-field.tsxnew
Backoffice / Timeline Itembackoffice2058:55269 · 10packages/ui/src/backoffice/timeline.tsxpromoted
Backoffice / Balance Cardbackoffice2058:55415 · 3packages/ui/src/backoffice/balance-card.tsxnew
Callout · Backofficebackoffice2132:11078 · 3packages/ui/src/backoffice/callout.tsxnew
Definition Row · Backofficebackoffice2132:11102 · 2packages/ui/src/backoffice/definition-row.tsxnew

On this page