Design reference

The site runs on my design system, built from a 1980s Memorex floppy disk box: a glossy black box, an outlined wordmark, a stripe that turns a corner. These are its rules as this site applies them.

Source: design-system-opus at 70cc35e. You're looking at the dark context, the default. You're looking at the light context, because your system asked for it.

Rules

  • One loud move per surface. Here it's the stripe, and it only appears at the top of the front page.
  • Everything else is ink, hairlines and whitespace. Square corners. No shadows, gradients or glow.
  • Structure only where it means something. Years group notes because that's how a box of notes is sorted. Nothing is numbered unless it's a real sequence.
  • Sentence case, written, never transformed. No tracked-out capitals, no eyebrow labels.
  • Copy says what happens. "Read the note", not "Learn more".
  • State changes are color only, in 120ms. Pages cross-fade in the same 120ms and the header holds still. Reduced motion turns both off. Nothing animates on load; the stripe is simply there.

Color

Components only use semantic tokens. Dark is the default; light is the system's data-theme="light" context, switched on by your OS setting. Every swatch below follows the mode you're in.

  • Canvas --canvas-bg The page. Box black in dark, warm paper in light.
  • Surface --surface-primary Code blocks, inline code, inputs.
  • Body and headlines --text-body Everything you read.
  • Muted --text-muted Dates, years, meta, captions.
  • Link --text-link Orange on dark, crimson on light. Strings in code.
  • Accent --text-accent Active nav, keywords in code. Yellow on dark, maroon on light.
  • Hairline --border-default Dividers, rows, frames. Decorative, never text.
  • Control edge --border-strong Tags, inputs. At least 3:1 against the canvas.
  • Panel rule --border-panel The system's rule between two panels. Not used on this site.
  • Focus ring --focus-ring Two pixels, offset two, on every focusable thing.

Pairs

Only these text colors sit on these backgrounds. Ratios are WCAG contrast, dark then light; body text needs 4.5:1.

On canvas

  • Body 15.7:1, 16.4:1
  • Muted 7.1:1, 6.4:1
  • Link 5.3:1, 5.2:1
  • Accent 11.7:1, 15.3:1

On surface

  • Body 14.5:1, 14.6:1
  • Muted 6.5:1, 5.7:1
  • Link 4.9:1, 4.6:1
  • Accent 10.8:1, 13.7:1

Also used: ink on the yellow button (11.7:1 dark, 11.1:1 light) and selections (yellow with ink on dark, maroon with paper on light). Never: yellow or orange text on light, crimson or maroon text on dark, anything on a stripe band.

Type

Space Grotesk, for headlines

Bold only, sentence case, tracked in by 0.02em, lines at 1.05, balanced, capped at 22 characters. It also drew the wordmark.

Work Sans carries everything else: every note at eighteen pixels on a sixty-eight character measure, the nav, dates and this sentence.

Regular, medium for emphasis and labels, and italic.

$ cloudflared tunnel run valet-dev

JetBrains Mono, for code and technical values only. Dates stay in Work Sans.

  • Every moment counts Home headline, display-lg
  • Small tools, written down Page titles, display-md
  • Small tools, written down Note titles, heading-lg
  • Small tools, written down h2 in a note, heading-md
  • Small tools, written down h3 in a note, heading-sm
  • Small tools, written down Section titles, h4, title
  • Reading text in a note body-lg, 18px
  • Interface text body, 16px
  • Meta, buttons, labels small, 14px

Elements

A link in running text is the link color with a hairline underline, and turns to ink on hover.

Titles in lists stay ink and take the link color on hover. The nav marks the current page in the accent color.

See all notes

Buttons are square and 44 pixels tall. One yellow button per view, at most. This page doesn't need one; it's here so you can see it.

laravel v1.4.0 Draft Archived

Tags file notes under a category. Badges are for versions and states. No pills.

Only for replies. No newsletter.
That's not an email. It's missing the part after the dot. 
# before: cached forever
return cache()->rememberForever('config', fn () => load());

Code sits on the surface with a hairline. Syntax uses four colors from the pairs above: ink, muted for comments, accent for keywords, link for strings.

Lists over cards. A row opens with a hairline, not a box.

Marks

My name in Space Grotesk 700, solid, in the headline color. It heads every page. It's cut from the font the same way as the system's "gcavanunez" mark, with the same tracking, so it's never recased, stretched or retracked.

The system's own mark, the handle, outlined like MEMOREX on the box. The site doesn't use it in the header:

The stripe: ten flat bands of red, orange and yellow, red on the outside, that come down and turn the corner. It's the one loud move, so it appears once, at the top of the front page. It doesn't animate, and it isn't repeated here. Never behind text, never on a card.

The favicon: the stripe cut down to three bands, on box black, drawn on a 16 pixel grid so the bands stay apart at tab size.

Lima, Peru

The flag of Peru, red, white, red, flat and square, next to the words "Lima, Peru" under the front page tag. Its red is the stripe red. It's decoration, so screen readers skip it.

Layout

The stripe, on the front page: a sentence-case tag, like the label on the box, then the stripe coming down at the left edge of the column and running off the right edge of the screen.

Reading column, everywhere else: a hairline nav with my name, then one left-aligned column capped at 68 characters. Notes are grouped by year.

Every page is as wide as a year of notes: the year column plus the 68 character measure, about 800 pixels. Spacing is a 4px grid, and page margins grow from 20 to 64 pixels.

Voice

Playful, casual, dry, warm. Short sentences. No exclamation marks, no emoji.

  • Link to a note Read the note Learn more
  • Archive See all notes, Older notes Explore
  • 404 There's no note at this address. Oops! Something went wrong
  • Empty category Nothing filed here yet. Nothing to see here!
  • Code Read the source Check it out!

Built with

Jigsaw generates the site, Phiki highlights the code, and Tailwind maps the tokens to utilities. The fonts are self-hosted, under the SIL Open Font License.