001
Zones overlay
The real page with the four zones boxed and labelled: navigation, actions, links, preferences.
glyphfield export 20 · 3840×2160
Graphics
Every illustration of the series, read top to bottom by the area of the post it sits in, then the covers, the contact sheets, the glyphfield grounds and the figures of the two earlier posts. Each image is one row with every version it ships in (dark and light, the social card cut from a cover, a clip’s GIF, video and still) switched in place, and the frame opens the file at full size. The list on the left follows the row in view; the grid shows the set as thumbnails.
Area AImages 001 to 005
Intuitive flow and direction
The zones of the page and the reading path; inline in the post, then the carousel.
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
Area BImages 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
Area CImages 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, the headings in the contents rail.
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
Area DImages 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%, labelled by role.
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
Area EImages 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
Solid vs outline
The old outline glyphs beside the solid glyphs the new docs use.
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 with its custom matte flag SVGs beside the same list drawn with emoji flags, which are glossy and change from platform to platform.
glyphfield export 55 · 3840×2160
026
Sidebar mask (animated)
The React reference sidebar recorded live: clicking from Configuration down through the Components children, the blue thumb sliding along the rail and through the bend where the tree nests. Delivered as MP4 and GIF as well as a still.
glyphfield export 58 · 1400×788 · 3 versions
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
Area FImages 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; labelled as a mock.
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 struck through in one weight; the group names are the set’s ordinary labels.
glyphfield export 30 · 3840×2160
CoversImages 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
ReviewImages 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
GroundsImages 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 Solid vs outline.
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.
1920×1080
085
glyphfield export 25, blue duotone B
Kept in the palette; no visual sits on it yet.
1920×1080
086
glyphfield export 25, blue duotone C
Kept in the palette; no visual sits on it yet.
1920×1080
087
glyphfield export 25, light ground
Kept in the palette; no visual sits on it yet.
1920×1080
Earlier in the seriesImages 088 to 096
Rewriting our docs for humans and agents
Part one of the series: the content rewrite, illustrated with captures of the shipped docs.
088
The cover
The header cover in both themes, and the social card the post’s Open Graph and Twitter tags point at.
1920×1080 · 3 versions
089
Spine
A user's three questions, each routed to a docs page type: Quickstart, Guides, or Reference
090
Sidebar
The docs sidebar before and after the redesign, reorganized around the Overview, Platform, frameworks, and Integrations sections
091
Frameworks
The Next steps component, linking a page to its four most related guides
092
Next steps
A shared code block with framework tabs for React, Next.js, TanStack Start, and React Native
093
Not found
A Page not found page, linking to the five closest pages in the docs
094
Diff
The initial docs refactor: 900 files changed, with 31,868 additions and 32,249 deletions
095
Cursor
Editing the docs in Cursor, with the source MDX beside the rendered Markdown preview
096
Footer
The feedback bar on every docs page: edit the page, report an issue on GitHub, or ask a question
Earlier in the seriesImages 097 to 099
Fuma Nama: The philosophy of an open-sourcerer
The interview with the creator of Fumadocs: the landing page, the slider, and the architecture diagram drawn in the post.
097
The cover
The header cover, and the social card the post’s Open Graph and Twitter tags point at.
1920×1080 · 2 versions
098
Landing
Fumadocs landing page
099
Slider
Fumadocs slider
