Big topic - "t-shirt" spacing naming and granularity

[taysea]

These tokens are the "t-shirt" sized spacing tokens

Deliverables:

• [x] Provide a proposal for the "spacing" scale
  • [x] Use case examples
  • [x] Audit of other key systems (Polaris, Primer, Material, ..others?) so assess if there's a common number of steps in the scale
  • [x] Written rationale for why additional steps will improve the system: https://github.com/grommet/hpe-design-system/issues/3906#issuecomment-2470673348

Subtasks:

• https://github.com/grommet/hpe-design-system/issues/3905
• https://github.com/grommet/hpe-design-system/issues/3912

[taysea]

Examples where spacing granularity isn't enough:

• https://www.figma.com/design/mJ8d7bv5I8zgfo8BTJOpUO?node-id=38300-8198#897234406

[oliverHPE]

After a round of discovery which involved an internal audit, external audit and use-case audit, we have made the following conclusions:

Semantic spacing tokens have many use-cases. For example, spacing for page layouts (For different screen sizes and different levels of nesting), component compositions (cards, layers, etc.), and components. Furthermore, semantic tokens need to support a wide array of services, products and types of services, e.g. marketing & product.

The external audit illustrates that the majority of other systems have a more granular scale.

The outcome of the internal audit is that: Smaller steps are used than what we offer Larger steps are used than what we offer

Considering the internal and external audits and in addition the wide array of use-cases and service types, suggests we require a more granular spacing scale with further steps.

Additional steps are needed towards the smaller end, specifically between 12-48. Additional larger steps are needed from 48px on.

Exact values need to be determined.