Spacing
The spacing system is based on a 4px grid, which means that all spacing values are multiples of 4. This allows for a consistent and predictable layout across the design system.
The spacing system is divided into two categories: primitives and semantics. The primitives are the base values that are used to create the semantic values. The semantic values are the ones that are used in the components.
The spacing system is designed to be flexible and adaptable, allowing for different use cases and design needs.
The values are defined in dp (density-independent pixels) to ensure that they are consistent across different screen sizes and resolutions.
Semantics
Semantic tokens are used to build components; they are what is used in the design system to build components, and what should be used in your projects.
| Name | Value | Flutter Value | Web Token | Example |
|---|---|---|---|---|
| None | 0dp | Zeta.of(context).spacing.none | --spacing-none | |
| Minimum | 4dp | Zeta.of(context).spacing.minimum | --spacing-minimum | |
| Small | 8dp | Zeta.of(context).spacing.small | --spacing-small | |
| Medium | 12dp | Zeta.of(context).spacing.medium | --spacing-medium | |
| Large | 16dp | Zeta.of(context).spacing.large | --spacing-large | |
| Xl | 20dp | Zeta.of(context).spacing.xl | --spacing-xl | |
| 2xl | 24dp | Zeta.of(context).spacing.xl_2 | --spacing-2xl | |
| 3xl | 28dp | Zeta.of(context).spacing.xl_3 | --spacing-3xl | |
| 4xl | 32dp | Zeta.of(context).spacing.xl_4 | --spacing-4xl | |
| 5xl | 36dp | Zeta.of(context).spacing.xl_5 | --spacing-5xl | |
| 6xl | 40dp | Zeta.of(context).spacing.xl_6 | --spacing-6xl | |
| 7xl | 44dp | Zeta.of(context).spacing.xl_7 | --spacing-7xl | |
| 8xl | 48dp | Zeta.of(context).spacing.xl_8 | --spacing-8xl | |
| 9xl | 64dp | Zeta.of(context).spacing.xl_9 | --spacing-9xl | |
| 10xl | 80dp | Zeta.of(context).spacing.xl_10 | --spacing-10xl | |
| 11xl | 96dp | Zeta.of(context).spacing.xl_11 | --spacing-11xl |
Primitives
These values are the base values that are used to create the semantic values.
We are showing them here for reference only; when using the design system, you should use the semantic values instead.
| Name | Value | Flutter Value | Web Token | Example |
|---|---|---|---|---|
| 0 | 0dp | Zeta.of(context).primitives.x0 | --spacing-0 | |
| 1 | 4dp | Zeta.of(context).primitives.x1 | --spacing-1 | |
| 2 | 8dp | Zeta.of(context).primitives.x2 | --spacing-2 | |
| 3 | 12dp | Zeta.of(context).primitives.x3 | --spacing-3 | |
| 4 | 16dp | Zeta.of(context).primitives.x4 | --spacing-4 | |
| 5 | 20dp | Zeta.of(context).primitives.x5 | --spacing-5 | |
| 6 | 24dp | Zeta.of(context).primitives.x6 | --spacing-6 | |
| 7 | 28dp | Zeta.of(context).primitives.x7 | --spacing-7 | |
| 8 | 32dp | Zeta.of(context).primitives.x8 | --spacing-8 | |
| 9 | 36dp | Zeta.of(context).primitives.x9 | --spacing-9 | |
| 10 | 40dp | Zeta.of(context).primitives.x10 | --spacing-10 | |
| 11 | 44dp | Zeta.of(context).primitives.x11 | --spacing-11 | |
| 12 | 48dp | Zeta.of(context).primitives.x12 | --spacing-12 | |
| 13 | 64dp | Zeta.of(context).primitives.x13 | --spacing-13 | |
| 14 | 80dp | Zeta.of(context).primitives.x14 | --spacing-14 | |
| 15 | 96dp | Zeta.of(context).primitives.x15 | --spacing-15 |