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

# Opennote — Acquisition Notice · Design System

> A quiet, paper-like announcement with editorial clarity.

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

Opennote presents its acquisition notice as a calm editorial reading page, using a warm off-white canvas, a narrow centered column, and a restrained mix of serif and sans-serif type. A small partner graphic and lightly sketched footer illustrations add character without competing with the announcement.

## North star

Keep the announcement readable and calm: warm paper-like space, a narrow editorial column, and typography—not decoration—as the focus.

## Overview

The page is defined by a warm, nearly white canvas and generous untouched space rather than bold brand colour. Headings use IowanOld for a literary, announcement-like tone, while SuisseIntl keeps navigation and paragraphs direct and legible. The main content sits in a centered, narrow reading column, with a partner graphic above the headline and compact paragraphs below. The header is deliberately slight: a small Opennote mark at left and a single Blog link at right. Dark text supplies the strongest contrast; muted grays handle supporting copy and footer details. Understated links are underlined in the body, with no prominent button treatment. The footer introduces a loose line-drawn illustration strip, preserving the page’s paper-and-notebook character while keeping navigation simple. Spacing is spacious and the overall surface treatment remains flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f9f9f9` | `--color-soft-canvas` | neutral | Measured page canvas; a cool near-white reference, while the screenshot’s rendered page reads warmer. |
| Reading Gray | `#474746` | `--color-reading-gray` | semantic | Main muted text tone, especially paragraphs and footer copy. |
| Clean Surface | `#ffffff` | `--color-clean-surface` | surface | Measured surface color; use for light content surfaces where present, not as a contrasting card system. |
| Soft Ink | `#0a0a0a` | `--color-soft-ink` | neutral | Strong text color for the editorial headline and navigation. |
| Quiet Gray | `#8c8b89` | `--color-quiet-gray` | semantic | Lighter muted text for secondary copy and subtle footer details. |
| Link Ink | `#191919` | `--color-link-ink` | brand | Measured link tone, including Reducto references; keep links understated and text-led. |

### Semantic aliases

`--color-canvas` → `#f9f9f9` (Soft Canvas) · `--color-surface` → `#ffffff` (Clean Surface) · `--color-text` → `#0a0a0a` (Soft Ink) · `--color-text-muted` → `#474746` (Reading Gray) · `--color-text-subtle` → `#8c8b89` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0a0a` | `#f9f9f9` | 18.8:1 | AAA |
| `#0a0a0a` | `#ffffff` | 19.8:1 | AAA |
| `#474746` | `#f9f9f9` | 8.83:1 | AAA |
| `#474746` | `#ffffff` | 9.3:1 | AAA |
| `#8c8b89` | `#f9f9f9` | 3.23:1 | AA-large |
| `#8c8b89` | `#ffffff` | 3.4:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SuisseIntl | `--font-body` | webfont | 400 | Body copy, navigation, and links | Inter |
| IowanOld | `--font-display` | webfont | 400 | Main announcement headline | Lora |

- **SuisseIntl:** Regular weight, sentence case, neutral sans-serif; keep tracking unaccented and paragraphs comfortably readable.
- **IowanOld:** Regular serif with a bookish editorial feel; use sentence case and natural line wrapping.

### Type scale — Custom (ratio ≈ 2.625, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1.1 | 0 | — | IowanOld | The acquisition announcement headline in the main reading column. |
| body | 16px | 400 | 1.5 | 0 | — | SuisseIntl | Announcement paragraphs, supporting details, and footer copy. |
| nav | 16px | 400 | 1.5 | 0 | — | SuisseIntl | Small header navigation, including the Blog link. |
| link | 16px | 400 | 1.5 | 0 | — | SuisseIntl | Inline references, contact email, and announcement link. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 8, 16, 20, 24, 32, 40, 48, 96, 160 px.
- Section rhythm 160px · element gap 20px · card padding — · max content width 762px.

