diff options
Diffstat (limited to 'BRAND.md')
| -rw-r--r-- | BRAND.md | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/BRAND.md b/BRAND.md new file mode 100644 index 0000000..b0d3f9f --- /dev/null +++ b/BRAND.md @@ -0,0 +1,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 |