Skip to content

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.

When this spec applies

Primary triggers

All triggers

Specification body

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

ComponentContractFederal specificity
Federal header (barra gov.br)components/govbr-federal-header.kmdThe mandatory top government bar (federal signature, org identity, the accessibility/contrast + VLibras access), above the app's own top bar
Federal footerfooter.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-incomponents/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 cookiebarcookie-consent.kmdThe consent surface bound to LGPD (Lei 13.709) categories + the gov.br copy/legal basis
eMAG skip-linkskip-link.kmdBypass-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.

References