Opennote — Acquisition Notice

纸感留白,清晰传达公告A quiet, paper-like announcement with editorial clarity.

浅色主题效率工具acquisition announcement page极简编辑式排版衬线标题暖中性色单栏布局原网页 opennote.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Opennote — Acquisition Notice 首屏

Opennote 将收购公告设计成简洁平静的阅读页面,以暖白底色、居中窄栏,以及衬线与无衬线字体的克制搭配呈现信息。合作方图像和页脚手绘插画增添个性,但不会抢走公告正文的注意力。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
表层色
中性色
功能色
页面底色 · Soft Canvas表层 · Clean Surface主文字 · Soft Ink次要文字 · Reading Gray弱文字 · Quiet Gray
文字背景对比度WCAG
#0a0a0a Soft Ink#f9f9f9 Soft Canvas18.8:1AAA
#0a0a0a Soft Ink#ffffff Clean Surface19.8:1AAA
#474746 Reading Gray#f9f9f9 Soft Canvas8.83:1AAA
#474746 Reading Gray#ffffff Clean Surface9.3:1AAA
#8c8b89 Quiet Gray#f9f9f9 Soft Canvas3.23:1AA-large
#8c8b89 Quiet Gray#ffffff Clean Surface3.4:1AA-large

字体

字号阶梯:Custom(比例约 2.625,正文 16px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

SuisseIntl

网络字体 · 字重 400 · 占比 96%
免费替代:Inter

Body copy, navigation, and links

Aa 设计

IowanOld

网络字体 · 字重 400 · 占比 4%
免费替代:Lora

Main announcement headline

角色示例字号字重行高字距
一级标题
The acquisition announcement headline in the main reading column.
Opennote
42px4001.10
正文
Announcement paragraphs, supporting details, and footer copy.
The quick brown fox 敏捷的狐狸
16px4001.50
导航
Small header navigation, including the Blog link.
The quick brown fox 敏捷的狐狸
16px4001.50
链接
Inline references, contact email, and announcement link.
The quick brown fox 敏捷的狐狸
16px4001.50

间距与布局

基准单位 8px · 密度:宽松

160px版块间距
20px元素间距
—卡片内边距
762px内容最大宽度
8px
16px
20px
24px
32px
40px
48px
96px
160px

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.

圆角与层次

图片 · 12px

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

页面版块

共 2 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • 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.

✕ 不该做

  • 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.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Opennote — Acquisition Notice 设计系统 — 配色、字体与 DESIGN.md | Design DNA