Diff

Atlassian vs Ritual

29 token-level differences between these two design systems.

Role tokens
Background
#ffffff #ffffff
Text
#000000 #142b6f
Brand
#0a0a0a #142b6f
Border
#000000 #dfe3ec
Display font
Charlie Text CircularXX
Body size
16px 16px
colors 23 changed
~ surface #cfe1fd #ffffff
~ text #000000 #142b6f
~ brand #0a0a0a #142b6f
~ border #000000 #dfe3ec
+ bg-soft #f7f8fa
+ bg-deeper #eef0f5
+ bg-navy #142b6f
+ bg-cream #fbf7ee
+ surface-soft #f7f8fa
+ brand-hover #0f2154
+ brand-soft #e7eaf3
+ accent-yellow #ffd200
+ accent-yellow-soft #fff3bf
+ accent-yellow-deep #e6bd00
+ on-accent #142b6f
+ text-strong #0f2154
+ text-muted #5a6680
+ border-strong #c3c9d8
+ border-navy #142b6f
+ success #1f8a5b
+ warning #e6bd00
+ danger #c2362b
+ info #142b6f
typography 4 changed
~ display {"family":"Charlie Text","size":80} {"family":"CircularXX","size":80}
~ h1 {"family":"Charlie Text","size":40} {"family":"CircularXX","size":44}
~ h2 {"family":"Charlie Text","size":32} {"family":"CircularXX","size":34}
~ body {"family":"Charlie Text","size":16} {"family":"CircularXX","size":16}
radius 2 changed
~ button 8px 12px
~ card 12px 16px
spacing identical
No differences.
↻ Swap direction · Ritual → Atlassian