A constraint-based design system for AI-generated documents. One accent color, serif-led hierarchy, warm parchment canvas. Give any LLM agent a brief, get a composed layout back. It also doubles as a visual brief you can hand to image renderers like Claude Design or GPT Canvas.

Eight document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, and changelogs, plus a landing-page system (EN + CN + KO). Resumes route through three work modes, a two-choice Visual guide, Layout fitting, and Source protection, then ship as HTML, PDF, and validated editable DOCX. Plus 18 inline SVG diagram types for visual explanations. Resumes default to white and one A4 page. Warm cream, two pages, and a photo are optional.

Zhi is in private preview with no formal release yet. Repository access is required. Clone the authorized checkout, then install its local marketplace. Claude Desktop uses the checkout’s zhi.zip; authorized testers build zhi-fonts-full.zip locally and install it with bash scripts/ensure-fonts.sh --bundle.

What languages does it support?

English, Chinese, Japanese, and Korean. Latin uses Charter; Chinese uses FangZheng GongWen KaiTi, with FangZheng XinKaiTi for Chinese resume names; Japanese uses YuMincho; Korean uses Source Han Serif K. Japanese and Korean remain best-effort CJK paths with visual QA before delivery.

Design System · v1.12.0 · Preview

Zhi纸

Name: Zhi
Author: Zhi

Good content deserves good paper. Zhi makes documents clear and ready to share.

Canvas#f5f4ed Accent#1B365D SerifCharter / FZ Kai Sans= Serif (single font per page)

00 · See it

Output Samples

Give Claude the brief: one-pagers, long docs, letters, portfolios, resumes, slides all become polished layouts from one small, reliable rule set. The same brief also travels to image renderers, with the copy-paste prompt and sample outputs in the README.

Resumes start with page and paper choices: white and one A4 page by default, with warm cream, two pages, and a photo available when needed. Receive HTML, PDF, and editable DOCX together.

Equity Report

Tesla Q1 2026 earnings analysis

Resume

Product resume, 1 page

One-Pager

Zhi intro, white-paper print, 1 page

Slides

Agent keynote, 8 slides

Landing Pages

Landing-page examples

Zhi and selected third-party product pages show the same restrained visual vocabulary. External products retain their own identities.

Zhi

Design system homepage

Luo

CJK reading font, Chinese

Mole

macOS system utility

01 · Usage

Install & Invoke

Tell Claude what you need, for example "build me a resume", "make a one-pager for my startup", or "design a slide deck for my talk". The skill auto-triggers, no slash command needed.

Private preview requires repository access; no formal release yet. Read the access guide, clone the repository, and install locally.

# Authorized checkout
gh auth login
gh repo clone okht/zhi ./zhi

# Claude Code (v2.1.142+)
/plugin marketplace add ./zhi
/plugin install zhi@zhi

# Codex plugin marketplace
codex plugin marketplace add ./zhi
codex plugin add zhi@zhi

Generic agents: npx skills add ./zhi/plugins/zhi -a universal -g -y. Use the cloned lightweight plugin directory.

Claude Desktop uses the checkout’s Slim zhi.zip (below 6 MB). Authorized testers build zhi-fonts-full.zip locally for bash scripts/ensure-fonts.sh --bundle. Both packages require repository access.

02 · Manifesto

Design Principles

Warm parchment canvas, ink blue as the sole accent, serif carries hierarchy, while hard shadows and flashy palettes recede. This system is built for printed matter: stable, clear, and composed. Resume pages default to pure white with warm cream as the alternate; other documents retain parchment.

1
Documents use parchment #f5f4ed; resumes default to white
2
Accent color is ink blue #1B365D only; no second chromatic hue
3
All grays are warm, yellow-brown undertone; no cool blue-grays
4
Chinese uses FangZheng GongWen KaiTi; Latin glyphs keep their separate Charter face
5
General documents: body 400, headings 500; resumes follow sample emphasis
6
Three line-height bands: tight titles 1.1-1.3 / dense 1.4-1.45 / reading 1.5-1.55
7
Tag backgrounds must be solid hex; no rgba, WeasyPrint double-rectangle bug
8
Shadows: ring or whisper only, no hard drop shadows

03 · Color

Warm Restraint

One accent + warm neutrals + zero cool colors. Ink blue covers no more than 5% of any page. Beyond that is clutter, not restraint.

