风格库/AI/Memory

Memory — Rebrand Announcement

以明亮金色开启品牌新章A quiet announcement framed by a vivid golden chapter

浅色主题AIbrand transition announcement page极简编辑式暖色渐变单栏布局宽松留白原网页 inthememory.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Memory — Rebrand Announcement 首屏

页面以居中的简洁信息卡,宣布 Memory 更名为 Vusion。暖金色渐变主视觉与下方黄色区块,为以白底和文字为主的版式注入鲜明色彩。

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.

配色

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

品牌色
强调色
表层色
中性色
功能色
页面底色 · Gallery White表层 · Vanilla Cream主文字 · Deep Ink次要文字 · Slate Mist弱文字 · Quiet Graphite描边 · Soft Rule强调 · Ochre Gold强调 2 · Sunlit Yellow
文字背景对比度WCAG
#102126 Deep Ink#ffffff Gallery White16.57:1AAA
#102126 Deep Ink#fffbe6 Vanilla Cream15.93:1AAA
#677b82 Slate Mist#ffffff Gallery White4.44:1AA-large
#677b82 Slate Mist#fffbe6 Vanilla Cream4.27:1AA-large
#667174 Quiet Graphite#ffffff Gallery White5.02:1AA
#667174 Quiet Graphite#fffbe6 Vanilla Cream4.83:1AA

字体

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

Aa 设计

graphik

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

All page text: announcement, body copy, CTA, sign-off, and lower section statements.

角色示例字号字重行高字距
一级标题
Announcement headline over the golden hero panel.
Memory
32px5001.090
正文
Main message paragraphs and emphasized transition statement.
The quick brown fox 敏捷的狐狸
16px4001.50
辅助文字
Small supporting copy, including sign-off details.
The quick brown fox 敏捷的狐狸
14px4001.710
导航
Announcement label and date treatment near the hero panel top.
Memory
32px5001.090
链接
Compact primary CTA label.
The quick brown fox 敏捷的狐狸
14px5001.430
眉题
Small uppercase label treatment where needed.
The quick brown fox 敏捷的狐狸
8px5001.50.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.

相似风格

Memory — Rebrand Announcement 设计系统 — 配色、字体与 DESIGN.md | Design DNA