Design System · v6.1.0 · 2026.08 Local ZIP · Self-hosted

Folio

Folio helps agents turn raw notes into stable PDF, PPTX, SVG artifacts, and Web design guidance. Use this page to choose an output path, inspect specimens, and follow the rules for extension.

Classes8 document types Artifacts4 reproducible demos OutputsPDF · PPTX · SVG GuidanceReading Web · Workspace UI LanguagesEnglish · Chinese

Browse outputs Install Read Web pages

00 · Master Index

Output System

Choose what Folio should produce. The catalog maps user requests to PDF, PPTX, SVG or Web reading pages, and the specimen matrix shows the actual output language.

Document Classes

System Catalog

Each class resolves a natural-language request into a stable output path with a predictable format.

No.	Type	Function	Format
01	One-Pager	Launch brief, proposal, executive summary	PDF
02	Long Doc	White paper, review, technical report	PDF
03	Letter	Formal note, statement, governance memo	PDF
04	Portfolio	Selected works and editorial case studies	PDF
05	Resume	Professional profile and measurable career record	PDF
06	Slides	Talk deck, keynote, internal presentation	PPTX
07	Equity Report	Investment memo and earnings brief	PDF
08	Changelog	Release notes and version narrative	PDF
09	Artifact Records	Architecture and UML diagram specimens	SVG · PNG · PDF
10	Web Reading Pages	Static reading pages set by the engine's Web profile	HTML

Specimen Matrix

Selected outputs

Selected specimens let you inspect real output before reading lower-level reference rules.

One-Pager · Orbit Cache

Long Doc · Agent Operations

Slides · Delivery Deck

Equity Report · NVIDIA

Artifact · Agent Runtime

Artifact · Agent Session Model

For the full galleries, open the README or browse assets/demos/.

01 · Manifesto

Document Ethic

Folio treats a document not as neutral output, but as the form through which thought becomes public, readable, and durable. Warm parchment slows the page down, serif gives judgment a voice, cinnabar marks what matters, and whitespace protects the reader's attention. The goal is not decorative polish. It is to give content order, emphasis, and enough weight to be worth keeping.

1
The page should feel held, not backlit: use parchment #F6F0EA, never pure white
2
Accent is judgment, not decoration: use cinnabar-coral #B83D2E only, never a second chromatic hue
3
Neutrals must stay warm so the document feels archival, never cold or blue-gray
4
One serif family should carry the page so headlines and body speak in a single editorial voice
5
Authority comes from hierarchy, not force: body at 400, headings at 500, no synthetic bold
6
Reading needs tempo: keep the three line-height bands for titles, dense blocks, and long reading
7
Spacing should respect language: Chinese print body usually carries 0.3pt tracking, English body stays at 0
8
Tags must stay materially clean: solid hex only, never rgba, to avoid the WeasyPrint double-rectangle artifact
9
Depth should whisper, not perform: use ring or whisper shadows, never hard drop shadows
10
No italic in templates or demos; emphasis should come from structure, contrast, and placement

02 · Usage

Install & Invoke

Tell Claude what you need, for example "build me a resume", "make a one-pager for my startup", "write an equity report", or "format these release notes". The skill auto-triggers, no slash command needed.

# Claude Code
# Publish this repository under your own namespace first.

# Codex
bash scripts/package-skill.sh   # build dist/folio.zip, then install locally

Claude Desktop: build dist/folio.zip with scripts/package-skill.sh, then upload it in Customize > Skills > "+" > Create skill.

03 · Color

Cinnabar Focus

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

Canvas

Parchment

Page background, the emotional foundation

#F6F0EA

Ivory

Cards / elevated surfaces

#FBF7F3

Warm Sand

Button default / interactive surfaces

#E6DACD

Deep Dark

Dark theme page base, brown-charcoal instead of pure black

#191514

Brand

Cinnabar Coral

Primary color · CTA · quote bar · section overline

#B83D2E

Coral Light

Links on dark surfaces · lighter variant

#D06A5E

Dark Surface

Dark theme container · warm charcoal

#2E2521

Error

Error state, deep warm red

#A63A31

Warm Neutrals

Near Black

#191514

Dark Warm

#3A312D

Olive

#5A4A43

Stone

#756A63

Tag Tints: rgba to solid hex

Solid hex equivalents of cinnabar-coral #B83D2E on parchment. Tags use solid hex instead of rgba() to avoid a WeasyPrint double-rectangle rendering bug.

Tag sample

0.08

#F7E6E1

Tag sample

0.14

#F1D2CC

DefaultTag sample

0.18

#F1D2CC

Tag sample

0.22

#EBC7C0

Tag sample

0.30

#E2B3A8

Choosing a Scheme

Three schemes ship, one file each in references/profiles/theme/. FOLIO_THEME selects one, and it reaches documents, diagrams, slide decks and these pages. Every scheme is held to the same bar: text at 4.5:1 on both surfaces, a hairline that stays visible, and ramp numbers that follow lightness.

Folio Classic

folio-classic-v1 Default

Warm parchment canvas, cinnabar accent. The system's own voice.

23 palette entries · 42 roles

Folio Forest

folio-forest-v1

Warm bone canvas, deep forest accent. Editorial and long-form.

18 palette entries · 42 roles

Folio Slate

folio-slate-v1

Cool neutral canvas, deep azure accent. Institutional research.

18 palette entries · 42 roles

