North star · Let one oversized, expressive message lead, and use deep green, mint accents, and generous warm-white framing to keep it human and calm.
The page is framed by a warm off-white canvas, with a large deep-green panel as its dominant visual field. Green-on-green line details and thin rules add structure without competing with the message. Geist provides a clean, contemporary voice: an oversized, tightly tracked headline anchors the left side, with its second line picked out in bright mint. Supporting copy steps down from crisp cream text to muted sage, while small uppercase labels and dates supply editorial cues. The content sits in an asymmetric composition: a broad text column on the left and a compact thank-you note on the right. Generous open space keeps the farewell calm and legible. A small wordmark and date sit in the light header; restrained footer labels repeat the same framing. There is no prominent photography: typography, color, and subtle circular outlines carry the story.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
强调色
表层色
中性色
功能色
页面底色 · Flecto Forest表层 · Warm Paper主文字 · Warm Paper次要文字 · Sage Haze弱文字 · Flecto Forest描边 · Fern Rule强调 · Flecto Forest强调 2 · Mint Light强调 3 · Signal Mint
All page typography, from display headline and supporting copy to uppercase labels.
角色
示例
字号
字重
行高
字距
特大标题
Oversized two-line farewell headline, with mint emphasis on the second line.
Flecto
106.5px
530
0.91
-0.065em
一级标题
Primary page heading when used outside the display treatment.
Flecto
43px
520
1.5
-0.05em
二级标题
Secondary message headings and content titles.
Flecto
31.5px
500
1.5
-0.035em
正文
Introductory farewell copy and explanatory paragraph.
The quick brown fox 敏捷的狐狸
18px
400
1.55
0
辅助文字
Compact supporting message in the right-side note.
The quick brown fox 敏捷的狐狸
17.5px
400
1.45
0
导航
Small uppercase header date and footer labels.
The quick brown fox 敏捷的狐狸
12px
600
1.5
0.16em
眉题
Uppercase introductory label above the main headline.
The quick brown fox 敏捷的狐狸
12px
650
1.5
0.18em
间距与布局
基准单位 2px · 密度：宽松
58px版块间距
60px元素间距
6px卡片内边距
1392px内容最大宽度
4px
8px
16px
18px
22px
24px
26px
38px
40px
42px
58px
60px
80px
115px
130px
A light outer canvas frames one broad inset feature panel, with a compact header above and small footer labels below. Inside the panel, content follows an asymmetric two-column composition: the left column carries the eyebrow, headline, and main copy; the right holds a numbered thank-you note. Align text to the left, preserve generous breathing room around the content, and keep the page density spacious. The measured maximum page width is 1392px; use the provided spacing scale rather than introducing arbitrary dimensions.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The design reads as flat and editorial, with no measured shadows or gradients. Separate the cream outer canvas from the green panel through color and silhouette rather than elevation. Fine green rules and very subtle outlined circles create layering while preserving a calm, low-contrast finish.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header
Minimal cream header with the Flecto wordmark aligned left and a small, uppercase date range aligned right.
Feature panel
Large deep-green rounded panel set within the cream page canvas; the measured page uses a spacious inset composition.
Eyebrow
Small uppercase mint label above the display headline, tracked to read like an editorial kicker.
Display headline
Oversized, tightly tracked Geist headline on the left; highlight the second line in bright green.
Farewell copy
A prominent cream introductory sentence followed by smaller muted sage supporting text and a brief sign-off.
Thank-you note
Right-side note separated by a thin horizontal rule, with a small index, muted copy, and a crisp cream closing phrase.
Footer labels
Small uppercase location and brand labels on the cream canvas beneath the main panel.
Imagery · The screenshot is typography-led, not photography-led. The brand wordmark is the main visible image asset; subtle circular outlines appear as low-contrast decoration inside the green panel. Keep imagery sparse and secondary, with no invented product mockups or decorative illustration competing with the farewell message.
Keep the warm-paper frame visible around the green panel.
Make the main message the strongest typographic element.
Use mint for selective emphasis, not large areas.
Separate the message into a broad left column and compact right note.
Keep secondary copy muted and comfortably readable.
✕ 不该做
Do not add gradients or shadows.
Do not turn the page into a conventional product landing page.
Do not introduce bright colors beyond the measured palette.
Do not crowd the panel with extra cards or controls.
Do not replace the editorial layout with centered text.
Do not use prominent stock photography or decorative mockups.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial brand page in Flecto’s visual style. Frame a large, inset Flecto Forest (#004f3f) panel with a Warm Paper (#f8f7f0) canvas. Use Geist or a close free substitute, with an oversized tightly tracked headline, a small uppercase eyebrow, cream body copy, and restrained Mint Light (#a7f4cb) emphasis. Place the main message in a broad left column and a smaller ruled note on the right; retain generous negative space and subtle green-on-green line details. Keep header and footer labels small, uppercase, and widely tracked. Use Sage Haze (#8bb2a2) for secondary copy. Avoid shadows, gradients, excess decoration, and prominent imagery. Follow measured spacing values and preserve the calm, personal editorial tone.
