What makes Chronicle's design language stand out?

Chronicle is the rare productivity-tool landing that decided motion is its primary copy — every section reveal is choreographed, every micro-interaction times itself to the typography ladder, and every product UI demo unfolds with the deliberateness of an Apple keynote. We catalogued it because it solves the hardest problem in B2B SaaS: how do you sell a presentation tool without your landing page itself becoming a slide deck?

What fonts and palette does Chronicle use?

The type system is Diatype. The palette sits on a dual light and dark canvas around #000000, #0000EE, #151515 and #FFFFFF.

Can I transfer Chronicle's design language to my product?

The patterns transfer without cloning. Study how to use motion as primary copy without it becoming overwhelming — Chronicle reveals each section as if it were a slide, but the rhythm is so disciplined you absorb the message before noticing the choreography. The ai2 Design brief packages Chronicle's tokens and rules as a paste-ready export for Claude, Cursor, or any coding agent.

Back to gallery

productivity · saas · design tools

Chronicle

Dark-first motion-driven presentation tool landing — Diatype as the sole sans family across 12 typographic moments, classic web blue #0000ee as the only accent, GSAP-choreographed section reveals and Lottie product UI demos turning the page itself into a keynote build. Restraint plus motion as primary copy.

chroniclehq.comAdded 2026-05-15

Editorial note

This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.

Fair Use & Gallery Policy

FreePrompt kit

Copy the full design language into your agent

A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Chronicle’s language, not just a screenshot.

Paste into your agent. No signup, no cost.

