---
title: "Chronicle design system"
variant: extended
source: https://chroniclehq.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/chroniclehq-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Chronicle · Design System

> Quiet monochrome framing for ambitious presentations

**Theme:** light · **Industry:** ai · **Source:** https://chroniclehq.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Chronicle’s homepage pairs restrained monochrome styling with large, polished previews of its AI presentation product. Editorial typography, generous whitespace, and orderly content sections keep attention on the decks and their business use cases.

## North star

Keep the interface nearly monochrome and spacious, letting polished presentation previews provide the visual color and proof.

## Overview

The page uses a soft light-gray canvas (#f3f3f3) throughout, keeping its long product story visually continuous rather than dividing it into strongly colored bands. Black (#000000) anchors headlines, navigation, and primary buttons; gray text provides quieter supporting copy. White cards and pale gray frames separate product previews, logos, testimonials, and template examples without adding visual clutter. Diatype is used across the page in a restrained, modern editorial voice: large regular-weight headlines, compact navigation, and readable supporting text, with slightly tight tracking in most roles. A wide central content area supports alternating split layouts, feature grids, and horizontal showcases. Spacing is comfortable and sections have room to breathe. Product imagery supplies the color: screenshots, charts, templates, and occasional photography sit inside clean neutral frames. Subtle borders and restrained shadows distinguish layered media from the flat page surface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f3f3f3` | `--color-soft-canvas` | brand | Dominant page canvas, carried consistently across the hero and long-form sections. |
| Pitch Black | `#000000` | `--color-pitch-black` | brand | Primary headings, navigation text, and high-contrast filled CTA buttons. |
| Divider Gray | `#e2e2e2` | `--color-divider-gray` | neutral | Hairlines, pale media framing, and subtle boundaries between cards and controls. |
| Quiet Gray | `#6b6b6b` | `--color-quiet-gray` | semantic | Muted supporting copy, secondary navigation, and lower-emphasis labels. |
| Warm Mist | `#ebe7e6` | `--color-warm-mist` | surface | Subtle warm gradient tint; secondary atmospheric surface rather than a defining brand color. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Product-preview interiors, cards, navigation details, and bright areas within media. |
| Near Ink | `#050505` | `--color-near-ink` | semantic | Near-black heading and navigation details, plus the measured basis of subtle media shadows. |
| Deep Charcoal | `#151515` | `--color-deep-charcoal` | neutral | Secondary navigation text and other low-frequency dark interface details. |
| Mid Gray | `#7f7f7f` | `--color-mid-gray` | neutral | Occasional low-emphasis text; use sparingly beneath the primary copy hierarchy. |
| Pale Graphite | `#929292` | `--color-pale-graphite` | neutral | Minor button and interface details, not a dominant page color. |

### Semantic aliases

`--color-canvas` → `#f3f3f3` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#e2e2e2` (Divider Gray) · `--color-text` → `#000000` (Pitch Black) · `--color-text-muted` → `#6b6b6b` (Quiet Gray) · `--color-text-subtle` → `#050505` (Near Ink) · `--color-border` → `#e2e2e2` (Divider Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e2e2e2` | 16.21:1 | AAA |
| `#6b6b6b` | `#f3f3f3` | 4.8:1 | AA |
| `#6b6b6b` | `#ffffff` | 5.33:1 | AA |
| `#6b6b6b` | `#e2e2e2` | 4.11:1 | AA-large |
| `#050505` | `#f3f3f3` | 18.37:1 | AAA |
| `#050505` | `#ffffff` | 20.38:1 | AAA |
| `#050505` | `#e2e2e2` | 15.73:1 | AAA |

### Gradients

- `linear-gradient(rgb(225, 225, 225), rgb(235, 231, 230))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype | `--font-body` | webfont | 400, 500 | Used throughout for headlines, body copy, navigation, captions, and buttons. | Inter |

- **Diatype:** Regular weights dominate, with measured 500-weight navigation and captions. Headlines use tight tracking; casing remains natural, not all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 54px | 400 | 1.05 | -0.03em | — | Diatype | Hero headline and primary page-level statement. |
| h2 | 48px | 400 | 1.05 | -0.03em | — | Diatype | Major section headings for features, templates, and testimonials. |
| h3 | 32px | 400 | 1.1 | -0.03em | — | Diatype | Feature titles and secondary content headings. |
| h4 | 20px | 400 | 1.2 | -0.02em | — | Diatype | Compact card headings and smaller section labels. |
| body | 16px | 400 | 1.4 | -0.02em | — | Diatype | Supporting descriptions, explanatory copy, and testimonial text. |
| caption | 14px | 500 | 1.4 | -0.02em | — | Diatype | Small labels, metadata, and compact image or card annotations. |
| button | 16px | 400 | 1.4 | 0 | — | Diatype | Primary CTA labels and other actionable controls. |
| nav | 16px | 400 | 1.4 | -0.02em | — | Diatype | Header navigation and footer navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 8, 10, 12, 16, 20, 24, 30, 32, 48, 58, 60, 128 px.
- Section rhythm 90px · element gap 8px · card padding 3px · max content width 1152px.

A wide, centered content area is organized into clear sections, with a measured page max width of 1152px. The hero uses a two-column composition: left-aligned copy and actions beside a large product preview. Subsequent sections alternate split layouts, multi-column feature grids, and horizontal showcases. Headlines align to the start of their content blocks, while the closing CTA centers above the footer. Comfortable spacing and a measured section gap of 90px create a calm, low-density rhythm.

## Shape & elevation

- Radius: button `2px` · card `4px` · media `4px` · nav `8px` · link `4px` · xs `2px` · sm `4px` · md `8px`
- Shadow `lg` (media, other): `rgba(5, 5, 5, 0.16) 0px 2.28884px 32px 0px`
- Shadow `md` (card): `rgba(5, 5, 5, 0.08) 0px 2px 24px 0px`
- Shadow `lg-2` (media): `rgba(5, 5, 5, 0.2) 0px 3px 32px 0px`
- Motion: standard transition `0.2s linear` on interactive elements.

The overall page remains flat, with light hairlines and pale media framing doing most of the separation. White cards and product previews sit just above the canvas, sometimes with measured soft shadows. Use shadows selectively on prominent media or cards; avoid heavy outlines, layered effects, or colored glows.

## Imagery

Product imagery is the page’s main source of visual variety: presentation screenshots, interface previews, chart examples, templates, and brand-guideline demonstrations. Large media is framed in light neutral panels with clean edges, while the template and testimonial areas use horizontal collections of examples or cards. A few photographic images appear inside product mockups; treat them as content within the presentation rather than as the website’s main art direction.

## Components

### Top navigation

Compact, light header with the Chronicle mark, centered links, login text, and a black filled Try for free button.

### Hero copy and actions

Large left-aligned headline, muted explanatory text, a black Talk to sales CTA, and a simple Watch video action.

### Hero product preview

Large presentation editor mockup shown in a pale gray frame, paired with selectable deck-type labels beneath.

### Feature panel

Neutral product showcase with a media preview beside a short list of workflow stages and supporting copy.

### Business feature grid

Thin dividers organize concise business capabilities and larger interface examples on an otherwise open canvas.

### Template carousel

Wide deck examples and compact category labels form a horizontally browsable product showcase.

### Testimonial cards

Pale neutral cards use small customer marks, brief quotes, and compact profile details.

### Footer link columns

A restrained brand signature sits beside grouped product, company, and social links.

### Measured component styles

- **Primary button** (“Try for free Try for free”): background #000000 · text #ffffff · border 1px solid · radius 4px · padding 0px · 500 14px Diatype
- **Secondary button**: background #e1e1e1 · text #000000 · radius 2px · padding 0px · 400 16px Diatype
- **Link** (“Watch video”): transparent background · text #000000 · border 1px solid · radius 4px · padding 0px · 500 14px Diatype
- **Card**: background #ffffff · text #000000 · radius 8px · padding 3px · 400 16px Diatype · shadow rgba(5, 5, 5, 0.08) 0px 2px 24px 0px
- **Navigation item** (“Product Resources Solutions Templates En”): transparent background · text #000000 · radius 0px · padding 0px · 500 14px Diatype

## Do

- Use #f3f3f3 as the continuous page canvas.
- Set primary headings and main CTAs in #000000.
- Let product previews supply most of the page’s visual variety.
- Keep section layouts spacious, structured, and easy to scan.
- Use restrained gray hairlines around media and cards.
- Keep typography regular-weight and naturally cased.

## Don't

- Do not introduce bright brand colors into the surrounding interface.
- Do not turn each section into a strongly colored background band.
- Do not crowd the hero or feature sections with dense copy.
- Do not use heavy borders or dramatic shadows on every card.
- Do not make headlines bold, condensed, or all caps.
- Do not treat mockup photography as the primary website imagery.

## Agent prompt

Build a new Chronicle-style SaaS page with a quiet monochrome interface and product-led storytelling. Use Soft Canvas (#f3f3f3) as the continuous background, Pitch Black (#000000) for headings and primary CTAs, Quiet Gray (#6b6b6b) for supporting text, Divider Gray (#e2e2e2) for hairlines, and Gallery White (#ffffff) inside cards and product previews. Use a Diatype-like sans serif such as Inter, regular weights, natural casing, and restrained tight tracking on large headings. Set a wide centered content area, with an editorial split hero, spacious alternating feature layouts, and selective grids or horizontal examples. Make polished product screenshots the visual focus. Keep the elevation subtle, using pale frames, thin dividers, and soft shadows only where media needs depth. Preserve generous whitespace and concise copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero with left-aligned copy and actions beside a large product preview. | sales CTA, watch video action, deck preview selector | large headline, two-column composition, framed product mockup |
| 2 | logo-cloud | Compact trust statement above a horizontal row of customer logos. | social proof | logo strip, light dividers |
| 3 | how-it-works | Large pale feature panel with product imagery on one side and workflow stages on the other. | workflow stages, product demonstration | split panel, stacked stage labels |
| 4 | feature-grid | Introductory heading and description above a multi-column feature grid with larger examples. | capability overview | thin dividers, interface preview cards |
| 5 | product-showcase | Section heading and copy above a horizontal template preview carousel. | browse template examples, carousel navigation | wide deck previews, compact labels |
| 6 | feature-split | Section heading and supporting statement above two large visual examples. | value proposition | paired presentation imagery, open whitespace |
| 7 | testimonials | Section heading above a horizontally arranged row of customer quote cards. | testimonial carousel, customer attribution | pale cards, small profile details |
| 8 | footer | Centered closing CTA followed by a spacious footer with brand and grouped link columns. | final conversion prompt, footer navigation | centered CTA, multi-column links |

## Source CSS custom properties (selected)

```css
--font-base: Diatype,serif;
--color-solid-1: #f3f3f3;
--color-solid-2: #b3b3b3;
--color-solid-3: #a3a3a3;
--color-solid-4: #666666;
--color-solid-5: #606060;
--color-solid-6: #484848;
--color-solid-7: #3a3a3a;
--color-solid-8: #2f2f2f;
--color-solid-9: #292929;
--color-solid-10: #212121;
--color-solid-11: #151515;
--color-solid-12: #050505;
--color-white: rgb(255,255,255);
--color-black: rgb(0,0,0);
--color-border: #e2e2e2;
--color-bg-light: #e1e1e1;
--color-bg: #f3f3f3;
--color-white-alpha-1: rgba(255,255,255,0.08);
--color-black-alpha-1: rgba(0,0,0,0.08);
--color-white-alpha-2: rgba(255,255,255,0.16);
--color-black-alpha-2: rgba(0,0,0,0.16);
--color-white-alpha-3: rgba(255,255,255,0.24);
--color-black-alpha-3: rgba(0,0,0,0.24);
--color-white-alpha-4: rgba(255,255,255,0.32);
--color-black-alpha-4: rgba(0,0,0,0.32);
--color-white-alpha-5: rgba(255,255,255,0.4);
--color-black-alpha-5: rgba(0,0,0,0.4);
--color-white-alpha-6: rgba(255,255,255,0.48);
--color-black-alpha-6: rgba(0,0,0,0.48);
--color-white-alpha-7: rgba(255,255,255,0.56);
--color-black-alpha-7: rgba(0,0,0,0.56);
--color-white-alpha-8: rgba(255,255,255,0.64);
--color-black-alpha-8: rgba(0,0,0,0.64);
--color-white-alpha-9: rgba(255,255,255,0.72);
--color-black-alpha-9: rgba(0,0,0,0.72);
--color-white-alpha-10: rgba(255,255,255,0.8);
--color-black-alpha-10: rgba(0,0,0,0.8);
--color-white-alpha-11: rgba(255,255,255,0.88);
--color-black-alpha-11: rgba(0,0,0,0.88);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/chroniclehq-com