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

# Hellotime — Shutdown Notice · Design System

> A quiet, clear farewell in monochrome

**Theme:** light · **Industry:** saas · **Source:** https://www.hellotime.io/ · **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._

Hellotime presents its shutdown announcement as a calm, centered letter on a white canvas. Restrained typography, fine borders, and generous whitespace keep attention on the message rather than decoration.

## North star

Make the announcement feel like a readable, personal letter by keeping the page monochrome, centered, and free of decorative noise.

## Overview

The page uses a bright white canvas and a deliberately narrow, centered reading area to give a shutdown announcement the tone of a personal letter. Near-black text carries the heading, body copy, and inline links; the links remain visually integrated with the text rather than styled as buttons. Fine neutral-gray rules separate the header and footer, while a light-gray outline defines the main rounded card without adding shadow or colored fill. Typography is system-led: a large, bold display heading introduces the message, followed by comfortably sized sans-serif paragraphs with open line spacing. A compact brand mark sits in the header and returns in the footer, where muted text and small legal links recede from the main announcement. The layout relies on generous whitespace and a single-column flow; there is no photography or decorative illustration competing with the content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper White | `#ffffff` | `--color-paper-white` | surface | Page canvas and the unfilled background behind the announcement card. |
| Soft Ink | `#151619` | `--color-soft-ink` | neutral | Primary heading, body copy, navigation text, and inline links. |
| Card Line | `#c8cad0` | `--color-card-line` | neutral | Fine outline around the central announcement card. |
| Footer Gray | `#7f8491` | `--color-footer-gray` | semantic | Muted footer copy and secondary details. |
| Rule Gray | `#e1e2e5` | `--color-rule-gray` | neutral | Subtle header and footer separators. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-text` → `#151619` (Soft Ink) · `--color-text-muted` → `#7f8491` (Footer Gray) · `--color-border` → `#c8cad0` (Card Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151619` | `#ffffff` | 18.09:1 | AAA |
| `#7f8491` | `#ffffff` | 3.74:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-body` | system | 400 | Body paragraphs, links, navigation, caption-sized footer details, and card text. | Inter |
| SF Pro Display | `--font-display` | system | 700 | Main announcement heading. | Inter |

- **SF Pro Text:** System sans-serif with regular weight; sentence case, neutral tracking, and relaxed paragraph leading.
- **SF Pro Display:** Bold display face used for a prominent, sentence-case heading with tight line height and neutral tracking.

### Type scale — Custom (ratio ≈ 2.4, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1 | 0 | — | SF Pro Display | Large centered title introducing the shutdown announcement. |
| body | 20px | 400 | 1.6 | 0 | — | SF Pro Text | Readable announcement paragraphs inside the main card. |
| caption | 14px | 400 | 1.14 | 0 | — | SF Pro Text | Small secondary footer and legal details. |
| link | 20px | 400 | 1.6 | 0 | — | SF Pro Text | Inline contact and related-site links within text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 20, 24, 40, 64, 80, 160 px.
- Section rhythm 80px · element gap 24px · card padding 80px · max content width 760px.

A compact header spans the page above a centered, single-column announcement card. The measured content max width is 760px, with generous card padding and a 16px corner radius; keep the text itself comfortably narrower than the card. The main content sits well apart from the header and footer, giving the notice a calm, letter-like rhythm. The footer returns to a simple, low-density arrangement with brand attribution and small legal links. Maintain ample whitespace rather than adding columns or decorative bands.

## Shape & elevation

- Radius: card `16px`
- No box shadows measured: the page is flat.

The page is flat, with no shadows, gradients, or layered surfaces. A fine measured gray border outlines the announcement card, and subtle horizontal rules divide header and footer regions. Use the white canvas as the card interior; rely on spacing and the outline, not elevation, to establish hierarchy.

## Imagery

The page is essentially text-only. A small Hellotime logo appears in the header and footer, with no photography, video, 3D, or prominent illustration. Keep brand marks modest in scale and avoid introducing imagery that competes with the announcement or changes the quiet editorial tone.

## Components

### Brand header

Small Hellotime mark aligned at the top left, followed by a thin light-gray horizontal divider.

### Announcement card

Single white card with a 1px #c8cad0 outline, 16px radius, and measured 80px padding; no shadow.

### Notice heading

Centered, bold SF Pro Display heading at the measured 48px size and tight 1 line-height.

### Announcement copy

Near-black SF Pro Text paragraphs at 20px with 1.6 line-height, left-aligned inside the card.

### Inline links

Contact and related-site links use the same 20px text styling as body copy and sit within paragraphs.

### Footer

Small brand attribution, muted details, and legal links separated from the page content by a fine rule.

### Measured component styles

- **Link** (“team@hellotime.io”): transparent background · text #151619 · radius 0px · padding 0px · 400 20px SF Pro Text
- **Card** (“Hellotime is shutting down After conside”): transparent background · text #151619 · border 1px solid #c8cad0 · radius 16px · padding 80px · 400 16px SF Pro Text
- **Navigation item**: transparent background · text #151619 · radius 0px · padding 0px · 400 16px SF Pro Text

## Do

- Use a pure white page canvas.
- Keep the announcement in one centered column.
- Use near-black text for the heading and body.
- Reserve muted gray for secondary footer details.
- Outline the card with a fine neutral border.
- Let whitespace provide separation and emphasis.

## Don't

- Do not add gradients or colored section bands.
- Do not add shadows to the card.
- Do not turn inline links into prominent buttons.
- Do not introduce decorative photography or 3D.
- Do not crowd the message with extra columns.
- Do not use saturated accent colors.

## Agent prompt

Build a new page in Hellotime’s quiet, letter-like visual style. Use Paper White (#ffffff) as the canvas, Soft Ink (#151619) for primary text and inline links, Card Line (#c8cad0) for a fine card outline, Footer Gray (#7f8491) for secondary details, and Rule Gray (#e1e2e5) for subtle separators. Place a modest brand mark in a simple header, then a generously spaced, centered single-column content card. Use a bold, sentence-case display heading and readable system sans-serif body copy with relaxed line spacing. Keep links integrated with sentences, the card flat, and the footer restrained. Preserve broad whitespace and a calm reading rhythm. Avoid imagery, shadows, gradients, colored bands, and decorative controls; prioritize clear hierarchy and legibility.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Centered single-column announcement card beneath a compact header. | Read announcement, Follow inline links | Centered heading, Outlined card, Paragraph text, Inline links |
| 2 | footer | Single-column footer with brand attribution and a low-emphasis legal-link row. | Visit studio site, Open policy links | Brand mark, Muted attribution, Fine divider, Small legal links |

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