Meta / System

How This Page Is Built

A transparent account of the tools, design decisions, and patterns behind littlebigideas.ca. The design system is documented in full — colours, type scale, spacing, components — so that future decisions stay consistent and the work can be handed off or forked.

View the live style guide →

The Stack

Framework

Next.js (App Router)Static export via Cloudflare Pages. All pages are server-rendered at build time.

TypeScriptStrict mode throughout. No any types.

Styling

Tailwind CSS v4Utility-first via @import 'tailwindcss'. All tokens defined in @theme inside globals.css — no tailwind.config.ts needed.

CSS Custom Properties--ink, --acc, --dim, --ghost, --line, --pad, --content-max defined in :root. Theme tokens mirror these in @theme for Tailwind utility generation.

Google FontsBarlow Condensed 900 (headlines), Barlow 300/400 (body), Playfair Display 900 italic (manifesto accent only).

Layout

BaseLayout componentsrc/components/BaseLayout.tsx — wraps all inner pages. Variants: standard (72px/48px), article (64px/96px), full-bleed, bare.

.content-widthmax-width: 1180px, auto margins. Applied by BaseLayout. Home page sections are full-bleed — no cap.

Nav + FooterInjected globally in src/app/layout.tsx. No page needs to include them individually.

Deployment

Cloudflare PagesDeployed via Wrangler CLI: wrangler pages deploy out --project-name=littlebigideas

Build outputnext build → static export. No server-side rendering at runtime.

Design Tokens

All tokens live in src/app/globals.css — in :root as CSS custom properties and in @theme as Tailwind v4 theme values. Tailwind auto-generates utility classes from @theme, so --color-acc becomes text-acc, bg-acc, etc.

Colours

--inkvar(--ink)Primary text (cream on dark bg)

--dimvar(--dim)Secondary text, kickers, nav

--accvar(--acc)Rust accent — CTAs, tags, logo

--ghostvar(--ghost)Card / code block background

--linergba(255,255,255,0.1)Subtle dividers on dark bg

html bgvar(--bg)Page background — set on html

Type Scale

--text-heroclamp(44px, 8.5vw, 120px)Hero statement

--text-pageclamp(44px, 7vw, 100px)Page headings

--text-sectionclamp(40px, 5.5vw, 72px)Section titles

--text-manifestoclamp(28px, 4.5vw, 60px)Manifesto body

--text-pillarclamp(20px, 2.2vw, 32px)Pillar/card titles

--text-bodyclamp(16px, 1.8vw, 22px)Body copy

--text-kicker11pxLabels, nav, CTAs

Spacing

--padclamp(24px, 5vw, 64px)All horizontal gutters

--content-max1180pxMax content width

Layout Patterns

variant="standard"

72px var(--pad) 48px

about, blog, civic, contact, ideas, initiatives, paintings/captions, aicanfindme

variant="article"

64px var(--pad) 96px

blog/[slug], initiatives/[slug] — long-form reading pages

variant="full-bleed"

none

Home page sections — each section sets its own padding

variant="bare"

none

Caller controls padding — used for complex sub-layouts

Preview Pages

The full design-system reference now lives at the live style guide (rendered from real tokens). One static HTML preview remains below. Source at public/preview/.

Base Layout Preview

All page layout variants with filler content — Home, Standard Inner, Article, and the structural audit report.

Open →

Site Map

Every page on the site, grouped by purpose — sections, writing, projects, tools, and meta pages. The fastest way to get a handle on what lives here.

Full Site Map

Grouped index of every route, with nested entries for blog posts, ideas, initiatives, and project sub-pages.

View →

← HomeNot indexed · Internal reference