1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
# Brand Reference — cleberg.net
Design decisions, usage rules, and porting checklist for this site and any
future sites.
---
## Color
All tokens live in `theme/static/tokens.css`. Import it before any other
stylesheet.
### Palette
| Token | Light | Dark | Role |
|----------------|-------------|-------------|-------------------------------------------|
| `--bg` | `#F6F4F0` | `#161412` | Page background |
| `--bg-soft` | `#EDEAE4` | `#1F1C1A` | Subtle surfaces (code blocks, inputs) |
| `--fg` | `#111111` | `#F0EDE8` | Primary text, hard borders, table headers |
| `--fg-soft` | `#555550` | `#888580` | Secondary text, metadata |
| `--accent` | `#c0392b` | `#ee6f5c` | Interactive elements only (see below) |
| `--salmon` | `#ee6f5c` | `#ee6f5c` | Decorative only (see below) |
| `--border` | `#111111` | `#2C2825` | Hard borders (nav, tables) |
| `--border-soft`| `#DDDAD4` | `#2C2825` | Dashed or subtle dividers |
| `--code-bg` | `#E8E4DE` | `#0F0D0C` | Code blocks, blockquotes |
| `--meta` | `#555550` | `#888580` | Timestamps, labels, footnote numbers |
### Usage Rules
**`--accent` is for interactive elements only:** links, `h2` left border,
footnote numbers, focus indicators. It is text-safe (WCAG AA: 4.6:1 on `--bg` in
light mode; ~4.5:1 on `--bg` in dark mode).
**`--salmon` is decorative only.** Never use it for body text on a light
background — it fails WCAG AA there. In dark mode, `--accent` and `--salmon`
resolve to the same value (`#ee6f5c`), which is intentional.
---
## Typography
- **Font stack:** `--font-mono` (ui-monospace, Cascadia Code, Source Code Pro,
Menlo, Consolas, monospace)
- **Headings:** weight 900, uppercase, `line-height: 1.1`
- **`h2` accent bar:** 10px left border in `--accent`
- **Body:** `1rem`, `line-height: 1.6`
- **Meta/labels:** `0.8–0.85rem`, uppercase, `--meta` color
- **Date format:** `YYYY-MM-DD` everywhere, no exceptions
---
## Logo
Files live in `~/Documents/brand/logo/`.
| Variant | Use case |
|-------------------------|--------------------------------------------------|
| `koi_light.svg/png` | Full logo on light backgrounds |
| `koi_dark.svg/png` | Full logo on dark backgrounds |
| `koi_light_minimal.svg` | Favicon, nav, small UI contexts on light |
| `koi_dark_minimal.svg` | Favicon, nav, small UI contexts on dark |
**Rule:** Use the minimal variant for anything under ~64px or in navigation
contexts. Use the full variant for headers, OG images, or anywhere it has room
to breathe.
---
## Signature Patterns
These are the things that make the site look like itself. Port all of them to
any new site.
1. **Grayscale images with color on hover** — `img { filter: grayscale(1) }
img:hover { filter: grayscale(0) }`. Apply to all content images by default.
2. **Blockquote as raw org-mode markup** — `#+begin_quote` / `#+end_quote`
pseudo-elements. Extend the "visible markup" aesthetic to other block
elements where appropriate.
3. **Nav: uppercase, weight 900, invert on hover** — `background: var(--fg);
color: var(--bg)` on hover. No underlines in nav.
4. **Links: underline offset** — `text-underline-offset: 3px`, invert on hover
(same as nav pattern).
5. **Hard borders on tables** — `3px solid var(--fg)` outer border, `1px solid var(--fg)` internal. Table headers use `background: var(--fg); color: var(--bg)`.
---
## Porting Checklist (New Site)
- [ ] Import `tokens.css` (or copy variables and update `tokens.css` as the
source)
- [ ] Apply monospace font stack
- [ ] Apply grayscale image treatment
- [ ] Use minimal koi as favicon
- [ ] Use `YYYY-MM-DD` date format
- [ ] Confirm `--accent` WCAG contrast on new background colors if palette is
adjusted
- [ ] Build or adapt OG/social card template using koi + palette + monospace
type
|
