wcygan-net-design

name

wcygan-net-design

description

Design system and UI/UX conventions for wcygan.net — a TanStack Start + Tailwind v3 personal blog with a minimal, readable, editorial aesthetic. Auto-loads when working in /Users/wcygan/Development/wcygan.net, editing src/styles/app.css, src/routes/__root.tsx, or any route/component/MDX post on that site. Use when styling pages, adding routes, writing MDX posts, touching the header/nav/footer chrome, or changing colors, type, spacing, or layout. Keywords: wcygan.net, wcygan blog, personal site design, minimal blog design, system fonts, primary blue, link blue, cornflower blue, bio-highlight banner, post-list, blog-post, 800px container, MDX frontmatter, Mermaid diagram, Shiki, Tailwind v3, TanStack Start blog, __root chrome, design.md, app.css

wcygan.net Design System

Minimal, text-first personal blog. The aesthetic is editorial minimalism with one committed cornflower-blue accent — no cards, no gradients, no drop shadows, no web fonts. System fonts, 800px column, tight vertical rhythm (a deliberate move away from the old "30px between every block" rule — see layout.md for the current scale).

Project root: /Users/wcygan/Development/wcygan.net

Prime directives

1. The aesthetic is already chosen. Do not introduce new directions (brutalist, glassmorphic, neon, etc.) without explicit request. This is a reader's blog.
2. src/styles/app.css and design.md are the source of truth. If a style is defined there, use it; don't reinvent.
3. src/routes/__root.tsx owns all chrome — header, nav, HTML shell. Child routes render inside <Outlet />. Never regenerate nav.
4. This is Tailwind v3, not v4. There's a tailwind.config.ts. CSS entry uses @import 'tailwindcss/base'. Do not apply v4 / CSS-first patterns here.