Past meetup
past Hamburg
Retrospective notes.
2026-04-21
Design system v3
Everything v2 had, plus the handoff adoptions: self-hosted fonts, .t-* semantic type scale, pull-quote, brand mark, rewired ds-v2 components. This is what 1ar.io would look like after closing every alignment gap.
6
gaps closed
10
.t-* classes added
2.4 mb
fonts self-hosted
1. Self-hosted fonts
Google Fonts CDN dropped from BaseLayout.astro, AdminLayout.astro, admin/login.astro. Now loads 8 TTF files from /public/fonts/ via @font-face in global.css. Privacy + GDPR + no FOUT + bundle-exact match.
2. Semantic type scale (.t-*)
10 classes in global.css @layer utilities: .t-display, .t-h1, .t-h2, .t-h3, .t-body, .t-body-lg, .t-small, .t-mono, .t-eyebrow, .t-quote. Replaces ~25 inline text-4xl md:text-5xl font-serif patterns on migration.
3. PullQuote + .pull-quote class
Left amber border, neutral-content serif. Replaces the inline block on workshops.astro with arbitrary-variant link hover states.
4. SectionHeading withRule variant
Adds horizontal 1px rule after the label. Matches handoff .section-heading__rule. Opt-in per call.
5. Rewired ds-v2 components
PageHeader, StatCard, FeatureCard, EventCard, CitationCard, PricingCard, Kicker now use .t-* classes internally instead of hardcoded Tailwind strings. Tokens stay in one place.
6. Brand mark + voice doc
public/logo-mark.svg (1080×1080, currentColor stroke). docs/brand-voice.md lifts the tone rules from the handoff into its own doc.
10 classes. Use them directly on h1/h2/h3/p instead of inline Tailwind. Fonts are self-hosted Inter, Instrument Serif, IBM Plex Mono.
.t-display
Display heading — 48 to 72px clamp.
.t-h1
H1 — 36 to 48px clamp, serif.
.t-h2
H2 — 28 to 36px clamp, serif.
.t-h3
H3 — 20px sans, 600 weight.
.t-body-lg
Body large — 18px sans, 1.6 line-height. For lead paragraphs and page descriptions.
.t-body
Body — 16px sans, 1.65 line-height. The default paragraph scale for prose.
.t-small
Small — 14px neutral-content. Meta info, captions, card descriptions.
.t-mono
Mono — 13px IBM Plex Mono. Tags, meta rows, inline code.
.t-eyebrow
Eyebrow uppercase kicker
.t-quote
Quote — 22px italic serif, neutral-content tone.
Left amber border, 2px. Italics off. neutral-content tone. Max-width 48.75rem. Used on essays, services pages, labs landings.
1ar labs ships faster than most production houses by applying AI better than all traditional devs, without sacrificing quality, because behind it is an engineer and a scientist .
You can now build almost anything in-house. But knowing what to build and what not to is where most teams get stuck.
default
withRule
/logo-mark.svg — 1080×1080 viewBox, 50px stroke, currentColor. Tints to whatever text color is set.
variant="display"
featured
Display title
Uses .t-display — the biggest clamp in the scale.
variant="default" (now uses .t-h1)
Default title
Uses .t-h1 — smaller than display, still serif.
variant="compact"
archive
Compact
12 entries
Badge
default secondary outline accent upcoming live past
Button + ButtonGroup
Link · Tag · Kbd · Spinner · Icon
open palette: ⌘ K loading loading loading
Grid · Split · Stack
1
2
3
4
Left
Text column.
Right
Image or content column.
item 1
item 2
item 3
Input sizes
FormField + Label
Helps the user.
Required.
CalloutBox
Info callout used inside MDX prose.
Warning callout.
Success callout.
Note callout.
EventBanner
upcoming · Workshop at Serviceplan
Banner body content goes here.
past event · Past event
Banner body content goes here.
EmptyState
FeatureCard (now with meta slot + .t-h3/.t-mono internals)
Shipping real products
Multiple live projects generating traction and revenue.
Discovery call
Free, 15 min
See what's possible, no commitment.
Stratagem
€300, 60-90 min
One problem, one session, actionable output.
StatCard (.t-display or .t-h1 internally)
29
built
12
planned
1.2k
downloads
8
pages migrated
of 54
PricingCard
BYOK
Bring your own OpenAI/Anthropic key.
Free
- Unlimited summaries
- Local storage
- No subscription
Managed
We host the LLM.
$4.99 /mo
- No API key needed
- Fair-use limits
- Cancel any time
Now fully coherent with the handoff
Foundations (tokens, glass, liquid-border, page-glow), type scale, pull-quote, brand mark, self-hosted fonts, voice doc — all aligned. The remaining work is migration: replace the 25+ raw h1 patterns and 19+ sumr-nav call sites across existing pages. Components are ready.