Chronicle
productivity · saas · design tools · Light + Dark
chroniclehq.comPalette
- #000000
- color-black-alpha-12
- #0000ee
- brand
- #151515
- color-solid-11
- #ffffff
- color-white-alpha-12
- #e2e2e2
- color-border
Typography
DiatypeGeometric sans
Chronicle vs Realm
Two references, one frame. Palette, typography and the curator verdict for Chronicle and Realm, read side by side.
Palette & spacing overlap
Palette
Shared (1)
#ffffff
Chronicle only
#000000#0000ee#151515#e2e2e2#b3b3b3#292929
Realm only
#0a0908#1a322e#eef6f5#535252#f4f0ec#004132
Spacing scale (px)
Shared (8)
8px10px12px16px20px24px32px48px
Chronicle only
3px30px58px60px
Realm only
4px40px64px80px
Realm
saas · productivity · Light
www.withrealm.comPalette
- #0a0908
- color-scheme-6--background
- #1a322e
- color-scheme-2--text-tertiary
- #eef6f5
- color-scheme-5--accent
- #535252
- _primitives---colors--neutral-dark
- #ffffff
- _primitives---opacity--white-50
Typography
RoobertInter
Typography
Side A · Light + Dark
Chronicle
- Display
- Diatype
- Body
- Diatype
Weight ladder
400500
Side B · Light
Realm
- Display
- Roobert
- Body
- Inter
Weight ladder
400500
Spacing scale
Side A · Light + Dark
Chronicle
- Base unit
- 4 px
- Container
- 1212 px
3px
8px
10px
12px
16px
20px
24px
30px
Side B · Light
Realm
- Base unit
- 4 px
- Container
- 1312 px
4px
8px
10px
12px
16px
20px
24px
32px
Motion vocabulary
Side A · Light + Dark
Chronicle
- Level
- expressive
- Libraries
- GSAP, Lottie
Durations
220ms400ms600ms900ms
Easings
cubic-bezier(0.16, 1, 0.3...cubic-bezier(0.22, 1, 0.3...
Side B · Light
Realm
- Level
- moderate
- Libraries
- GSAP
Durations
300ms600ms900ms
Easings
cubic-bezier(0.22, 1, 0.3...cubic-bezier(0.16, 1, 0.3...