Layout
System Elements
Elementos globais: focus ring, scrollbar, overlay, elevação e cursores.
Overview
Demonstração real e interativa de System Elements nas larguras desktop, tablet e mobile.
Focus Ring
Scrollbar
Linha de conteúdo 1
Linha de conteúdo 2
Linha de conteúdo 3
Linha de conteúdo 4
Linha de conteúdo 5
Linha de conteúdo 6
Linha de conteúdo 7
Linha de conteúdo 8
Linha de conteúdo 9
Linha de conteúdo 10
Elevation
Overlay & Backdrop
Cursor States
Drag & Drop
Playground
Altere as propriedades e veja o componente atualizar em tempo real.
Focus Ring
Scrollbar
Linha de conteúdo 1
Linha de conteúdo 2
Linha de conteúdo 3
Linha de conteúdo 4
Linha de conteúdo 5
Linha de conteúdo 6
Linha de conteúdo 7
Linha de conteúdo 8
Linha de conteúdo 9
Linha de conteúdo 10
Elevation
Overlay & Backdrop
Cursor States
Drag & Drop
Superfície
Densidade
Largura
Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.
States
Todos os estados exibidos simultaneamente para facilitar a comparação.
Default
Hover
Feedback imediato
Focus
Anel de foco visível
Disabled
opacity 60%
Usage
Critérios de escolha e boas práticas.
When to use
- Definir comportamentos globais compartilhados por todos os componentes.
When not to use
- Customizações pontuais de uma tela específica.
Reutilize os tokens globais de foco, elevação e overlay.
Não remova o focus ring nem crie sombras fora da escala definida.
Accessibility
Requisitos obrigatórios para conformidade WCAG 2.1 AA.
- Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
- Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
- Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
- Área mínima de toque de 44x44px em dispositivos móveis.
- Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.
Specifications
Valores de referência para implementação, sempre baseados em tokens.
| Propriedade | Valor | Token |
|---|---|---|
| Focus ring | 2px solid + 2px offset | |
| Scrollbar | 8px, thumb border-strong | |
| Overlay | Neutral Blue 900 60% | |
| Elevation | xs / sm / md / lg |