Design language comparison
Chronicle vs Notion
Both Chronicle and Notion commit to a both-canvas approach, and they pair different display families (Diatype vs NotionInter). Beyond surface, motion levels are both expressive.
Palette · side by side
Up to 8 dominant swatches eachSide A · both
Chronicle
Full Page
#000000
foreground
#0000ee
brand
#151515
foreground
#ffffff
background
#e2e2e2
neutral
#b3b3b3
background
#292929
foreground
Side B · both
Notion
Full Page
#000000
foreground
#f6f5f4
background
#31302e
foreground
#a39e98
foreground
#0075de
accent
#615d59
foreground
#62aef0
accent
#f64932
accent
Typography · side by side
Primary family + weight ladder + sampleSide A · both
Chronicle
Full Page
- Display
- Diatype
- Body
- Diatype
- Weights
- 400 · 500
Sample
The quick brown fox jumps over the lazy dog.
1234567890 — Body sample renders in the captured family if your browser has it; otherwise system fallback signals the weight ladder.
Side B · both
Notion
Full Page
- Display
- NotionInter
- Body
- NotionInter
- Weights
- 400 · 500 · 600 · 700
Sample
The quick brown fox jumps over the lazy dog.
1234567890 — Body sample renders in the captured family if your browser has it; otherwise system fallback signals the weight ladder.
Spacing scale · side by side
Base unit + first 8 scale valuesSide A · both
Chronicle
Full Page
- Base unit
- 4 px
- Container max
- 1212 px
Side B · both
Notion
Full Page
- Base unit
- 4 px
- Container max
- 1252 px
Motion vocabulary · side by side
Level + durations + easingsSide A · both
Chronicle
Full Page
- Level
- expressive
- Libraries
- GSAP, Lottie
Durations
Easings
Side B · both
Notion
Full Page
- Level
- expressive
- Libraries
- —
Durations
Easings
Palette & spacing overlap
Their palettes share 5% of swatches at the dominant tier — a quiet signal both teams drew from the same neutral library before applying brand accents. Their spacing scales overlap by 58% (8, 10, 12, 16, 20 px shared) — a rhythm any agent can transfer between the two systems with minimal recalibration.
Shared swatches (1)
Curator verdict
If you are building an interface that needs to reference both, Chronicle's restraint reads as the safer default and Notion's rhythm provides the accent moments — pair them at section-level, not at component-level.