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

# Clockwise — Our Next Chapter · Design System

> Quiet editorial clarity in deep green

**Theme:** light · **Industry:** productivity · **Source:** https://getclockwise.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._

Clockwise presents a company update as a calm, text-first editorial page, using deep green type on a warm off-white canvas. A compact FAQ leads into a white customer-logo and impact section that closes with a simple thank-you.

## North star

Keep the page calm and editorial: a narrow reading column, deep-green typography, warm canvas, and clear section transitions.

## Overview

The page is defined by a warm off-white canvas (#fdf9f7) and deep green (#003f2e) typography, giving a sensitive company update a quiet, readable tone. A restrained brighter green (#039861) appears in the wordmark and selected navigation links rather than being used as a large promotional field. The opening is centered around the Clockwise mark and a large, bold headline; below it, a narrow left-aligned column carries the announcement in readable paragraphs. PP Mori gives headings a distinctive, rounded display character, while Inter handles body copy, navigation, and FAQ text. Spacing is generous around the introduction, then more compact through the grouped FAQ rows. A white lower section creates a clear change of pace and holds a centered customer logo cloud, impact figures, and a closing thank-you. Hairline rules and outlined plus icons structure the FAQ without cards or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clockwise Forest | `#003f2e` | `--color-clockwise-forest` | brand | Primary text and headings throughout; also defines FAQ icons and rules. |
| Warm Paper | `#fdf9f7` | `--color-warm-paper` | surface | Main announcement and FAQ canvas, including the top navigation background. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Contrasting lower section behind customer logos, impact figures, and closing thanks. |
| Fresh Clover | `#039861` | `--color-fresh-clover` | accent | Small brand and link accent; visible in the Clockwise mark and selected links. |
| Soft Divider | `#d9d9d9` | `--color-soft-divider` | neutral | Thin borders and separators, including FAQ grouping and content rules. |
| Muted Slate | `#6e7673` | `--color-muted-slate` | semantic | Subdued navigation or secondary text; use sparingly, as it is a minor measured color. |

### Semantic aliases

`--color-canvas` → `#fdf9f7` (Warm Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#003f2e` (Clockwise Forest) · `--color-border` → `#d9d9d9` (Soft Divider) · `--color-accent` → `#003f2e` (Clockwise Forest) · `--color-accent-2` → `#039861` (Fresh Clover)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#003f2e` | `#fdf9f7` | 11.47:1 | AAA |
| `#003f2e` | `#ffffff` | 12:1 | AAA |
| `#003f2e` | `#fdf9f7` | 11.47:1 | AAA |
| `#003f2e` | `#ffffff` | 12:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 700 | Body paragraphs, navigation, FAQ questions, and supporting copy. | Inter |
| PP Mori | `--font-display` | webfont | 700, 600 | Display headline and prominent section or impact headings. | DM Sans |

- **Inter:** Use regular weight for long-form copy and navigation; retain sentence case and comfortable line spacing.
- **PP Mori:** Use bold or semibold for headings; keep natural casing and compact, confident line breaks.

### Type scale — Perfect Fourth (ratio ≈ 1.297, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 66px | 700 | 1.1 | 0 | — | PP Mori | Large display treatment for the prominent closing and brand statements. |
| h1 | 64px | 600 | 0.95 | 0 | — | PP Mori | Centered “Our Next Chapter” announcement headline. |
| h2 | 52px | 700 | 1 | 0 | — | PP Mori | Major section headings and prominent impact statements. |
| h3 | 24px | 400 | 1.4 | 0 | — | Inter | Supporting section and content headings. |
| h4 | 23px | 700 | 1.2 | 0 | — | PP Mori | FAQ group labels and smaller emphasized headings. |
| body | 18px | 400 | 1.3 | 0 | — | Inter | Announcement paragraphs, customer note, and explanatory copy. |
| nav | 18px | 400 | 1.3 | 0 | — | Inter | Brand navigation and the small set of inline links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 7, 8, 9, 10, 14, 20, 30, 32, 40, 48, 64, 96 px.
- Section rhythm 72px · element gap 10px · card padding 8px · max content width 640px.

Use a single centered reading column with a measured maximum content width of 640px. Center the logo and announcement headline; align paragraphs and FAQ content to the left within the column. Keep the main announcement on a continuous warm canvas, with generous vertical breathing room before the FAQ. Group questions into labeled categories with fine rules. Transition to a full-width white band for the customer logos and impact content, centered within the page. The overall density is comfortable, with tighter repeated FAQ rows.

## Shape & elevation

- Radius: nav `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease-out` on interactive elements.

The design is essentially flat: measured shadows and gradients are absent. Use the warm-to-white section change, whitespace, and thin rules to establish hierarchy instead of floating cards. FAQ rows are separated through outlines and hairlines, with no heavy container treatment. Keep borders understated and avoid layered surfaces.

## Imagery

The page is primarily typographic rather than photographic or illustrative. Its main visual media is a customer-logo cloud in the lower white section, arranged in a compact multi-column grid; preserve each logo’s own brand colors instead of recoloring them. The Clockwise wordmark sits above the headline. Keep these assets crisp and restrained, without decorative image framing, gradients, or prominent mockups.

## Components

### Brand header

A compact Clockwise wordmark centered above the announcement title on the warm canvas.

### Announcement introduction

Centered PP Mori headline with a short muted italic subheading, followed by a narrow left-aligned Inter text column.

### FAQ groups

Category labels and stacked questions separated by thin rules; use circular outlined plus icons for expandable rows.

### Customer logo cloud

A centered multi-column collection of customer marks on the full-width white section; preserve their original colors.

### Impact figures

Two large deep-green numeric highlights with short explanatory labels, arranged side by side within the white section.

### Closing thanks

A centered, bold deep-green thank-you message closing the customer section.

### Measured component styles

- **Card** (“8 million hours of Focus Time created”): transparent background · text #003f2e · border 1px solid #d9d9d9 · radius 0px · padding 30px 0px 0px 0px · 400 16px Inter
- **Navigation item** (“Our Next Chapter A new chapter for our t”): background #fdf9f7 · text #003f2e · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #fdf9f7 as the primary announcement canvas.
- Set primary text and headings in #003f2e.
- Keep the article narrow and readable.
- Use PP Mori for prominent headings and Inter for body copy.
- Separate FAQ categories with restrained hairlines.
- Reserve the white section for customer marks and impact content.
- Use brighter green only as a small accent.

## Don't

- Don't turn the article into a multi-column layout.
- Don't introduce large saturated color panels.
- Don't add card shadows or gradients.
- Don't recolor customer logos to match the palette.
- Don't make FAQ rows look like raised cards.
- Don't crowd the headline or article with decorative imagery.

## Agent prompt

Build a new Clockwise-style page as a calm, text-first editorial experience. Use Warm Paper (#fdf9f7) for the main canvas and Clockwise Forest (#003f2e) for primary text and headings. Set a compact centered brand mark above a clear PP Mori-style headline, then place Inter-style body copy in a narrow, left-aligned reading column. Use Fresh Clover (#039861) sparingly for small brand or link accents. Organize repeated information with simple FAQ rows, circular plus icons, and Soft Divider (#d9d9d9) hairlines rather than cards. If the page includes customer proof or metrics, transition into a full-width Gallery White (#ffffff) section, retain customer logos in their original colors, and present figures with restrained emphasis. Avoid shadows, gradients, dense ornament, and broad saturated backgrounds.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | faq | Single centered reading column on a warm off-white canvas; centered brand and headline, left-aligned article and grouped FAQ. | Company update, Grouped expandable questions, Inline links | Centered wordmark, Large headline, Thin FAQ dividers, Outlined plus icons |
| 2 | logo-cloud | Full-width white band with a centered customer logo grid, followed by centered impact metrics and a closing thank-you. | Customer social proof, Impact metrics, Closing acknowledgment | Multi-column logo cloud, Paired large figures, Centered closing headline |

## Source CSS custom properties (selected)

```css
--malachite-primary: #003f2e;
--lime-accent: #b6ff80;
--pellegrino-secondary: #00a972;
--border: #d9d9d9;
```

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