Referência visual dos 6 breakpoints, da área útil (container) e da grade de colunas sugerida por faixa. Apenas para ilustração — não importado pelo squad nem aplicado aos projetos.
| Token | Viewport | Container ativo | Padding lateral | Área útil | Grid sugerido |
|---|---|---|---|---|---|
--bp-xs | 360px | fluido | 16px | 328px | 4 col / gutter 16 |
--bp-sm | 480px | fluido | 16px | 448px | 4 col / gutter 16 |
--bp-md | 768px | fluido | ~31px | ~706px | 8 col / gutter 20 |
--bp-lg | 1024px | fluido | 32px | 960px | 12 col / gutter 24 |
--bp-xl | 1280px | --container-max 1200px | 32px ext. | 1200px | 12 col / gutter 24 |
--bp-2xl | 1536px | --container-max 1200px | 168px ext. | 1200px | 12 col / gutter 24 |
Padding lateral = clamp(16px, 4vw, 32px). Acima de 1264px o container fica centralizado (1200px) e o restante vira margem visual.
Containers extras: --container-narrow 720px (artigos/forms), --container-wide 1440px (hero fullbleed).
| Token | Largura | Uso recomendado |
|---|---|---|
--container-narrow | 720px | Artigos longos, forms simples, blog post |
--container-max | 1200px | Padrão — landing pages, dashboards, marketing |
--container-wide | 1440px | Hero fullbleed, hero com mídia ampla |
O DS v4.1 não impõe um grid system fixo (tipo Bootstrap). Os componentes usam CSS Grid e Flexbox próprios. As colunas 4/8/12 acima são apenas referência mental para o operador desenhar layouts coerentes. O .feature-grid já implementa 1→2→3 colunas; o resto fica a critério da seção.