---
title: "Memory — Rebrand Announcement design system"
variant: extended
source: https://www.inthememory.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/inthememory-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Memory — Rebrand Announcement · Design System

> A quiet announcement framed by a vivid golden chapter

**Theme:** light · **Industry:** ai · **Source:** https://www.inthememory.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained announcement page introduces Memory’s transition to Vusion through a compact, centered message card. A warm golden hero and lower yellow section bring colour to an otherwise white, text-led layout.

## North star

Keep the announcement compact and centered, letting a vivid gold panel and generous white space do the visual work.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and message-card background; preserves the quiet, open layout. |
| Slate Mist | `#677b82` | `--color-slate-mist` | semantic | Muted announcement copy, keeping supporting paragraphs softer than the main statement. |
| Soft Rule | `#f0f0f0` | `--color-soft-rule` | neutral | Fine card outline and understated separation against the white canvas. |
| Quiet Graphite | `#667174` | `--color-quiet-graphite` | semantic | Secondary text tone used for muted supporting copy. |
| Deep Ink | `#102126` | `--color-deep-ink` | brand | Emphasized message text and the dark CTA background. |
| Vanilla Cream | `#fffbe6` | `--color-vanilla-cream` | surface | Pale warm surface measured on the announcement card; retain as a subtle supporting surface. |
| Ochre Gold | `#b68900` | `--color-ochre-gold` | accent | Measured gold accent on the announcement/nav treatment; the screenshot’s hero uses a brighter gold visual. |
| Sunlit Yellow | `#fecd38` | `--color-sunlit-yellow` | accent | Lower full-width section band and measured endpoint of the white-to-yellow gradient. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fffbe6` (Vanilla Cream) · `--color-text` → `#102126` (Deep Ink) · `--color-text-muted` → `#677b82` (Slate Mist) · `--color-text-subtle` → `#667174` (Quiet Graphite) · `--color-border` → `#f0f0f0` (Soft Rule) · `--color-accent` → `#b68900` (Ochre Gold) · `--color-accent-2` → `#fecd38` (Sunlit Yellow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#102126` | `#ffffff` | 16.57:1 | AAA |
| `#102126` | `#fffbe6` | 15.93:1 | AAA |
| `#677b82` | `#ffffff` | 4.44:1 | AA-large |
| `#677b82` | `#fffbe6` | 4.27:1 | AA-large |
| `#667174` | `#ffffff` | 5.02:1 | AA |
| `#667174` | `#fffbe6` | 4.83:1 | AA |
| `#b68900` | `#ffffff` | 3.2:1 | AA-large |
| `#b68900` | `#fffbe6` | 3.07:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 57.08%, rgb(254, 205, 56) 57.08%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| graphik | `--font-body` | webfont | 400, 500 | All page text: announcement, body copy, CTA, sign-off, and lower section statements. | Inter |

- **graphik:** Measured weights are 400 and 500; use compact, untracked text, with uppercase reserved for the small eyebrow style.

### Type scale — Custom (ratio ≈ 2, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.09 | 0 | — | graphik | Announcement headline over the golden hero panel. |
| body | 16px | 400 | 1.5 | 0 | — | graphik | Main message paragraphs and emphasized transition statement. |
| caption | 14px | 400 | 1.71 | 0 | — | graphik | Small supporting copy, including sign-off details. |
| nav | 32px | 500 | 1.09 | 0 | — | graphik | Announcement label and date treatment near the hero panel top. |
| link | 14px | 500 | 1.43 | 0 | — | graphik | Compact primary CTA label. |
| eyebrow | 8px | 500 | 1.5 | 0.123em | uppercase | graphik | Small uppercase label treatment where needed. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 5, 6, 8, 12, 24, 32, 40, 64, 96, 132, 160 px.
- Section rhythm 160px · element gap 5px · card padding — · max content width 1310px.

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.

## Shape & elevation

- Radius: card `15px` · nav `15px` · link `12px` · xs `10px` · sm `15px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.16s ease` on interactive elements.

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.

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

## Components

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

### Measured component styles

- **Link** (“Discover the new Vusion website”): background #102126 · text #ffffff · radius 12px · padding 8px 12px · 500 14px graphik
- **Card** (“A new chapter begins September 15, 2026 ”): background #fffbe6 · text #102126 · radius 15px · padding 0px · 400 16px graphik
- **Navigation item** (“A new chapter begins September 15, 2026 ”): background #b68900 · text #ffffff · radius 15px · padding 32px · 400 16px graphik

## Do

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

## Don't

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

## Agent prompt

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.

## Source CSS custom properties (selected)

```css
--background: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/inthememory-com