Design token diff
Showing changes between two snapshots of primer.style
Colors
+27 added−26 removed5 unchangedTypography
+11 added−24 removed+"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|400Mona Sans VF 16px / 400
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|400Mona Sans 16px / 400
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|500Mona Sans 16px / 500
+"Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|14px|500Mona Sans VF 14px / 500
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|34px|500Mona Sans 34px / 500
+
Spacing
+11 added−11 removed21 unchanged+0.3125remSpace 0.3125rem
+0.375remSpace 0.375rem
+0.5remSpace 0.5rem
+.5emSpace .5em
+.5remSpace .5rem
+0.625remSpace 0.625rem
+0.75remSpace 0.75rem
Border Radius
+10 added−10 removed6 unchanged+0.25remRadius 0.25rem
+0.5remRadius 0.5rem
+1remRadius 1rem
+1.5remRadius 1.5rem
+624.9375remRadius 624.9375rem
+0.5rem 0.5rem 0 0Radius 0.5rem 0.5rem 0 0
+0.75remRadius 0.75rem
Shadows
+8 added−8 removed4 unchanged+inset 0px 1px 0px 0px #353d37--brand-button-primary-shadow-active
+0px 100px 80px rgba(0,0,0,0.0174624),0px 41.7776px 33.4221px rgba(0,0,0,0.0235573),0px 22.3363px 17.869px rgba(0,0,0,0.0282784),0px 12.5216px 10.0172px rgba(0,0,0,0.0339075),0px 6.6501px 5.32008px rgba(0,0,0,0.04317),0px 2.76726px 2.21381px rgba(0,0,0,0.07)--brand-River-visual-shadow
+max(1px,0.0625rem) max(1px,0.0625rem) 0 0 #b6bfb8Shadow 3
+0 3px 6px rgba(140,149,159,.15),0 1px 1px rgba(0,0,0,.1)Shadow 8
+0 100px 80px rgba(0,0,0,.01),0 41px 33px rgba(0,0,0,.02),0 22px 17px rgba(0,0,0,.02),0 12px 10px rgba(0,0,0,.03),0 6px 5px rgba(0,0,0,.04),0 2px 2px rgba(0,0,0,.07)Shadow 9
+0 0.25rem 0.25rem rgba(27,31,36,.2)
"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|20px|500
Mona Sans 20px / 500
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|22px|480Mona Sans 22px / 480
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|28px|480Mona Sans 28px / 480
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|600Mona Sans 16px / 600
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|56px|440Mona Sans 56px / 440
+"Mona Sans", MonaSansFallback, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|22px|400Mona Sans 22px / 400
−var(--brand-fontStack-monospace)!important|inherit|400Primer Brand River
−var(--brand-heading-fontFamily)|var(--base-size-20)|var(--base-text-weight-normal)Primer Brand SubdomainNavBar
−var(--brand-heading-fontFamily)|var(--base-size-16)|var(--base-text-weight-normal)Primer Brand SubdomainNavBar 2
−var(--brand-heading-fontFamily)|var(--base-size-16)|var(--brand-heading-weight-400)Primer Brand SubdomainNavBar 3
−var(--brand-fontStack-monospace)|var(--brand-text-size-100)|var(--brand-text-weight-500)Primer Brand Accordion
−var(--brand-fontStack-sansSerif)|var(--brand-text-size-200)|var(--brand-text-weight-200)Primer Brand Accordion 2
−var(--brand-body-fontFamily)|var(--brand-text-size-100)|400Primer Brand ControlGroup
−var(--brand-fontStack-sansSerif)|var(--brand-Testimonial-quote-fontSize-default)|var(--brand-Testimonial-quote-fontWeight-default)Primer Brand Testimonial
−var(--brand-heading-fontFamily)|var(--brand-text-size-200)|var(--brand-text-weight-400)Primer Brand AnchorNav
−var(--brand-fontStack-monospace)|inherit|400Primer Brand CTABanner
−var(--brand-body-fontFamily)|var(--brand-text-size-200)|400Primer Brand Prose
−var(--brand-heading-fontFamily)|var(--brand-text-size-700)|var(--brand-heading-weight-700)Primer Brand Prose 2
−var(--brand-heading-fontFamily)|var(--brand-text-size-600)|var(--brand-heading-weight-600)Primer Brand Prose 3
−var(--brand-heading-fontFamily)|var(--brand-text-size-400)|var(--brand-heading-weight-400)Primer Brand Prose 4
−var(--brand-heading-fontFamily)|var(--brand-text-size-300)|var(--brand-heading-weight-400)Primer Brand Prose 5
−var(--brand-heading-fontFamily)|var(--brand-text-subhead-size-medium)|var(--brand-text-subhead-weight-medium)Primer Brand Prose 6
−-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|400-apple-system 16px / 400
−"Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|400Mona Sans 16px / 400
−"Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|500Mona Sans 16px / 500
−-apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|14px|500-apple-system 14px / 500
−"Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|34px|500Mona Sans 34px / 500
−"Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|20px|500Mona Sans 20px / 500
−-apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|16px|400-apple-system 16px / 400
−"Mona Sans", MonaSansFallback, -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"|22px|480Mona Sans 22px / 480
+
5px
Space 5px
−var(--base-size-2,.125rem)Space var base size 2 .125rem
−calc(var(--base-size-4,.25rem)Space calc var base size 4 .25rem
−var(--control-small-gap,.25rem)Space var control small gap .25rem
−var(--overlay-paddingBlock-condensed,.25rem)Space var overlay paddingBlock condensed .25rem
−var(--base-size-4,.25rem)Space var base size 4 .25rem
−var(--control-xsmall-gap,.25rem)Space var control xsmall gap .25rem
+
0.1875rem
Radius 0.1875rem
−var(--brand-borderRadius-small)Radius var brand borderRadius small
−var(--brand-borderRadius-medium)Radius var brand borderRadius medium
−var(--brand-borderRadius-large)Radius var brand borderRadius large
−var(--brand-borderRadius-xlarge)Radius var brand borderRadius xlarge
−var(--brand-borderRadius-full)Radius var brand borderRadius full
−var(--brand-borderRadius-medium) var(--brand-borderRadius-medium) 0 0Radius var brand borderRadius medium var brand borderRadius medium 0 0
−var(--brand-borderRadius-medium,6px)Radius var brand borderRadius medium 6px
−var(--brand-VideoPlayer-range-borderRadius)Radius var brand VideoPlayer range borderRadius
−var(--base-size-4)Radius var base size 4
−var(--base-size-48)Radius var base size 48
Shadow 10
+-9px 10px 39px 0 rgba(0,0,0,.25)Shadow 11
+inset 0 0 0 1px rgba(0,0,0,.125)Shadow 12
−var(--brand-button-primary-shadow-active)Shadow 1
−var(--brand-River-visual-shadow)Shadow 2
−var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default)Shadow 3
−inset 0 0 0 2px var(--brand-color-focus)Shadow 4
−0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover)Shadow 7
−0 0 0 3px var(--brand-color-focus)Shadow 10
−0 0 0 1px var(--brand-color-focus)Shadow 11
−0 0 0 2px var(--brand-color-focus)Shadow 12