Diff

GitLab vs Semafor

79 token-level differences between these two design systems.

Role tokens

Background

#ffffff → #f8f5d7

Text

#171321 → #1f1d1a

Brand

#fc6d26 → #3a6d78

Border

#171321 → #d8d0a8

Display font

GitLab Sans → FeatureFlatHeadline

Body size

18px → 18px

colors 69 changed

~ bg #ffffff → #f8f5d7

~ surface #ffffff → #f8f5d7

~ surface-soft #f2f1f5 → #f5f1c9

~ text #171321 → #1f1d1a

~ text-strong #171321 → #000000

~ text-soft #4d4a57 → #7a756f

~ text-muted #6e6b78 → #5a5651

~ text-faint #9b99a3 → #a39e96

~ brand #fc6d26 → #3a6d78

~ brand-soft rgba(252, 109, 38, 0.10) → #cce0e4

~ link #6e49cb → #3a6d78

~ link-hover #5a3aa8 → #2d5a64

~ border #171321 → #d8d0a8

~ border-soft #dcd9e3 → #e8e2c2

+ bg-section #f8f5d7

+ bg-section-flagship #f8f5d7

+ bg-section-africa #f8f5d7

+ bg-dark #1f1d1a

+ bg-darkest #0d0c0a

+ surface-paper #ffffff

+ surface-strong #e8e3b5

+ surface-quote #fefbe8

+ surface-card-elevated #fcfae0

+ text-on-teal #ffffff

+ text-on-dark #f8f5d7

+ brand-hover #2d5a64

+ brand-active #1f4750

+ brand-deep #1a3a44

+ link-visited #7a756f

+ on-dark #f8f5d7

+ border-strong #7a756f

+ border-rule #1f1d1a

+ border-teal #3a6d78

+ shadow-card rgba(31,29,26,0.06)

+ shadow-elev rgba(31,29,26,0.1)

+ shadow-modal rgba(31,29,26,0.3)

+ scrim rgba(31,29,26,0.6)

+ success #2a8a4f

+ success-soft #dff0e7

+ warning #cc7a00

+ warning-soft #fde9cc

+ danger #a62d2d

+ danger-soft #f0d4d4

+ info #3a6d78

+ info-soft #cce0e4

+ flag-flagship #3a6d78

+ flag-africa #c46b3a

+ flag-principals #3a6d78

+ flag-net-zero #2a8a4f

+ flag-tech #5a4a8a

+ flag-business #3a6d78

+ flag-media #a62d2d

+ flag-gulf #c46b3a

− bg-soft #f2f1f5

− surface-ink #171321

− brand-red #e24329

− brand-purple #6e49cb

− brand-gradient linear-gradient(135deg, #fc6d26 0%, #e24329 50%, #6e49cb 100%)

− cta-bg #171321

− cta-text #ffffff

− cta-hover #2b2640

− cta-light-bg #ffffff

− cta-light-text #171321

− border-faint #ece9f1

− semantic-success #108548

− semantic-warning #c17d10

− semantic-danger #dd2b0e

− semantic-info #6e49cb

− shadow-tint rgba(23, 19, 33, 0.10)

typography 5 changed

~ display {"family":"GitLab Sans","size":96} → {"family":"FeatureFlatHeadline","size":72}

~ h1 {"family":"GitLab Sans","size":48} → {"family":"FeatureFlatHeadline","size":28}

~ h2 {"family":"GitLab Sans","size":40} → {"family":"FeatureFlatHeadline","size":22}

~ body {"family":"GitLab Sans","size":18} → {"family":"FeatureFlatText","size":18}

~ label {"family":"GitLab Mono","size":14} → {"family":"Courier New","size":11}

radius 2 changed

~ button 8px → 4px

~ card 12px → 6px

spacing 3 changed

~ xs 0px → 2px

~ lg 32px → 24px

~ xl 64px → 40px

↻ Swap direction · Semafor → GitLab