Use a sparse header with the brand mark aligned left and a single navigation link aligned right. Center the main content in a narrow reading column; the measured page max width is 762px, while the visible text block is narrower within it. Stack the partner artwork, headline, and paragraphs in a single column. Keep substantial breathing room between the announcement and the two-column footer, then let a low-contrast illustration band sit along the bottom. The overall density is spacious.

## Shape & elevation

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

The page reads as a flat sheet: no visible card stack, pronounced shadows, or strong section borders. Separate content through whitespace and alignment rather than containers. The lead graphic has subtly rounded corners, while text links use understated underlining instead of filled controls.

## Imagery

The announcement uses a centered rectangular partner graphic with a faint notebook-grid background and Reducto plus Opennote marks. It is treated as an editorial lead image rather than a full-bleed hero. The footer adds delicate, low-contrast hand-drawn sketches across the bottom edge. Avoid glossy photography, dimensional product renders, or imagery that overwhelms the text.

## Components

### Minimal header

Small Opennote mark on the left and a single Blog text link on the right, with no prominent enclosing bar.

### Partner announcement image

Centered notebook-grid artwork carrying the Reducto and Opennote marks, with a subtle rounded media edge.

### Editorial headline

Regular serif announcement title, aligned to the reading column and wrapped naturally across lines.

### Announcement copy

Compact sans-serif paragraphs in muted gray, with inline contact and partner links kept text-led.

### Announcement link

Underlined text link beneath the announcement copy; avoid a filled button treatment.

### Footer navigation and sketches

Simple link list and social marks above a light, hand-drawn illustration strip.

### Measured component styles

- **Link** (“Reducto”): transparent background · text #191919 · radius 0px · padding 0px · 400 16px SuisseIntl
- **Navigation item** (“Blog”): transparent background · text #0a0a0a · radius 0px · padding 0px · 400 16px SuisseIntl

## Do

- Use warm, near-white space as the dominant visual field.
- Keep the announcement in a centered, narrow reading column.
- Pair a literary serif headline with neutral sans-serif body text.
- Use muted gray for supporting paragraphs and footer details.
- Keep navigation small and limited to text links.
- Use subtle notebook or hand-drawn imagery as supporting texture.

## Don't

- Do not add saturated brand colour to large page areas.
- Do not turn the announcement into a card-heavy dashboard.
- Do not use oversized buttons where understated text links fit.
- Do not widen paragraphs into full-screen line lengths.
- Do not let footer illustrations compete with the announcement.
- Do not add dramatic shadows, gradients, or decorative borders.

## Agent prompt

Build a new page in Opennote’s quiet editorial style. Use a warm, near-white canvas and a narrow centered reading column with generous whitespace. Set the main headline in IowanOld or a close serif substitute such as Lora; use SuisseIntl or Inter for body copy, navigation, and links. Use Soft Ink (#0a0a0a) for the strongest text, Reading Gray (#474746) for body copy, Quiet Gray (#8c8b89) for secondary details, and Link Ink (#191919) for understated links. Keep the header minimal, the content single-column, and supporting imagery notebook-like or hand-drawn. Prefer whitespace over borders or cards, avoid shadows and gradients, and finish with a restrained footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | announcement | Minimal header above a centered single-column announcement with lead artwork, serif title, paragraphs, and text link. | Editorial reading flow, Inline contact link, Text-based announcement CTA | Centered notebook-grid partner image, Serif headline, Muted sans-serif copy |
| 2 | footer | Two-column footer links and social marks above a bottom-edge band of faint sketches and copyright text. | Grouped site links, Social destinations, Copyright information | Simple text link list, Small social icons, Low-contrast sketch strip |

## Source CSS custom properties (selected)

```css
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card-foreground: 0 0% 3.9%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--radius: .5rem;
--caret-color: black;
--announcement-bg: #f7c3f7;
--announcement-text: #9d17a0;
--animate-shiny-text: shiny-text 8s infinite;
--latex-bg: #1e232d80;
--latex-border: #ffffff0d;
--latex-hover-bg: #282d3ccc;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-shadow-color: #0003;
--tw-ring-color: #3b82f680;
--tw-ring-offset-color: #fff;
```

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