Meta / System

Style Guide

The canonical design-system reference, rendered live from the real tokens, classes, and components — so it can't drift from the site. The written spec is in design.md; this is its visual counterpart. Both are updated together whenever a style changes.

Colour Tokens

--ink#f0ede8

Primary text, headings

--body#aaaaaa

Body copy (.body-regular / .body-medium)

--dim#888888

Secondary text, kickers, meta

--acc#c45d3e

Single accent — rust. CTAs, tags, links

--ghost#1a1a1a

Card / hover / code surface

--surface#252525

Elevated surface (inputs, nested)

--edge#333333

Solid dark borders/dividers

--borderrgba(255,255,255,.1)

Subtle hairline dividers

--bg#0f0f0f

Page background

--black#0a0a0a

Deepest surface — footer, inverted

One accent only (rust --acc). The Live-status green (#2a7a4b) is the single intentional exception.

Typography

Typefaces

Little Big Ideas

Barlow Condensed

Display / headlines · 900

The words breathe.

Barlow

Body / UI · 300 · 400 · 500

don’t fit anywhere else

Playfair Display

Manifesto accent only · 900 italic

Type scale

Hero / statement · clamp(44px,8.5vw,120px)

Little Big

Page heading · clamp(44px,7vw,100px)

Style Guide

Section title · clamp(40px,5.5vw,72px)

Colour

Manifesto body · clamp(28px,4.5vw,60px)

Ideas too small for institutions

Pillar / card title · clamp(20px,2.2vw,32px)

Design

Body Text Classes

.body-regular · 15px / 400 / 1.78 / #aaa

Standard body copy and card descriptions. We are not a think tank, an agency, or a collective. We are an ongoing experiment in what happens when you take ideas seriously enough to build them.

.body-medium · 17px / 500 / 1.7 / --body

Larger lead / intro copy. The one intentional place we use medium weight for body text — it reads as lead copy, not a headline. Used for the home manifesto sub-paragraph.

Spacing & Layout

Gutters: --pad: clamp(24px, 5vw, 64px). Max content width: --content-max: 1180px (.content-width).

Vertical spacing scale

ValueUse

4pxIcon gap, tight inline spacing

8pxNav item internal, tag padding

12pxKicker margin-bottom, footer nav gaps

16pxInline element spacing, CTA margin

20pxCard padding (compact), form gaps

24pxCard padding, heading margin, grid gap

32pxSection intro margin, sub-heading gap

40pxBetween sections, large grid gap

48pxPage bottom padding (standard)

64pxSection padding top (article), major gap

72pxPage top padding (standard)

96pxPage bottom padding / hero (article)

BaseLayout variants

VariantPaddingUsed on

standard72px var(--pad) 48pxabout, blog, civic, contact, ideas, initiatives, aicanfindme

article64px var(--pad) 96pxblog/[slug], initiatives/[slug], long-form reading

full-bleed0Home page sections (each sets its own padding)

bare0Caller controls padding — for complex sub-layouts

12-Column Grid · 1180px

Buttons & CTAs

Primary →Secondary →Underline link →

Components

<ListRow> — the standard index/listing row (mobile-first, CSS-only hover). Used by /product, home experiments, /civic. Live below:

Design

Live row, with status

Description sits under the title. Hover to see the background raise and the arrow slide.

Live Civic

Default tone, no description

In progress

Borders & Radius

2px solid var(--ink) — section divider

1px solid var(--ink) — row / card border

--radius: 12px — all images, no stroke

Responsive Breakpoints

BreakpointBehaviour

> 900pxFull layout. 2-col pillars, 2-col splits, 3-col footer.

≤ 900pxOpen platform stacks 1-col. Experiments header stacks. Footer 2-col.

≤ 760pxProduct feature blocks stack 1-col, image on top.

≤ 640pxListRow reflows: area+status on top, title/desc below.

≤ 560pxPillars 1-col. Nav wordmark hides (cat mark only). Footer 1-col.

Voice & Copy

RuleDetail

Platform "we"Not “I”. This is a platform, not a portfolio.

No personal bio framingWork belongs to Little Big Ideas, not the person making it.

Kicker patternNOUN / CATEGORY — context. e.g. ACTIVE NOW, WHAT WE ARE.

CTAsAlways imperative + arrow: Explore →, Get in touch →

Short sentencesDeclarative, no jargon. The words breathe.