Design System
A living reference for the visual identity of systems built by one person with the leverage of an enterprise. Everything here is designed to feel like editorial × system console × field manual.
Premise
This design system encodes three ideas: typography has roles, color carries meaning, and layout communicates structure. Every visual choice traces back to a single principle — clarity over decoration.
Thesis
Headlines and big ideas. Declares the position.
Explanation
Body text and context. Delivers the reasoning.
Proof
Code, commands, and benchmarks. Shows the evidence.
Color
Use accent only for meaning — links, highlights, and the bracketed annotation. Everything else stays neutral.
Background
--color-bg
#F5F2ED
Surface
--color-bg-surface
#ECEAE4
Text
--color-text
#1A1A1A
Accent
--color-accent
#1A6B5A
Code
--color-bg-code
#E2DED7
Muted
--color-text-muted
#6B6560
Border
--color-border
#D1CCC4
Accent Hover
--color-accent-hover
#145447
Typography
Serif — Thesis
Source Serif 4 · Weight 300–900 · Used for all headings (h1–h4)
Sans — Explanation
Inter is the workhorse. It handles body copy, descriptions, navigation, and any text that exists to explain or contextualize. Set at 16px base with 1.8 line-height for comfortable reading.
Inter · Weight 400–700 · Used for body text, labels, UI
Mono — Proof
$ axi run transform --input data --task "clean and analyze"
[ok] Pipeline initialized
[ok] 3 agents active
[ok] Output: results/analysis.json
Tokens: 34% reduction · 2.5x fasterJetBrains Mono · Weight 400–500 · Used for code, commands, benchmarks
Signature Element
Every piece includes a bracketed concept in the title — the single
most important idea, rendered in the accent color. This is the primary
brand identifier. Add data-annotate to any heading and
the JS processor handles the rest.
Most software is still stuck in human-first workflows. It's time to build tools for autonomous agents.
Why one person should operate like an organization.
An interface built natively for autonomous agents.
How to operate with the leverage of an entire team, solo.
Structure
Every essay uses the same six-part structure. Section labels are small, uppercase, and muted — they organize without competing with the headline.
Premise
One sharp sentence.
Broken Default
What's wrong today.
New Model
Name the concept.
Mechanism
How it works.
Proof
Example, diagram, or code.
Implication
What becomes possible.
Benchmark
Every piece includes at least one visual artifact — a comparison table, a code block, a workflow diagram. These are tools for thinking, not ornament.
| Approach | Setup | Maintenance | Leverage |
|---|---|---|---|
| Ad hoc tools | Minutes | High — manual glue | 1x |
| Hybrid stack | Days | Medium — partial automation | 3x |
| Unified system | Weeks | Low — self-maintaining | 10x |
Old Way
$ run_script.sh --arg1 data.csv
Processing... done.
Manual review required.New Model
$ axi run transform --input data \
--task "clean and analyze"
[ok] Automated. No manual steps.Layout
Design is structured with generous whitespace, grid-aligned sections, and thin 1px dividers. No decorative elements. The grid supports 2, 3, and 4 column layouts that collapse to a single column on small screens.
Column 1
Column 2
Column 3
Left
Right
Mechanism
Reference the CSS and JS from any page to apply the design system. No build step required — vanilla CSS custom properties and a single small script.
<!-- Add to any HTML page -->
<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>Annotation Markup
<!-- Option A: auto-processed by JS -->
<h1 data-annotate>The future of work is [agent-native].</h1>
<!-- Option B: manual markup -->
<h1>The future of work is <span class="annotation">[agent-native]</span>.</h1>Implication
Same title pattern. Same structure. Same typography roles. Same visual artifacts. Every post feels like part of a larger system, not a standalone piece.