Radius
Radius tokens are split 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 radius 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.
The radius system is based on a 4px grid, which means that all radius values are multiples of 4. This allows for a consistent and predictable layout across the design system.
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 | Web | Example |
|---|---|---|---|---|
| none | 0dp | Zeta.of(context).radius.none | --radius-none | |
| minimal | 4dp | Zeta.of(context).radius.minimal | --radius-minimal | |
| rounded | 8dp | Zeta.of(context).radius.rounded | --radius-rounded | |
| large | 16dp | Zeta.of(context).radius.large | --radius-large | |
| xl | 24dp | Zeta.of(context).radius.xl | --radius-xl | |
| full | 360dp | Zeta.of(context).radius.full | --radius-full |
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 | Web | Example |
|---|---|---|---|---|
| 0 | 0dp | Zeta.of(context).radius.0 | --radius-0 | |
| s | 4dp | Zeta.of(context).radius.s | --radius-s | |
| m | 8dp | Zeta.of(context).radius.m | --radius-m | |
| l | 16dp | Zeta.of(context).radius.l | --radius-l | |
| xl | 24dp | Zeta.of(context).radius.xl | --radius-xl | |
| 2xl | 32dp | Zeta.of(context).radius.2xl | --radius-2xl | |
| 3xl | 128dp | Zeta.of(context).radius.3xl | --radius-3xl | |
| 4xl | 360dp | Zeta.of(context).radius.4xl | --radius-4xl |