Style Guide

Referência visual dos tokens e componentes do GOVBR-DS. Cada componente lista a nomenclatura de variante (para espelhar no Figma) e as medidas exatas em px — altura, padding interno, raio, borda e largura mínima.

§ cores

1. Paleta de cores

Cada cor mostra o token semântico e o valor HEX oficial. Espelhe no Figma como Color Styles com o mesmo caminho (ex.: Primary/Default).

Primary — Azul institucional

Primary/pastel-01

#c5d4eb

Primary/pastel-02

#dbe8fb

Primary/lighten-01

#2670e8

Primary/lighten-02

#5992ed

Primary/default

#1351b4

Primary/darken-01

#0c326f

Primary/darken-02

#071d41

Secondary — Escala de cinza

Secondary/01

#ffffff

Secondary/02

#f8f8f8

Secondary/03

#ededed

Secondary/04

#cccccc

Secondary/05

#9e9d9d

Secondary/06

#888888

Secondary/07

#555555

Secondary/08

#333333

Secondary/09

#000000

Semantic — Feedback

Semantic/success

#168821

Semantic/successBg

#e3f5e1

Semantic/danger

#e52207

Semantic/dangerBg

#fdb8ae

Semantic/dangerDarken

#b50909

Semantic/warning

#ffcd07

Semantic/warningBg

#fff5c2

Semantic/info

#1351b4

Semantic/infoBg

#d4e5ff

Semantic/highlight

#268744

Support

Support/10

#ff8c00

Support/11

#fdf5e6

Support/01

#36a191

Support/02

#f2e317

Support/03

#db4800

Support/04

#a26739

Support/05

#40e0d0

Support/06

#48cbeb

Support/07

#c72487

Support/08

#63007f

Support/09

#f08080

Interaction States

State/Focus

#eabd2e

State/Active

#0c326f

State/Selected

#1351b4

State/Visited

#0c326f

hover-opacity: 0.16 · pressed-opacity: 0.45 · disabled-opacity: 0.45

§ tipografia

2. Tipografia

Fonte: "Rawline", "Raleway", sans-serif. Base 14px, razão modular 1.2.

Token	rem	Preview
down-03	0.5079rem	Rawline — Aa
down-02	0.6086rem	Rawline — Aa
down-01	0.7300rem	Rawline — Aa
base	0.875rem	Rawline — Aa
up-01	1.05rem	Rawline — Aa
up-02	1.26rem	Rawline — Aa
up-03	1.5119rem	Rawline — Aa
up-04	1.815rem	Rawline — Aa
up-05	2.1769rem	Rawline — Aa
up-06	2.6125rem	Rawline — Aa
up-07	3.135rem	Rawline — Aa
up-08	3.7625rem	Rawline — Aa
up-09	4.515rem	Rawline — Aa

Papéis semânticos

h1Governo Federal do Brasilup-06 · bold · lh-low

h2Governo Federal do Brasilup-05 · bold · lh-low

h3Governo Federal do Brasilup-04 · semibold · lh-low

h4Governo Federal do Brasilup-03 · semibold · lh-medium

h5Governo Federal do Brasilup-02 · medium · lh-medium

h6Governo Federal do Brasilup-01 · medium · lh-medium

bodyGoverno Federal do Brasilbase · regular · lh-medium

captionGoverno Federal do Brasildown-01 · regular · lh-high

Pesos

Aa Rawline

thin · 100

Aa Rawline

extralight · 200

Aa Rawline

light · 300

Aa Rawline

regular · 400

Aa Rawline

medium · 500

Aa Rawline

semibold · 600

Aa Rawline

bold · 700

Aa Rawline

extrabold · 800

Aa Rawline

black · 900

§ espacamento

3. Espaçamento

Escala base 8px. Passos 'h' (half) adicionam +4px sobre o passo anterior.

default0px

half4px

base8px

baseh12px

2x16px

2xh20px

3x24px

3xh28px

4x32px

4xh36px

5x40px

5xh44px

6x48px

6xh52px

7x56px

7xh60px

8x64px

8xh68px

9x72px

9xh76px

10x80px

10xh84px

§ raios

4. Raios, bordas e opacidade

Radius

none

4px

8px

16px

pill

999em

Border width

none

1px

2px

4px

Opacity

0.16

0.3

0.45

0.65

0.85

§ sombras

5. Sombras e elevação

sm0 1px 6px 0 rgba(0,0,0,0.16)

md0 3px 6px 0 rgba(0,0,0,0.16)

lg0 6px 6px 0 rgba(0,0,0,0.16)

xl0 9px 6px 0 rgba(0,0,0,0.16)

sm-up0 -1px 6px 0 rgba(0,0,0,0.16)

md-up0 -3px 6px 0 rgba(0,0,0,0.16)

lg-up0 -6px 6px 0 rgba(0,0,0,0.16)

xl-up0 -9px 6px 0 rgba(0,0,0,0.16)

sm-insetinset 0 1px 6px 0 rgba(0,0,0,0.16)

md-insetinset 0 3px 6px 0 rgba(0,0,0,0.16)

lg-insetinset 0 6px 6px 0 rgba(0,0,0,0.16)

xl-insetinset 0 9px 6px 0 rgba(0,0,0,0.16)

§ grid

6. Breakpoints e grid

Breakpoint	Min width
xs	0px
sm	576px
md	992px
lg	1280px
xl	1600px

§ botoes

