Repository navigation
SPEC 022 Prototype
The owner approved this prototype on 2026-10-09 (SPEC-022 DL-022-13). Every later M10 pull request is measured against it (DL-022-01).
- Brand: navy on near-neutral graphite surfaces (DL-022-05). The token values, with their measured contrast and colour-vision separation, are in SPEC-022 › Approved tokens.
- Source: the interactive prototype is a claude.ai artifact, private to the owner: https://claude.ai/artifact/P2aaV4bdgs48CUKSYFzxC6. These images are rendered from the same source at 1440 px wide, so the target stays readable without access to it.
- Data: every figure, name and asset holding is fictitious.
- States: pages show their default state. Hover, focus, open menus, errors and masked values are shown per component on the component sheets.
- Process record: #202.
Tokens in both themes, the measured contrast table, and the colour-vision simulation of the brand against gain, loss and in-progress.
Every component in every state: button, field with instructions, select, file upload, route tabs, active navigation versus focus, cards, masked amounts, scope selector, account menu, status badges and the table with sorting and pagination.
The five-destination sidebar and the top bar with the masking toggle, with the account menu open.
After #203–#214 landed, the owner reviewed the interface and reported thirteen gaps. These frames settle each of them and were approved on 2026-10-12 (SPEC-022 DL-022-24). The adjustment issues under #201 are measured against them.
- Source: https://claude.ai/artifact/PxC7sxodnp7rrsRQwhBcLT, private to the owner. Every image below is rendered from that source at 1440 px.
- Data: fictitious.
- Themes: the light frames were approved. The dark ones are the same source rendered with the approved dark tokens.
- Rules: BR-022-16, 18, 32 and 36–40. Popups and menus are drawn open where the frame demonstrates them.
Renamed from Painel. Every block sits in a panel, with corners of 8 px. The figure labelled "Valor aplicado" is the cost of current holdings, and its info icon explains it.
- 8 columns instead of 11, and no horizontal scrolling.
- The broker sits under the asset, and status and origin share one cell.
- Row actions live in a "⋯" menu.
- Columns have fixed widths. Text that does not fit ends in an ellipsis, and the full text opens on hover, focus or tap.
- Bulk actions sit on a bar above the table.
- "Custo estimado" sits under the price it qualifies.
- The form sits in a panel, with fields in 2 columns and labels above them.
- Instructions sit behind an info icon, shown open here on Tolerância.
- The delete button is at the bottom left. Cancelar and Salvar are at the bottom right.
- Below the form, a paginated table lists the assigned assets.
Sections are main tabs; each section's tasks are pill tabs, with the primary action on the same row.
The upload sits beside the B3 export guide.
A paginated table with semantic status badges. The "⋯" menu of a failed import offers Descartar (#200).
- The anatomy of a panel.
- Text aligns left and numbers right.
- Columns keep the same width when values are hidden.
- Long text is truncated.
- Which tables paginate and which do not.
- Axes in abbreviated reais, and tooltips with the exact amount.
- The masked state of a chart.
- "Valor estimado" and "Custo estimado", each with its explanation.
- "Valor aplicado" and "Aportes líquidos", each with its explanation.
