Handling custom spacing or sizing outside the scale

Most spacing and sizing systems rely on predictable increments. For example, a scale built on an 8px base often grows in clean steps such as 8, 16, 24, 32, 40, 48, 64, 80, and so on. These values stay aligned with the base unit and help keep components visually consistent. In practice, though, some elements need a size that sits between these regular steps. Maybe a component looks too cramped at 256 but too loose at 320. When that happens, a custom value can be added without breaking the entire system.

One way to handle this is to create a separate variable with an irregular numeric name. Instead of following the main sequence like 600, 700, 800, the custom value can use a number that stands apart, such as 725 for a value like 300. This naming makes it immediately clear that the value does not belong to the normal scale. It still solves the design need, but it does not confuse designers into thinking it is part of the standard progression. However, this should be done carefully, since frequent exceptions are one of the fastest ways a design system can lose structure and clarity.

Custom values work best when they have functional or irregular numeric names. A functional name, such as card-media-height or table-row-gap, explains exactly where the value is meant to be used. An irregular numeric name signals that the value is a one-off and should not be reused casually. Both approaches protect the structure of the main scale while giving designers enough flexibility to fine-tune layouts.

If a custom value ends up being useful across multiple components, it can be reviewed and added to the official scale later.