7. Button

Variantes: Primary, Secondary, Tertiary, Danger, Inverted. Estados: Default, Hover, Focus, Active, Disabled, Loading.

Button/Primary/Default · Hover · Focus · Active · Disabled · Loading

Height (small): 32
Height (medium): 44
Height (large): 56
Padding X (sm/md/lg): 12 / 24 / 32
Gap ícone/label: 8
Border radius: 999 (pill)
Font: 14 · SemiBold · uppercase
Focus outline: 2px dashed #eabd2e (offset 2)

Button/Secondary/* (outline)

Border: 2px solid current
Height (md): 44
Padding X: 24
Radius: 999 (pill)

Button/Tertiary/* (ghost)

Height (md): 44
Padding X: 24
Radius: 999 (pill)

Button/Danger/*

Height (md): 44
Padding X: 24
Background: #e52207

Button/Sizes (Small · Medium · Large)

Small — height / px X / font: 32 / 12 / 11.66
Medium — height / px X / font: 44 / 24 / 14
Large — height / px X / font: 56 / 32 / 16.8

§ inputs

8. Input & Textarea

Estados: Default, Focus, Filled, Error, Success, Disabled.

Input/Default · Focus · Error · Success · Disabled

Nome

CPF

E-mail

E-mail inválido

Usuário

Disponível

Bloqueado

Height: 44
Padding X: 12
Padding Y: 8
Border: 1px solid #9e9d9d
Radius: 4 (sm)
Font size: 14
Label gap: 4
Feedback gap: 4

Textarea/Default

Mensagem

Min height: 96
Padding X: 12
Padding Y: 8
Radius: 4 (sm)

§ select

10. Select

Select/Default · Disabled

Bloqueado

Height: 44
Padding X: 12
Radius: 4 (sm)
Border: 1px solid #9e9d9d

§ tags

11. Tag & Badge

Tag/Info · Success · Warning · Danger · Neutral

NeutralInfoSuccessWarningDanger

Height: auto
Padding X: 12
Padding Y: 4
Radius: 999 (pill)
Font: 11.66 · Bold · uppercase

Badge/Default · Danger

399+

Size: 20 × 20 (min)
Radius: 999 (pill)
Font: 9.72 · Bold

§ messages

12. Message / Alert

Message/Info · Success · Warning · Danger

Informação

Texto informativo.

Sucesso

Operação concluída.

Atenção

Verifique os dados.

Erro

Falha ao enviar.

Padding: 16
Radius: 4 (sm)
Icon size: 20 × 20
Border left: 4px

§ cards

13. Card

Card/Default · Elevated

Card padrão

Consumindo tokens de radius, spacing e shadow.

Card elevado

Sombra maior para hierarquia.

Padding: 24
Radius: 8 (md)
Border: 1px solid #cccccc
Shadow: sm / md

§ tabs

14. Tabs & Accordion

Tabs/Trigger/Default · Active · Focus

Aba geral

Trigger height: 44
Padding X: 16
Underline: 3px primary-default

Accordion/Item/Collapsed · Expanded

Você precisa de conta gov.br nível prata ou ouro.

Trigger height: 56 (min)
Padding X: 16
Border bottom: 1px #cccccc

§ paginacao

15. Pagination

Pagination/Item/Default · Active · Disabled

Item size: 40 × 40
Radius: 4 (sm)
Gap: 4

§ figma

Nomenclatura de variantes para o Figma

Use exatamente estes caminhos ao criar Component Sets no Figma — cada nível vira uma Property.

Button
  ├─ Variant:  Primary | Secondary | Tertiary | Danger | Inverted
  ├─ Size:     Small | Medium | Large
  └─ State:    Default | Hover | Focus | Active | Disabled | Loading

Input / Textarea
  └─ State:    Default | Focus | Filled | Error | Success | Disabled

Checkbox
  └─ State:    Unchecked | Checked | Indeterminate | Disabled

Radio
  └─ State:    Unchecked | Checked | Disabled

Switch
  └─ State:    Off | On | Disabled

Tag
  └─ Variant:  Neutral | Info | Success | Warning | Danger

Message
  └─ Variant:  Info | Success | Warning | Danger

Card
  └─ Variant:  Default | Elevated

Tabs/Trigger
  └─ State:    Default | Active | Hover | Focus | Disabled

Accordion/Item
  └─ State:    Collapsed | Expanded

Pagination/Item
  └─ State:    Default | Active | Disabled

Avatar
  └─ Size:     sm | md | lg | xl

Style Guide

1. Paleta de cores

Primary — Azul institucional

Secondary — Escala de cinza

Semantic — Feedback

Support

Interaction States

2. Tipografia

Papéis semânticos

Pesos

3. Espaçamento

4. Raios, bordas e opacidade

Radius

Border width

Opacity

5. Sombras e elevação

6. Breakpoints e grid

7. Button

8. Input & Textarea

9. Checkbox, Radio, Switch

10. Select

11. Tag & Badge

12. Message / Alert

13. Card

Card padrão

Card elevado

14. Tabs & Accordion

15. Pagination

16. Tooltip & Avatar

Nomenclatura de variantes para o Figma

Primary — Azul institucional

Secondary — Escala de cinza

Semantic — Feedback

Support

Interaction States

Papéis semânticos

Pesos

Radius

Border width

Opacity

Card padrão

Card elevado

Como acessar o serviço?

Prazo de resposta