Diff

Base vs LlamaIndex

58 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #0e1116
Brand
#0000ff #1b9aff
Border
#e0e0e0 #d0d7de
Display font
coinbaseSans Inter
Body size
16px 16px
colors 53 changed
~ surface #f5f5f5 #ffffff
~ surface-soft #fafafa #f6f8fa
~ text #000000 #0e1116
~ text-strong #000000 #1c2128
~ text-body #1a1a1a #3d4148
~ text-muted #666666 #656d76
~ text-faint #999999 #8b949e
~ brand #0000ff #1b9aff
~ brand-hover #0000cc #0c87e6
~ brand-active #000099 #0066c2
~ brand-soft #e6e6ff #eaf5ff
~ brand-deep #000033 #0a4d80
~ border #e0e0e0 #d0d7de
~ border-soft #ededed #eaeef2
~ border-strong #999999 #afb8c1
~ link #0000ff #1b9aff
~ link-hover #0000cc #0c87e6
~ success #10b981 #1f883d
~ warning #f59e0b #bf8700
~ danger #ef4444 #cf222e
~ info #0000ff #1b9aff
+ bg-soft #fafbfc
+ bg-deep #0e1116
+ surface-elevated #ffffff
+ surface-blue #eaf5ff
+ surface-dark #0e1116
+ text-on-dark-muted #c9d1d9
+ on-light #0e1116
+ link-visited #5b6cdb
+ border-blue #1b9aff
+ shadow-color rgba(31, 35, 40, 0.04)
+ shadow-color-md rgba(31, 35, 40, 0.08)
+ shadow-color-lg rgba(31, 35, 40, 0.12)
+ accent-llama #f59e0b
+ accent-emerald #1f883d
+ accent-rose #cf222e
+ accent-violet #8250df
+ code-keyword #cf222e
+ code-string #0a3069
+ code-comment #6e7781
+ code-symbol #953800
bg-elevated #fafafa
bg-blue #0000ff
bg-cream #f5f5f0
bg-dark #000000
surface-strong #e8e8e8
surface-on-blue #0000cc
text-on-blue #ffffff
accent-cream #f5f5f0
accent-yellow #ffd000
accent-pink #ff5599
border-on-blue #3333ff
ring #0000ff
typography 5 changed
~ display {"family":"coinbaseSans","size":72} {"family":"Inter","size":72}
~ h1 {"family":"coinbaseSans","size":40} {"family":"Inter","size":40}
~ h2 {"family":"coinbaseSans","size":32} {"family":"Inter","size":32}
~ body {"family":"coinbaseDisplay","size":16} {"family":"Inter","size":16}
~ label {"family":"coinbaseMono","size":11} {"family":"JetBrains Mono","size":11}
radius identical
No differences.
spacing identical
No differences.
↻ Swap direction · LlamaIndex → Base