Skip to content

Update space token names design foundations #6945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SeanyB merged 3 commits into from
Aug 11, 2022
Merged

Update space token names design foundations #6945

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81bed84
Updating space token names design foundations
Aug 11, 2022
100dfde
Correcting a missing size-space switch
Aug 11, 2022
a68a737
update polaris space unit image
adrianefong Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 25 additions & 23 deletions polaris.shopify.com/content/foundations/design/space/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,36 +55,38 @@ Merchants experience pages, space should feel like a small part of a bigger syst

## Spacing tools

### Polaris size units
### Polaris space units

All measurements used across the experience (space, width, height, etc) must reference Polaris size units to guarantee visual consistency and balance.
All measurements used across the experience (space, width, height, etc) must reference Polaris space units to guarantee visual consistency and balance.

<div class="punit-img">
<img src="/images/foundations/design/space/spacing-polaris-units.svg" alt="A visual example of a polaris unit">
<img src="/images/foundations/design/space/spacing-polaris-units@2x.png" alt="A visual example of a polaris unit">
</div>

### Size scale

| Value | Size | px value | rem value |
| ------------ | ------------ | -------- | --------- |
| 0 | --p-size-0 | 0 | 0 |
| 0.25 | --p-size-025 | 1 | 0.0625 |
| 0.5 | --p-size-05 | 2 | 0.03125 |
| **1 (base)** | --p-size-1 | 4 | 0.25 |
| 2 | --p-size-2 | 8 | 0.5 |
| 3 | --p-size-3 | 12 | 0.75 |
| 4 | --p-size-4 | 16 | 1 |
| 5 | --p-size-5 | 20 | 1.25 |
| 6 | --p-size-6 | 24 | 1.5 |
| 8 | --p-size-8 | 32 | 2 |
| 10 | --p-size-10 | 40 | 2.5 |
| 12 | --p-size-12 | 48 | 3 |
| 16 | --p-size-16 | 64 | 4 |
| 24 | --p-size-24 | 96 | 6 |
| 32 | --p-size-32 | 128 | 8 |
### Space scale

| Value | Space | px value | rem value |
| ------------ | ------------- | -------- | --------- |
| 0 | --p-space-0 | 0 | 0 |
| 0.25 | --p-space-025 | 1 | 0.0625 |
| 0.5 | --p-space-05 | 2 | 0.125 |
| **1 (base)** | --p-space-1 | 4 | 0.25 |
| 2 | --p-space-2 | 8 | 0.5 |
| 3 | --p-space-3 | 12 | 0.75 |
| 4 | --p-space-4 | 16 | 1 |
| 5 | --p-space-5 | 20 | 1.25 |
| 6 | --p-space-6 | 24 | 1.5 |
| 8 | --p-space-8 | 32 | 2 |
| 10 | --p-space-10 | 40 | 2.5 |
| 12 | --p-space-12 | 48 | 3 |
| 16 | --p-space-16 | 64 | 4 |
| 20 | --p-space-20 | 80 | 5 |
| 24 | --p-space-24 | 96 | 6 |
| 28 | --p-space-28 | 112 | 7 |
| 32 | --p-space-32 | 128 | 8 |

Polaris units are more dense at a small scale, and less so as dimensions increase.
This is intentional to provide a good range to work with, but you must be deliberate in the units you decide to pair. We encourage designing with rhythm and contrast to achieve clear visual hierarchy. This often means skipping at least one unit in the scale when you’re pairing different sizes.
This is intentional to provide a good range to work with, but you must be deliberate in the units you decide to pair. We encourage designing with rhythm and contrast to achieve clear visual hierarchy. This often means skipping at least one unit in the scale when you’re pairing different spaces.

![Examples of different variations of spacing](/images/foundations/design/space/[email protected])

Expand Down
Loading