Skip to main content

Design language comparison

Chronicle vs ToDesktop

Both Chronicle and ToDesktop commit to a both-canvas approach, and they pair different display families (Diatype vs Inter). Beyond surface, motion levels are both expressive.

Palette · side by side

Up to 8 dominant swatches each

Side A · both

Chronicle

Full Page

#000000

foreground

#0000ee

brand

#151515

foreground

#ffffff

background

#e2e2e2

neutral

#b3b3b3

background

#292929

foreground

Side B · both

ToDesktop

Full Page

#e5e7eb

neutral

#000000

foreground

#ffffff

background

#707070

foreground

#141414

foreground

#474747

background

#999999

foreground

#384642

foreground

Typography · side by side

Primary family + weight ladder + sample

Side 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

ToDesktop

Full Page

Display
Inter
Body
Geist Mono
Mono
Geist Mono
Weights
400 · 500 · 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 values

Side A · both

Chronicle

Full Page

Base unit
4 px
Container max
1212 px
3px
8px
10px
12px
16px
20px
24px
30px

Side B · both

ToDesktop

Full Page

Base unit
4 px
Container max
960 px
1px
4px
6px
8px
10px
12px
14px
16px

Motion vocabulary · side by side

Level + durations + easings

Side A · both

Chronicle

Full Page

Level
expressive
Libraries
GSAP, Lottie

Durations

220ms400ms600ms900ms

Easings

cubic-bezier(0.16, 1, 0.3…cubic-bezier(0.22, 1, 0.3…

Side B · both

ToDesktop

Full Page

Level
expressive
Libraries

Durations

50ms200ms300ms400ms450ms

Easings

cubic-bezier(0.6, 0.6, 0, 1)cubic-bezier(0.76, 0, 0.2…

Palette & spacing overlap

Their palettes share 10% 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 50% (8, 10, 12, 16, 20 px shared) — a rhythm any agent can transfer between the two systems with minimal recalibration.

Shared swatches (2)

#000000#ffffff

Curator verdict

If you are building an interface that needs to reference both, Chronicle's restraint reads as the safer default and ToDesktop's rhythm provides the accent moments — pair them at section-level, not at component-level.

Full Chronicle brief →Full ToDesktop brief →Back to gallery

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.