Personal Website Design System

This isn’t a general-purpose UI kit. It’s the typographic constraint for this personal site: making projects, articles, system notes, and content flowing out of Obsidian feel like they belong to the same place.

The reference is Kami. Its core isn’t any single component but a set of stable editorial rules: a warm ivory-paper ground, a single ink blue, serif type carrying the hierarchy, restrained shadows, low-noise diagrams. We don’t copy Kami’s document template wholesale — we translate it into a web system suited to a personal blog and project pages.

Design judgment

This site should read like a public workbench, not a product marketing site. Pages should be quiet, narrow-column, and re-readable; visual emphasis comes from text, whitespace, paper texture, and a small amount of moving imagery — not stacked cards, gradient hero sections, or marketing modules.

Three keywords:

• Paper: backgrounds, borders, and shadows should feel like paper and ink, not an admin dashboard UI.
• Memory: animation and imagery may exist, but they must read as the afterglow of content, not decorative noise.
• Archive: project and article lists should be maintainable over the long term and support syncing out of Obsidian.

Color

Keep only one true accent color. Everything else serves the paper hierarchy.

:root {
  --paper: #f5f4ed;
  --ivory: #faf9f5;
  --sand: #e8e6dc;

  --ink: #141413;
  --warm: #3d3d3a;
  --muted: #504e49;
  --stone: #6b6a64;

  --line: #e8e6dc;
  --line-soft: #e5e3d8;

  --brand: #1b365d;
  --brand-light: #2d5a8a;
}

Usage rules:

• The page background is always --paper; never pure white.
• Links, focus, and section markers use --brand.
• --brand should cover little area — it appears as an ink dot, not a large background.
• Grays must lean warm; avoid blue-gray, pure gray, and the system default gray.
• Colored particles in the animation also resolve to --brand and warm gray — no second accent like cyan / gold.

Type

The type system has two layers: serif for content, monospace for interface controls.

:root {
  --serif-zh: "TsangerJinKai02", "Source Han Serif SC",
    "Noto Serif CJK SC", "Songti SC", Georgia, serif;
  --serif-en: Charter, Georgia, Palatino, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

Usage rules:

• Chinese body and headings use a Chinese serif, forming the paper reading feel.
• English body and headings use a Charter / Georgia-class serif.
• Top nav, language toggle, dates, code, slugs, and version numbers may use mono.
• Keep only weights 400 / 500; avoid synthetic bold.
• No italics. To lower hierarchy, use color and size, not italics.

Measure

The default content width is a narrow column; no full-width on large screens.

:root {
  --content-width: 680px;
  --page-pad: clamp(22px, 5vw, 72px);
}

Rules:

• Body, project list, contact info, and visual imagery all align to the same measure.
• Animation can act as a visual anchor, but it isn’t full-bleed by default.
• The first screen has no hero marketing; it starts from a name, a short note, and one memorable image.
• On large screens, keep the left/right whitespace so the page reads like a sheet of paper laid open.

Hierarchy

Hierarchy comes from size, whitespace, and ink — not decoration.

Role	Size	Weight	Line Height	Usage
Site title	20px	500	1.2	Home name
Section title	15px	500	1.25	Projects / Contact
Body	15px	400	1.55	Hero note and body
Dense body	14px	400	1.45	Project descriptions
Caption	12px	400	1.45	Image captions
Nav / meta	12-13px	400/500	1.35	Nav, language toggle

Chinese pages may use slight letter-spacing; English body keeps letter-spacing: 0.

Section

Projects, Contact, and future Writings / System all use the same section structure.

.section-header {
  border-left: 3px solid var(--brand);
  padding-left: 10px;
  margin-bottom: 18px;
}

No horizontal rule splitting the whole measure. The left vertical line is the only section signature: short, restrained, reusable.

Links and buttons

Links are underlines in the paper by default, not buttonized.

Rules:

• Body links use --brand or inherit the text color; underlines use --line.
• On hover, change only color and the underline — no background.
• The language toggle is the only button-like element: ivory background, warm-gray border, 6px radius.
• No high-saturation CTA, because this site is not a conversion page.

Visual imagery

The home page’s memory field is the site’s key visual, but it must obey the content system.

Rules:

• Width follows --content-width.
• Colors use only paper tones, ink blue, and warm gray.
• The animation pace is slow and doesn’t disturb reading.
• Pointer interaction may stay, but visual feedback is light.
• The caption is a footnote, not a poem title; no italics.

Project list

Projects is the first content area to stabilize on this site. It can show code projects as well as design systems, writing systems, and workflow experiments.

Suggested frontmatter:

---
title: "Personal Website Design System"
description: "Starting from Kami's paper-like typographic language, distilling the visual, content, and maintenance rules that fit this personal site."
date: "2026-05-14"
status: "draft"
tags:
  - design-system
  - personal-site
---

List rendering rules:

• Title on one line, description on one to two lines.
• No complex cards, no icons.
• Show external links as plain text links.
• When there is no content, prefer hiding the section over an empty placeholder.

Article page

Future Writings and Projects can share one article template.

Article page structure:

1. Top meta: date, type, language.
2. Title: serif 500, no more than two lines.
3. Summary: muted color, one paragraph.
4. Body: narrow column, line-height 1.55.
5. Subheadings: a left vertical line or pure size hierarchy — pick one, don’t mix.
6. Code blocks: ivory background, warm-gray border, mono font.
7. Quotes: left brand vertical line, body in muted.

Obsidian sync convention

Obsidian is the content source; the website is the publishing surface. Sync only publishable markdown.

Recommended structure:

Vault/
  Publish/
    Projects/
      design.md
    Writings/
    System/

Sync rules:

• Obsidian frontmatter stays consistent with the website.
• Private notes never enter Publish/.
• Image assets later go uniformly into public/media/ or src/assets/.
• Bilingual articles prefer path-based separation: /projects/design/ and /en/projects/design/.
• No client-side translation, no reliance on localStorage.

Anti-patterns

Avoid this design drift:

• The background turning pure white or cold gray.
• Multiple accent colors at once.
• Filling the home page with a card grid.
• Large areas of brand-color background.
• A section having both a left vertical line and a horizontal rule.
• Captions using italics or getting overly literary.
• Adding icons, tags, and buttons to the project list, turning it into a SaaS dashboard.
• Writing a one-off set of styles every time content is added.

Implementation checklist

When adding a page or component, check in this order:

1. Is it aligned within --content-width?
2. Does it use only one accent color?
3. Can it be solved with size/whitespace instead of borders/shadows?
4. Does it keep the warm-gray border and paper background?
5. Are there unnecessary cards?
6. Is it suitable for auto-generation from Obsidian markdown?
7. Can it support both Chinese and English paths?

The goal of this system isn’t to be more “designed,” but more stable. Once it’s stable, the content shows through.