QGDS Scales

QGDS Scales is an interactive reference tool for exploring the relationships between the three core token scales in the Queensland Government Design System: Grid, Size, and Spacing. Across the models in this tool, Grid remains the common denominator. Size and Spacing either inherit from Grid through proportional formulas or are projected directly from Grid so alignment can be tested, visualised and compared.

Scale relationship

Grid is the common reference across all three models.
Export chart
Every Size and Spacing value is a Grid value. Size starts with steps twice as large as Grid (4px vs 2px) and doubles at half the rate, so each Size step lands on every second Grid tick. Spacing starts with steps four times as large as Grid (8px vs 2px) and doubles four times as fast, so each Spacing step lands on every fourth Grid tick.
Common denominator
Grid
S=0, a=2, b=2, c=32
The reference scale. Its values include the common measurements found across typography, element sizing, spacing, and layout. Every Size and Spacing value points back to a Grid value, making Grid the shared foundation across the system.
Element sizing
Size
S=0, a=4, b=2, c=16
Its steps are twice as large as Grid (4px vs 2px) and it doubles twice as often (every 16 steps vs every 32). These two values cancel out so that every Size step lands on every second Grid tick. Larger elements need visually distinct steps; small differences at large sizes are imperceptible.
Spatial hierarchy
Spacing
S=0, a=8, b=2, c=8
Its steps are four times as large as Grid (8px vs 2px) and it doubles four times as often (every 8 steps vs every 32). These two values cancel out so that every Spacing step lands on every fourth Grid tick. Spatial relationships need strong contrast to clearly communicate hierarchy.

Scale structure

Size and Spacing are anchored to Grid in every model shown here. In the Align and Hold models they follow proportional formula families. In the Index model they select curated low-end Grid values first, then widen by stepping through Grid more aggressively over time. The stride map makes those relationships visible, with each dot placed at the Grid value it shares. Drag the slider to inspect any step and read the exact Grid value for each scale.

Doubling intervals: Grid c=32 Size c=16 Spacing c=8 ratio 4 : 2 : 1
Size, above ruler
Grid, ruler
Spacing, below ruler
Not on Grid
4
Export chart

Scale explorer

Adjust the active model and its variables to see the effect in real time. Use the explorer to audit token values, test how parameter changes affect alignment, compare formula families against direct Grid projection, export reference data for spreadsheets, or communicate the underlying structure of the system to stakeholders and engineers.

Active model configuration

Select the mathematical approach used to generate the scales.
Current default
Exact alignment model

Every Size and Spacing value is guaranteed to be a Grid value. Size lands on every second Grid tick, Spacing on every fourth. This makes token inheritance simple and predictable: any Size or Spacing token can reference a Grid token directly with no arithmetic.

Sₙ = Sₙ₋₁ + a × b^⌊(n−1)/c⌋

S = start value, a = base increment, b = growth factor, c = interval.
Values highlighted in blue have changed from defaults.

  • Best when strict Grid alignment and predictable token relationships are the priority.
  • Grid already produces the dense base sequence that Size and Spacing reference.
  • Size and Spacing are tuned by adjusting a and c within the same proportional family.

Grid

start value
base increment
growth factor
interval
nvalue (px)inc (px)

Size

start value
base increment
growth factor
interval
Projection Variables
curated preset (comma-separated grid indices)
After preset, advances via widening index strides:
stride
interval
hold
nvalue (px)inc (px)

Spacing

start value
base increment
growth factor
interval
Projection Variables
curated preset (comma-separated grid indices)
After preset, advances via widening index strides:
stride
interval
hold
nvalue (px)inc (px)

n = step number    value = cumulative scale value at step n    inc = increment added at step n     

Generated by Jermold Compton.
Senior UI and UX Designer, Queensland Government