Diff

Graphite vs Linear

49 token-level differences between these two design systems.

Role tokens

Background

#070707 → #08090a

Text

#fafafa → #f7f8f8

Brand

#3b82f6 → #5e6ad2

Border

#1f1f1f → #23252a

Display font

matterFont → Inter Variable

Body size

16px → 15px

colors 39 changed

~ bg #070707 → #08090a

~ bg-level-1 #0f0f0f → #0f1011

~ bg-level-2 #171717 → #141516

~ bg-level-3 #1f1f1f → #1a1b1d

~ bg-overlay rgba(7,7,7,0.72) → rgba(8,9,10,0.72)

~ surface #0f0f0f → #0f1011

~ surface-strong #171717 → #141516

~ surface-tinted-brand rgba(59,130,246,0.08) → rgba(94,106,210,0.08)

~ text #fafafa → #f7f8f8

~ text-secondary #d4d4d4 → #d0d6e0

~ text-tertiary #a3a3a3 → #8a8f98

~ text-quaternary #737373 → #62666d

~ text-disabled #525252 → #3d3f44

~ brand #3b82f6 → #5e6ad2

~ brand-hover #60a5fa → #7170ff

~ brand-press #2f6fed → #4a55c1

~ brand-soft rgba(59,130,246,0.16) → rgba(94,106,210,0.16)

~ accent #60a5fa → #7170ff

~ link #60a5fa → #828fff

~ link-hover #93c5fd → #a3acff

~ border #1f1f1f → #23252a

~ border-strong #2e2e2e → #34343a

~ border-brand #3b82f6 → #5e6ad2

~ cta-fill #262626 → #e5e5e6

~ cta-fill-hover #2e2e2e → #f3f3f4

~ cta-fill-press #1f1f1f → #cfcfd1

~ cta-text #fafafa → #08090a

~ success #22c55e → #4cb782

~ success-bg rgba(34,197,94,0.12) → rgba(76,183,130,0.12)

~ warning #f59e0b → #f2c94c

~ warning-bg rgba(245,158,11,0.12) → rgba(242,201,76,0.12)

~ danger #ef4444 → #eb5757

~ danger-bg rgba(239,68,68,0.12) → rgba(235,87,87,0.12)

~ info #3b82f6 → #5e6ad2

~ info-bg rgba(59,130,246,0.12) → rgba(94,106,210,0.12)

+ bg-marketing #010102

+ chip-bg #1a1b1d

+ chip-text #d0d6e0

+ chip-border #34343a

typography 5 changed

~ display {"family":"matterFont","size":72} → {"family":"Inter Variable","size":80}

~ h1 {"family":"matterFont","size":60} → {"family":"Inter Variable","size":48}

~ h2 {"family":"matterFont","size":40} → {"family":"Inter Variable","size":32}

~ body {"family":"matterFont","size":16} → {"family":"Inter Variable","size":15}

~ label {"family":"SFMono-Regular","size":13} → {"family":"Berkeley Mono","size":12}

radius 1 changed

~ card 12px → 24px

spacing 4 changed

~ sm 4px → 2px

~ md 12px → 6px

~ lg 32px → 16px

~ xl 64px → 24px

↻ Swap direction · Linear → Graphite