Build notes / 06

Inside
MONOGRAPH.

An identity systems studio with nothing hidden between the lines. The signature technique is inspectable swiss modular grid.

01

Fix the grammar

Archivo supplies the structural grotesque; DM Mono labels the system. The page uses two equal editorial columns, four-viewport-width outer margins, one-pixel rules, and a single saturated blue.

02

Make a real inspection layer

A fixed, non-interactive overlay contains twelve equal CSS grid columns. Twenty-pixel desktop gutters shrink to eight pixels on mobile. Transparent red fills reveal spacing without obscuring text.

03

Build identities with type and vectors

The a—z mark is typography; the architectural mark is a single SVG path. Both are invented identity studies with no imported logos or image assets.

04

Keep the control accessible

A native button updates aria-pressed and visible text. Escape hides the grid. There is no automatic motion, so the reduced-motion baseline is static by design.

Reproduce the site

  1. Download the complete source below and keep its name index.html.
  2. Open it through a static server. From its directory, run python3 -m http.server 8000, then visit http://localhost:8000. There is no install or build step.
  3. The stylesheet lives in the head. The rendering and interaction code lives in the final script. Adjust one parameter at a time and compare the result at desktop and 375 px widths.
  4. Google Fonts requires a network connection. All visible artwork is computed locally. Native system fallbacks preserve readable text if fonts fail.
  5. Enable your operating system’s reduced-motion setting and repeat the interaction. Use browser developer tools to check errors, overflow, and frame timing before publishing.
Download complete HTML ↓
The complete rendering and interaction code
const button=document.querySelector('#inspect');button.onclick=()=>{const visible=button.getAttribute('aria-pressed')!=='true';button.setAttribute('aria-pressed',String(visible));button.textContent=visible?'Hide the grid −':'Inspect the grid +';document.querySelector('#grid').classList.toggle('visible',visible)};addEventListener('keydown',e=>{if(e.key==='Escape'&&button.getAttribute('aria-pressed')==='true')button.click()})
The complete visual system
:root{--body:'DM Mono',monospace;--blue:#1749e7}body{font-family:'Archivo',sans-serif;background:#fff;color:#132347}header{display:grid;grid-template-columns:1fr 1fr;padding:24px 4vw;border-bottom:1px solid #132347}header b{font-size:22px;letter-spacing:-.04em}header div{display:flex;justify-content:space-between;font-size:13px}.hero{padding:40px 4vw 70px}.topline{display:grid;grid-template-columns:1fr 1fr;font:12px var(--body);margin-bottom:55px}.hero h1{font:500 clamp(65px,10vw,155px)/.92 'Archivo';letter-spacing:-.075em;margin:0 0 50px;max-width:12ch}.hero h1 span{color:var(--blue)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px}.hero-bottom p{max-width:42ch;font-size:17px;margin:0}.grid-toggle{justify-self:start;align-self:end;border:1px solid var(--blue);background:#fff;color:var(--blue);padding:14px 22px;font:12px var(--body)}.grid-toggle[aria-pressed=true]{background:var(--blue);color:white}.work{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#132347;border-top:1px solid;border-bottom:1px solid}.project{background:#fff;padding:4vw}.mark{aspect-ratio:1.7;background:#1749e7;color:white;display:flex;justify-content:center;align-items:center;margin-bottom:25px;overflow:hidden}.mark.one{font-size:clamp(110px,17vw,270px);font-weight:700;letter-spacing:-.15em}.mark.two{background:#dfe6f7;color:#1749e7}.mark.two svg{width:70%;height:70%}.project h2{font-size:21px;margin:0}.project p{font:12px/1.6 var(--body)}#grid{position:fixed;inset:0 4vw;pointer-events:none;z-index:20;display:none;grid-template-columns:repeat(12,1fr);gap:20px}#grid.visible{display:grid}#grid i{background:#f8374c10;border-left:1px solid #f8374c66;border-right:1px solid #f8374c66}.colophon{font-family:var(--body)}@media(max-width:650px){header{grid-template-columns:1fr auto}header div span{display:none}.topline{font-size:12px;gap:20px;margin-bottom:45px}.hero h1{font-size:66px}.hero-bottom,.work{grid-template-columns:1fr}.hero{padding:30px 5vw 50px}.project{padding:25px 5vw}.mark.one{font-size:150px}#grid{gap:8px}.grid-toggle{margin-top:10px}}

Original fictional design study. No stock photography, model files, image textures, or sample audio.