Graphics

Every illustration of the docs series, ordered by the area of the post it sits in, then the covers, the contact sheets, the glyphfield grounds and the two earlier posts.

Each image is one row. The row switches in place between the versions the image ships in: dark and light, the social card cut from a cover, and a clip’s GIF, video and still. The frame opens the file at full size.

Section 1Images 001 to 005

Intuitive flow and direction

The zones of the page and the reading path; inline in the post, then the carousel.

001

Zones overlay

The real page with the four zones boxed and labelled: navigation, actions, links, preferences.

glyphfield export 20 · 3840×2160

002

Wireframe map

A reading page as a wireframe with its levels of organization pulled out and tied to where they live: sections in the switcher, groups and pages in the sidebar, headings in the contents rail.

glyphfield export 11 · 3840×2160

003

Exploded layers

The quiet details pulled out of the page and tied back to where they sit: the theme toggle in both places, the italic last-updated line, the split copy-page button, the star count and the language switcher.

glyphfield export 17 · 3840×2160

004

Reading path

A numbered path over the muted page: orient, navigate, read, choose, act.

glyphfield export 19 · 3840×2160

005

Four corners

One crop per zone, labelled by what you do there: navigate in the sidebar, act in the header, adjust or leave in the footer, read in the content column.

glyphfield export 26 · 3840×2160

Section 2Images 006 to 010

Cleaning up mental clutter

The redline of what was deleted, then the before-and-after set.

006

Redline pass

The old page with every deleted element struck in red and a legend beside it; the header rule is a line, and nothing touches.

glyphfield export 27 · 3840×2160

007

Before / after split

Old and new at the same scale; deletions in red, the replacement row in blue.

glyphfield export 28 · 3840×2160

008

The pile

The deleted pieces cut out of the old page, braced together into the single row that replaced them.

glyphfield export 33 · 3840×2160

009

Peel the layers

Extra lines, links and buttons as translucent layers lifted off the new page, each called out in red; the page itself in blue.

glyphfield export 34 · 3840×2160

010

Header strip

Where the old top band’s controls went: the search field became the ⌘K icon, the GitHub banner became the star pill, and the sidebar toggle went away because the sidebar now stays.

glyphfield export 36 · 3840×2160

Section 3Images 011 to 016

One singular accordion

The navigation census and the anatomy of the sidebar, then its persistence, the comparison and the tree.

011

Navigation census

Every navigation or control surface numbered on both pages: the old page’s six in red, the new page’s three in blue.

glyphfield export 37 · 3840×2160

012

Accordion anatomy

The new sidebar enlarged with a label for each part, and the two levels that live beyond it: the sections in the open switcher, tied to the switcher, and the headings in the contents rail, tied to the group heading.

glyphfield export 39 · 3840×2160

013

Persistence strip

Three consecutive pages; the sidebar stays, only the active marker moves.

glyphfield export 40 · 3840×2160

014

Sidebars side by side

The two sidebars at the same scale with bracketed labels.

glyphfield export 41 · 3840×2160

015

One tree

The sidebar drawn as the tree it is, mapped onto the real crop.

glyphfield export 44 · 3840×2160

016

Another section

The same accordion in two sections: the Quickstarts sidebar, and the React reference one click away in the switcher, same shape, same footer, same place.

glyphfield export 25 · 3840×2160

Section 4Images 017 to 021

Drawing the eye

Icons, separators and type, one image each, then the quickstart before and after.

017

Type specimen

Real type from the page at 110–220%, hung on one centre axis: the old docs’ single weight and grey first, then each new role, its label (set in the weight and style it names, with the spec in mono) on the left of the axis and its sample on the right.

glyphfield export 45 · 3840×2160

018

Alignment

Top-aligned rows against the real centre-aligned switcher and footer rows.

glyphfield export 47 · 3840×2160

019

Icons, not lists

The old paragraph-and-links against the About section’s three cards, each led by a solid icon.

glyphfield export 48 · 3840×2160

020

Rules and space

