SPEC-022 — Approved 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.

Palette

Tokens in both themes, the measured contrast table, and the colour-vision simulation of the brand against gain, loss and in-progress.

Components

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.

Light

Dark

Frame and account menu

The five-destination sidebar and the top bar with the masking toggle, with the account menu open.

Light

Dark

Painel

Light

Dark

Portfólio › Patrimônio

Light

Dark

Configurações › Carteiras

Light

Dark

Ajustes de 12/10/2026

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.

Dashboard

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.

Transações

• 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.

Standard form — Editar carteira

• 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.

Configurações › Carteiras › Minhas carteiras

Sections are main tabs; each section's tasks are pill tabs, with the primary action on the same row.

Configurações › Importar › Enviar

The upload sits beside the B3 export guide.

Configurações › Importar › Histórico

A paginated table with semantic status badges. The "⋯" menu of a failed import offers Descartar (#200).

Configurações › Observar preços › Regras

Standard — tables and panels

• 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.

Standard — charts and labels

• 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.