Design tokens are shared names for the visual choices in SGDS. They cover things like colours, text sizes, spacing, border radius, and motion. When a team uses a token, they use the same design decision everywhere without needing to know or copy the raw value behind it.
Token architecture shows how tokens are organised. Token naming shows how each token name reads.
SGDS uses tokens to keep products consistent as the system grows. Tokens give design and code a shared way to refer to visual decisions, such as colour, spacing, typography, and shape. Instead of recreating these decisions in each product or component, teams use the same token names across the system.
This makes tokens useful in a few practical ways.
Easier system updates
When a token changes, every component that uses it can receive the update. This helps SGDS improve themes, accessibility, and brand styles without updating each component by hand.
Clearer design intent
Tokens make each part of a component easier to understand. A button may look simple, but its fill, text colour, typography, padding, border, and shape are all controlled by named decisions.
Theme switching without component changes
A semantic token can resolve to different primitive colours in day and night themes. The component keeps the same token name, while the rendered value changes to suit the theme.
Responsive scaling
Typography is more than choosing a size. A heading also needs the right weight, line height, and letter spacing to feel clear and balanced.
SGDS stores these decisions as tokens so teams do not need to recreate them each time. Some typography tokens respond to screen size, helping the same heading stay proportional across mobile, tablet, and desktop.
Together, these qualities mean that improvements to SGDS reach every product that uses its tokens. If a colour value needs better contrast or a type scale needs refinement, updating the token once is enough — every component that uses it inherits the change without any local updates.