overview › sitemap › linking plan

internal linking plan

188 contextual links across 46 pages, chosen by meaning, by the section they sit in, and by the path a visitor took to get there. The nav strip and footer stay as they are; everything here goes in the body.

rules for every link

1. link the first mention of a concept in the body, not a later one; never link a heading
2. anchor text names what the reader gets ("the contrast table"), never "more", "open", "here" or "where it lives"
3. point at the section (#fragment), not the top of a long page, whenever the target has one
4. one link per target per section; 3 to 8 contextual links per page body, on top of the nav strip and footer
5. every article links up to the principle or system page it argues for, across to one or two siblings in its cluster, and back to its origin at the school
6. every system page links down to the article that gives its reason and out to one example that shows it
7. every example and board links back to the rule it demonstrates and to the page a visitor came from (its path hub)
8. glossary entries link with the term itself as anchor text; pages link a technical term to its glossary entry once
9. previous / next follows the reading path the page belongs to, so the sequence matches how the visitor arrived

topic clusters

cluster	hub	pages
the school and its lineage	bauhaus.html	story.html, bauhaus.html, moodboard.html, library.html, articles/color-is-structure.html, articles/lowercase.html, articles/preliminary-course.html, articles/lineage.html, examples/poster-figure.html, boards/bauhaus-moodboard.html, boards/bauhaus-moodboard-v2.html
principles and their reasons	principles.html	principles.html, rules.html, journal.html, articles/form-follows-function.html, articles/less-is-more-tested.html, articles/honest-materials.html
form, geometry and the mark	brand.html	brand.html, icons.html, library.html, articles/three-forms.html, articles/square-corner.html, articles/icon-in-four-moves.html, articles/mark-taken-apart.html, examples/app-object.html
color	color.html	color.html, accessibility.html, articles/color-is-structure.html, examples/app-studio.html, examples/poster-wheel.html
type and hierarchy	typography.html	typography.html, articles/lowercase.html, articles/hierarchy.html
grid, space and composition	layout.html	layout.html, patterns.html, templates.html, articles/square-corner.html, articles/grid-and-diagonal.html, articles/honest-materials.html, articles/hierarchy.html, articles/gestalt.html, examples/poster-stairs.html
parts, states and motion	components.html	motion.html, accessibility.html, components.html, controls.html, articles/states.html
tokens, files and production	start.html	rules.html, glossary.html, start.html, credits.html, sitemap.html, articles/design-tokens.html, articles/lineage.html
the system in use	examples.html	index.html, story.html, patterns.html, templates.html, examples.html, examples/index.html, examples/landing.html, examples/app-home.html, examples/app-studio.html, examples/app-object.html, examples/poster-figure.html, examples/poster-stairs.html, examples/poster-wheel.html

reading paths

previous / next and breadcrumbs follow these sequences, so a page's neighbours depend on the path it belongs to.

story

1. index
2. →
3. bauhaus
4. →
5. story
6. →
7. moodboard
8. →
9. library
10. →
11. examples

foundations

1. principles
2. →
3. rules
4. →
5. brand
6. →
7. color
8. →
9. typography
10. →
11. layout
12. →
13. motion
14. →
15. accessibility

parts

1. components
2. →
3. controls
4. →
5. icons
6. →
7. patterns
8. →
9. templates
10. →
11. examples

journal

1. journal
2. →
3. form-follows-function
4. →
5. three-forms
6. →
7. square-corner
8. →
9. icon-in-four-moves
10. →
11. less-is-more-tested
12. →
13. color-is-structure
14. →
15. grid-and-diagonal
16. →
17. lowercase
18. →
19. honest-materials
20. →
21. mark-taken-apart
22. →
23. design-tokens
24. →
25. hierarchy
26. →
27. states
28. →
29. preliminary-course
30. →
31. gestalt
32. →
33. lineage

examples

1. examples
2. →
3. landing
4. →
5. app-home
6. →
7. app-studio
8. →
9. app-object
10. →
11. poster-figure
12. →
13. poster-stairs
14. →
15. poster-wheel

reference

1. start
2. →
3. glossary
4. →
5. credits
6. →
7. sitemap

links, page by page

open a page to see where each new link goes, its anchor text, and why.

index.html · 0 new · 0 incoming

already well linked; keep as is.

story.html · 2 new · 4 incoming

section	anchor text	target	kind	why
#s4	the image library	library.html#series	apply	download the series
#s7	from dessau to the design system	articles/lineage.html	origin	closing context

bauhaus.html · 10 new · 14 incoming

section	anchor text	target	kind	why
#people	itten and the vorkurs	articles/preliminary-course.html	explain	teachers named
#people	color as itten and albers taught it	articles/color-is-structure.html	explain
#people	schlemmer's figure, as a poster	examples/poster-figure.html	show	triadic ballet
#people	breuer's club chair, in the app	examples/app-object.html	show
#people	bayer and the lowercase letterhead	articles/lowercase.html	explain	1925
#cities	what dessau meant by honest materials	articles/honest-materials.html	explain	dessau building
#ideas	form follows function, examined	articles/form-follows-function.html	explain
#ideas	the three elementary forms	articles/three-forms.html	explain
#workshops	the mood board	moodboard.html	show	workshop objects pinned
#legacy	from dessau to the design system	articles/lineage.html	explain	what came after, in detail

principles.html · 8 new · 8 incoming

section	anchor text	target	kind	why
#p1	what the slogan actually asks	articles/form-follows-function.html	explain	principle 1 is the thesis of that article
#p2	reduction, as a test	articles/less-is-more-tested.html	explain	principle 2 turned into a procedure
#p3	circle, square, triangle	articles/three-forms.html	explain	geometry first is drawn out there
#p4	honest materials on a screen	articles/honest-materials.html	explain	same principle, same name
#p5	tokens as the production line	articles/design-tokens.html	explain	design for production = one source of truth
#p6	balance without symmetry	articles/grid-and-diagonal.html	explain	asymmetric balance is the lever argument
#p7	the preliminary course	articles/preliminary-course.html	explain	art and craft as one began in the vorkurs
#about	the ideas of the school	bauhaus.html#ideas	origin	where the seven came from

rules.html · 5 new · 7 incoming

section	anchor text	target	kind	why
#about	every term in the rulebook, defined	glossary.html#terms	define	rules use terms of art
#l	why gaps belong inside groups	articles/gestalt.html	explain	layout rules are gestalt laws
#p	the five states of a control	articles/states.html	explain	parts rules assign states
#a	the accessibility test checklist	accessibility.html#test	apply	accessibility rules have a test
#t	the case for lowercase display	articles/lowercase.html	explain	type rules include lowercase

brand.html · 8 new · 2 incoming

section	anchor text	target	kind	why
#story	the school, 1919 to 1933	bauhaus.html	origin	the brand story starts there
#story	how this project was made, step by step	story.html#steps	sibling	project story
#principles	all seven principles, with reasons	principles.html	apply	brand lists them briefly
#mark	the mark, measured	articles/mark-taken-apart.html	explain	numbers inside the mark
#mark	why these three shapes	articles/three-forms.html	explain	the mark is the three forms
#lockups	logo files in svg and png	library.html#logo	apply	download where lockups are shown
#voice	why headlines are lowercase	articles/lowercase.html	explain	voice includes the lowercase register
#donts	the brand rules, numbered	rules.html#b	apply	donts are rules

color.html · 8 new · 7 incoming

section	anchor text	target	kind	why
#core	color as a material with rules	articles/color-is-structure.html	explain	the palette argument
#core	itten and albers at the school	bauhaus.html#people	origin	who taught color
#ratio	one red per screen, tested	articles/less-is-more-tested.html	explain	ratio is reduction
#roles	roles, not colors, in the token files	articles/design-tokens.html	explain	semantic roles are tokens
#contrast	contrast in the accessibility checklist	accessibility.html#contrast	apply	same table, applied
#studio	the color studio screen	examples/app-studio.html	show	the wheel as an app
#studio	the farbkreis poster	examples/poster-wheel.html	show	the wheel as a poster
#rules	vibration	glossary.html#g-v	define	term used in rules

typography.html · 5 new · 2 incoming

section	anchor text	target	kind	why
#specimen	why display is lowercase	articles/lowercase.html	explain	specimen is set lowercase
#scale	size as the first lever of hierarchy	articles/hierarchy.html	explain	the scale is a ranking
#rules	voice and tone	brand.html#voice	sibling	words and letterforms together
#rules	the type rules, numbered	rules.html#t	apply	rule home
#css	the type tokens	articles/design-tokens.html	explain	css values come from tokens

layout.html · 9 new · 4 incoming

section	anchor text	target	kind	why
#grid	the grid and the diagonal	articles/grid-and-diagonal.html	explain	why screens stay orthogonal
#grid	the swiss grid, 1957	articles/lineage.html	origin	where the 12 columns come from
#space	spacing tokens	articles/design-tokens.html	explain	8-point scale lives in tokens
#surfaces	the case for the square corner	articles/square-corner.html	explain	radius 0
#surfaces	no shadows, and why	articles/honest-materials.html	explain	shadow none
#composition	why one dominant block	articles/hierarchy.html	explain	composition = hierarchy
#composition	the gestalt laws behind the rules	articles/gestalt.html	explain	grouping
#composition	die treppe, a tilted composition	examples/poster-stairs.html	show	diagonal allowed on posters
#breakpoints	page templates on the grid	templates.html	apply	grid applied to pages

motion.html · 5 new · 5 incoming

section	anchor text	target	kind	why
#tokens	motion tokens in the files	articles/design-tokens.html	explain	durations are tokens
#rules	what a state change looks like	articles/states.html	explain	motion serves states
#rules	reduced motion and focus	accessibility.html#principles	apply	reduced motion rule
#toast	the toast control	controls.html#toast	show	demo uses it
#rules	the motion rules, numbered	rules.html#m	apply	rule home

accessibility.html · 6 new · 7 incoming

section	anchor text	target	kind	why
#contrast	the contrast table	color.html#contrast	sibling	replace generic "color page" anchor
#keyboard	focus is a state	articles/states.html	explain	focus ring is one of five states
#keyboard	states on every control	controls.html#states	show	live examples
#forms	text fields and selects	components.html#fields	show	labelled fields
#forms	the login section	patterns.html#login	show	a whole form
#test	the accessibility rules	rules.html#a	apply	rule home

components.html · 8 new · 2 incoming

section	anchor text	target	kind	why
#buttons	five states of a button	articles/states.html	explain	button states
#buttons	form follows function	articles/form-follows-function.html	explain	a button names an action
#fields	accessible forms	accessibility.html#forms	apply	labels, errors
#choices	why toggles are square	articles/square-corner.html	explain	square toggle
#cards	a card, before and after	articles/less-is-more-tested.html	explain	card reduction example
#feedback	motion durations	motion.html#tokens	sibling	alerts animate
#navigation	the site header section	patterns.html#header	show	nav in a page
#cards	the wassily chair at the school	bauhaus.html#workshops	origin	card content

controls.html · 5 new · 4 incoming

section	anchor text	target	kind	why
#states	states, or what a control is doing	articles/states.html	explain	state table
#dialog	keyboard and focus	accessibility.html#keyboard	apply	dialog traps focus
#toast	motion durations	motion.html#tokens	sibling	toast timing
#dialog	the club chair, in the app	examples/app-object.html	show	club chair card
#accordion	the faq section	patterns.html#faq	show	accordion in a page

icons.html · 4 new · 2 incoming

section	anchor text	target	kind	why
#construction	an icon in four moves	articles/icon-in-four-moves.html	explain	construction walk-through
#construction	circle, square, triangle	articles/three-forms.html	explain	the primitives
#set	icon files to download	library.html#icons	apply	files
#usage	decorative vs meaningful	accessibility.html#principles	apply	aria rules

patterns.html · 5 new · 5 incoming

section	anchor text	target	kind	why
#hero	the landing page	examples/landing.html	show	hero in a full page
#features	the app home screen	examples/app-home.html	show	rooms grid
#faq	accordion	controls.html#accordion	apply	the part used
#article	the journal	journal.html	show	article section in use
#login	accessible forms	accessibility.html#forms	apply	form rules

templates.html · 6 new · 3 incoming

section	anchor text	target	kind	why
#templates	the landing page, built	examples/landing.html	show	landing template
#templates	the object detail screen	examples/app-object.html	show	object template
#templates	the app home screen	examples/app-home.html	show	app home template
#templates	an article page	articles/form-follows-function.html	show	article template
#rules	the twelve column grid	layout.html#grid	apply	templates sit on it
#rules	one dominant block	articles/hierarchy.html	explain	assembling rule

examples.html · 5 new · 2 incoming

section	anchor text	target	kind	why
#how	the studio wheel	color.html#studio	apply	how they use color
#how	composition rules	layout.html#composition	apply	posters tilt
#how	the type scale	typography.html#scale	apply
#how	website sections	patterns.html#hero	apply	landing is built from them
#how	page templates	templates.html	apply

moodboard.html · 3 new · 4 incoming

section	anchor text	target	kind	why
#board	the workshops it draws on	bauhaus.html#workshops	origin	furniture, metal, print
#board	the aesthetic, pinned (story step 3)	story.html#s3	origin	context
#board	the image library	library.html#series	sibling	downloads of the same pictures

library.html · 6 new · 9 incoming

section	anchor text	target	kind	why
#series	how the series was made	story.html#s4	origin	step 4 of the story
#series	the series pinned on the board	moodboard.html#board	sibling	same images
#series	the triadic ballet poster	examples/poster-figure.html	show	schlemmer figure in use
#series	the staircase poster	examples/poster-stairs.html	show	staircase in use
#logo	mark and lockups	brand.html#lockups	apply	usage rules for the files
#icons	how each icon is built	icons.html#construction	apply	construction

journal.html · 0 new · 2 incoming

already well linked; keep as is.

glossary.html · 0 new · 8 incoming

already well linked; keep as is.

start.html · 6 new · 1 incoming

section	anchor text	target	kind	why
#naming	why tokens are named for roles	articles/design-tokens.html	explain	naming rationale
#files	the image library	library.html	apply	other downloads
#adding	the existing components	components.html	apply	check before adding
#adding	the rulebook	rules.html	apply	a new part must pass the rules
#changelog	the journal	journal.html	sibling	thinking behind changes
#use	how to credit and cite	credits.html#cite	sibling	use requires credit

credits.html · 2 new · 1 incoming

section	anchor text	target	kind	why
#what	how it was made, step by step	story.html#steps	origin
#what	the files	start.html#files	apply

sitemap.html · 0 new · 0 incoming

already well linked; keep as is.

articles/form-follows-function.html · 3 new · 4 incoming

section	anchor text	target	kind	why
body	principle 1	principles.html#p1	apply	up-link
body	reduction, as a test	articles/less-is-more-tested.html	sibling
body	the ideas of the school	bauhaus.html#ideas	origin

articles/three-forms.html · 4 new · 6 incoming

section	anchor text	target	kind	why
body	principle 3, geometry first	principles.html#p3	apply	up-link
body	the mark, taken apart	articles/mark-taken-apart.html	sibling
body	the primary forms drawing	library.html#series	show	01-primary-forms
body	elementary forms	glossary.html#g-e	define

articles/square-corner.html · 2 new · 3 incoming

section	anchor text	target	kind	why
body	honest materials	articles/honest-materials.html	sibling
body	the layout rules	rules.html#l	apply

articles/icon-in-four-moves.html · 3 new · 1 incoming

section	anchor text	target	kind	why
body	icon construction	icons.html#construction	apply	replace generic anchor
body	circle, square, triangle	articles/three-forms.html	sibling
body	icon grid	glossary.html#g-i	define

articles/less-is-more-tested.html · 3 new · 4 incoming

section	anchor text	target	kind	why
body	principle 2	principles.html#p2	apply	up-link
body	the usage ratio	color.html#ratio	apply
body	hierarchy and reduction	articles/hierarchy.html	sibling

articles/color-is-structure.html · 5 new · 4 incoming

section	anchor text	target	kind	why
body	itten and albers	bauhaus.html#people	origin
body	the preliminary course	articles/preliminary-course.html	sibling
body	the color studio screen	examples/app-studio.html	show
body	the farbkreis poster	examples/poster-wheel.html	show
body	vibration	glossary.html#g-v	define

articles/grid-and-diagonal.html · 4 new · 3 incoming

section	anchor text	target	kind	why
body	principle 6, asymmetric balance	principles.html#p6	apply	up-link
body	gestalt	articles/gestalt.html	sibling
body	die treppe poster	examples/poster-stairs.html	show	the diagonal
body	the swiss grid	articles/lineage.html	origin

articles/lowercase.html · 3 new · 5 incoming

section	anchor text	target	kind	why
body	dessau, 1925	bauhaus.html#cities	origin
body	hierarchy	articles/hierarchy.html	sibling	capitals as rank
body	the word rules	rules.html#w	apply

articles/honest-materials.html · 4 new · 5 incoming

section	anchor text	target	kind	why
body	principle 4	principles.html#p4	apply	up-link
body	the square corner	articles/square-corner.html	sibling
body	what moves and what does not	motion.html#rules	apply
body	the dessau building	bauhaus.html#cities	origin

articles/mark-taken-apart.html · 2 new · 2 incoming

section	anchor text	target	kind	why
body	logo files	library.html#logo	apply
body	optical correction	glossary.html#g-o	define

articles/design-tokens.html · 4 new · 7 incoming

section	anchor text	target	kind	why
body	principle 5, design for production	principles.html#p5	apply	up-link
body	motion tokens	motion.html#tokens	apply
body	type in css	typography.html#css	apply
body	the token, 2014	articles/lineage.html	origin

articles/hierarchy.html · 3 new · 6 incoming

section	anchor text	target	kind	why
body	composition rules	layout.html#composition	apply
body	gestalt	articles/gestalt.html	sibling
body	one red per screen	color.html#ratio	apply

articles/states.html · 3 new · 5 incoming

section	anchor text	target	kind	why
body	motion rules	motion.html#rules	apply
body	states on every control	controls.html#states	show
body	honest materials	articles/honest-materials.html	sibling	feedback as honesty

articles/preliminary-course.html · 4 new · 4 incoming

section	anchor text	target	kind	why
body	itten, moholy-nagy and albers	bauhaus.html#people	origin
body	today's exercise	examples/app-home.html	show	the daily exercise
body	principle 7	principles.html#p7	apply	up-link
body	vorkurs	glossary.html#g-v	define

articles/gestalt.html · 3 new · 4 incoming

section	anchor text	target	kind	why
body	hierarchy	articles/hierarchy.html	sibling
body	one color, one category	color.html#roles	apply
body	gestalt	glossary.html#g-g	define

articles/lineage.html · 3 new · 5 incoming

section	anchor text	target	kind	why
body	what came after the school	bauhaus.html#legacy	origin
body	design tokens	articles/design-tokens.html	sibling	2014 stop
body	the new typography and lowercase	articles/lowercase.html	sibling	1928 stop

examples/index.html · 1 new · 0 incoming

section	anchor text	target	kind	why
footer	how they use the system	examples.html#how	path	up

examples/landing.html · 2 new · 2 incoming

section	anchor text	target	kind	why
footer	website sections	patterns.html#hero	apply	how it was built
footer	the landing template	templates.html	apply

examples/app-home.html · 2 new · 3 incoming

section	anchor text	target	kind	why
footer	the preliminary course	articles/preliminary-course.html	origin	daily exercise
footer	in use	examples.html	path	up

examples/app-studio.html · 2 new · 2 incoming

section	anchor text	target	kind	why
footer	the studio wheel	color.html#studio	apply
footer	color is structure	articles/color-is-structure.html	explain

examples/app-object.html · 2 new · 3 incoming

section	anchor text	target	kind	why
footer	breuer at the school	bauhaus.html#people	origin
footer	circle, square, triangle	articles/three-forms.html	explain	the shapes inside

examples/poster-figure.html · 2 new · 2 incoming

section	anchor text	target	kind	why
footer	schlemmer and the triadic ballet	bauhaus.html#people	origin
footer	the image series	library.html#series	sibling

examples/poster-stairs.html · 2 new · 3 incoming

section	anchor text	target	kind	why
footer	the grid and the diagonal	articles/grid-and-diagonal.html	explain
footer	composition rules	layout.html#composition	apply

examples/poster-wheel.html · 2 new · 2 incoming

section	anchor text	target	kind	why
footer	color is structure	articles/color-is-structure.html	explain
footer	the studio wheel	color.html#studio	apply

boards/bauhaus-moodboard.html · 2 new · 0 incoming

section	anchor text	target	kind	why
footer	the current mood board	moodboard.html#earlier	path	up
footer	the school	bauhaus.html	origin

boards/bauhaus-moodboard-v2.html · 2 new · 0 incoming

section	anchor text	target	kind	why
footer	the current mood board	moodboard.html#earlier	path	up
footer	the image library	library.html#series	sibling

files

linking-plan.json holds the same plan as data, ready to be applied page by page. regenerate with node tools/linking-plan.mjs.