Screenfold Codex

This direction sets the landing page as a Maya screenfold: one strip of bark-paper cream folded into ten leaves, each framed in red oxide and cut into horizontal registers by red rules.

Signature. Parallelogram leaves with a fixed lean that alternates per panel so every crease aligns; stepped-trough dither hinges seated on the crease span; a twelve-sign glyph-square vocabulary keyed on the back board; bar-and-dot numerals beside every count, price, ordinal, rate, and yes/no cell; the fold map, the whole strip in miniature as the hero's table of contents.

Section 11440 pixels wide

Live page

Screenfold Codex, live at 1440 pixels wide/d/screenfold-codex
Section 21440 by 900

Captures

Screenfold Codex, the first fold in the light theme at 1440 pixels wide
Light
Screenfold Codex, the first fold in the dark theme at 1440 pixels wide
Dark
Section 3The concept

The brief

Every leaf is a parallelogram whose side edges run a fixed 40px across from top to bottom, adjacent leaves running opposite ways, so every crease lines up exactly and the strip's silhouette zigzags down the page like an accordion pleat seen off its axis. The folds between leaves are stepped Bayer troughs (inked at a valley with a solid crease hairline, red oxide at a mountain with a bare-paper ridge). Dither is the writing: twelve geometric signs carved through dithered squares form a documented vocabulary, each standing for one product concept (strings, build, runtime, CLI, dashboard, review, locale, languages, routing, edge, context, tokens) and printed wherever that concept appears, with the key on the back board. Bar and dot is the counting: every figure prints in the Maya numeral beside its Arabic form, with the key on leaf one. The living material is the real product: the shipped Next.js sample, both TranslateWindow belt strings in five locales, the component outputs, the review rows, the 120-row locale roster, the published rate ledger, the shipped feature grid.