Diff

Axiom vs Pinecone

60 token-level differences between these two design systems.

Role tokens
Background
#0a0e1a #ffffff
Text
#ffffff #030712
Brand
#1aaaff #1cb0d0
Border
#ffffff14 #e5e7eb
Display font
Inter Inter
Body size
16px 16px
colors 60 changed
~ bg #0a0e1a #ffffff
~ bg-soft #06080f #f9fafb
~ bg-deep #03050a #030712
~ surface #161d33 #ffffff
~ surface-elevated #1a2240 #ffffff
~ text #ffffff #030712
~ text-strong #ffffff #111827
~ text-muted #b8c0d4 #6b7280
~ text-faint #4a5575 #9ca3af
~ brand #1aaaff #1cb0d0
~ brand-hover #0e8ed8 #0e8fae
~ brand-active #0c7ec0 #0c7691
~ brand-soft #0a3050 #e0f7fc
~ brand-deep #063052 #0a3a4a
~ link #1aaaff #1cb0d0
~ link-hover #5cc4ff #0e8fae
~ accent-violet #9c5cff #8b5cf6
~ border #ffffff14 #e5e7eb
~ border-strong #ffffff28 #d1d5db
~ border-soft #ffffff0a #f3f4f6
~ shadow-color rgba(3, 5, 10, 0.50) rgba(15, 23, 42, 0.04)
~ shadow-color-md rgba(3, 5, 10, 0.65) rgba(15, 23, 42, 0.08)
~ shadow-color-lg rgba(3, 5, 10, 0.80) rgba(15, 23, 42, 0.12)
~ success #22c55e #10b981
~ info #1aaaff #1cb0d0
~ code-keyword #9c5cff #0c7691
~ code-string #22c55e #10b981
~ code-comment #7a86a3 #9ca3af
+ surface-soft #f3f4f6
+ surface-cyan #e0f7fc
+ surface-dark #030712
+ surface-dark-card #111827
+ text-body #374151
+ text-on-dark #ffffff
+ text-on-dark-muted #d1d5db
+ on-light #030712
+ border-cyan #1cb0d0
+ accent-emerald #10b981
+ accent-rose #ef4444
+ vector-grid #e5e7eb
+ vector-point #1cb0d0
bg-elevated #111729
surface-hover #1d2540
surface-active #243057
text-soft #7a86a3
text-on-brand #ffffff
text-on-light #0a0e1a
brand-light #5cc4ff
accent-cyan #1aaaff
accent-green #22c55e
accent-red #ef4444
accent-pink #ec4899
border-brand #1aaaff
shadow-glow-cyan rgba(26, 170, 255, 0.20)
log-info #1aaaff
log-warn #f59e0b
log-error #ef4444
log-success #22c55e
code-bg #06080f
code-operator #1aaaff
typography identical
No differences.
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · Pinecone → Axiom