FOLIO_THEME=folio-slate-v1 python3 scripts/build.py renders in a scheme; python3 scripts/check_theme_schemes.py holds every scheme to the bar. Unset, the profile marked default is used.

04 · Typography

Type System

Serif carries hierarchy, sans carries function. Serif body at 400, headings at 500.

Serif · Headlines + Body

Charter / LXGW WenKai

Used for headlines, body text, pull quotes, and numeric emphasis. English uses Charter, Chinese uses LXGW WenKai.

</>

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

Cinnabar-coral 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 · v6.1.0

7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

Rhythm & Form

Base unit: 4pt. Denser layouts get smaller margins; more formal documents get larger ones.

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

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

Ring Shadow

0 0 0 1pt var(--color-border-default)

Buttons · focus rings

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

Reference Modules

Document atoms for PDF and artifact composition. This section is reference material, not a Web component gallery.

Buttons

ring state · active press 1px · 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

10Rules

Section Title

serif 500 · 15pt · size-led hierarchy with optional brand left bar

Selected Works · Projects

Dash List

dash instead of bullet · editorial tone

Warm parchment, never pure white
Cinnabar-coral accent, no second color
Serif carries authority

Code Block

ivory bg + 0.5pt border + 6pt radius

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

Featured Card

quiet artifact surface + 16pt radius

Tesla Company Profile · One-Pager

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

English A4 x 1 Cinnabar Coral

07 · Diagrams

Inline Charts

Twenty-three generator-backed diagram types cover architecture, process, notation, and data scenarios; four hand-drawn inline miniatures plus five rendered specimens stay visible here as parity references. Arrows, nodes, legends, grids, and labels share one Folio technical illustration stroke across generated artifacts and homepage miniatures.

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

Agent Runtime

Request-driven runtime case for gateway ingress, planning, model execution, tool use, retrieval memory, and observability.

Workflow Engine

Workflow orchestration case for ingress, orchestration, worker execution, state persistence, and event-based continuation.

Data Platform

Policy-driven layout case for pipeline spine, warehouse serving, and supporting read paths rendered from one reusable grammar.

Agent Session Model

UML domain model case with interfaces, enum lifecycle state, composition, aggregation, and retrieval-memory associations.

Drawing Review Flow

Drawing DSL case with typed decisions, labelled branches, orthogonal routing, and accessible SVG metadata.

08 · Web

Web Reading Pages

A series index and its module archives, built as self-contained static HTML. Screen type, spacing, measure and figure geometry come from the Web profile; there is no component library, router or app shell.

Two Page Kinds

Case or Fixture

A case is content: it names the work it reads and never describes the engine that set it. A fixture is the engine's conformance page, with a delivery status and a package path.

Part	What it carries	Owner	Rule set
Series index	Series title, lead, one card per module	`build_web.py`	`W-DLV`, `W-STR`
Module archive	Doc head, contents, chapters, plates, sources	`build_web.py`	`W-CNT`, `W-FIG`
Measured page	Computed type, column, plates, captions	`web_verify.py`	`V-*`

Build

One command, then a check

folio.py web --series <dir> writes the series; check_web.py --level 3 verifies structure, density, colour and figure geometry. The browser measurement runs nightly.

Layer	Source	Rule	Limit
Type and measure	`profiles/web/folio-v1.yaml`	`W-DEN`, `V-TYPE`	No literal in `base.css`
Colour	`profiles/theme/*.yaml`	`W-COL`, `V-COL-01`	No hex in a template
Figures	Drawing DSL	`W-FIG`, `V-FIG`	A page never hand-authors an SVG

09 · Image Prompts

Image Prompting

Folio also works as a visual brief for image models. These three examples translate the same parchment palette, cinnabar-coral restraint, and serif-led annotation logic into travel posters that still feel like designed documents.

Alpine night-train travel atlas

Sleeper rail route, station callouts, timetable chips, and warm editorial notes.

Coastal weekend route poster

Tide windows, cafe stops, walking segments, and route legends on one seaside spread.

Desert design hotel field guide

Arrival map, packing cues, artifact close-ups, and a restrained hotel field journal layout.

10 · 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(--color-accent-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 + `0.5pt` border + `6pt` radius + mono font
Primary vs secondary	Primary: brand fill + ivory text; Secondary: warm-sand + charcoal
Mark a special card	`border: 0.5pt solid var(--color-accent-brand)` or `border-left: 3pt`
Begin a section	Serif `500` · `15pt` · size-led hierarchy, optional brand left bar when emphasis helps
Document cover	Single page, Display size + right-aligned author/date + generous whitespace
Data card	Ivory bg + `8pt` radius + serif large number, cinnabar-coral + sans small label

11 · Anti-Patterns

What to Avoid

Exceptions are allowed, but the reason should be explicit.

Don't

Use #FFFFFF pure white or #f3f4f6 cool gray as page background. It makes the page feel brittle and weakens the warm parchment character.

Do

Always use #F6F0EA parchment. Set @page background to the same color to avoid white edges when printing.

Don't

Use rgba(184,61,46,0.18) for tags. WeasyPrint renders padding and glyph areas at different opacity, creating double rectangles.

Do

Use the tint lookup table for equivalent solid hex #F1D2CC. The rendering stays clean and the color remains stable.

Don't

Set headlines to font-weight: 600 or heavier synthetic bold. Synthetic bold blurs strokes and degrades typographic quality.

Do

Body 400, headings 500 (real Medium weight). For more presence, use size or a brand left bar, never synthetic bold.

Don't

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

Do

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