Design system
Consistent by construction.
The tokens, type, and component patterns that keep tinkerer.space visually coherent. Every example on this page is rendered live from the same utility classes used in production — if a token drifts, this page drifts with it.
Tokens live in src/styles/global.css · Tailwind v4, CSS-first
Principles
A small system, applied everywhere.
Enterprise lean
Polished and restrained. Primary blue for structure and action, warm amber reserved for community-flavored moments.
Mono accents
Monospace marks the technical voice: eyebrows, meta text, badges, and the wordmark. Body copy stays in the sans.
Dark mode first-class
Every pattern ships with a dark variant (class-based, `.dark` on html). Nothing is styled for light only.
Colors
Two brand scales plus Tailwind gray.
--color-primary-*
Enterprise/technical blue — products, links, primary actions, UI accents.
50
oklch(0.97 0.02 256)
100
oklch(0.93 0.04 256)
200
oklch(0.86 0.07 256)
300
oklch(0.78 0.11 256)
400
oklch(0.68 0.15 256)
500
oklch(0.6 0.18 256)
600
oklch(0.52 0.19 256)
700
oklch(0.44 0.17 256)
800
oklch(0.37 0.14 256)
900
oklch(0.31 0.1 256)
950
oklch(0.22 0.07 256)
--color-secondary-*
Warm amber accent — community-flavored sections and secondary highlights.
50
oklch(0.97 0.03 75)
100
oklch(0.94 0.06 75)
200
oklch(0.89 0.1 75)
300
oklch(0.83 0.14 70)
400
oklch(0.77 0.16 65)
500
oklch(0.71 0.17 60)
600
oklch(0.63 0.16 55)
700
oklch(0.53 0.14 50)
800
oklch(0.44 0.11 50)
900
oklch(0.37 0.09 50)
950
oklch(0.25 0.06 50)
--color-gray-*
Tailwind's default gray — all surfaces, borders, and text. No custom neutrals.
50
oklch(98.5% 0.002 247.839)
100
oklch(96.7% 0.003 264.542)
200
oklch(92.8% 0.006 264.531)
300
oklch(87.2% 0.01 258.338)
400
oklch(70.7% 0.022 261.325)
500
oklch(55.1% 0.027 264.364)
600
oklch(44.6% 0.03 256.802)
700
oklch(37.3% 0.034 259.733)
800
oklch(27.8% 0.033 256.848)
900
oklch(21% 0.034 264.665)
950
oklch(13% 0.028 261.692)
Brand tokens are defined as oklch values in an @theme block. Use scale steps semantically: 600/400 for text (light/dark), 500 for accents, 50/950 for tinted surfaces.
Typography
Noto everywhere, Klee One for Japanese passages.
Font families
Noto Sans (UI/body, weights 400–700), Noto Sans Mono (technical accents, 400–600), Noto Sans JP (CJK fallback in the sans stack), Klee One (kyōkasho-style handwriting for Japanese passages via .ja-paragraph).
Noto Sans — Tools worth tinkering with.
Noto Sans Mono — tinkerer.space
Noto Sans JP — 毎日の習慣、小さな積み重ね。
Klee One — 毎日の習慣、小さな積み重ね。
Page heading (h1)
Tools worth tinkering with.
text-balance text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-5xl
Eyebrow / section heading (h2)
The signature heading style — mono, uppercase, wide tracking, brand color. Pairs with the accent bar.
Section heading
font-mono text-sm font-semibold uppercase tracking-widest text-primary-600 dark:text-primary-400
Section lede
Focused, dependable software tools — built to solve real problems.
text-balance text-2xl font-medium text-gray-900 dark:text-white sm:text-3xl
Body copy
Notes, deep dives, and lessons from building these tools and tinkering at the edges.
text-lg leading-relaxed text-gray-600 dark:text-gray-300
Secondary body
A fresh paragraph every day, written for your level and paired with a translation.
leading-relaxed text-gray-500 dark:text-gray-400
Mono meta text
Notes, timestamps, breadcrumbs, and other supporting details.
Product pages are on the way.
font-mono text-sm text-gray-500 dark:text-gray-400
Mono micro label (h3)
Group labels inside a section.
Group label
font-mono text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-400
Fonts are self-hosted via the Astro Fonts API (Fontsource) and mapped to --font-sans / --font-mono in global.css.
Layout & spacing
One container, one vertical rhythm.
Container
Pages use a single centered container. Long-form content (Japanese level pages) narrows to max-w-4xl.
mx-auto max-w-6xl px-4 sm:px-6 mx-auto max-w-4xl px-4 sm:px-6 (long-form content)
Vertical rhythm
Sections separate with a top border and generous padding; heroes get extra. Inside a section: lede at mt-6, content at mt-8, note at mt-8.
section: border-t border-gray-200 py-16 dark:border-gray-800 sm:py-24 hero: py-20 sm:py-28 (subpages) · py-24 sm:py-32 (homepage)
Cards
Bordered gray-50 surfaces; the radius signals weight.
Standard card
rounded-xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-800 dark:bg-gray-900/50
Large content card
Feature-level content; steps up to rounded-2xl and sm:p-8.
Content card
Long-form content lives in a softer, larger frame.
rounded-2xl border border-gray-200 bg-gray-50 p-6 dark:border-gray-800 dark:bg-gray-900/50 sm:p-8
Interactive card
Hover tints toward the accent. A secondary variant swaps primary for secondary. Reveal arrow appears on group-hover.
group ... transition-colors hover:border-primary-400 hover:bg-primary-50 dark:hover:border-primary-700 dark:hover:bg-primary-950/40
Loading / empty card
Dashed border plus animate-pulse mono text while content generates.
Generating today's entry…
rounded-2xl border border-dashed border-gray-300 p-6 dark:border-gray-700 sm:p-8
List row
rounded-lg border border-gray-200 p-4 dark:border-gray-800
Badges & pills
Rounded-full, mono-friendly, sparing.
Filled badge
inline-flex items-center rounded-full bg-primary-600 px-3 py-1 text-sm font-semibold text-white
Outline pill
rounded-full border border-gray-300 px-3 py-1 text-gray-700 dark:border-gray-700 dark:text-gray-300
Step circle
Numbered steps in instructional lists.
flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 font-mono text-xs font-semibold text-primary-700 dark:bg-primary-950 dark:text-primary-300
Radii & shadows
Small scales, used consistently.
Radius scale
rounded-md
nav links, buttons, dropdown menus
rounded-lg
small buttons, list cards, code blocks
rounded-xl
standard cards, tiles
rounded-2xl
feature/content cards, dialogs
rounded-full
pills, badges, accent bars
Shadow scale
Shadows imply elevation only — resting surfaces use borders, not shadows.
primary CTA buttons
dropdown menus
dialogs, floating panels
Signature elements
The details that make it feel like tinkerer.space.
Accent bar + eyebrow
Every section opens with this pair. Swap primary for secondary in community-flavored sections.
Primary section
Secondary section
<span class="h-6 w-1 rounded-full bg-primary-500" /> + eyebrow h2
Hero gradient
A soft radial wash behind every hero, anchored to the top center.
bg-[radial-gradient(60%_50%_at_50%_0%,var(--color-primary-100),transparent)] dark:bg-[radial-gradient(60%_50%_at_50%_0%,var(--color-primary-950),transparent)]
Wordmark
Mono, bold, tight — with .space in primary.
tinkerer.space
font-mono text-lg font-bold tracking-tight text-gray-900 dark:text-white
Sticky header surface
Translucent, blurred, hairline bottom border.
sticky top-0 z-50 border-b border-gray-200/80 bg-white/80 backdrop-blur dark:border-gray-800/80 dark:bg-gray-950/80