jordanrosenberg-com

A utilitarian, raw digital archive. The monochromatic light-grey canvas and uniform semi-mono type frame a sprawling, interactive index of artifacts.

clinical raw

Visit site

Rated

6.9/ 10

From 3 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged: 9.6
Systemmeasured: 6.0
Distinctionmeasured: 1.0

on the grid: 15%
vertical rhythm: 59%
type on a scale: 67%
contrast passing AA: 100%
unlike the library: 0.17
model craft: 8.0/10
model deviation: 8.0/10

Colour

Background#c9c9c9

Text#000000

Surface#c9c9c9

Muted#000000

Typefaces

Display: Diatype Semi-Mono Variable
Body: Diatype Semi-Mono Variable
Mono: Diatype Semi-Mono Variable
Source: self_hosted
Scale: 14 · 16 · 17

Layout

Grid: —
Container: —
Spacing base: 8px
Radius: 4px · 8px

Capture

Category: portfolio
Sections: 3
Captured: 2026-08-30
Rhythm: monotone light grey canvas throughout

Type rules

set all content in a single semi-mono typeface
tight type scale ratio with minimal contrast between body and display
body text measure kept under 45 characters

Colour rules

strictly monochromatic palette with pure black text on neutral grey background

Voice rules

use circled numbers for years
keep metadata structured with arrow prefixes

Holds it together

render all text in Diatype Semi-Mono with no color accents
use thin 1px black stroke pill borders for interactive utility chips
format project credits with right arrows and years in circled digits

Contrast

text on background12.7:1 AAA

muted text on background12.7:1 AAA

text on surface12.7:1 AAA

Type, measured

Body: 14px / 1.3
Measure: 42 characters
Display: 17px / 1.3
Tracking: 0em display
Scale ratio: 1.05

Voice

Tone: neutral, archival, matter-of-fact
Sentences: short
Person: third
Vocabulary: plain
Calls to action: zoom, drag, rearrange

Built with

Builder: cargo
Framework: —
Motion: —
WebGL: —
Nav: —
Length: 13.3 screens

Sections in page order

3 marked strong · 3

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
Monochromatic, clinical workspace with monospace type, live timestamp, and an interactive draggable canvas prompt.
Mood
clinical + quiet
Layout
1 col · stacked · airy
Open section →
01
gallery
Strong
An industrial, archive-like portfolio grid pairing raw monospaced captions with rounded graphic project cards across a cool grey canvas.
Mood
raw + editorial
Layout
4 col · grid · dense
Open section →
02
gallery
Strong
An exhaustive, sprawling wireframe index and brutalist design archive set in tight monospaced type over neutral grey.
Mood
raw + clinical
Layout
1 col · asymmetric · dense
Open section →