Diff

Linear vs Graphite

49 token-level differences between these two design systems.

Role tokens

Background

#08090a → #070707

Text

#f7f8f8 → #fafafa

Brand

#5e6ad2 → #3b82f6

Border

#23252a → #1f1f1f

Display font

Inter Variable → matterFont

Body size

15px → 16px

colors 39 changed

~ bg #08090a → #070707

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

~ bg-level-2 #141516 → #171717

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

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

~ surface #0f1011 → #0f0f0f

~ surface-strong #141516 → #171717

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

~ text #f7f8f8 → #fafafa

~ text-secondary #d0d6e0 → #d4d4d4

~ text-tertiary #8a8f98 → #a3a3a3

~ text-quaternary #62666d → #737373

~ text-disabled #3d3f44 → #525252

~ brand #5e6ad2 → #3b82f6

~ brand-hover #7170ff → #60a5fa

~ brand-press #4a55c1 → #2f6fed

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

~ accent #7170ff → #60a5fa

~ link #828fff → #60a5fa

~ link-hover #a3acff → #93c5fd

~ border #23252a → #1f1f1f

~ border-strong #34343a → #2e2e2e

~ border-brand #5e6ad2 → #3b82f6

~ cta-fill #e5e5e6 → #262626

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

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

~ cta-text #08090a → #fafafa

~ success #4cb782 → #22c55e

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

~ warning #f2c94c → #f59e0b

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

~ danger #eb5757 → #ef4444

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

~ info #5e6ad2 → #3b82f6

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

− bg-marketing #010102

− chip-bg #1a1b1d

− chip-text #d0d6e0

− chip-border #34343a

typography 5 changed

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

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

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

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

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

radius 1 changed

~ card 24px → 12px

spacing 4 changed

~ sm 2px → 4px

~ md 6px → 12px

~ lg 16px → 32px

~ xl 24px → 64px

↻ Swap direction · Graphite → Linear