Diff

Netlify vs dbt Labs

69 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #ffffff

Text

#181a1c → #030711

Brand

#32e6e2 → #fe6703

Border

#cfd9de → #e2e8f0

Display font

Figtree → polymath

Body size

16px → 16px

colors 58 changed

~ surface #e8e6f0 → #f1f5f9

~ text #181a1c → #030711

~ text-strong #000000 → #0f172a

~ text-faint #9a9ab0 → #94a3b8

~ brand #32e6e2 → #fe6703

~ brand-deep #014847 → #b34902

~ brand-hover #23d4d0 → #e85d02

~ brand-soft rgba(50, 230, 226, 0.12) → #fff5ec

~ on-brand #181a1c → #030711

~ link #5653ed → #fe6703

~ link-hover #403fc9 → #cc5302

~ border #cfd9de → #e2e8f0

~ border-soft #e3e9ec → #eef2f6

~ border-strong #aab6bd → #cbd5e1

+ bg-soft #f8fafc

+ bg-surface #f1f5f9

+ bg-warm #fff5ec

+ bg-dark #030711

+ bg-dark-soft #0b1220

+ text-body #334155

+ text-slate #475569

+ text-muted #64748b

+ text-on-brand #030711

+ text-on-dark #ffffff

+ on-dark #ffffff

+ on-dark-muted #94a3b8

+ brand-pressed #cc5302

+ brand-tint #ffe2cc

+ accent-cta-white #ffffff

+ link-ink #030711

+ border-dark #1e293b

+ semantic-success #0f9d58

+ semantic-warning-bg #fff7e0

+ semantic-warning-text #7a5a00

+ semantic-error #dc2626

+ semantic-info #2563eb

− bg-hero #181a1c

− bg-ink #0a0a0c

− surface-accent #c6bfd9

− text-secondary #45455f

− text-tertiary #757575

− text-on-hero #e6ecf2

− text-on-hero-soft #cfd9de

− link-soft rgba(86, 83, 237, 0.10)

− shadow-ambient rgba(24, 26, 28, 0.04)

− shadow-card rgba(24, 26, 28, 0.06)

− shadow-elev rgba(24, 26, 28, 0.10)

− shadow-deep rgba(24, 26, 28, 0.16)

− scrim rgba(10, 10, 12, 0.50)

− gradient-teal linear-gradient(135deg, #32e6e2 0%, #5653ed 100%)

− success #1aa179

− success-soft rgba(26, 161, 121, 0.12)

− warning #d98b00

− warning-soft rgba(217, 139, 0, 0.12)

− danger #e5484d

− danger-soft rgba(229, 72, 77, 0.12)

− info #5653ed

− info-soft rgba(86, 83, 237, 0.10)

typography 5 changed

~ display {"family":"Figtree","size":80} → {"family":"polymath","size":80}

~ h1 {"family":"Figtree","size":64} → {"family":"polymath","size":48}

~ h2 {"family":"Figtree","size":48} → {"family":"polymath","size":32}

~ body {"family":"Instrument Sans","size":16} → {"family":"polymath-text","size":16}

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

radius 1 changed

~ pill 360px → 9999px

spacing 5 changed

~ xs 4px → 0px

~ sm 8px → 4px

~ md 16px → 12px

~ lg 48px → 24px

~ xl 96px → 40px

↻ Swap direction · dbt Labs → Netlify