PlatwrightSpecimen
The drawing-table system
Every page on this site is set from one type scale, one palette and one grid. This page is the reference: the sizes as they actually render, the colors with their measured contrast, and the module the layout is built on.
No JavaScript, no images, no separate stylesheet. What you see is the same site.css the rest of the site loads.
One · Type
Seven steps, ratio 1.30
Each step is a clamp(): a floor for narrow screens, a ceiling for wide ones. Values below are what a 1440px viewport resolves to. Three faces do all the work — Space Grotesk for headings, IBM Plex Sans for text, IBM Plex Mono for labels and figures.
--t-display · 78px · Space Grotesk 600
Measured
--t-h1 · 60px · Space Grotesk 600
Every formula, verified
--t-h2 · 46px · Space Grotesk 600
What the numbers show
--t-h3 · 35.5px · Space Grotesk 500
Cap rate (purchase)
--t-lead · 27px · IBM Plex Sans 400
The opening line of a page, set one step above the body it introduces.
--t-body · 21px · IBM Plex Sans 400 · floor 17, ceiling 23
Body text sits at 21px in a 70-character column. A plat is the official drawing of a property: the exact boundaries, measured and put on record. Not an estimate — a measurement. This is the size nearly all of the writing on this site is set at, and the size everything else is measured against.
--t-small · 18.5px · IBM Plex Sans 400 · floor 16, ceiling 20
Captions, disclosures and the footer. Small, but never below 16px anywhere on the site.
--t-label at 15px sits outside the ratio: it is the mono, letter-spaced, upper-case tag you see above each block on this page — a rule for a component, not a step in the scale.
Two · Color
Nine colors, and where each one is allowed
Ratios below are computed from the hex values against the background each color is actually used on. AA needs 4.5:1 for body text and 3:1 for large text; every text pairing here clears AA, and all but one clear AAA.
--ink · #1A1F23
All body text and all headings. On paper 14.5:1, on card 15.8:1, on the blue band 12.8:1, on the well 11.2:1. Also the background of the dark sections.
--steel-deep · #4A5661
The only secondary text color: captions, notes, footer lines. On paper 6.5:1, on the blue band 5.8:1, on the well 5.1:1. A lighter steel was dropped because it fell short on the well.
--cian900 · #0D4453
The only cyan used for text — links, emphasis, figures. On paper 9.3:1, on the blue band 8.2:1, on the well 7.2:1.
--cian700 · #17708A
Backgrounds, the 4px rule and the brand mark — never text on paper. Paper on it measures 4.92:1, so it is safe as a filled button or band.
--cian400 · #6FAFC2
Hairlines and grid seams only. Against paper it measures 2.1:1: correct for a 1px line, never legal for text. This is the one pairing on the page that is not a text pairing.
--paper · #F3EFE6
The default page. Warm, not white, so long stretches of reading don't glare. Ink on it: 14.5:1.
--card · #FAF9F6
The surface inside a grid, one shade above paper so the 1px seams read as a drawing, not a table border.
--section · #D5E5EA
The blue band, for a change of subject. At most two non-paper backgrounds appear in any one page.
--well · #D9D4C6
The recessed band: asides, honest caveats, the things set apart from the argument.
Three · Dark
The dark page is measured too
Every template ships with a dark version of its main panel, and the site has dark sections to match. Two colors are reserved for them: --ink-sec #A9B5BF for secondary text, at 8.0:1 on ink, and --ink-acc #6FAFC2 for accents, at 6.8:1. Paper on ink reads at 14.5:1 — the same pairing as the light page, inverted.
Four · Grid
The plat grid
A plat is a survey drawing, so the layout is built on a survey module: --cell, 40px on a phone, 56px from 48em, 64px from 64em. Section padding, stack gaps and the 96px rule are all multiples of it. Where one section meets the next, a 9px corner mark is drawn — the only decorative element in the system.
Content lives in a .wrap capped at 1400px. Cards form a single column, two from 34em, three from 64em, separated by 1px seams. Figures cap at 920px, or 1040px from 64em, on the image itself. Prose runs 70 characters.
Why publish it
Because “measured” should be checkable
The claim on the templates is that the arithmetic was verified rather than assumed. It would be odd to make that claim on a site whose own numbers were guesses. So the scale, the palette and the grid are written down here with their values, and the contrast figures are computed from the hex codes above rather than remembered.
The same discipline runs through the files: thirteen spreadsheet functions across the whole catalog — AND, EDATE, IF, IFERROR, INDEX, MATCH, MAX, MIN, OR, PMT, SUM, SUMPRODUCT, TEXT — and nothing exotic anywhere. The comparison page sets out what that does and doesn't buy you.
This template is a calculation tool, not financial, tax, or legal advice. Results are estimates based on the numbers you enter. Verify with a qualified professional before making any purchase, financing, or tax decision.