BaseLayout Preview · 15 Pages
A Platform For Experiments — Ottawa
Some Ideas Are Too Big For Conversations
What We Build
Tools and experiments built for public benefit — accessibility, multilingual services, open data.
Explore →Guided notes on Dhamma, meditation timers, and structured reflection tools.
Explore →An ongoing record of paintings, sketches, and process notes from the studio.
Explore →Product design work, interface systems, and visual language for Habitat Learn and beyond.
Explore →What We Are
Some ideas are too small for institutions and too big for conversations. This is where they live.
Little Big Ideas is an open studio — a place where experiments get made, not just imagined. We build tools, ship prototypes, and publish thinking across civic technology, design, art, and contemplative practice.
This is not a portfolio. It is a platform. The work belongs to the ideas, not the person making them. Some experiments are finished. Most are ongoing. All are honest.
Current Experiments
What We're Building Now
Open Platform
We Create Opportunities To Create
Little Big Ideas is an open platform — experiments are shared, methods are documented, and work is published in the open wherever possible. Collaborators welcome.
Get in touch →Civic / Initiative
Standard Inner Page
This is the standard layout used by index pages: Civic, Blog, Ideas, Initiatives, About, Contact. It uses .content-width with padding: 72px var(--pad) 48px. The nav and footer are injected globally via layout.tsx — no page needs to include them.
Column A
Section heading
Filler text. This shows how body copy sits in a two-column grid. The inner paragraph maxes out at 520–640px for reading comfort, not the full 1180px content column.
Learn more →Column B
Another section
Columns are separated by gap only — no visible divider unless the design calls for one. Borders are 1–2px var(--ink). No box shadows anywhere.
Tags use var(--acc) rust for text and border. They are compact: 10px Barlow Condensed 700, 0.18em letter-spacing. No fill — outline only. Used on categories, statuses, and location labels.
Writing / Notes
An Article Title That Spans Two Lines When Long
This is the article layout used by blog/[slug], initiatives/[slug], and long-form writing. It uses .content-width with padding: 64px var(--pad) 96px for generous breathing room. The body text column is capped at 680px for reading comfort.
Quisque consequat sapien eget quam rhoncus, sit amet laoreet diam tempus. Aliquam aliquam ligula eget libero cursus aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Section Subhead
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. At vero eos et accusamus et iusto odio dignissimos ducimus.
// Code blocks inherit monospace font + --ghost background
const layout = { maxWidth: "1180px", padding: "72px var(--pad) 48px" };Ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
Structural Audit · May 2026
Visual Inconsistency Report
Scanned 22 page files across src/app. The following inconsistencies were found and should be resolved by adopting BaseLayout and the shared token system.
1. Three Styling Systems Running In Parallel
The biggest issue. Different pages use completely different styling approaches with no shared vocabulary:
about, civic, blog, contact, dhamma, ideas, initiatives, paintings/captions — use padding: "72px var(--pad)" and inline fontFamily
experiments, projects, ideas/[slug], multilanguagecaptions, docs — use px-6 py-16, font-serif, bg-cream
All pages have some hardcoded hex values: #444, #aaa, #666, #3a2c4f, #2a7a4b that bypass the token system
2. Page-By-Page Wrapper Audit
| Page | Wrapper | Padding | Status |
|---|---|---|---|
| / | Fragment <> | inline 72px var(--pad) | Non-standard |
| /about | .content-width | inline 72px var(--pad) | OK |
| /aicanfindme | <div> (no class) | inline 72px var(--pad) | Missing class |
| /blog | .content-width | inline 72px var(--pad) | OK |
| /blog/[slug] | .content-width | inline 64px / 96px | OK |
| /civic | .content-width | inline 72px var(--pad) | OK |
| /contact | .content-width | inline 64px / 96px | OK |
| /dhamma | Fragment (Client) | inline | Verify wrapper |
| /experiments | .content-width.px-6.py-16 | Tailwind | Tailwind padding |
| /ideas | .content-width | inline 72px var(--pad) | OK |
| /ideas/[slug] | .content-width.px-6.py-20 | Tailwind | Tailwind padding |
| /initiatives | .content-width | inline 72px var(--pad) | OK |
| /initiatives/[slug] | .content-width | inline 64px / 96px | OK |
| /multilanguagecaptions | <div class="flex flex-col"> | Tailwind pt-20 pb-20 | Wrong wrapper |
| /paintings/captions | .content-width | inline 32px / 64px | Non-standard padding |
| /product | <div class="flex flex-col"> | inline mixed | Wrong wrapper |
| /projects | Fragment + .content-width.px-6 | Tailwind | Tailwind padding |
3. Fix With BaseLayout
The new BaseLayout component at src/components/BaseLayout.tsx provides three variants that cover every case:
<BaseLayout variant="standard"> {/* 72px top, 48px bottom */}
<BaseLayout variant="article"> {/* 64px top, 96px bottom */}
<BaseLayout variant="full-bleed"> {/* home page sections */}
<BaseLayout variant="bare"> {/* caller controls padding */}