Light + dark variants via `prefers-color-scheme`. Light primary canvas (off-white/gray ground, #000 ink), dark variant mirrors the same hierarchy with #000 ground + #ffffff text. Diatype Variable (400/500) is the sole sans family — every typographic moment from 12px caption to 54px display headline uses one weight ladder. Classic web blue #0000ee is the only functional accent — hyperlinks, CTAs, focus rings. Motion is the primary copy: GSAP-choreographed section reveals + Lottie product UI demos, 10 transitions total, all calibrated to feel like a slow keynote build. Containers stay narrow (800-828 editorial, 1212 hero) — density beats sprawl.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (light + dark variants via prefers-color-scheme — light: off-white ground + #000 ink + #e2e2e2 hairlines; dark mirror: #000 ground + #ffffff text + #151515 elevated surface — single classic-web blue #0000ee accent works on both), single-family typography (Diatype Variable in weights 400/500 only, used across 12+ sizes from 12px to 54px), 4px-base spacing scale heavy at 3/8/10/12/16/20, narrow 800-828px content rail inside 1212px hero canvas, motion-first interactions (GSAP for reveals, Lottie for product demos, 10 transitions), and 640/768/1025/1280/1536 Tailwind-standard breakpoints. Treat motion as primary copy — every section transition should carry narrative weight. Apply the language, not the source brand's copy. When I ask you to build a page or component, enforce these rules by default and call out any deviation.

Layout: Single-column reading flow with scroll-choreographed section reveals; product UI demos break out to wider 1212px canvas.
Content width: 800-828px editorial rail centred inside 1212px hero canvas.
Framing: Dark keynote room — typography sets pace, motion delivers each beat.
Grid strength: Implicit grid — 4px base unit governs spacing but reading rhythm comes from typography size jumps and motion timing.

Pure #000 ground + #ffffff text holds the page; classic-web #0000ee accent earns attention through scarcity and unmistakable hyperlink heritage.

Mode strategyDark-only — light mode would betray the keynote aesthetic.

#000000 is the only background colour — no dark grey, no off-black
#ffffff for primary text, #151515 for elevated surfaces (cards on dark)
#e2e2e2 hairline borders — visible only by contrast
#0000ee classic web blue exclusively on links, CTAs, focus rings

Gradients (paste-ready)

1 gradient catalogued — subtle dark-to-darker atmospheric tone in the hero section, otherwise gradient-free

Diatype Variable is the sole interface family — UI, body, captions, display headlines, all 400/500 only
Display sizes 48-54px for hero headlines; body 16px; metadata 12px
Line-height 1.4-1.5 for body, 1.05-1.1 for display
Letter-spacing 0 across the board — Diatype's optical spacing is already correct
Weight as hierarchy: 500 for emphasis, 400 for everything else

4px base unit, heaviest use at 3/8/10/12/16/20px increments
Section vertical rhythm: 120-200px between major sections (keynote pacing)
Card internal padding: 24-32px; CTA padding: 14px vertical / 24px horizontal
Hero-to-content transition: 80-120px breathing room

Surface styleCards sit on #151515 elevated surface with 1px #e2e2e2-alpha hairline; no atmospheric blur, no glassmorphism.

4 shadow variants total — restraint over richness
Hover lift: 2px Y translate + shadow opacity bump
No focus glow — focus is the classic-blue ring at 2px offset

Techniques

Keynote card

1px hairline rgba(226,226,226,0.08) + drop shadow 0 12px 32px rgba(0,0,0,0.4); no inner glow.

Hairline divider

Inline borders use rgba(226,226,226,0.06) — barely visible, but holds the rhythm.

Radii4 / 8 / 12Icon treatmentStroke 1.5px, optical alignment with Diatype baseline.Icon setsCustom monoline set tuned to Diatype

Buttons: 6-8px radius
Cards: 10-12px radius
Product UI demo containers: 8px radius — minimal frame

Primary CTA button (classic blue)
background
#0000ee
textColor
#ffffff
fontWeight
500
fontSize
16px
padding
14px 24px
borderRadius
8px
shadow
0 8px 20px rgba(0,0,238,0.32)
hover
background lightens to #1a1aff + shadow expand
Tailwind
```
inline-flex items-center gap-2 rounded-lg bg-[#0000ee] px-6 py-3.5 text-base font-medium text-white shadow-[0_8px_20px_rgba(0,0,238,0.32)] transition hover:bg-[#1a1aff]
```
Keynote section card
background
#151515
border
1px solid rgba(226,226,226,0.08)
borderRadius
12px
padding
32px
shadow
0 12px 32px rgba(0,0,0,0.4)
Tailwind
```
rounded-xl border border-white/[0.08] bg-[#151515] p-8 shadow-[0_12px_32px_rgba(0,0,0,0.4)]
```

LevelexpressiveDurations220ms / 400ms / 600ms / 900ms

Easings

cubic-bezier(0.16, 1, 0.3, 1)cubic-bezier(0.22, 1, 0.36, 1)

HoverLink underline draw-in (300ms ease-out, left-to-right), Card lift 2px + shadow bump, Button background lightens 8% on hover

Scroll patterns

GSAP-choreographed section reveals — staggered fade + 24px upward translate, timing tied to scroll position not viewport entry
Lottie product UI demos play once on first viewport entry; loop disabled
Sticky nav fades in after 120px scroll

Motion is primary copy — every transition carries narrative
Respect prefers-reduced-motion: collapse all GSAP/Lottie to opacity-only fades
Never autoplay motion before viewport entry

Hover on cards lifts subtly, never floats
Focus rings: classic-blue 2px ring + 2px offset
Active state: button bg shifts 8% darker, no scale change

Approachmobile-first

Tailwind defaults (640/768/1025/1280/1536) — no custom ladder needed.

<768: 16px gutter, single column, GSAP timeline simplified
768-1024: 720-768px content rail, basic reveals
≥1025: full 800-828 editorial + 1212 hero break-outs, full motion vocabulary

WCAG AAA on body text (#ffffff on #000 is 21:1)
Classic-blue accent passes AA on dark (8.6:1)
GSAP/Lottie respect prefers-reduced-motion via global flag

Next.jsGSAP for choreographyLottie for product UI demosVariable font subsetting

Motion + custom typography are the visual identity; static illustration is absent.

6 Diatype weights preloaded as woff2
GSAP timelines registered on scroll, debounced
Lottie compositions exported from After Effects at 60fps

Use Diatype for every typographic moment — UI, body, headlines, captions
Reserve #0000ee for links and CTAs only
Choreograph motion deliberately — each transition should carry narrative
Keep the page narrow — 800-828 editorial rail is the reading sweet spot

Don't introduce a second sans family
Don't paint surfaces in classic blue — it loses the hyperlink meaning
Don't add decorative idle animation — motion belongs to state and storytelling
Don't widen the editorial rail beyond 900px — density beats sprawl

Dark-only — no light variant
Diatype family only — no secondary serif/mono
Accent under 3% of surface — measure before shipping

Font-family grep: only `Diatype` appears for sans
Background colour: only `#000000` and `#151515` for cards
Accent colour count: `#0000ee` appears in fewer than 8 surfaces per viewport
Body text size: 12px-20px range, no values outside
GSAP usage: scoped to scroll-triggered section reveals, no idle loops

Design tokens

Observed token system

Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.

Inspector

Observable layers

Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.

Depth-first walk of the meaningful sections. 10 nodes across 6 levels, shallow to deep by color.

body2
- Header1
  - div1
    - div1
      - div1
        Nav
- div (×2)2
  - Main1
    - Section (×7)
  - Footer

Accessibility

34 combinations - 22 pass AA - 20 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.

fg: #000000
bg: #FFFFFF
APCA Lc: +106
Use: foreground on background

fg: #FFFFFF
bg: #000000
APCA Lc: -108
Use: background on foreground

fg: #151515
bg: #FFFFFF
APCA Lc: +105
Use: foreground on background

fg: #FFFFFF
bg: #151515
APCA Lc: -107
Use: background on foreground

fg: #000000
bg: #E2E2E2
APCA Lc: +89
Use: foreground on neutral

fg: #E2E2E2
bg: #000000
APCA Lc: -89
Use: neutral on foreground

fg: #FFFFFF
bg: #292929
APCA Lc: -104
Use: background on foreground

fg: #292929
bg: #FFFFFF
APCA Lc: +101
Use: foreground on background

fg: #151515
bg: #E2E2E2
APCA Lc: +88
Use: foreground on neutral

Images

Image strategy

Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.

Total images

Lazy loaded

Format mix

unknown36 · 59%
svg23 · 38%
png2 · 3%

Hero image

https://chroniclehq.com/_next/image?url=https%3A%2F%2Fcms.chroniclehq.com%2Fwp-content%2Fuploads%2F2026%2F02%2Fhero-ui-opt.png&w=1920&q=100

Format: UNKNOWN
Dimensions: 1722x1045
Loading: eager
srcset: yes

srcset descriptor

/_next/image?url=https%3A%2F%2Fcms.chroniclehq.com%2Fwp-content%2Fuploads%2F2026%2F02%2Fhero-ui-opt.png&w=1920&q=100 1x, /_next/image?url=https%3A%2F%2Fcms.chroniclehq.com%2Fwp-content%2Fuploads%2F2026%2F02%2Fhero-ui-opt.png&w=3840&q=100 2x

Industry: productivity
Industry: saas
Industry: design-tools
Theme: Light + Dark
Added: 2026-05-15

FAQ

Questions people ask about Chronicle

3questions

Answers are pulled from the curator verdict and design brief - the same text your AI agent sees when it paste-reads this page.

Compare this with

Chronicle

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Image strategy

Hero image

Questions people ask about Chronicle

Chronicle

Editorial disclaimer

Copy the full design language into your agent

Color philosophy

Typography rules

Spacing rules

Elevation & depth

Shape & iconography

Component recipes

Motion vocabulary

Interaction language

Responsive strategy

Accessibility rules

Graphical tech stack

Do's

Don'ts

Constraints

Fitness check

Observed token system

Observable layers

Contrast matrix

Image strategy

Hero image

Questions people ask about Chronicle

01What makes Chronicle's design language stand out?

02What fonts and palette does Chronicle use?

03Can I transfer Chronicle's design language to my product?

Side-by-side reads sharing this design signal.

More in this design language