24W.IN — Full Site Build Prompt
24W.IN — Full Site Build Prompt
For use with Claude Code, Cursor, or any AI coding agent
Stack: Netlify + Vercel · Next.js 14 App Router · Static-first
WHO YOU ARE WORKING WITH
You are building a personal brand ecosystem for Tony Cu (Detroit, MI — formerly Washington, DC), a nonprofit funds development and marketing director who is also a systems architect, AI integrator, and PKM practitioner. His professional identity lives at 24w.in, organized as a multi-subdomain ecosystem. His provenance signature is:
"Made with love and care, with music in the air, plus TonYC."
BRAND & DESIGN SYSTEM
Aesthetic DNA
- Primary reference: A24 Studios website — editorial, cinematic, dark, minimal
- Secondary reference: Braille Institute website — accessible clarity, strong typographic hierarchy
- Core motif: Large oversized numbers (cardinals, not ordinals) offset in corners of cards and sections. These numbers are structural identity markers, not decoration.
- Layout language: Field of cards with varied sizes — NOT symmetric grids, NOT calendar-like rows, NOT tables
- Feel: Constraint-based editorial luxury. Dark. Spacious. Intentional.
Design Tokens
/* COLOR */
--bg: #0d0d0c;
--surface: #131312;
--surface-2: #1a1918;
--surface-offset: #1f1e1c;
--border: oklch(from #cdccca l c h / 0.10);
--text: #cdccca;
--text-muted: #797876;
--text-faint: #4a4947;
--accent: #4f98a3; /* Hydra Teal — primary CTA only */
--accent-hover: #227f8b;
--accent-highlight: #1a3035;
--number-label: #1e1d1b; /* Background chip for big numbers */
/* TYPOGRAPHY */
--font-display: 'Atkinson Hyperlegible', 'Georgia', serif;
--font-body: 'Satoshi', 'Inter', sans-serif;
/* OVERSIZED NUMBER SCALE */
--num-hero: clamp(6rem, 12vw, 14rem); /* Hero section offset labels */
--num-card: clamp(3rem, 6vw, 7rem); /* Card corner labels */
/* TYPE SCALE (fluid) */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
/* SPACING */
--space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
--space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
/* RADIUS */
--radius-sm: 0.375rem; --radius-md: 0.5rem;
--radius-lg: 0.75rem; --radius-xl: 1rem;
/* SHADOWS */
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
Typography Rules
- Atkinson Hyperlegible (via Braille Institute / Google Fonts) — display only, 24px+
- Satoshi (via Fontshare) — all body, UI, labels
- Big number labels:
--num-cardsize,--text-faintcolor, positionedabsolutetop-left or bottom-right of cards withz-index: 0behind content - Never center-align body copy or card descriptions — left-align as default
- Max 4 type styles per page
Card System
- Cards use
--surfacebackground,--borderborder,--radius-lgradius - Inner content has
z-index: 1, number label hasz-index: 0 - Hover:
box-shadowlifts to--shadow-md, border brightens slightly - Varied sizes in grid: use
grid-column: span 2on featured items - No colored left-border accents. No icon-in-circle badges.
FULL SITEMAP
Root Domain: 24w.in
The manifesto and ecosystem hub. The "operating system" homepage.
24w.in/
├── / → Manifesto homepage (the 24 cards field)
├── /philosophy → Origin story: constraint, the number 24, how it works
├── /ecosystem → Visual map of all subdomains and how they connect
└── /brand → Design system & brand guidelines (public-facing)
Primary Subdomain: tony.24w.in
Tony's personal portfolio and professional identity.
tony.24w.in/
├── / → Hero + intro + selected work + contact CTA
├── /about → Full biography, philosophy, story, third-person bio
├── /work → All case studies index (card grid)
│ ├── /work/prana-obsidian-os → Case study: Personal OS in Obsidian
│ ├── /work/prana-group-systems → Case study: Nonprofit systems & automation
│ ├── /work/24w-ecosystem → Case study: 24w.in design + architecture
│ └── /work/sett-life → Case study: SETT.LIFE concept
├── /tools → Stack: tools, stack, workflows
├── /now → /now page — what Tony is working on right now
└── /contact → Contact form + calendar booking link
Subdomain: sett.24w.in
SETT.LIFE venture concept — personal brand + lifestyle content.
sett.24w.in/
├── / → SETT landing/intro
├── /story → Brand origin and philosophy
└── /log → Development log (public-facing sett.log)
Subdomain: lab.24w.in
Experiments, prototypes, builds in progress.
lab.24w.in/
├── / → Lab index: active + archived experiments
├── /[slug] → Individual experiment pages
└── /tools → Public-facing tool demos
Subdomain: notes.24w.in
Public notes, writing, thinking. Connected to Obsidian vault publish.
notes.24w.in/
├── / → Notes index / recent entries
├── /[slug] → Individual note or essay
└── /tags/[tag] → Tag index
Subdomain: app.24w.in
Application layer — dashboards, internal tools.
app.24w.in/
├── / → App hub / login gate
└── /[tool] → Individual app routes (protected)
Subdomain: nas.24w.in
Synology NAS landing page — internal Prana Group system panel.
nas.24w.in/
└── / → Internal system landing (professional, mixed tone)
TECH STACK & INFRASTRUCTURE
Hosting Architecture
- Cloudflare: DNS management, SSL/TLS (Full Strict), edge caching, WAF, subdomain routing
- All subdomains route through Cloudflare with appropriate Page Rules
- Cloudflare Pages: host
24w.inroot (static, no framework needed) - Cloudflare R2: media/asset storage (images, fonts if self-hosted)
- Vercel: Host
tony.24w.inandlab.24w.inas Next.js 14 App Router projects- Connect GitHub repo, set custom domain in Vercel dashboard
- Use Vercel's Edge Runtime for any dynamic routes
- notes.24w.in: Vercel + MDX or Obsidian Publish
Repository Structure
24w-in/ ← GitHub org or monorepo root
├── apps/
│ ├── root/ ← 24w.in (Cloudflare Pages, static HTML or Astro)
│ ├── tony/ ← tony.24w.in (Next.js 14, Vercel)
│ ├── lab/ ← lab.24w.in (Next.js 14, Vercel)
│ ├── notes/ ← notes.24w.in (Next.js + MDX, Vercel)
│ └── sett/ ← sett.24w.in (Next.js or static, Vercel)
├── packages/
│ ├── ui/ ← Shared component library (design system)
│ ├── tokens/ ← Design tokens (CSS vars + JS exports)
│ └── config/ ← Shared ESLint, Tailwind, TypeScript configs
└── docs/ ← Internal docs, brand guidelines source
DNS Setup (Cloudflare)
Type Name Value Proxy
A @ 192.0.2.1 (CF Pages IP) Proxied
CNAME tony cname.vercel-dns.com Proxied
CNAME lab cname.vercel-dns.com Proxied
CNAME notes cname.vercel-dns.com Proxied
CNAME sett cname.vercel-dns.com Proxied
CNAME app cname.vercel-dns.com Proxied
CNAME nas [Synology QuickConnect or internal IP] DNS only
PERFORMANCE REQUIREMENTS
Apply these rules to every page, no exceptions:
- Font preloading — preload Atkinson Hyperlegible woff2 and Satoshi woff2 in
<head>before any other resource. Subset to Latin + numerals only for display font. - font-display: swap with fallback
size-adjustandascent-overrideto prevent CLS on large heading swap. - LCP target —
tony.24w.inhomepage: LCP < 1.5s. All other pages: < 2.0s. - CLS target — < 0.1 on all pages. Set explicit
width/heighton every image. - Scroll animations — use CSS scroll-driven animations (
animation-timeline: view()) for card reveals, NOT JS scroll listeners. Wrap inprefers-reduced-motionmedia query. backdrop-filter: blur()— max one element per page (sticky nav only). Do not apply to cards.will-change— JS toggle only: add onmouseenter, remove onanimationend. Never in static CSS.content-visibility: auto— apply to all sections below the fold withcontain-intrinsic-size.- Images —
loading="lazy"on all below-fold images.fetchpriority="high"on hero/first-card image. Always WebP/AVIF. - JavaScript —
deferortype="module"on all script tags. No render-blocking JS.
PAGE-BY-PAGE BUILD SPECS
tony.24w.in / (Homepage)
Sections in order:
- Nav — Logo (SVG inline, "24W" mark), links: Work | About | Now | Contact. Dark theme toggle.
- Hero — Full viewport. Name:
TOE · KNEE · SEE. Role line: "Systems builder. Nonprofit strategist. Knowledge architect." One CTA: "See the work →". Oversized offset number01bottom-right,--num-herosize,--text-faintcolor. - Selected Work — 4 case study cards in bento layout (2 wide + 2 regular or 1 featured full-width + 3 smaller). Each card has: number label (01–04), project title, one-line context, outcome tag. Click →
/work/[slug]. - Method — 2-column: left is a short philosophy statement; right is a list of 5–6 workflow principles with Satoshi bold labels.
- Tools — horizontal scroll strip or compact 3-col grid: grouped by category (PKM, Dev, AI, Ops). Icon + name + one-line role.
- Now — Single card excerpt from
/nowpage. Pull dynamically if MDX, or static if plain HTML. - Contact CTA — Full-width dark section. "Let's work together." Two buttons: "Book a call" (primary, accent) + "Send a message" (ghost). Email shown as plain text.
- Footer — "Made with love and care, with music in the air, plus TonYC." Links: tony.24w.in | 24w.in | notes | lab. Year.
tony.24w.in/work (Case Studies Index)
- Card grid: each card shows number label, project title, tags (Nonprofit / Systems / AI / Design), year, one-sentence outcome
- Cards link to individual case study pages
- Filter by tag (client-side, no page reload)
tony.24w.in/work/[slug] (Individual Case Study)
Template structure per case study:
Title
One-line tagline
─────────────────────────────
Context — what this was and who it served
Problem — what was broken, unclear, or missing
Approach — what Tony built or designed
Tools — stack and working methods
Outcome — what improved, measured if possible
Takeaway — one-line principle extracted
─────────────────────────────
← Back to Work Next Case Study →
tony.24w.in/about
Sections: Identity line → Quick intro (3 sentences) → Philosophy (constraint, systems, care) → How I work (methodology) → Story (nonprofit journey + PKM + AI) → Third-person bio (for speaking/press) → Contact links.
tony.24w.in/now
Minimal. Current date header. 3–4 short paragraphs: what project, what I'm reading/learning, where I am. Updated manually. No CMS needed.
24w.in / (Root Manifesto)
- 24 cards in a field layout (not grid). Varied sizes. Each card = one of the 24 "ways in."
- Cards have: large corner number (
--num-card), category chip (person / project / place / tool / concept), title, optional short description - Some cards are intentionally blank or marked private
- Sticky minimal nav. No footer needed.
- Philosophy CTA →
/philosophy
COMPONENT LIBRARY (packages/ui)
Build these components first, shared across all apps:
| Component | Props | Notes |
|---|---|---|
<Card> | number, title, description?, tag?, href?, span? | Core card with offset number |
<NumberLabel> | value, size ("hero"|"card") | Positioned absolute |
<CTA> | label, href, variant ("primary"|"ghost"|"text") | Accent-colored primary only |
<Nav> | links[], logo | Dark toggle built in |
<Footer> | provenance, links[] | Provenance signature required |
<CaseStudyLayout> | all case study fields | Renders full case study template |
<TagFilter> | tags[], onFilter | Client-side filter, no reload |
<NowBlock> | date, content | Current /now excerpt |
CONTENT SEEDS (use as starting copy — edit freely)
Hero tagline options
- "24 ways in. One system. All mine."
- "I build the infrastructure behind the work that matters."
- "Systems thinker. Nonprofit strategist. Builder."
Case studies to build (Tony's approved work)
- Personal OS in Obsidian — Built a full PKM + project management system in Obsidian with custom templates, Johnny Decimal file hierarchy, Claude Code integration, and automated daily notes.
- Prana Group Systems — Designed internal ops, documentation, and automation systems for a nonprofit consulting firm.
- 24w.in Ecosystem — Designed and built the full 24w.in brand, design system, multi-subdomain architecture, and visual language from scratch.
- SETT.LIFE — Concept development for a personal brand venture: brand identity, naming, origin story, and digital presence strategy.
Philosophy excerpt (use on /philosophy)
"At the heart of 24W.IN is a simple but deliberate philosophy: meaningful work thrives within constraints. The name itself emerged from a practical realization. There is a limit to how many things a person can actively manage at once. Through experience, that number became clear: 24."
LAUNCH SEQUENCE
Phase 1 — Foundation (Week 1)
- Set up GitHub monorepo with
apps/andpackages/structure - Create
packages/tokenswith all CSS variables - Create
packages/uiwith Card, Nav, Footer, CTA components - Deploy
tony.24w.inshell to Vercel (empty Next.js app with design tokens) - Deploy
24w.inshell to Cloudflare Pages - Verify all DNS records proxied correctly in Cloudflare
- Confirm SSL Full Strict on all subdomains
Phase 2 — tony.24w.in (Week 2)
- Build Homepage all sections
- Build /about page
- Build /work index page
- Build 4 case study pages
- Build /now page
- Build /contact page
- Run Lighthouse audit — fix any LCP/CLS failures before moving on
Phase 3 — 24w.in Root (Week 3)
- Build manifesto homepage (24 cards field)
- Build /philosophy page
- Build /ecosystem visual map
Phase 4 — Secondary Subdomains (Week 4+)
- notes.24w.in (MDX + Obsidian export pipeline)
- lab.24w.in (experiment index)
- sett.24w.in (brand landing)
NON-NEGOTIABLES (enforce on every file)
- No tables or calendar-like row layouts — always card-based
- No symmetric 3-column icon-grid feature sections — vary layout
- No centered body copy — left-align as default
- No gradient buttons — solid
--accentonly - No colored left-border cards — use surface elevation
- Light mode must exist as a toggle-accessible alternative even if dark is default
- Every page passes WCAG AA contrast at both light and dark
- Provenance footer required on every page: "Made with love and care, with music in the air, plus TonYC."
- Every
<img>must havealt,width,height,loading, anddecodingattributes - No hardcoded colors — all values must reference CSS variables
