The tokens, grid, and components that define the visual language of briananders.com — dark-first, mobile-first, 12-column, and driven by CSS custom properties.
Every visual value lives as a CSS custom property on :root in src/styles/system/_tokens.scss. Components read from those tokens rather than hard-coding colours, radii, or motion values — that way a change here ripples through every page automatically.
Dark-first neutrals for surfaces, an orange ramp inherited from the site's existing gradient DNA, and semantic accents. Click any swatch to copy its CSS variable name to the clipboard.
Roboto for UI & headings, Source Serif Pro for long-form reading, JetBrains Mono for code. The scale is modular (1.200) and steps up at 960px.
Bat Lessons.
Every space derives from --unit (4px). Never write raw pixel values for padding, margin, or gap.
4 columns below 600px · 8 columns from 600–959px · 12 columns at 960px+. Column-span utilities follow the same tiers: .col-*, .t-col-*, .d-col-*. Press Ctrl+G anywhere on the site to overlay the live grid.
Common layouts — resize the window to watch them collapse.
Four durations, one standard easing (and one emphasized for arrows / expand). Interactions use --dur-2. Layout transitions use --dur-3 or --dur-4. Everything respects prefers-reduced-motion.
Minimum 44px tap target. Primary is orange with a soft glow; secondary is a bordered surface; ghost is chromeless.
Add .play, .pause, or .playpause to any button to prefix it with a unicode media-control glyph. Use them for start/pause/toggle actions across post experiments.
The icon-only variant drops the text label. Toggle between .play and .pause in your JS to reflect the current state.
<!-- Text + icon -->
<button class="button play">Start</button>
<button class="button pause">Pause</button>
<!-- Icon-only -->
<button class="button play-pause play" aria-label="Play/pause"></button>
// JS: swap classes when state changes
btn.classList.toggle('play', !isPlaying);
btn.classList.toggle('pause', isPlaying);Every column at the desktop tier is 80px wide with 16px gaps. That gives a set of derived max-widths — --max-1-column through --max-12-columns — for capping a card or list to an integer number of grid columns:
.recommended-list {
max-width: var(--max-8-columns); /* 752px */
}An inline link inside a paragraph. It's teal, underlined subtly, and brightens on hover.
Read the full post >A generative pattern that walks a grid, colouring pixels based on neighbourhood rules.
Editorial callouts, "new" cards, or above-the-fold highlights.
Heads up
This is a neutral information message.
Build passed
All 42 tests green in 4.1s.
Almost out of budget
Page weight is at 92% of its budget.
Deploy failed
The S3 uploader could not authenticate.
Tabs use ARIA roles and keyboard support: ←/→ to move focus, Home/End to jump to ends.
Second panel content.
Third panel content.
A single source of truth for tokens and components across every page on briananders.com.
Add it to the :root block in src/styles/system/_tokens.scss and it will be visible everywhere on the site — including inside shadow-DOM web components.
Yes — override the component's tokens on a wrapper rather than restyling the element.
Click to open. Closes on scrim click, close button, or Esc.
Ephemeral feedback — auto-dismisses after 3s.
| Post | Category | Date | Status |
|---|---|---|---|
| Cellular automaton | Canvas | 2026-01-11 | Live |
| Wordle solver v2 | Puzzles | 2025-11-04 | Draft |
| Polar clock | Canvas | 2025-08-22 | Live |
| Sound frequency slider | Audio | 2025-05-30 | New |
Inline: const foo = 42;
Keyboard shortcut: press Cmd + K.
// Grid utility
const grid = {
cols: { mobile: 4, tablet: 8, desktop: 12 },
breakpoints: ['600px', '960px'],
};Always reference the CSS variable, never the raw value:
/* ✅ good */
.my-card {
background: var(--color-surface-1);
padding: var(--space-6);
border-radius: var(--radius-md);
}
/* ❌ bad */
.my-card { background: #12161C; padding: 24px; border-radius: 12px; }Every existing component name in src/styles/system/mixins/_elements.scss is stable — reach for the mixin from SCSS, or the equivalent class from EJS.
| Need | SCSS mixin | HTML class |
|---|---|---|
| Card surface | @include card | .card |
| Card that's a link | @include card-link | .card-link |
| Button | @include button-link | .button, add .primary or .ghost |
| Inline text link | @include inline-link | .inline-link |
| Block-style link | @include block-link | .block-link |
| Content container | @include content | .content / .container |
<div class="container">
<div class="ds-grid">
<a class="card card-link col-4 t-col-4 d-col-6" href="…">…</a>
<a class="card card-link col-4 t-col-4 d-col-6" href="…">…</a>
</div>
</div>col-* is 1–4 (mobile), t-col-* is 1–8 (tablet, 600px+), d-col-* is 1–12 (desktop, 960px+). Combine all three tiers to control every breakpoint.
| Name | Min-width | Grid cols | Gutter |
|---|---|---|---|
| mobile | — | 4 | 16 (--space-4) |
| tablet | 600px | 8 | 24 (--space-6) |
| desktop | 960px | 12 | 32 (--space-8) |
| wide | 1280px | 12 | 32 (content maxes at 1200px) |
Press Ctrl+G (or Cmd+G on macOS) anywhere on the site to toggle a translucent overlay showing the current grid — the label at the bottom-right names the active breakpoint tier.
:focus-visible ring via --focus-ring.--color-bg.prefers-reduced-motion.This will publish the new design system to production. You can undo from the deploy history at any time.