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.
The acquisition announcement headline in the main reading column.
Opennote
42px
400
1.1
0
正文
Announcement paragraphs, supporting details, and footer copy.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
导航
Small header navigation, including the Blog link.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
链接
Inline references, contact email, and announcement link.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
间距与布局
基准单位 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.
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.