JR 2027.1
Issued Nov 2026
Style guide
The rules this site is built on: logotype, color, type, grid, and components.
It's inspired by the 1976 NASA Graphics Standards Manual by Danne & Blackburn: white paper, one warm red, a neo-grotesque typeface, hairline rules, and a strict grid.
1.1
Logotype
The JR mark is the main element of the system. It's one stroke weight with no outlines, gradients, or effects.
Always show it horizontal on a flat background. Don't rotate, stretch, or outline it. Keep it at least 24px wide on screen. Use the JRMark component and set the color with a text class.
1.2
Signature
The mark pairs with the name in regular weight and the role in Medium. This is the lockup used in the footer and share image.
John Rock
Software Engineer
Vermont
1.3
Color
Black ink on white paper, with one warm red. No pastels and no gradients. Tokens live in globals.css and work as Tailwind classes, like text-signal or border-ink.
- #E43D2B
Signal Red
signal
Logotype, active nav, hover, selection. The only accent.
- #121212
Ink
ink
Text, rules, outline boxes.
- #6B665E
Warm Gray 600
warm-600
Secondary text and catalog numbers. Passes AA on white.
- #9B958C
Warm Gray 400
warm-400
Marks and graphics only. Too light for text.
- #DCD8D1
Warm Gray 200
warm-200
Light dividers between list rows.
- #FFFFFF / #F3F1ED
Paper
paper / paper-2
Backgrounds. Paper 2 for empty media and callouts.
1.4
Use of color
This one comes straight from the manual. Red only goes on white or a light neutral. On dark or red backgrounds, the mark is always white.
YESWhite: red, ink, or gray
YESLight neutral: ink
YESDark: always white
YESRed: always white
NONo red on dark
NONo red on medium
2.1
Typography
Inter Tight is the stand-in for Helvetica. Use weight 500 for headings, 300 for large lead text, and 400 for body copy. Headings are upper and lower case, flush left, ragged right.
IBM Plex Mono is only for catalog details: section numbers, dates, and small labels. Use the catalog utility.
Inter Tight 500
Aa Rr 01
Inter Tight 300
Aa Rr 01
- Displaytext-7xl / 500 / -0.04em
- Projects
- Titletext-6xl / 500 / -0.035em
- Graphics standards
- Leadtext-2xl / 300
- Things I've built to fix problems for me, my team, and people in my community.
- Headingtext-2xl / 500
- AgentReady.dev
- Bodytext-[17px] / 400
- This started as an internal tool I wrote while wiring up markdown routing on getdbt.com.
- Smalltext-sm / 400
- Software Engineer, Vermont
- Catalogcatalog / Plex Mono 11px
- 1.3 WEB APP NOV 2, 2026
2.2
Grid
12 columns with 24px gutters from 768px up, and 4 columns with 16px gutters on mobile. Max width is 76rem. Use the site-container and site-grid utilities.
Most pages split 3 / 9 or 3 / 4 / 5: a hanging label column on the left, then content. Every section starts with a 1px ink rule. Corners are square.
1.1
Label
3.1
Links
Links are ink and turn red on hover. Focus rings are a 2px red outline. External links get an arrow.
3.2
Lists
Indexes are plain rows, not cards. Each row has a catalog number, a name, and an arrow. Ink rules for primary lists, warm gray rules for long ones.
3.3
Media
Screenshots and photos sit in a 1px ink outline box. Project screenshots show in grayscale and go to full color on hover, so their colors don't compete with the red.
No media