Design token diff

Showing changes between two snapshots of framer.com

Before

Apr 12, 2026

View snapshot

After

May 7, 2026

View snapshot

Before

Apr 12, 2026

After

May 7, 2026

+98 added−22 removed

Colors

+50 added

Typography

+24 added

+Inter, "Inter Placeholder", sans-serif|12px|500Inter 12px / 500

+Inter, "Inter Placeholder", sans-serif|13px|500Inter 13px / 500

+Inter, "Inter Placeholder", sans-serif|12px|600Inter 12px / 600

+"Inter Variable", "Inter Variable Placeholder", sans-serif|15px|400Inter Variable 15px / 400

+"Inter Variable", "Inter Variable Placeholder", sans-serif|18px|400Inter Variable 18px / 400

+"Inter Variable", "Inter Variable Placeholder", sans-serif|24px|400Inter Variable 24px / 400

+Inter, "Inter Placeholder", sans-serif|13px|600Inter 13px / 600

Spacing

+15 added−3 removed17 unchanged

+0.675px0.675px

+25pxSpace 25px

+26pxSpace 26px

+30pxSpace 30px

+30px 10px30px 10px

+35pxSpace 35px

+39px39px

Border Radius

+5 added−12 removed11 unchanged

+initialRadius initial

+calc(30px*1)Radius calc 30px 1

+calc(12px*1)Radius calc 12px 1

+50%Radius 50%

+4pxRadius 4px

−var(--framer-blockquote-text-background-radius,var(--framer-text-background-radius,initial))Radius var framer blockquote text background radius var framer text background radius initial

−var(--framer-link-text-background-radius,initial)

Shadows

+4 added−7 removed8 unchanged

+inset 0 0 0 2px #ffffff05Shadow 3

+0 3px 6px #0000004d,0 0 0 1px #ffffff0fShadow 4

+0 4px 8px #09f3Shadow 5

+0 1px 2px #0099ff26,0 2px 4px #09f3Shadow 6

−-15px 0 10px #00000073Shadow 3

−-50px 0 10px #0006Shadow 4

−0 2px 4px #00000026,0 1px #0000000dShadow 5

Back to framer.com archive

"Mona Sans", "Mona Sans Placeholder", sans-serif|12px|500

Mona Sans 12px / 500

+"Inter Variable", "Inter Variable Placeholder", sans-serif|14px|400Inter Variable 14px / 400

+"mona sans"|61.5px|100mona sans 61.5px / 100

+"GT Walsheim Medium", "GT Walsheim Medium Placeholder", sans-serif|62px|500GT Walsheim Medium 62px / 500

+Inter, "Inter Placeholder", sans-serif|20px|600Inter 20px / 600

+"Open Runde", "Open Runde Placeholder", sans-serif|9px|600Open Runde 9px / 600

+Inter, sans-serif|20px|500Inter 20px / 500

+"GT Walsheim Framer Medium", "GT Walsheim Framer Medium Placeholder", sans-serif|110px|500GT Walsheim Framer Medium 110px / 500

+Inter, "Inter Placeholder", sans-serif|10px|500Inter 10px / 500

+Inter, "Inter Placeholder", sans-serif|10px|600Inter 10px / 600

+Inter, "Inter Placeholder", sans-serif|12px|400Inter 12px / 400

+"Inter Variable", "Inter Variable Placeholder", sans-serif|12px|400Inter Variable 12px / 400

+"Mona Sans", "Mona Sans Placeholder", sans-serif|18px|500Mona Sans 18px / 500

+"Mona Sans", "Mona Sans Placeholder", sans-serif|13px|500Mona Sans 13px / 500

+"Mona Sans", "Mona Sans Placeholder", sans-serif|17px|500Mona Sans 17px / 500

+Inter, "Inter Placeholder", sans-serif|22px|700Inter 22px / 700

+Inter, "Inter Placeholder", sans-serif|14px|500Inter 14px / 500

−.675pxSpace .675px

Radius var framer link text background radius initial

−var(--framer-link-hover-text-background-radius,var(--framer-link-text-background-radius,var(--framer-text-background-radius,initial)))Radius var framer link hover text background radius var framer link text background radius var framer text background radius initial

−var(--framer-link-current-text-background-radius,var(--framer-link-text-background-radius,initial))Radius var framer link current text background radius var framer link text background radius initial

−var(--framer-link-hover-text-background-radius,var(--framer-link-current-text-background-radius,var(--framer-link-text-background-radius,initial)))Radius var framer link hover text background radius var framer link current text background radius var framer link text background radius initial

−calc(30px*var(--one-if-corner-shape-supported,var(--corner-shape-fallback,1)))Radius calc 30px var one if corner shape supported var corner shape fallback 1

−10px 2px 2px 10pxRadius 10px 2px 2px 10px

−2px 10px 10px 2pxRadius 2px 10px 10px 2px

−0 2px 4px #00000026Shadow 12

−0 1px 2px #00000040Shadow 13

−0 20px 30px #000000a6Shadow 14

−0 20px 30px #00000080Shadow 15