Design Principles
The Core Idea
bythewei.dev is a sprint wall. Not a metaphor — it IS one. A cork board with sticky notes, tape, pins, stamps, a whiteboard, and a hidden bookshelf. The entire site is one page. Everything lives on the board.
The aesthetic is controlled insanity. Scrambled notes, random rotations, paper scraps pinned to cork. It should feel like you walked into someone’s office at 2am and found the wall covered in evidence.
Three Worlds
The site has three distinct visual environments. Each is a physical object that could exist on or near a real cork board.
1. The Cork Board (homepage)
The foundation. Everything sits on this. Cork texture with grid lines, radial gradients for depth, SVG noise overlay. 8 sticky note colors, 7 rotation classes, tape strips, stamps, pins. Layers let you peel stickies back through sprint history.
2. The Bookshelf (catalog modal)
Dark wood cabinet triggered by the hidden 📌 pin. Book spines color-coded by annotation density (cream → mahogany). Genre dividers. Hover tooltips. Click a spine to open the reading journal — a separate notebook-paper world with ruled lines, margin marks, and gold-highlighted first sentences.
3. The Whiteboard (research cabinet)
Aluminium-framed glossy white surface with dot grid. Lives on the wall as an inline section AND opens as a full modal. Marker tray along the bottom (red, blue, green + eraser). Doc cards drawn as hand-bordered boxes in marker colors. Tags rendered as colored markers. Search field filters in real-time.
Content source: src/content/docs/*.md — drop a markdown file, it appears on the board at build time.
The Two Sites
| bythewei.co | bythewei.dev | |
|---|---|---|
| Aesthetic | Fresh parchment, ink, verdigris | Cork board, controlled chaos |
| Typefaces | IM Fell English, Cinzel, Sorts Mill Goudy | Permanent Marker, Kalam, Fredoka |
| Palette | Parchment (#f4efe4), ink (#1c1208) | Cork (#8B6914), navy (#1a1a2e) |
| Vibe | Medieval codex, archival manuscript | 2am sprint wall, beautiful mess |
| Content | Auto-generated data archive | Hand-updated sprint stickers |
| Philosophy | ”It is what happened" | "The chaos is the aesthetic” |
Typography
| Font | Role |
|---|---|
| Permanent Marker | Headers, titles, stamps — the bold Sharpie scrawl |
| Kalam | Body text, sticky content — everyday handwriting |
| Patrick Hand | Tags, dates, metadata — neat careful print |
| Fredoka | Stats, column headers — friendly bubble letters |
Principles
- The board is the product. Not a portfolio piece. A living kanban that updates itself.
- Every surface is a real object. Cork, wood, whiteboard, paper. No floating UI chrome.
- Controlled insanity. Random rotations, tape at odd angles, stamps slightly crooked. But never unreadable.
- Layers are time. Peel a sticky to see last week. The board has memory.
- Hidden depth. The 📌 and 🖊️ are barely visible. The catalog is a bookshelf. Reward curiosity.
- One page. The wall is one HTML document. Modals are drawers in the same room.
- Drop and appear. Add a
.mdtosrc/content/docs/, it shows up on the whiteboard. Zero config.
Accessibility
- All doc pages render as semantic HTML (headings, lists, code blocks, tables) — screen readers and VoiceOver traverse them naturally
- The slight CSS rotation on
.doc-paperis purely visual — DOM order is linear - Doc pages use proper heading hierarchy (h1 title, h2/h3 sections)
- Back link, tag chips, and all interactive elements are keyboard-navigable
prefers-reduced-motionshould be respected for peel animations- Content is static HTML at build time — fully crawlable by LLMs, search engines, and assistive tech
LLM Accessibility
- All doc content is pre-rendered HTML (no JS required to read)
- Markdown source files are the canonical content — LLMs can fetch
/docs/{slug}and get clean semantic HTML - The whiteboard grid is server-rendered (Astro template), not JS-built
- Future:
/llms.txtwill provide a structured index of all docs