How SGDS names design tokens — the four-part pattern, the principles behind it, and worked examples for each token type.
SGDS tokens are named in four ordered parts: namespace, object, base, and modifier. Each part narrows the meaning, so a token name reads from the broadest system context down to a specific design attribute. The legend below names each position; the worked example shows how the parts combine for a real token.
The system name: sgds for the Singapore Government Design System.
The thing the token applies to: a group like action, a component like btn, or a context like form.
The design element or property: the role (primary, danger), the property (bg, border, padding), or the concept (heading, body).
The design attribute: emphasis (default, muted, subtle, emphasis), state (hover, focus), or scale (md, lg, 100, 200).
Each token type uses the four positions slightly differently. The diagrams below show how primitive, semantic, and component tokens combine namespace, object, base, and modifier.
For primitive tokens, the name usually identifies a foundation scale and a step:
Names a role, the property it controls, and the emphasis level.
Adds a context segment, such as form, when the decision is scoped to a specific surface.
Names a component, then the role, property, and emphasis scoped to that component.
We follow five principles when naming SGDS tokens. They explain the choices behind every name shown above.
danger, warning, success, surface, border-color, heading, and body.form or btn, only when the decision is genuinely scoped.For the full picture, the chart below maps every position, segment, and modifier the system can produce. Use it as the reference whenever a new token name needs to slot into the system.
The button-with-hover-state example below traces every position through a real token name, from primitive to component.
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.