kunchenguid Build a Page with the Design System
Create HTML pages that follow the kunchenguid design system. The result should feel like editorial × system console × field manual.
Live reference: https://kunchenguid.github.io/kunchenguid-design-system/
Boilerplate
Every page starts with this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{Page Title}</title>
<link
rel="stylesheet"
href="https://kunchenguid.github.io/kunchenguid-design-system/css/design-system.css"
/>
<script
src="https://kunchenguid.github.io/kunchenguid-design-system/js/design-system.js"
defer
></script>
</head>
<body>
<div class="container">
<!-- content here -->
</div>
</body>
</html>
All content goes inside a single .container div.
Mandatory: The Annotation Title
Every page MUST have a headline with a [bracketed concept] — the single most important idea. Add data-annotate to the heading and the JS auto-wraps the bracketed text in accent color.
<h1 data-annotate>The future of work is [agent-native].</h1>
Rules:
- Only bracket one core concept per title
- Keep titles short and declarative
- End with a period
Typography Roles
Fonts have assigned roles. Never mix them arbitrarily.
| Role | Font | Use for | Applied by |
|---|---|---|---|
| Thesis | Source Serif 4 | Headlines, big ideas | h1–h4 (automatic), .font-serif |
| Explanation | Inter | Body text, descriptions, UI | body (automatic), .font-sans |
| Proof | JetBrains Mono | Code, commands, benchmarks | code, pre (automatic), .font-mono |
Layout Components
Sections
Wrap each major content block in a .section. Adjacent sections get an automatic thin top border.
<section class="section">
<p class="section-label">Premise</p>
<h2 data-annotate>One person should operate like an [enterprise].</h2>
<p>Body text goes here.</p>
</section>
Section Labels
Use .section-label for small uppercase labels that categorize content. The standard labels from the essay format are:
- PREMISE
- BROKEN DEFAULT
- NEW MODEL
- MECHANISM
- PROOF
- IMPLICATION
<p class="section-label">Mechanism</p>
Grid
Use .grid with a column modifier. Collapses to single column on mobile (<768px).
<div class="grid grid--2">
<!-- 2 columns -->
<div class="grid grid--3">
<!-- 3 columns -->
<div class="grid grid--4"><!-- 4 columns --></div>
</div>
</div>
Cards
Surface-colored boxes for grouping content.
<div class="card">
<p class="section-label">Category</p>
<h3 data-annotate>Card title with [annotation].</h3>
<p class="text-sm text-muted mb-0">Description text.</p>
</div>
Tables
Use for benchmarks, comparisons, and structured data. Always wrap in .table-wrap for mobile overflow.
<div class="card">
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>Approach</th>
<th>Setup</th>
<th>Leverage</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Row label</strong></td>
<td>Value</td>
<td>Value</td>
</tr>
</tbody>
</table>
</div>
</div>
Code Blocks
For terminal output, commands, or benchmarks — the "proof" layer.
<pre><code>$ axi run transform --input data --task "clean and analyze"
[ok] Pipeline initialized
[ok] 3 agents active</code></pre>
Dividers
Thin horizontal rules between content blocks within a section.
<hr class="divider" />
Content Structure
Every essay or post should follow this six-part format:
- Claim — one sharp sentence (the annotated headline)
- Broken Default — what's wrong today
- New Model — name the concept
- Mechanism — how it works
- Proof — example, diagram, code, or benchmark table
- Implication — what becomes possible
Each part maps to a .section with a .section-label.
Visual Artifacts
Whenever appropriate, we should present a thinking artifact:
- Comparison table (before vs after)
- Code block / terminal output
- Benchmark table with data
Never use decorative illustrations. Prefer thinking artifacts — visuals that carry information.
Utility Classes
| Class | Effect |
|---|---|
.font-serif |
Force serif font |
.font-sans |
Force sans font |
.font-mono |
Force mono font |
.text-muted |
Muted text color (#6B6560) |
.text-accent |
Accent text color (#1A6B5A) |
.text-sm |
Small text (0.875rem) |
.text-lg |
Large text (1.25rem) |
.mt-sm through .mt-2xl |
Margin-top |
.mb-0 through .mb-lg |
Margin-bottom |
Color Tokens
Only use these colors. Accent is reserved for meaning (links, annotations, highlights) — never decoration.
| Token | Hex | Use |
|---|---|---|
--color-bg |
#F5F2ED |
Page background |
--color-bg-surface |
#ECEAE4 |
Cards, surfaces |
--color-bg-code |
#E2DED7 |
Code blocks |
--color-text |
#1A1A1A |
Primary text |
--color-text-muted |
#6B6560 |
Secondary / labels |
--color-accent |
#1A6B5A |
Links, annotations |
--color-border |
#D1CCC4 |
Dividers, card edges |
Writing Style
- Precise, not performative
- Opinionated, but justified
- Systems-level thinking
- Calm tone, no hype
Avoid: buzzwords, over-explaining, marketing language, decorative elements.