Espaçamentos
Tabela de espaçamentos usados em toda a extensão do projeto
Spacing
Spacing é uma escala definida pelo projeto para ter uma consistência e padrão aplicados em design e engenharia garantindo um bom visual e padrão.
Escala de espaçamento com tokens e valores
Nosso sistema de espaçamento é construído em um incremento de base de
16px, com fatores de 4px e 8px. Caso específicos usamos valores fora desse sistema como os valores 0px, 1px e 2px.
| Nome do token | Valor (px) |
|---|---|
| $spacing-0 | 0 |
| $spacing-1 | 1 |
| $spacing-2 | 2 |
| $spacing-4 | 4 |
| $spacing-8 | 8 |
| $spacing-12 | 12 |
| $spacing-16 | 16 |
| $spacing-20 | 20 |
| $spacing-24 | 24 |
| $spacing-32 | 32 |
| $spacing-40 | 40 |
| $spacing-48 | 48 |
| $spacing-56 | 56 |
| $spacing-64 | 64 |
| $spacing-72 | 72 |
| $spacing-80 | 80 |
| $spacing-88 | 88 |
| $spacing-96 | 96 |
| $spacing-112 | 112 |
| $spacing-120 | 120 |
| $spacing-128 | 128 |
| $spacing-160 | 160 |
| $spacing-256 | 256 |
| $spacing-320 | 320 |
| $spacing-640 | 640 |
| $spacing-720 | 720 |
| $spacing-1024 | 1024 |
| $spacing-1280 | 1280 |
| $spacing-1440 | 1440 |
Opacity
Spacing é uma escala definida pelo projeto para ter uma consistência e padrão aplicados em design e engenharia garantindo um bom visual e padrão.
Escala de espaçamento com tokens e valores
| Nome do token | Inteiro | 0-1 |
|---|---|---|
| $opacity-0 | 0 | 0 |
| $opacity-5 | 5 | 0.05 |
| $opacity-10 | 10 | 0.1 |
| $opacity-20 | 20 | 0.2 |
| $opacity-25 | 25 | 0.25 |
| $opacity-30 | 30 | 0.3 |
| $opacity-40 | 40 | 0.4 |
| $opacity-50 | 50 | 0.5 |
| $opacity-60 | 60 | 0.6 |
| $opacity-70 | 70 | 0.7 |
| $opacity-75 | 75 | 0.75 |
| $opacity-80 | 80 | 0.8 |
| $opacity-90 | 90 | 0.9 |
| $opacity-100 | 100 | 1 |
Tipografia
Tabela de espaçamentos usados na tipografia do projeto
Font
Spacing é uma escala definida pelo projeto para ter uma consistência e padrão aplicados em design e engenharia garantindo um bom visual e padrão.
Family
| Nome do token | Valor |
|---|---|
| $font-heading | Avenir Next LT Pro |
| $font-body | Open Sans |