The two 1px rules and the measured spacing at the top of the page.

glyphfield export 49 · 3840×2160

021

Intro Quickstarts, before and after

The Introduction page’s Quickstarts section, old and new, at the same scale: eight centred logo tiles under a command line, versus eight cards with a solid icon, a name and one line each.

glyphfield export 50 · 3840×2160

Section 5Images 022 to 028

A unique GT flair

The two clips, the UI primitives carousel, and the localized page.

022

TOC slide (animated)

The Fumadocs table of contents on the Next.js quickstart, recorded live while scrolling: the active marker slides down the rail, an SVG path applied as a CSS mask. Delivered as GIF and MP4 as well as a still.

glyphfield export 52 · 1400×788 · 3 versions

023

Two tiers of icons

The new docs’ icon rule, from real captures, as two groups: controls (search, language, copy page, the theme toggle’s half-filled circle) keep thin glyphs; icons that carry meaning (the Core, CLI and Integrations cards, the Libraries feature, the Changelog and Contact links) are solid.

glyphfield export 53 · 3840×2160

024

Corners

The old pill button and search field over the new button and copy control, at the same scale, beside the radius scale the new docs use with the pill struck out.

glyphfield export 54 · 3840×2160

025

Flags, not emojis

The language menu twice at the same size: the real one with its custom matte flag SVGs, and the same list drawn with emoji flags, which are glossy and change from platform to platform.

glyphfield export 55 · 3840×2160

027

Localized

The same Introduction page in English and Chinese at the same scale. Dashed guides run across both: title, first sidebar item, header actions and the language row sit on the same lines, so spacing, alignment and order hold across languages.

glyphfield export 56 · 3840×2160

028

Quiet scrollbar

The React reference sidebar with its scrollbar: a thin rounded thumb on a transparent track, enlarged beside it and measured; the same bar runs in code blocks and menus.

glyphfield export 29 · 3840×2160

Section 6Images 029 to 033

The hit list

The anti-patterns as a poster and as a mock; the list itself renders as text.

029

Hit list

The ten anti-patterns as a two-column list with solid x-marks.

glyphfield export 57 · 3840×2160

030

Spot the anti-patterns

An illustrative generic mock with numbered red callouts.

glyphfield export 18 · 3840×2160

031

Don’t / Do

Three real pairs cropped from old and new.

glyphfield export 32 · 3840×2160

032

The fix for each

The hit list as a 3×3 card where every anti-pattern is struck out and its replacement written under it.

glyphfield export 46 · 3840×2160

033

Poster

The hit list regrouped into clutter, navigation and language, every item marked with the set’s red x; the group names are the set’s ordinary labels.

glyphfield export 30 · 3840×2160

Section 7Images 034 to 035

Covers

The header cover in both themes with the social card cut from it, and the wireframe-map direction kept as the alternate.

034

Cover · exploded components

The page taken apart in a three-quarter perspective: the real content column, navigation, actions and contents rail, and the links and preferences rows each hover on their own glass pane above a ghost wireframe of the page, held at their true positions by dashed posts. Straight-on perspective, no text, blue background.

glyphfield export 25, blue duotone · 3840×2160 · 4 versions

035

Cover · wireframe map

The wireframe-map direction with no text: the fleshed-out wireframe of the real page with the four zones in blue, and real crops of the live docs tied to their zones, on the blue-toned export.

glyphfield export 16, blue duotone · 3840×2160 · 4 versions

Section 8Images 036 to 038

Contact sheets

The finished set tiled at thumbnail size, the way a reader meets it.

036

Contact sheet 1 of 3

The set tiled at the size a reader meets it, areas A to D at thumbnail size; what the set was reviewed on.

2560×1536

037

Contact sheet 2 of 3

The set tiled at the size a reader meets it, areas D to F; what the set was reviewed on.

2560×1536

038

Contact sheet 3 of 3

The set tiled at the size a reader meets it, the covers; what the set was reviewed on.

2560×768

Section 9Images 039 to 087

Backgrounds

