Info

Why "Nebula"

The length scale defines the set of consistent values used for spacing and dimensions across the system. It is used in layout-related props such as logical sizes as well as margin, padding and gap props. It replaces arbitrary CSS values with a predictable scale, making layouts easier to reason about and maintain. The scale follows a progressive step pattern, allowing small adjustments at lower values and larger jumps for layout-level spacing. Each length token is also exposed as a CSS custom property, allowing the scale to be referenced directly in custom styles and external content.

T-shirt sizeCSS token nameResolved value

3xs

--neb-length-3xs

2px

2xs

--neb-length-2xs

4px

xs

--neb-length-xs

8px

sm

--neb-length-sm

16px

md

--neb-length-md

24px

lg

--neb-length-lg

32px

xl

--neb-length-xl

48px

2xl

--neb-length-2xl

64px

3xl

--neb-length-3xl

96px

4xl

--neb-length-4xl

128px

Scale values can be used anywhere length props are accepted.

<Box padding="md" /><Box margin="lg" /><Box inlineSize="2xl" />

Custom CSS values are still supported.

<Box padding="20px" /><Box inlineSize="50%" />