Canvas

Parchment

Page background, the emotional foundation

#F5F4ED

Ivory

Cards / elevated surfaces

#FAF9F5

Warm Sand

Button default / interactive surfaces

#E8E6DC

Deep Dark

Dark theme page base, not pure black

#141413

Brand

Ink Blue

Primary color · CTA · quote bar · section overline

#1B365D

Ink Light

Links on dark surfaces · lighter variant

#2D5A8A

Dark Surface

Dark theme container · warm charcoal

#30302E

Error

Error state, deep warm red

#B53333

Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

Tag Tints: rgba to solid hex

Solid hex equivalents of ink blue #1B365D on parchment. Tags use solid hex instead of rgba() to avoid a WeasyPrint double-rectangle rendering bug.

Tag sample

0.08

#EEF2F7

Tag sample

0.14

#E4ECF5

DefaultTag sample

0.18

#E4ECF5

Tag sample

0.22

#D0DCE9

Tag sample

0.30

#D6E1EE

04 · Typography

Type System

General documents keep the 400/500 hierarchy. Resume bold follows the reference sample, including separators.

Serif · Headlines + Body

Charter / FZDocKai

Chinese uses FangZheng GongWen KaiTi; Latin uses separate Charter files. Chinese resume names use FangZheng XinKaiTi.

</>

Mono · Code

JetBrains Mono

Code blocks, version numbers, hex values, tabular figures.

Scale (print pt; screen px = pt x 1.33)

Display

Good docs read
clear, stable, poised

36-48 pt
weight 500
line 1.10

H1 Section

Color System · Palette

18-22 pt
weight 500
line 1.20

H2 Subsection

Canvas · Warm Neutrals

14-16 pt
weight 500
line 1.25

H3 Item

Tag Tints · Solid Hex

12-13 pt
weight 500
line 1.30

Body

Ink blue covers no more than 5% of any page. Beyond that is clutter, not restraint. All grays have a yellow-brown undertone: R ≈ G > B is the rule of thumb.

9.5-10 pt
weight 400
line 1.55

Caption

Figure notes, footnotes, annotation text. Color drops to olive or stone.

8.5-9 pt
weight 400
line 1.45

Label

Design System · v1.12.0

7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

Rhythm & Form

Base unit: 4pt. Use tighter margins for dense pages and wider margins for formal documents.

Scale	Value	Use
xs	2-3 pt	Inline elements
sm	4-5 pt	Tag padding · tight layout
md	8-10 pt	Component internals
lg	16-20 pt	Between components · card padding
xl	24-32 pt	Section title margins
2xl	40-60 pt	Between major sections
3xl	80-120 pt	Between long-doc chapters

Radii

4 pt

Tight

6 pt

Code block

8 pt

Default card

12 pt

Container

16 pt

Feature card

24 pt

Large container

32 pt

Hero

Depth: Three Shadow Methods

Zhi avoids traditional hard shadows. Depth comes from ring shadows, whisper shadows, and light-dark alternation.

Ring Shadow

0 0 0 1pt var(--ring-warm)

Buttons · card hover

Whisper Shadow

0 4pt 24pt rgba(0,0,0,0.05)

Gentle elevation · feature cards

Light ⇌ Dark

parchment ⇌ deep-dark

Section-level · strongest contrast

06 · Components

Atomic Modules

A small fixed set, kept only where it solves a concrete document problem.

Buttons

ring shadow instead of hard drop · 8pt radius

Primary CTA Secondary Ghost

Tags, three levels

solid hex · pick from weak to strong

Light 0.08 Standard 0.18 Brush gradient

Quote

left 2pt brand solid + olive text

A thousand no's for every yes, prefer clarity over decoration.

Metric

serif number + sans label · tabular-nums

8Doc types

1Accent

8Rules

Section Title

serif 500 · 15pt · size-led hierarchy, no decoration

Selected Works · Projects

Dash List

dash list · editorial tone

Parchment for documents; white is available for resumes
Ink blue accent, no second color
Serif carries authority

Code Block

ivory bg + 4pt radius, no border

// warmth from restraint, not from color
canvas   = parchment; accent = ink_blue
palette  = warm_neutrals − cool_grays
document = serif × hierarchy + generous_space
beauty   = constraints × intention ÷ noise

Featured Card

whisper shadow + 16pt radius

