Design Mood Board

A growing library of design references — the “Data Dots for design.” Each entry is a single .md file capturing what’s notable about a real site, tagged so we can later filter for “modern technical sans + warm neutrals” or “editorial serif + asymmetric grid” and see everything that fits.

This is not Pinterest. The point is to build vocabulary, not to collect pretty pictures. Each entry forces a teaching moment — naming what’s actually happening on the page in the language of the glossary and typography guide.

How to add a new entry

Pick a slug. Lowercase-with-hyphens, matches the brand or site (stripe.md, tom-macwright.md).
Create the file at ~/rdco-vault/06-reference/design-mood-board/<slug>.md with the frontmatter shown below.
(Optional) Capture a screenshot to screenshots/<slug>.png. Use Playwright (mcp__plugin_playwright_playwright__browser_navigate then browser_take_screenshot with fullPage: false for hero, or true for full page). Set screenshot_path: screenshots/<slug>.png. If headless rendering fails (anti-bot, JS-heavy, login wall), set screenshot_path: null and just leave the URL.
Tag it across all five axes. Even rough tags are useful for later filtering.
Write 2–3 sentences on what’s notable, plus 1 line on why it’s worth referencing.
Cross-link to relevant glossary terms and other mood board entries via [[wikilinks]].

Entry template

---
date: 2026-04-23
type: design-reference
url: https://example.com
screenshot_path: screenshots/example.png   # or null if no screenshot
tags:
  - modern-technical                         # category
  - neo-grotesque-sans                       # typography
  - warm-neutrals                            # color
  - asymmetric-grid                          # layout
  - trust-through-restraint                  # vibe
---

# Example Site

What's notable: 2–3 sentences on what the page is actually doing — typeface choices,
color palette, grid pattern, distinctive moves. Use vocabulary from the
[[06-reference/concepts/design-vocabulary-glossary|glossary]].

Why this matters as a reference: 1 line on the lesson — what we'd learn or borrow.

## Related
- [[06-reference/design-mood-board/<other-similar-site>]]
- [[06-reference/concepts/design-vocabulary-glossary#<term>]]

Tag taxonomy

The five tag axes — pick at least one per axis when adding entries.

Typography

neo-grotesque-sans — Helvetica / Söhne / Inter
humanist-sans — Lato / Source Sans / Plex Sans
geometric-sans — Futura / Avenir / Mona Sans
transitional-serif — Source Serif / Charter / Times
slab-serif — Roboto Slab / Tiempos Headline
display-serif — heavy-weight serifs for headlines
monospace — JetBrains Mono / Plex Mono / Berkeley Mono
system-stack — native OS faces, no web fonts
single-family-discipline — one family does everything

Color

monochromatic — single-hue palette
warm-neutrals — cream / paper / beige
cool-neutrals — gray / blue-gray
single-accent — neutrals + one saturated color
dark-default — dark mode as primary
high-contrast — pure black on pure white
pastel — desaturated soft colors
brand-distinct-accent — non-standard accent
grainy-gradient — soft mesh-blend gradient with visible noise/grain overlay (2024–26 signature look)

Resource type (only on meta sources, not single-site references)

resource-library — meta source we consult for inspiration (Mobbin-style)
asset-shop — purchasable design assets (gradients, textures, icons)

Layout

wide-hero — full-bleed first viewport
narrow-prose — single 65ch column
asymmetric-grid — uneven column widths
modular-grid — cells / bento
dense-information — high text-per-area
generous-whitespace — restraint as expression
scroll-driven — animation tied to scroll
floating-nav — pill / capsule away from edges

Vibe

trust-through-restraint — Stripe-style “we don’t have to shout”
hand-crafted — visible designer-touched details
archival — feels like a library
playful — humor / motion / personality forward
premium — implies expense and considered taste
practitioner-voice — “I made this myself”
newsroom-authority — heritage publication confidence
dev-friendly — for-engineers-by-engineers aesthetic
editorial-essay — long-form-essay ergonomics

Current seed entries (20)

Modern technical:

Editorial / publishing:

Brutalist / dense:

Premium product:

Apple

Practitioner / essay:

Practitioner / educator (high-personality):

Newsletter / publishing (high-personality):

Every

Type-specific showcases:

Load-bearing reference

Founder taste synthesis (2026-04-23) — what’s actually consistent across the founder’s 5 favorite sites. Read this before proposing any RDCO design direction. TL;DR: the axis is opinion-vs-default, not restraint-vs-maximalism. Every new RDCO surface must ship a signature character beat + a committed display-face pairing. No template heroes.

Reference asset libraries (subscription / shops)

Meta-sources we consult when doing design work — not single-site references. These are tools/services we pay for. Each has resource_type: set in its frontmatter so they filter separately from the seed entries above.

Mobbin — paid screenshot library of real iOS/Android/Web product flows. Use for competitive UX research and pattern inspiration before designing any flow.
Grainient Supply — paid gradient/texture/animated-background asset shop by Basit A. Khan. Use when we need a hero gradient for newsletter banners, sub-property branding, or social cards.

Future additions

When the founder shares a link, encounters a site he likes, or wants to study a specific design move, add an entry. The collection compounds — once we have 50 entries, we can answer “show me everything tagged editorial-essay + transitional-serif” and see real precedents.

Adjacent skills/automation to consider eventually:

A /file-design-ref <url> skill that fetches the page, takes a screenshot, and pre-fills the entry frontmatter for review.
A weekly “design diet” cron that pulls 3 random entries to the founder’s morning brief, to keep vocabulary active.

readme