Start here

How a business’s brand is built

Six steps turn a business’s listing into a finished page that’s easy to read.

Follow a business

Six steps

Every business goes through the same steps, so every page looks consistent and reads well, even when a business gave us very little.

Business listingWhat the business told us

Business pageReady to show

Show logic

buildBrand(input, { design, viewer }): { settings, intake, assess, resolve, normalize, finish, emit }

inputThe listing, plus what the sampler read from its logo and photo (pending until read)

designThe fixed design, brandConfig.design

viewerLight or dark, card colors, text color, and readability goal

OrderCollect, Check, Fill gaps, Match color; the text tint comes from the primary color; then Make readable and Apply

Step	File	Function
Collect	intake.ts	brandIntake(input: BrandInput): BrandIntake
Check	assess.ts	assessBrand(business, intake): BrandAssessment
Fill gaps	resolve.ts (+ stock-photos.ts)	resolveBrand(business, intake, assessment): BrandResolution
Match color	normalize.ts	normalizeBrandPalette(colors, overrides, enabled): NormalizedBrand
Make readable	finish.ts	finishBrand(settings, brand, placeholder, intake, tintColor, name): BrandFinish
Apply	emit.ts	emitBrand(settings, finish): BrandTokens

Relationship functions

Function	From → to	Home
validBrandColors	raw declared colors → valid colors	intake.ts
candidatesFromPixels	pixels → color candidates	intake.ts
logoGroundFromPixels	pixels → logo background	intake.ts
ownBrandColors	listing → own usable colors	assess.ts
brandRoles	overrides + own colors → primary, secondary, accents	resolve.ts
suggestFromCandidates	candidates → suggested palette	resolve.ts
companionPalette	declared primary + candidates → palette	resolve.ts
monogram	name → two initials	resolve.ts
colorReading	hex → OKLCH lightness, chroma, hue, gamut share	normalize.ts
familyForHue	hue → family	normalize.ts
classifyBrandColor	color → family or neutral	normalize.ts
paletteColor	family → the color cards render it as	finish.ts
textTintColor	primary → text tint	finish.ts
finishLuminance	contrast goal + ink → card luminance	finish.ts
cardAssignments	brand → each card’s color, companion, and shade	finish.ts
inkChoice	surfaces → text color	finish.ts
actionPill	ink + surfaces → button base and floor	finish.ts
placeholderTone	sweep index → grayed tone at 6.4:1	finish.ts
markTile	brand → initials tile colors	finish.ts
logoTileGround	declared + sampled background + brand → logo tile	finish.ts
accentColors	brand → accent colors and inks	finish.ts
lightText	ink → whether the card’s glass dims	finish.ts
surfaceActionVariables	ink + surfaces → button variables	emit.ts
activityStyleVariables	settings → page variables	emit.ts

Where each piece lives

Level	Home
Values	modules/brand-system/config.ts
Color model	modules/brand-system/color.ts
Steps	modules/brand-system, one file each
Entry point	modules/brand-system/build.ts (buildBrand)
Adapters	common/schools-out/brand-sampling.ts, runtime/schools-out/useBrandSystem.ts
Components	elements/, components/, patterns/schools-out (read emit only)

Spec: modules/brand-system/README.md.

What each step decided for the business chosen above.