North star · Keep the announcement compact and centered, letting a vivid gold panel and generous white space do the visual work.
The page uses a white canvas as its defining field, leaving generous open space around a narrow centered announcement card. A saturated golden-yellow image or gradient panel crowns the card, with small white announcement text and a short, bold headline set directly over it. The card’s message area returns to white, using muted gray-green paragraphs, dark ink emphasis, and a small sign-off portrait. Graphik is used throughout in a restrained mix of regular and medium weights; headings feel compact rather than oversized, and body copy is easy to scan. A dark rounded CTA anchors the message. Below, a broad yellow section carries three brief statements in aligned columns, creating a clear change of scene without introducing visual clutter. Hairline borders and rounded card corners provide subtle structure; the overall impression stays flat, light, and editorial.
All page text: announcement, body copy, CTA, sign-off, and lower section statements.
角色
示例
字号
字重
行高
字距
一级标题
Announcement headline over the golden hero panel.
Memory
32px
500
1.09
0
正文
Main message paragraphs and emphasized transition statement.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
辅助文字
Small supporting copy, including sign-off details.
The quick brown fox 敏捷的狐狸
14px
400
1.71
0
导航
Announcement label and date treatment near the hero panel top.
Memory
32px
500
1.09
0
链接
Compact primary CTA label.
The quick brown fox 敏捷的狐狸
14px
500
1.43
0
眉题
Small uppercase label treatment where needed.
The quick brown fox 敏捷的狐狸
8px
500
1.5
0.123em
间距与布局
基准单位 8px · 密度:宽松
160px版块间距
5px元素间距
—卡片内边距
1310px内容最大宽度
5px
6px
8px
12px
24px
32px
40px
64px
96px
132px
160px
Use a centered, narrow single-column announcement card on a broad white canvas, with ample blank space above and around it. The measured page max width is 1310px, while the visible message occupies a much narrower centered column. Stack the hero panel, copy, sign-off, and CTA in a clear vertical sequence. Below the card, transition into a full-width yellow band with three evenly distributed text columns. Keep density low and section spacing generous; align content consistently rather than filling the canvas.
圆角与层次
卡片 · 15px
导航 · 15px
链接 · 12px
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The composition is predominantly flat, with no measured shadows. Use a fine pale border to distinguish the white message card from the white canvas, and rounded corners on the card and CTA. The golden panel provides the principal visual layer; avoid adding depth effects or extra stacked surfaces.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Centered brand mark
A small Vusion wordmark sits alone near the top center, surrounded by generous white space.
Golden announcement panel
A rounded warm gold hero carries a small announcement/date row and a short white transition headline.
Message card
A white, lightly outlined card continues below the hero with muted paragraphs and one dark emphasized sentence.
Executive sign-off
A compact circular portrait sits alongside the executive name and role in subdued text.
Primary CTA
A dark ink rounded link button directs visitors to the new Vusion website.
Three-column statement band
A full-width yellow section presents three short statements in aligned columns with restrained supporting text.
Imagery · The main visual is a warm, blurred golden-yellow hero image or gradient panel, treated as a soft abstract field behind white text. A small circular portrait appears beside the executive sign-off. No product renders or illustrative system define the page; keep imagery limited, lightly framed, and subordinate to the announcement copy.
该做与不该做
✓ 该做
Center the announcement card on a white canvas.
Reserve the strongest colour for the golden hero and lower yellow band.
Use Graphik-like sans serif typography with measured regular and medium weights.
Keep body copy muted and make the key transition statement darker.
Use a single dark rounded CTA as the primary action.
Preserve generous white space and a calm vertical reading sequence.
✕ 不该做
Do not fill the empty canvas with extra decoration.
Do not introduce unmeasured colours as brand palette values.
Do not use heavy shadows or layered card effects.
Do not make the announcement copy feel like a dense marketing landing page.
Do not enlarge the CTA beyond its supporting role.
Do not treat the portrait as a large photographic feature.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new announcement page in this restrained Memory-to-Vusion style. Use Gallery White (#ffffff) as the dominant canvas, with a narrow centered message card and generous surrounding whitespace. Lead with a warm golden hero panel; use Ochre Gold (#b68900) and Sunlit Yellow (#fecd38) as measured accents, not arbitrary new brand colours. Set all copy in a Graphik-like sans serif, using muted Slate Mist (#677b82) for supporting paragraphs and Deep Ink (#102126) for emphasis and the primary CTA. Keep the card flat with a fine Soft Rule (#f0f0f0) outline and rounded corners. Add a small sign-off portrait, then a broad yellow band with three short aligned statements. Maintain a calm editorial rhythm and avoid extra decoration, shadows, or dense content.