HNU-TimeLetter Visual Design Specification

HNU-TimeLetter is built on the metaphor of a personal letter received and unfolded — warm-gray paper, wax seals, vintage postcard edges, and editorial white space. Every design decision flows from this core premise: the page feels like a commemorative album being turned open rather than a campus information portal. The following tokens and guidelines are the single source of truth (SSOT) for implementing that aesthetic consistently across every route and component.

Visual Direction

The four pillars of the visual identity are:

Core character: 纸本情书 (paper love letter), fire-lacquer wax seal, sea-breeze nostalgia, editorial breathing room.
Visual goal: Pages read as “a keepsake album being leafed through” or “a private letter just received” — never a campus information dashboard.
Material language: Warm-gray paper is the main stage. Deep red (#c23643) is the single emotional anchor. Copper-gold appears only as a detail accent and never competes with the primary.
Composition principle: Large white space, strong titles, few but precise accent colors, localised texture — no large areas of technology-blue or pure-white panels.

Color Palette

All colors are defined as CSS custom properties in src/app/globals.css and mapped to Tailwind semantic tokens. Use semantic names only — never use bg-[#xxxxxx] or text-stone-* anywhere in the codebase.

Token name	Hex	Usage
Background	`#ece9e4`	Page base, global canvas, large empty-space regions
Surface	`#f6f1eb`	Cards, modals, drawers, inner letter pages
Surface Strong	`#e2d7cf`	Secondary blocks, scroll strip, timeline bars, hover rails
Primary	`#c23643`	Primary button, selected state, active story, key CTA, link highlight
Primary Deep	`#a92d38`	Button hover / pressed state, deep wax-seal edge
Neutral Light	`#e55966`	Secondary tag backgrounds, selected-state softening, light hint blocks
Font Light	`#e7d0d0`	Reversed text on colored backgrounds, heading highlight layer, dark card copy, tag backgrounds
Ink Strong	`#342628`	Large headings, lead-in emphasis, critical notes
Font Dark	`#563B3B`	Body text, descriptions, component content copy
Ink Muted	`#7a6664`	Dates, locations, meta information, descriptive labels
Border	`#cbbdb5`	Card outlines, input boundaries, divider lines
Neutral Dark	`#634725`	Stamp edges, wax-seal metallic reflection, decorative lines, badge outlines
Focus Ring	`rgba(229, 89, 102, 0.28)`	Keyboard focus outline, accessibility interaction ring

SSOT constraint: All color values live exclusively in src/app/globals.css. No component file may hardcode hex values via bg-[#xxxxxx], text-stone-*, or any other escape hatch. Always use the semantic token classes (bg-background, bg-card, text-foreground, text-muted-foreground, bg-primary, border-border).

Typography

Font Families

Both typefaces are loaded as local fonts in src/app/layout.tsx, which maps them to Tailwind’s font-serif (headings) and font-sans (body) utilities.

Role	File	Tailwind class	Usage
Headings	`public/ChillDINGothic_SemiBold.otf`	`font-serif`	Site title, chapter headings, button main copy, English labels
Body	`public/ZouLDFXKAJ.ttf`	`font-sans`	Body paragraphs, story copy, description zones

Fallback strategy: Chinese heading fallback chain → PingFang SC, Microsoft YaHei, sans-serif. Body font falls back first to the heading font, then to the system Chinese font stack.

Responsive Type Scale

All font sizes use clamp() to scale fluidly between mobile and desktop without breakpoint jumps.

--text-h1:    clamp(2.5rem, 5vw + 1rem, 5rem);
--text-h2:    clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
--text-h3:    clamp(1.5rem, 2.5vw, 2.5rem);
--text-intro: clamp(1.125rem, 1.8vw, 1.75rem);
--text-base:  clamp(1rem, 0.8vw + 0.5rem, 1.125rem);

Never introduce additional font-size variables outside this set. All heading, lead, body, and label styles must draw exclusively from these five tokens.

Global Typography Baseline

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  font-size: var(--text-base);
  line-height: 1.8;
  margin: 0;
}

Heading Rules (h1 / h2 / h3)

h1, h2, h3 {
  font-weight: 400;        /* light weight — no 800 bold headings */
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.8em;
  letter-spacing: 0.12em;  /* wide tracking for editorial breathing room */
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }

Excluded heading styles: font-weight 800, negative letter-spacing, line-height 1.1, and any per-heading overrides that deviate from the unified 0.12em tracking. A single heading level must not carry additional letter-spacing rules of its own.

Body Classes

Two semantic body classes are defined in globals.css:

/* Lead / intro text — for preambles, section introductions */
.text-intro {
  font-size: var(--text-intro);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0.075em;
  max-width: 800px;
  margin-bottom: 3rem;
}

/* Reading body — for long-form narrative and descriptions */
.text-reading {
  font-size: var(--text-base);
  line-height: 2;            /* generous leading for sustained reading */
  font-weight: 300;
  letter-spacing: 0.045em;
  max-width: 65ch;
  margin-bottom: 2rem;
}

Excluded body combinations: .text-intro with line-height: 1.5, .text-reading with line-height: 1.8, or font-weight 800 on any body class.

Shape, Shadow, and Layering

Border Radius Tokens

--radius-base:  20px;   /* form controls, small interactive elements */
--radius-panel: 28px;   /* cards, content panels */
--radius-modal: 32px;   /* modals, full-screen overlays */
--radius-pill:  999px;  /* tags, nav capsule, badges */

Shadow Tokens

/* Standard card resting state */
--shadow-card:       0 24px 60px rgba(69, 39, 40, 0.12);

/* Card on hover — lift effect */
--shadow-card-hover: 0 32px 80px rgba(69, 39, 40, 0.16);

/* Paper surface inner highlight — simulates light catching the page edge */
--shadow-inset:      inset 0 1px 0 rgba(255, 255, 255, 0.56);

Border opacity rule: Regular outlines must not fall below 14% opacity on the warm-gray background — at lower values they disappear entirely.

Animation Timing Guidelines

Category	Duration	Approach
Page entrance	600 ms – 900 ms	Fade-in + subtle upward shift + blur dissolve
Hover feedback	140 ms – 180 ms	Translate, shadow, brightness — no strong bounce
Modal / glass layers	—	`backdrop-filter: blur(12px–18px)`, opacity ≤ 0.82
Paper texture	—	6 %–10 % visible noise or grain, never over body text
Ambient highlight	—	Soft radial gradient only — no neon or rainbow gradients

Component-Level Design Guidelines

Page Canvas

The page background is never flat. It combines: warm-gray base (Background) + a soft radial highlight + a very-light paper grain texture. Inner containers layer Surface and Surface Strong on top.

Buttons and Controls

Primary button: #c23643 background, #fff6f4 text. Hover: switches to #a92d38, lifts 2–4 px. Secondary button: Surface fill + Border outline, hover shifts toward Font Light. Links deepen in color on hover — no full underline, just a bottom hairline or color shift.

Cards, Scroll Strips, and Paper Containers

Large cards always use the paper-surface layer, never pure white. Modals and story cards require a paper-feel inner shadow and a light border to avoid looking like a generic component library. The scroll strip and timeline bars use Surface Strong with a thin copper-tone decorative line.

Tags, Badges, and Meta

Tag backgrounds prefer Font Light or Surface Strong. Tag text prefers Ink Strong or Primary Deep. Dates, locations, and English subtitle labels use the heading font to stay visually distinct from body copy.

Stamp, Pin, and Wax-Seal Details

Map pin points and stamp borders may use Neutral Dark as a local outline to reinforce the collectible-item feeling. Wax seals, location highlights, and active-state indicators all use the primary red — this is the only prominent accent color permitted site-wide.

Scroll Strip Visual Spec

The 56 px-wide scroll strip that appears when the desktop map rolls up has these exact visual values:

.scroll-strip {
  width: 56px;
  background: linear-gradient(
    to right,
    #ddd1c6 0%,
    #ede3da 58%,
    rgba(237, 227, 218, 0.78) 100%
  );
  box-shadow:
    6px 0 28px rgba(79, 53, 54, 0.16),
    inset -2px 0 0 rgba(138, 113, 92, 0.18);
}

/* Horizontal paper-grain lines on the strip */
.scroll-strip-grain {
  color: rgba(154, 122, 97, 0.16);
}

Implementation SSOT

File	Responsibility
`src/app/globals.css`	Single source of truth for all design tokens: colors, radius, shadows, typography, and texture
`src/app/layout.tsx`	Local font loading; maps `font-serif` → `ChillDINGothic_SemiBold`, `font-sans` → `ZouLDFXKAJ`

When writing new styles, always reach for semantic tokens first: bg-background, bg-card, text-foreground, text-muted-foreground, bg-primary, border-border. Direct hex values or Tailwind color-scale escapes (text-stone-500, bg-[#abc]) are prohibited in the codebase.

Asset Checklist

Show Envelope intro assets

Envelope component: back panel, cover flap, letter paper, wax seal — all in separate layers for animation
About page background texture (paper / watercolor / old photo border)
Large title artwork: “与她的海大时光笺” (SVG or high-res PNG)
Team member avatars / showcase images

Show Campus map assets

Desktop: SVG preferred, or high-res PNG (width ≥ 2560 px). Style: hand-drawn or low-saturation editorial illustration — no technology-blue map style. Leave background color bleed on all four edges.
Mobile: portrait or square static image for reference-only viewing.

Show Stamps and pins

Map coordinate pin: chibi-style avatar frame container (48×48 or 64×64 px), active state adds primary-red outline + soft outer glow
Stamp frame: perforated edge asset with hollow center, fixed aspect ratio (3:4 or 1:1)

Show Story card stack (desktop)

z-index: 30 — sits above the scroll strip layer so cards can freely overlap the strip during drag
Image-led layout; text area uses Surface background with light paper texture and inner highlight
Static stamp decoration inside the text area

Show Mobile card feed

Cover image: uniform ratio (4:3 or 16:9)
Detail page: image on top, text below, clear typographic contrast between title and body
FAB (floating action button): primary red, no blue-purple gradient

Get Started

Architecture

Design

Guides

HNU-TimeLetter Visual Design Specification — v2.0.0

Visual Direction

Color Palette

Typography

Font Families

Responsive Type Scale

Global Typography Baseline

Heading Rules (h1 / h2 / h3)

Body Classes

Shape, Shadow, and Layering

Border Radius Tokens

Shadow Tokens

Animation Timing Guidelines

Component-Level Design Guidelines

Page Canvas

Buttons and Controls

Cards, Scroll Strips, and Paper Containers

Tags, Badges, and Meta

Stamp, Pin, and Wax-Seal Details

Scroll Strip Visual Spec

Implementation SSOT

Asset Checklist

Build docs developers (and LLMs) love

Get Started

Architecture

Design

Guides

Documentation Index

​Visual Direction

​Color Palette

​Typography

​Font Families

​Responsive Type Scale

​Global Typography Baseline

​Heading Rules (h1 / h2 / h3)

​Body Classes

​Shape, Shadow, and Layering

​Border Radius Tokens

​Shadow Tokens

​Animation Timing Guidelines

​Component-Level Design Guidelines

Page Canvas

Buttons and Controls

Cards, Scroll Strips, and Paper Containers

Tags, Badges, and Meta

​Stamp, Pin, and Wax-Seal Details

​Scroll Strip Visual Spec

​Implementation SSOT

​Asset Checklist

Build docs developers (and LLMs) love

Visual Direction

Color Palette

Typography

Font Families

Responsive Type Scale

Global Typography Baseline

Heading Rules (h1 / h2 / h3)

Body Classes

Shape, Shadow, and Layering

Border Radius Tokens

Shadow Tokens

Animation Timing Guidelines

Component-Level Design Guidelines

Stamp, Pin, and Wax-Seal Details

Scroll Strip Visual Spec

Implementation SSOT

Asset Checklist