The glyphfield exports the visuals sit on, at their native 1920 by 1080 and their own aspect; each names the visuals that use it.

039

glyphfield export 10

Kept in the palette; no visual sits on it yet.

1920×1080

040

glyphfield export 11

Ground of Wireframe map.

1920×1080

041

glyphfield export 16

Kept in the palette; no visual sits on it yet.

1920×1080

042

glyphfield export 17

Ground of Exploded layers.

1920×1080

043

glyphfield export 18

Ground of Spot the anti-patterns.

1920×1080

044

glyphfield export 19

Ground of Reading path.

1920×1080

045

glyphfield export 20

Ground of Zones overlay.

1920×1080

046

glyphfield export 25

Ground of Another section.

1920×1080

047

glyphfield export 26

Ground of Four corners.

1920×1080

048

glyphfield export 27

Ground of Redline pass.

1920×1080

049

glyphfield export 28

Ground of Before / after split.

1920×1080

050

glyphfield export 29

Ground of Quiet scrollbar.

1920×1080

051

glyphfield export 30

Ground of Poster.

1920×1080

052

glyphfield export 31

Kept in the palette; no visual sits on it yet.

1920×1080

053

glyphfield export 32

Ground of Don’t / Do.

1920×1080

054

glyphfield export 33

Ground of The pile.

1920×1080

055

glyphfield export 34

Ground of Peel the layers.

1920×1080

056

glyphfield export 35

Kept in the palette; no visual sits on it yet.

1920×1080

057

glyphfield export 36

Ground of Header strip.

1920×1080

058

glyphfield export 37

Ground of Navigation census.

1920×1080

059

glyphfield export 38

Kept in the palette; no visual sits on it yet.

1920×1080

060

glyphfield export 39

Ground of Accordion anatomy.

1920×1080

061

glyphfield export 40

Ground of Persistence strip.

1920×1080

062

glyphfield export 41

Ground of Sidebars side by side.

1920×1080

063

glyphfield export 42

Kept in the palette; no visual sits on it yet.

1920×1080

064

glyphfield export 43

Kept in the palette; no visual sits on it yet.

1920×1080

065

glyphfield export 44

Ground of One tree.

1920×1080

066

glyphfield export 45

Ground of Type specimen.

1920×1080

067

glyphfield export 46

Ground of The fix for each.

1920×1080

068

glyphfield export 47

Ground of Alignment.

1920×1080

069

glyphfield export 48

Ground of Icons, not lists.

1920×1080

070

glyphfield export 49

Ground of Rules and space.

1920×1080

071

glyphfield export 50

Ground of Intro Quickstarts, before and after.

1920×1080

072

glyphfield export 51

Kept in the palette; no visual sits on it yet.

1920×1080

073

glyphfield export 52

Ground of TOC slide (animated).

1920×1080

074

glyphfield export 53

Ground of Two tiers of icons.

1920×1080

075

glyphfield export 54

Ground of Corners.

1920×1080

076

glyphfield export 55

Ground of Flags, not emojis.

1920×1080

077

glyphfield export 56

Ground of Localized.

1920×1080

078

glyphfield export 57

Ground of Hit list.

1920×1080

079

glyphfield export 58

Ground of Sidebar mask (animated).

1920×1080

080

glyphfield export 59

Kept in the palette; no visual sits on it yet.

1920×1080

081

glyphfield export 16, blue duotone A

Ground of Cover · wireframe map, Cover · wireframe map, light theme, OpenGraph · wireframe map, cleaned (1200×630), OpenGraph · wireframe map, light theme (1200×630).

1920×1080

082

glyphfield export 16, blue duotone B

Kept in the palette; no visual sits on it yet.

1920×1080

083

glyphfield export 16, blue duotone C

Kept in the palette; no visual sits on it yet.

1920×1080

084

glyphfield export 25, blue duotone A

Ground of Cover · exploded components, Cover · exploded components (OpenGraph 1200×630), OpenGraph · exploded components, light theme (1200×630), Cover · exploded components, light theme.