Design token diff

Showing changes between two snapshots of squareup.com

Before

Apr 10, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 10, 2026

After

May 7, 2026

+54 added−46 removed

Colors

+12 added−8 removed17 unchanged

Typography

+15 added−11 removed5 unchanged

+Square Sans Text VF, Square Sans Text, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, meiryo, ＭＳＰゴシック, sans-serif|20px|var(--font-weight-medium, 500)Square Sans Text Vf 4

+Square Sans Text VF, Square Sans Text, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, meiryo, ＭＳＰゴシック, sans-serif|14px|var(--font-weight-medium, 500)Square Sans Text Vf 7

+Square Sans Text VF, Square Sans Text, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, meiryo, ＭＳＰゴシック, sans-serif|12px|400Square Sans Text Vf 6

+Square Sans Text VF, Square Sans Text, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, meiryo, ＭＳＰゴシック, sans-serif|14px|400Square Sans Text Vf 9

+Monaco, Menlo, Ubuntu Mono, monospace|.9em|400Monaco

Spacing

+21 added−9 removed11 unchanged

+.3remSpace .3rem

+.5emSpace .5em

+.5remSpace .5rem

+7pxSpace 7px

+8pxSpace 8px

+9pxSpace 9px

+10pxSpace 10px

Border Radius

+3 added−11 removed13 unchanged

+5remRadius 5rem

+.5remRadius .5rem

+1remRadius 1rem

−var(--accessibility-focus-outline-border-radius)Radius var accessibility focus outline border radius

−var(--action-variant-button-border-radius)Radius var action variant button border radius

−var(--badge-border-radius)Radius var badge border radius

−var(--tooltip-popover-border-radius)

Shadows

+3 added−7 removed9 unchanged

+0px 1px 2px 0px rgba(0, 0, 0, .2),0px 0px 4px 0px rgba(0, 0, 0, .1)Shadow 1

+inset 0 0 0 1px #006affShadow 3

+0 0 0 1px #ccccccShadow 12

−var(--tooltip-popover-box-shadow-primary),var(--tooltip-popover-box-shadow-ambient)Shadow 1

−inset 0 0 0 1px var(--color-theme, #006aff)Shadow 3

−0 0 0 1px var(--color-form-field-default)Shadow 12

−inset 0 0 0 var(--form-field-inset-box-shadow-size) var(--form-field-inset-box-shadow-color)

Back to squareup.com archive

"Square Sans Display VF, Square Sans Display, Helvetica, Arial, Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳＰゴシック, sans-serif|16px|400

Square Sans Display Vf 2

+"Square Sans Text VF", "Square Sans Text", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳＰゴシック", sans-serif|14px|500Square Sans Text VF 14px / 500

+"Square Sans Text VF", "Square Sans Text", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳＰゴシック", sans-serif|16px|500Square Sans Text VF 16px / 500

+"Square Market", "Helvetica Neue", Helvetica, sans-serif|14px|400Square Market 14px / 400

+"Square Sans Text VF", "Square Sans Text", Helvetica, Arial, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, meiryo, "ＭＳＰゴシック", sans-serif|16px|500Square Sans Text VF 16px / 500

+"Square Sans Display VF", "Square Sans Display", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳＰゴシック", sans-serif|28px|500Square Sans Display VF 28px / 500

+"Square Market", "Helvetica Neue", Helvetica, sans-serif|14px|500Square Market 14px / 500

+"Square Market", "Helvetica Neue", Helvetica, sans-serif|16px|400Square Market 16px / 400

+"Square Sans Text VF", "Square Sans Text", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳＰゴシック", sans-serif|16px|600Square Sans Text VF 16px / 600

+"Square Market", "Helvetica Neue", Helvetica, sans-serif|24px|700Square Market 24px / 700

−var(--font-family-base)|var(--font-size-body)|var(--font-weight-regular)Body

−var(--font-family, var(--font-family-body))|var(--font-size, var(--font-size-body))|var(--font-weight, var(--font-weight-regular))P

−var(--font-family, var(--font-family-h1))|var(--font-size, var(--font-size-h1))|var(--font-weight, var(--font-weight-h1))H1

−var(--font-family, var(--font-family-h2))|var(--font-size, var(--font-size-h2))|var(--font-weight, var(--font-weight-h2))H2

−var(--font-family, var(--font-family-h3))|var(--font-size, var(--font-size-h3))|var(--font-weight, var(--font-weight-h3))H3

−var(--font-family, var(--font-family-h4))|var(--font-size, var(--font-size-h4))|var(--font-weight, var(--font-weight-h4))H4

−var(--font-family, var(--font-family-h5))|var(--font-size, var(--font-size-h5))|var(--font-weight, var(--font-weight-h5))H5

−var(--font-family, var(--font-family-h6))|var(--font-size, var(--font-size-h6))|var(--font-weight, var(--font-weight-h6))H6

−var(--font-family)|var(--font-size)|var(--font-weight)Where

−var(--font-family)|round(nearest,var(--font-size-factor, 1) * var(--font-size),1px)|var(--font-weight)RichTextFieldComponent Where H1

−var(--font-family-base)|100%|var(--font-weight-medium)TertiaryNav Svelte Kyz8oo

−clamp(0px,calc((var(--nav-width)Space clamp 0px calc var nav width

−calc(0px + var(--nav-outer-gutter)Space calc 0px var nav outer gutter

−.01remSpace .01rem

−.014000000000000002remSpace .014000000000000002rem

−.025remSpace .025rem

−.4rem -.4rem .4rem .4remSpace .4rem .4rem .4rem .4rem

Radius var tooltip popover border radius

−18px 18px 4pxRadius 18px 18px 4px

−18px 18px 18px 4pxRadius 18px 18px 18px 4px

−var(--select-dropdown-border-radius)Radius var select dropdown border radius

−var(--form-field-input-border-radius)Radius var form field input border radius

−var(--checkboxes-field-outer-border-radius)Radius var checkboxes field outer border radius

−var(--checkboxes-field-checkmark-radius)Radius var checkboxes field checkmark radius

−inset 0 0 0 var(--checkboxes-field-outer-width) var(--color-form-field-hover)Shadow 14

−inset 0 0 0 var(--checkboxes-field-outer-width) var(--color-form-field-focus)Shadow 15

−inset 0 0 0 var(--checkboxes-field-outer-width) var(--color-form-field-default)Shadow 16