Tesla Company Profile · One-Pager

Single A4 page · 4 metric cards + 3 body sections + timeline

English A4 x 1 Ink Blue

07 · Diagrams

Inline Charts

Eighteen inline SVG diagram types covering architecture, process, and data chart scenarios. Tell Claude which type you need and it embeds directly into the document, colors and fonts following the Zhi design language.

Architecture

System components and connections, one focal node

Flowchart

Decision branches, yes/no paths, focal on success

Bar Chart

Quarterly revenue comparison, gradient or single color

Donut Chart

Revenue structure breakdown, supports 3–6 segments

08 · Decision Lookup

Quick Reference

When in doubt about what to use, consult this table. If it's not here, go back to first principles.

Task	How
Large headline	serif `500`, size by hierarchy, line-height `1.10-1.30`
Reading body	serif `400`, `9.5-10 pt`, line-height `1.55`
Emphasize a number	`color: var(--brand)`, not bold
Separate two sections	`2.5pt` brand left bar, or `0.5pt` warm-gray dashed
Quote someone	Left `2pt` brand solid + olive text
Show code	Ivory bg + `4pt` radius + mono font, no border
Primary vs secondary	Primary: brand fill + ivory text; Secondary: warm-sand + charcoal
Mark a special card	`border-left: 1.4pt solid var(--brand)`, one edge only
Begin a section	Serif `500` · `15pt` · size-led hierarchy, no decoration needed
Document cover	Single page, Display size + right-aligned author/date + generous whitespace
Show key figures	Baseline row, transparent, no container + serif number, ink blue + sans label

09 · Anti-Patterns

What to Avoid

Exceptions are allowed, but the reason should be explicit.

Page canvas

NeverAvoid cool gray #f3f4f6. White is supported for resumes and the white-paper print variant.

InsteadAlways #f5f4ed parchment, with @page background set to the same color to avoid white edges when printing.

Tag tints

Neverrgba(27,54,93,0.18) for tags. WeasyPrint renders padding and glyph areas at different opacity, creating double rectangles.

InsteadThe tint lookup table's equivalent solid hex #E4ECF5. The rendering stays clean and the color remains stable.

Synthetic bold

NeverUse synthetic heavyweight headings: they blur strokes and overwhelm general documents.

InsteadKeep body 400 and headings 500 with the supplied font files. Use size or a brand left bar for more presence. Resume emphasis follows its own sample rules.

Shadows

NeverHard drop shadow 0 2px 8px rgba(0,0,0,0.3). Visually heavy and likely to print as dark blobs.

InsteadRing shadow 0 0 0 1pt or whisper rgba 0.05, or simply alternate light and dark sections.

10 · Background

Made for useful documents

Zhi brings Chinese typography, clear hierarchy, and consistent spacing to everyday document work. Its templates cover a short letter, a research report, a portfolio, or a presentation with the same restrained design system.

Resume work begins with the material you have. Existing resumes keep their wording while the layout improves; raw notes become a guided conversation. The result is a readable page with editable source files and checked PDF output.

11 · Questions

FAQ

What is Zhi?: A constraint-based design system for AI-generated documents. One accent color, serif-led hierarchy, warm parchment canvas. Give any LLM agent a brief, get a composed layout back. It also doubles as a visual brief you can hand to image renderers like Claude Design or GPT Canvas.
What can it produce?: Eight document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, and changelogs, plus a landing-page system (EN + CN + KO). Resumes route through three work modes, a two-choice Visual guide, Layout fitting, and Source protection, then ship as HTML, PDF, and validated editable DOCX. Plus 18 inline SVG diagram types for visual explanations. Resumes default to white and one A4 page. Warm cream, two pages, and a photo are optional.
How do I set it up?: Zhi is in private preview with no formal release yet. Repository access is required. Clone the authorized checkout, then install its local marketplace. Claude Desktop uses the checkout’s zhi.zip; authorized testers build zhi-fonts-full.zip locally and install it with bash scripts/ensure-fonts.sh --bundle.
What languages does it support?: English, Chinese, Japanese, and Korean. Latin uses Charter; Chinese uses FangZheng GongWen KaiTi, with FangZheng XinKaiTi for Chinese resume names; Japanese uses YuMincho; Korean uses Source Han Serif K. Japanese and Korean remain best-effort CJK paths with visual QA before delivery.