gov.br federal component pack
design-system specs/design-system/govbr-federal-pack.kmd
The gov.br-SPECIFIC components the `govbr` design system provides/overrides BEYOND look-only M3 parity — the federal-signature header/footer, the "Entrar com gov.br" (Login Único) sign-in, the LGPD cookiebar, and the eMAG skip-link — grouped under the govbr DS manifest. Where a Koder component already carries the contract (cookie-consent, skip-link, footer), this pack binds it to the federal requirement; the federal-only surfaces (the gov.br bar, the Login-Único button) it defines here. Part of design-RFC-014 (F5 / F2c structural differentiation) and the govbr-ds-import epic.
Quando esta spec se aplica
Triggers primários
- Provide/override a component under the govbr design system
Todos os triggers
- Build a gov.br federal surface (the barra gov.br, federal footer signature)
- Add 'Entrar com gov.br' (Login Único) sign-in
- Ship a gov.br/eMAG-compliant page (skip-link + LGPD cookiebar)
Corpo da especificação
gov.br federal component pack
R1 — What the pack is
A look-only DS carries a brand's tokens (colour/type/shape) and inherits the
official (Verge) component corpus. gov.br is kind = full: beyond its imported
token set (USWDS blue-warm #1351B4, Rawline/Raleway, 5-tier grid) it provides
federal-specific components that have no Verge equivalent — they encode the
Brazilian federal government's identity and legal/accessibility obligations. Those
are this pack. They populate the govbr manifest's [components].provides
(koder.designsystem.toml) as they land.
This is the structural-differentiation half of design-RFC-014 F2c: colour is a token override (the M3-parity components re-skin via govbr's tokens); these are components that are structurally gov.br, not the same widget re-coloured.
R2 — The federal components
| Component | Contract | Federal specificity |
|---|---|---|
| Federal header (barra gov.br) | components/govbr-federal-header.kmd | The mandatory top government bar (federal signature, org identity, the accessibility/contrast + VLibras access), above the app's own top bar |
| Federal footer | footer.kmd (institutional variant) | The federal signature block, org/ministry identity, legal links — the institutional footer variant bound to the federal signature |
| "Entrar com gov.br" sign-in | components/govbr-signin.kmd (button + seal surface) + auth/oauth-client-external-providers.kmd (gov.br = an external OIDC provider: Login Único) | The official Login-Único button + the seals-of-trust (selo de confiabilidade) the flow returns; the OAuth/OIDC contract is the external-provider spec, NOT re-specified here |
| LGPD cookiebar | cookie-consent.kmd | The consent surface bound to LGPD (Lei 13.709) categories + the gov.br copy/legal basis |
| eMAG skip-link | skip-link.kmd | Bypass-blocks required by eMAG 3.1 (the BR accessibility layer, WCAG 2.4.1 + gov.br) |
R3 — Federal-only surfaces (now in dedicated specs)
The two surfaces with no existing Koder component now have their own component specs
(the interim contract that lived here is retired — stack#449):
components/govbr-federal-header.kmd and components/govbr-signin.kmd. The summary
below stays as the pack-level orientation; the normative detail (anatomy, R-rules,
Requirement/Scenario, a11y) lives in each dedicated spec.
- Federal header / barra gov.br — a full-width bar above the product chrome
carrying the federal signature (the gov.br wordmark linking to gov.br), the hosting
org's identity, and the standard federal access affordances (accessibility/contrast
shortcuts, VLibras). It is additive to the app's own top bar
(
app-layout/topbar-placement.kmd), never a replacement; it sits above it. - "Entrar com gov.br" button — the official Login-Único entry button (its exact
label, seal, and colour are fixed by the federal brand). Pressing it starts the
external-provider OIDC flow (
oauth-client-external-providers.kmd, gov.br as the provider) and, on return, surfaces the account's reliability seal (bronze/silver/gold — selo de confiabilidade) where the caller needs the assurance level. This spec fixes the BUTTON + seal surface; the token exchange, scopes, and storage are the external-provider spec's, not re-specified here.
R4 — Manifest binding
The pack's components are listed in the govbr manifest's [components].provides
(slugs of specs/components/ + these federal specs) per manifest.kmd — that is what
makes the govbr DS kind = full and switchable to its structurally-distinct corpus
(design-RFC-014 F2b/F2c). The list is populated incrementally as each component's
spec + Kroma impl lands (the govbr-ds-parity epic); a component is only declared
provides once it genuinely renders under the govbr DS.
R5 — Accessibility: eMAG 3.1
Every federal surface meets the govbr manifest's a11y profile — WCAG 2.2 AA +
eMAG 3.1 (the Brazilian government accessibility model, a BR layer over WCAG) +
forced-colors. The skip-link (eMAG bypass-blocks) and VLibras access (R3) are the
eMAG-specific affordances; the full eMAG profile is stack#419 (govbr a11y profile).
R6 — Delegation & follow-ups
This pack spec delegates, does not duplicate: the cookiebar's consent mechanics
live in cookie-consent.kmd, the skip-link's in skip-link.kmd, the footer's in
footer.kmd, the sign-in's OAuth in oauth-client-external-providers.kmd, and the two
federal-only surfaces in components/govbr-federal-header.kmd +
components/govbr-signin.kmd. stack#449: the two dedicated specs have landed
(the interim R3 contract is retired); the Kroma widgets for both remain (cargo
verified off-laptop). The eMAG profile is stack#419.
Não-escopo
- The look-only M3-parity components (accordion, breadcrumb, pagination, buttons, …) — they re-skin via govbr's tokens, they are not federal overrides.
- The gov.br token import itself (
tokens.dtcg.json/ overlay) — govbr#219 / the DS manifest, not this pack. - The Kroma widget implementations — tracked per component (kroma backlog).
- The Login-Único OAuth/OIDC contract —
oauth-client-external-providers.kmd.
Referências
meta/docs/stack/specs/design-system/manifest.kmdmeta/docs/stack/rfcs/design-RFC-014-design-systems-framework.kmdmeta/docs/stack/specs/components/cookie-consent.kmdmeta/docs/stack/specs/components/skip-link.kmdmeta/docs/stack/specs/components/footer.kmdmeta/docs/stack/specs/auth/oauth-client-external-providers.kmdtools/design-gen/design-systems/govbr/koder.designsystem.toml