design system
Source of truth for robin-vidal.com. Every token extracted directly from the production codebase — no invented values.
60/30/10 split. Background tokens dominate (60%), ink + border tokens support (30%), blue accent appears sparingly (10%).
Three families, each with a distinct semantic role. Serif for editorial content, mono for UI labels and metadata, sans for body prose.
Consistent hashing distributes keys across nodes using a circular key space. Each node owns a range of the ring, and keys map to the nearest clockwise node.
func (r *Ring) Add(node string) {
hash := r.hashFn(node)
r.nodes = append(r.nodes, hash)
}
Software engineer focused on distributed systems and developer tooling. I write about things I build and things I learn.
| token / element | size | family | usage |
|---|---|---|---|
| 0.65rem | 10.4px | mono | .tag — smallest label |
| 0.68rem | 10.9px | mono | .post-meta, .article-meta, .project-lang, .figcaption |
| 0.7rem | 11.2px | mono | .footer-copy, .footer-links, .section-num |
| 0.72rem | 11.5px | mono | .hero-label, .article-meta |
| 0.75rem | 12px | mono | .nav-links, .btn, .article-back |
| 0.82rem | 13.1px | mono / sans | pre code, .post-desc |
| 0.85rem | 13.6px | mono | .nav-name |
| 0.9rem | 14.4px | mono | .project-name |
| 0.92rem | 14.7px | sans | .project-desc, .section-desc |
| 1rem | 16px | sans / serif | body base, .hero-bio, .post-title |
| 1.05rem | 16.8px | serif | .article-body |
| 1.15rem | 18.4px | serif | article h3 |
| 1.3rem | 20.8px | serif | .section-title |
| 1.4rem | 22.4px | serif | article h2 |
| clamp(1.6–2.2rem) | 25.6–35.2px | serif | article h1 |
| clamp(2.2–3.2rem) | 35.2–51.2px | serif | hero h1 |
No spacing scale variable system. Values are used contextually. Scale below reflects every distinct value found in the codebase.
| property | value | element |
|---|---|---|
| max-width | 900px | .container — global content width |
| max-width | 520px | .hero-bio — prevents overlong bio lines |
| max-width | 100% | article body img |
| breakpoint | 600px | only media query in codebase |
| --radius | 4px | img, pre, swatch containers |
| border-radius | 2px | .btn, .tag |
| border-radius | 3px | inline code |
Live components using exact token values. Interact with them as they appear on the site.
projects: spaces · writing: hyphens
Sharded in-memory key-value store. FNV-64a hashing across per-shard RWMutex locks, custom TCP server, full OpenTelemetry instrumentation.
software engineer
The goal of a distributed system is to make a network of computers appear as a single coherent system.
Editorial and design constraints inferred from the codebase. Treat these as invariants when adding new content or components.
Use --blue only for interactive elements (links, buttons, accents) and the hero-label. Keep it rare — 10% of the visual surface.
Don't use --blue for decorative purposes or large fills. Don't introduce new color values — all colors must map to existing tokens.
Use serif (Lora) for editorial headings and article body text. Use mono (IBM Plex Mono) for UI labels, metadata, code, and navigation. Use sans (IBM Plex Sans) for body prose and descriptions.
Don't swap family roles (no mono for article body, no serif for nav). Don't use font sizes outside the established scale. Don't add font weights beyond 300, 400, 500, 600.
Navigation links: lowercase. Hero label: UPPERCASE (via CSS, not markup). Section titles: Title Case. Footer copy and button labels: lowercase. Article titles: Title Case.
Don't use ALL CAPS in markup — apply text-transform: uppercase in CSS only. Don't mix casing within the same component type.
Use · (·) as separator in meta strings. Format: Jan 2006 · 8 min. Back links: ← back. No trailing periods in labels.
Don't use dashes, pipes, or commas as separators in meta. Don't write "read more", "click here", or "minutes" (abbreviate to "min").
Use semantic HTML: <section> for page zones, <article> for full post pages, <nav> for navigation, <figure>/<figcaption> for captioned images, <blockquote> for quotes.
Don't use <div> where a semantic element exists. Don't skip heading levels (h1 → h3). Don't use more than one h1 per page.
Use gap for flex/grid layouts. Use margin-top (not bottom) for flow spacing inside article body. Use padding: X 0 for section vertical rhythm.
Don't invent new spacing values — use the existing scale. Don't use margin-bottom for article body flow elements (use margin-top with lobotomized owl * + *).
Use --border for structural dividers (nav, section, footer). Use --border-soft for item-level dividers (projects, posts). Use border-top on sections, border-bottom on list items.
Don't use --border for subtle item separators — that breaks the hierarchy. Don't add borders to elements that don't have them in the source.
Copy this block into any LLM conversation to give it full context before generating code, content, or components for this site.
You are generating code or content for robin-vidal.com, a personal site with a strict design system. Follow every rule below exactly — no invented values, no deviations.
## Color tokens
--bg: #F2F2EF /* page background, 60% */
--bg-card: #EBEBE8 /* secondary surface */
--bg-subtle: #E6E6E3 /* inline code bg, tag fill */
--ink: #2C3E50 /* primary text, headings, pre bg */
--ink-muted: #4A5568 /* body paragraphs, descriptions */
--ink-faint: #718096 /* nav links, meta, tags, footer */
--border: #D4D4CF /* structural dividers (nav, section, footer) */
--border-soft: #E0E0DC /* item-level dividers (projects, posts) */
--blue: #4A7FA5 /* primary accent — use sparingly (10%) */
--blue-hover: #3A6A8E /* hover state for --blue */
--blue-bg: #EBF2F7 /* tinted blue surface */
--blue-border: #BDD4E4 /* border on blue surfaces */
## Typography tokens
--font-serif: 'Lora', Georgia, serif
--font-mono: 'IBM Plex Mono', monospace
--font-sans: 'IBM Plex Sans', sans-serif
Font role rules:
- serif → editorial headings (h1, h2, h3), article body text, section titles, post titles
- mono → ALL UI labels: nav, buttons, tags, metadata, footer, code, hero-label, section-num
- sans → body prose (hero-bio, .project-desc, general page copy)
## Type scale (rem, base 16px)
0.65rem → .tag
0.68rem → .post-meta, .article-meta, .project-lang, figcaption
0.70rem → footer, .section-num
0.72rem → .hero-label, .article-meta (alt)
0.75rem → .nav-links, .btn, .article-back
0.82rem → pre code, .post-desc
0.85rem → .nav-name
0.90rem → .project-name
0.92rem → .project-desc
1.00rem → body, .hero-bio, .post-title
1.05rem → .article-body
1.15rem → article h3
1.30rem → .section-title
1.40rem → article h2
clamp(1.6rem,4vw,2.2rem) → article h1
clamp(2.2rem,5vw,3.2rem) → hero h1
## Shape token
--radius: 4px → img, pre, figure containers
2px → .btn, .tag
3px → inline code
## Layout
Container max-width: 900px, centered, padding 0 2rem
Hero bio max-width: 520px
Single breakpoint: @media (max-width: 600px)
## Spacing values (used as-is — no variable system)
0.2rem tag pad-y, li+li
0.3rem post-content gap
0.4rem tag gap, article-tags gap
0.5rem project gap, tags margin-top, h2/h3 margin-bottom
0.55rem tag pad-x
0.6rem section-title gap, btn pad-y
0.75rem hero-label gap (flex property — no icon in current markup)
1rem section-header gap, hero-links gap, project-top gap
1.2rem btn pad-x
1.25rem blockquote pad-left, pre pad (small)
1.5rem hero margins, section-header margin-bottom, article body flow gap, footer-links gap
1.75rem project pad-y
2rem container pad-x, nav-links gap, post gap
2.5rem nav pad-top, hero-bio margin-bottom, h3 margin-top
3rem footer pad, article-back margin-bottom, article-tags margin-bottom, hr margin, h2 margin-top
4rem section pad-top, article pad-top
5rem hero pad-bottom
6rem hero pad-top
## Components
Nav: flex space-between baseline, border-bottom: 1px solid --border
.nav-name: mono 0.85rem w500 tracking 0.08em, color --ink
.nav-links: flex gap 2rem, mono 0.75rem --ink-faint lowercase tracking 0.08em
Hero: padding 6rem 0 5rem
.hero-label: mono 0.72rem uppercase tracking 0.12em --blue, display flex align-items center gap 0.75rem (no icon in current markup)
h1: serif clamp(2.2rem,5vw,3.2rem) w600 lh1.2 tracking -0.02em --ink
h1 em: italic w400 --ink-muted
.hero-bio: sans 1rem w300 lh1.8 --ink-muted max-width 520px
Buttons: mono 0.75rem tracking 0.06em pad 0.6rem 1.2rem radius 2px transition all 0.2s
.btn-primary: bg --blue color --bg border 1px solid --blue
.btn-ghost: bg transparent color --ink-muted border 1px solid --border
Section: padding 4rem 0, border-top 1px solid --border
.section-title: serif 1.3rem w600 --ink, ::before 7x7px square --blue
.section-num: mono 0.7rem --blue tracking 0.1em
Project card: grid gap 0.5rem, pad 1.75rem 0, border-bottom 1px solid --border-soft
.project-name: mono 0.9rem w500 --blue-hover, ::after arrow icon mask 0.85em opacity 0.5
.project-lang: mono 0.68rem --ink-faint tracking 0.06em
.project-desc: sans 0.92rem --ink-muted lh1.65
.project-tags: flex wrap gap 0.4rem margin-top 0.5rem — tag values use spaces (e.g. 'distributed systems'), not hyphens
Post row: flex space-between baseline gap 2rem, pad 1.5rem 0, border-bottom 1px solid --border-soft, hover opacity 0.7
.post-title: serif 1rem --ink
.post-desc: sans 0.82rem --ink-faint lh1.5
.post-meta: mono 0.68rem --ink-faint nowrap tracking 0.04em, separator: ·
Article page:
.article-back: mono 0.75rem --ink-faint tracking 0.06em ← back
.article-title: serif clamp(1.6rem,4vw,2.2rem) w600 lh1.25 tracking -0.02em
.article-meta: mono 0.72rem --ink-faint tracking 0.04em, date · N min read
.article-body: serif 1.05rem lh1.85 --ink-muted, flow spacing via * + * margin-top 1.5rem
pre: bg --ink pad 1.25rem 1.5rem radius 4px
pre code: mono 0.82rem lh1.65 color --bg
inline code: mono 0.88em bg --bg-subtle border --border-soft pad 0.15em 0.4em radius 3px
blockquote: border-left 3px solid --blue pad-left 1.25rem italic --ink-muted
a: color --blue underline offset 2px
Footer: flex space-between center pad 3rem 0, border-top 1px solid --border
.footer-copy: mono 0.7rem --ink-faint tracking 0.04em
.footer-links: flex gap 1.5rem, mono 0.7rem --ink-faint, hover --blue
## Animations
hero elements: fadeUp 0.5s ease both, stagger 0, 0.1s, 0.2s, 0.3s
@keyframes fadeUp: from opacity 0 translateY(16px) → to opacity 1 translateY(0)
transitions: all 0.2s (buttons) | color 0.2s (links) | opacity 0.2s (posts, project icon)
## Editorial rules
- Navigation labels: lowercase
- Hero label: UPPERCASE via CSS
- Section titles: Title Case
- Button labels: lowercase single words
- Post/article titles: Title Case
- Footer copy: lowercase
- Meta separator: · (middot)
- Back link: ← back (arrow + space + word)
- Reading time: "N min read" or "N min" (no "minutes")
- No trailing periods in labels
- h1: one per page only
- Heading hierarchy: h1 → h2 → h3 (no skipping)
- Background texture: SVG fractalNoise fixed overlay opacity 0.4
- Selection: background --blue color --bg
- Tag content: project tags use spaces ('distributed systems'), writing tags use hyphens ('distributed-systems')