why
Every downstream decision — color, type, motion, voice — is an argument, and this page is its premise. Without it, taste disputes have no referee.
Brett Owers
brands.potatocore.com
Full-stack developer in Fort Collins, Colorado. I build open-source Claude Code skills and run every brand on this page through them — kept iterations, kept failures, receipts included.
- 12
- brands live
- 24
- documents browsable
- 12
- iterations archived
- 689
- design tokens
the gallery
Every brand here was composed by a skill.
Tap a brand to read its guidelines document — the favorited head first, with every archived iteration browsable, including the ones kept specifically because they failed.
potatuhs1 documentPotatuhsThe umbrella brand — the real, in-production system the brand-guidelines skill was extracted from.potatuhs.com ↗
tomatuhs10 documentsTomatuhsThe proving ground. Nine archived iterations — including the intentionally-kept failures — show the skill maturing.
idk1 documentidkwhatimdoingThe naive-session run — a brand document produced with zero hand-holding, repaired live when it failed.idk.potatocore.com ↗
hotpotatogames2 documentsHot Potato GamesThe games vertical — lasting life change, through play. Explore The Cell playable, Sod Tori next, Tater Dash driving to iOS, and the annual tournament on the horizon.hotpotatogames.com ↗
explore-the-cell2 documentsExplore The CellA game of games — 125 mini-games across 22 scales of reality. Backfill run composed from the app’s own theme code; all sections proposed.explore-the-cell.web.app ↗
tater-dash2 documentsTater DashPotatuhs’ first fighting game — the flappy potato that grew fists. Reconciled backwards to the shipping app (canon): the full 32-fighter roster, four $0.99 packs, and a logged current-state snapshot before the home redesign.
sod-tori1 documentSod ToriThe Torus Principle — a derivation of chess anyone can pick up. Potuhs and Tatos on a dusk field under the shimmer horizon, and the numeral series i → x: one mechanic per release, the full engine waiting at the end. Now a developer-ready handoff spec.
potatoliterature1 documentPotato LiteratureThe deepest lore — Odie O’Dool and the three books. The fall vertical’s first brand document, extracted largely from the site’s own tokens.
start-note1 documentStart NoteVoice-session console — v1’s earthy note app reborn as a black-until-signal flight recorder. The v1→v2 conflict ships as a live heritage toggle.
what-it-is1 documentWhat It IsDeadpan literalism on the void — white-drawn borders, the gold trio, and six escalating tiers of Nothing.
01Brand Overview
Every rule downstream of this page is an argument, and the overview is its premise. A brand book that opens with fonts is a style file; one that opens with who the brand serves and what it refuses to be can settle disputes.
What to decide here: the 3–6 personality adjectives — each with a sentence of meaning, because an undefined adjective is decoration — and the construction principles the visual world must obey.
tip 01
Define every adjective
An adjective without a sentence of meaning is decoration. "Bold" that nobody defined will be argued about forever; "bold — one oversized element per view" can be enforced.
tip 02
Root it in fear and passion
Name what your ideal customer fears and what they love to do. Needs and wants follow from those two; a brand aimed at a fear/passion pair knows what every page is for.
tip 03
Name the audience concretely
"Everyone" is nobody. One named person you can picture — their job, their worry, their ambition — beats a demographic range every time.
▶01 · Brand Overview — record 7–30s
02Logo & Variants
A logo system is less about the mark and more about its survival: the backgrounds it must sit on, the smallest size at which it still reads, the clear space that keeps neighbors from crowding it. Golden-ratio construction grids are common not because the ratio is magic but because a stated geometry makes every future redraw consistent.
The interesting question is what the mark encodes. The strongest icons carry the message in their negative space or construction — an arrow hidden between letters outlives any gradient trend.
No logo yet? Scaffold the rules anyway — variants, clear space, minimum sizes — as loud placeholders. Never let a description invent artwork.
why
Recognition compounds with repetition, and repetition only compounds when every appearance is the same. The logo system is the contract that keeps a thousand future placements consistent.
tip 01
Spec survival, not beauty
The mark will live on busy photos, tiny favicons, and dark footers. Clear space, minimum sizes, and approved backgrounds decide whether it survives out there.
tip 02
Case study — the slogan
Nike's "Just Do It" is an imperative — it puts the reader mid-action, so the brand feels like momentum. De Beers' "A Diamond Is Forever" welds the product to permanence and quietly forbids resale. The grammar is the message.
see the real thing ↗tip 03
Case study — the logo
FedEx hides an arrow in the negative space between the E and the x — speed and precision delivered subliminally, felt before it is seen. Amazon's a-to-z smile encodes "everything" and friendliness in one stroke. The strongest marks carry a second read.
see the real thing ↗tip 04
Case study — the icon
The bite in the Apple mark exists so the fruit reads as an apple, not a cherry, at any size — distinctiveness engineered for scale. The Nike swoosh is motion with everything else removed. An icon endures when it encodes one idea and refuses a second.
see the real thing ↗03Color
Color is the most studied decision in the book. Hue carries measured associations, but saturation and darkness do more positioning work than hue does: darker, desaturated palettes read heritage and authority; bright, saturated ones read energy and youth.
Decide from a ramp, not a swatch: each primary gets named tint steps so hover states and backgrounds are picked, never eyeballed. And check contrast ratios honestly — WCAG AA is the floor, and a pairing table that records failures is worth more than one that hides them.
why
Color is processed before a single word is read — it positions the brand in milliseconds. It is also the most studied decision in the book, so it can be made with evidence instead of taste.
tip 01
Hues in standard form
Red: urgency, appetite, energy. Orange: friendly, energetic, value. Yellow: optimism — and caution. Green: growth, health, permission. Blue: trust, calm, competence. Purple: luxury, creativity. Black: authority. White: clarity and space.
tip 02
Brightness moves the psyche
The same hue at different brightness is a different message. Navy reads institutional trust; sky blue reads openness and ease. Darker carries weight, heritage, seriousness; brighter carries youth, energy, approachability.
tip 03
Contrast sets the volume
High contrast is loud: urgent, decisive, attention-seizing. Low contrast is quiet: calm, premium, contemplative. Contrast steers the eye before content does — and WCAG AA is the floor, checked honestly, failures recorded.
tip 04
Decide from a ramp
Each primary gets named tint steps — hover states and backgrounds are picked from the ramp, never eyeballed. A palette without a ramp becomes fifty slightly-different oranges within a year.
▶03 · Color — record 7–30s
04Typography
Type positions a brand faster than color. A high-contrast serif borrows fashion-house authority; a geometric sans borrows product neutrality; a mono voice says the brand lives near code. The pairing is the decision — the hierarchy is just its arithmetic.
Spec the hierarchy as tokens (sizes, weights, line heights), confirm the license, and write the misuse list. Faux bold and stretched type are how brand books die in the field.
why
Type is the voice made visible — readers judge who is speaking before they read what is said. A serif, a sans, and a mono are three different people saying the same sentence.
tip 01
Serif
The strokes remember the pen — serifs read heritage, authority, editorial trust. Newspapers, law firms, and luxury houses lean serif because "established" is the feeling they sell.
tip 02
Sans serif
Removing the hand removes the history — sans reads modern, neutral, engineered. It is the type of products and interfaces because it feels honest and out of the way.
tip 03
Display
Personality in concentrate: a display face carries the brand's whole attitude in one headline. At body sizes it exhausts the reader — dose it, never set paragraphs in it.
tip 04
Ornamental & script
Craft, celebration, the human hand — script signals occasion and intimacy. One-word doses on invitations and labels; a paragraph of it reads as noise and costs credibility.
tip 05
Weight
Heavier is louder: bold reads confident and urgent, light reads refined and calm. Hierarchy is mostly weight arithmetic — the reader feels who outranks whom before reading a word.
tip 06
Line spacing
Tight leading reads dense, urgent, technical; open leading reads calm, premium, unhurried. Body text wants ~1.5 to breathe — crowd it and the reader feels rushed without knowing why.
tip 07
Kerning & tracking
Uppercase needs extra tracking to feel institutional and composed; display type tightens to feel modern and confident. Bad kerning is invisible to name and instant to feel — trust quietly evaporates.
▶04 · Typography — record 7–30s
05Iconography
The choice is rarely custom-versus-library; it is whether the configuration is yours. A stroke weight, a grid size, and a corner language applied consistently make a stock library unmistakably branded.
why
Icons are the smallest repeated unit of the brand — they appear more times than the logo ever will. Each set carries its own psychology, and consistency makes it compound.
tip 01
Outline vs. filled
Outline icons read light, technical, precise — the engineer's brand. Filled icons read bold, immediate, friendly — the consumer's brand. Same glyph, opposite temperament.
tip 02
Geometric vs. organic
A strict-grid set feels engineered and trustworthy — machine-made promises. A hand-drawn set with wobble feels human, crafted, warm. The reader decides which company they are dealing with from the corners of a search icon.
tip 03
Corner language — bouba & kiki
Rounded terminals read approachable and safe; sharp terminals read precise, serious, performance. This is pre-verbal: in the bouba/kiki effect, nearly everyone calls the round blob "bouba" and the spiky shape "kiki" — shape carries meaning before language does. The radius of an icon's corners quietly restates the brand's posture.
see the real thing ↗tip 04
Configuration over creation
One library, one stroke weight, one grid, one corner language. A stock set configured consistently is more branded than custom icons drawn inconsistently.
▶05 · Iconography — record 7–30s
06Photography
Art direction is a contract with photographers you have not met. Qualities ("candid, warm, high-contrast") only work when each carries a sentence of meaning and a do/don't pair a stranger could act on.
why
Imagery is believed before copy is read — people trust what they see over what they are told. Art direction decides what the brand is caught doing in every photograph.
tip 01
Leading lines
The eye follows a line involuntarily — roads, rails, arms, shadows all steer attention. Lines converging on the subject read as inevitability; lines exiting the frame read as escape. Where the lines point is what the viewer ends up feeling about.
tip 02
Rule of thirds
An off-center subject reads alive, candid, in-motion — the empty two-thirds implies a world beyond the frame. Dead-center reads formal, confrontational, iconic. Both are psychological choices; only the unchosen default is a mistake.
tip 03
Aspect ratio
Wide frames read cinematic — the environment matters, the subject belongs to a world. Square reads object and product — context removed, the thing itself. Tall reads intimate and personal — phone-native, held at arm's length. The ratio sets the relationship before the content loads.
▶06 · Photography — record 7–30s
07Mascots & Characters
If a brand has characters, the section is a consistency contract: the roster, each character's one-line role, and the art direction that keeps them recognizable across artists who will never meet. Usage boundaries matter as much as looks — marketing yes, legal pages no.
If a brand has no characters, saying so explicitly is part of the system. An absent section is a bug; a declared absence is a rule.
why
Characters carry emotion a logo cannot — audiences bond with faces, not marks. That power needs a consistency contract, because a beloved character drawn wrong reads as a counterfeit.
tip 01
Roster with roles
Every character gets a one-line job. A cast without roles becomes clutter; a cast with roles becomes a storytelling system.
tip 02
Art direction across artists
Proportions, line language, and pose energy are the contract that keeps a character recognizable across artists who will never meet each other.
tip 03
A declared absence is a rule
No characters is a valid brand position — stated explicitly, with the rule for what happens if one ever appears. An absent section is a bug; a declared absence is a decision.
▶07 · Mascots & Characters — record 7–30s
08UI Components
The bridge from book to product. Buttons, cards, and inputs rendered live from the tokens — real hover states, visible focus rings — prove the system works before a product team bets on it.
why
Components are where the brand is touched instead of seen — every click lands on one. This is the bridge from brand book to product, and it either holds weight or it does not.
tip 01
States are the brand under pressure
Hover, focus, active, disabled — a button is four states pretending to be one element. The brand that specs only the resting state has specced a quarter of the component.
tip 02
Web vs. mobile
Hover does not exist on a phone — the state that carries desktop affordance vanishes, and touch targets need ~44px of forgiveness. A component that only works under a cursor is half a component.
tip 03
Screen vs. print
Print has no states, no glow, and different blacks — a button becomes a shape with a label, and dark surfaces become ink costs. If the book exports to PDF, every component needs a motionless, printable self.
tip 04
Cloth, packaging, the physical world
On a shirt or a box there are no tokens — color shifts with fabric and light, small type fills in, thin strokes disappear at stitch resolution. Physical media is the stress test: what survives embroidery is the true core of the mark.
▶08 · UI Components — record 7–30s
09Shadows & Borders
Elevation is a language, and its accent is a brand decision: soft ambient shadows whisper product polish; hard offset shadows shout print heritage; no shadows at all says the surfaces themselves do the work. Whichever it is, name the levels and define exact values.
The radius scale is the quiet personality setting — sharp corners, soft corners, and pills are three different brands wearing the same colors.
why
Elevation is read subconsciously — shadows and borders tell the eye what floats, what contains, and what can be pressed, before any label is read.
tip 01
Shadow style is a brand accent
Soft ambient shadows whisper product polish; hard offset shadows shout print heritage; no shadows says the surfaces do the work. All three are valid — pick one and name the levels.
tip 02
Pitfall — the accent strip
The colored top or left stripe on a card is the signature of unattended AI generation — differentiation without meaning. If a card needs emphasis, use type hierarchy, spacing, or surface tone; a racing stripe just says nobody was watching.
tip 03
Pitfall — shadow soup
When everything floats, nothing does — drop shadows and glows applied as decoration erase the very hierarchy they exist to create. Elevation is information: reserve it for what is actually above the page.
tip 04
Pitfall — double signals
A border and a shadow doing the same containment job, three radii on one view, 1px lines that become 2px nobody remembers why — the eye reads inconsistency as cheapness long before the mind names it. One system, applied everywhere.
▶09 · Shadows & Borders — record 7–30s
10Motion
Motion is personality with a timestamp: snappy, bouncy, or calm resolves into 2–3 named easing curves, a duration scale, and the handful of patterns the brand actually uses. A motion page must move — a table of bezier values proves nothing.
The accessibility stance is part of the spec: prefers-reduced-motion is respected, and the section says how. And the brand's documents must survive with no motion at all — a page that needs JavaScript to become visible is a failure this gallery has already archived once.
why
Motion is personality with a timestamp — the same element arriving snappy, bouncy, or calm is three different brands. It also communicates causality: what moved, because of what.
tip 01
The types, and what they say
Fade says calm arrival. Slide and rise say direction and cause — this came from there. Scale says importance — it grew to meet you. Spring and bounce say play. A loop says the brand is alive right now. Pick the verbs that match the personality.
tip 02
Speed is a statement
Fast reads responsive and eager; slow reads premium and deliberate — until it reads broken. The rate of change matters as much as the duration: a sharp ease-out feels decisive, a long symmetric ease feels ceremonial. The customer feels the curve, not the milliseconds.
tip 03
Consistency is the language
Two or three named easings and a duration scale, used everywhere — motion becomes a language only when the same words repeat. A page where every element invents its own timing reads as a crowd, not a brand.
tip 04
Get creative — motion can be lore
A fade-in is generic; a Tomatuhs element that ripens in — small green dot, swelling mid-green, landing red — tells the brand's story in 700 milliseconds. The best brand motion is a behavior only that brand could have.
tip 05
Fail open, respect reduced motion
A page that needs JavaScript to become visible is a blank page waiting to happen — reveals opt in, never out. And prefers-reduced-motion is part of the spec: transforms stop, opacity stays, loops end.
▶10 · Motion — record 7–30s
11Layout
Spacing is the invisible brand. A stated scale (a 4px or 8px base and its steps) and a grid with a declared attitude toward asymmetry keep a hundred future pages feeling like one hand made them.
why
Space is hierarchy — what is grouped, what is separated, what matters. A stated spacing scale keeps a hundred future pages feeling like one hand made them.
tip 01
The grid
Twelve columns is the industry default because twelve divides by 2, 3, 4, and 6 — every common split falls on a line. A grid the reader never notices reads as competence; a broken one reads as chaos even to people who cannot name why.
tip 02
Columns & the measure
Editorial runs multi-column at 60–70 characters per line — the range where reading feels effortless. Products run a single column with a rail. Wider than the measure and the reader loses the line; the page feels tiring before it feels wrong.
tip 03
Lists vs. cards
Lists invite comparison and decisions — finance, docs, and dashboards run on rows. Cards invite grazing and discovery — commerce, media, and portfolios run on grids. Choosing one is choosing the mental mode the visitor enters.
tip 04
Convention by industry
E-commerce means card grids, SaaS means a 12-column shell with a fixed rail, editorial means one calm measure, luxury means asymmetry and emptiness. Convention is usability — deviate on purpose, as a statement, never by accident.
tip 05
Whitespace is emphasis
The cheapest way to make something matter is to give it room. A layout where everything is close together has decided that nothing is important.
▶11 · Layout — record 7–30s
12Voice & Tone
Voice is a character, not a vibe: written as one ("smooth, brief, never winks"), it can be performed consistently by anyone. The vocabulary lists — words always in, words never out — are the enforcement mechanism.
why
Voice is the brand in text — most customers will read it long before they see a logo at full size. Written as a character, it can be performed consistently by anyone.
tip 01
Write the voice as a character
"Smooth, brief, never winks" can be performed by any writer on any surface. A vibe cannot. The character description is the spec.
tip 02
How the words are put together
Short sentences read confident. Long ones read considered — until they read lost. Leading with the verdict sounds authoritative; burying it sounds evasive. Passive voice hides the actor, and readers feel the hiding as distrust.
tip 03
Tone shifts, voice does not
Marketing, error messages, and legal read differently — but the same person is speaking. Map the tone per context; keep the character constant.
tip 04
Vocabulary is the enforcement
Words always in, words never out — the lists are what makes voice checkable. Include the banned hype words; they are the first ones a deadline reaches for.
tip 05
Thorough, but bite-size
Depth and brevity are not opposites — they are a discipline. Complete thoughts delivered in small pieces respect the reader's time and earn the next piece. These cards are the demo.
▶12 · Voice & Tone — record 7–30s
13AI Policy
New to the rubric, and soon unavoidable: brands will be AI-first, AI-native, AI-assisted, or deliberately AI-free, and audiences read an absent stance as evasion. The section declares the position, the disclosure rule, where AI may and may not touch the work, and what contractors are permitted.
Transparency is the point. Whichever stance a brand takes, the screenshot-able page is the one that states it plainly.
why
Audiences now read the absence of an AI stance as evasion. Whatever the position — AI-first, AI-assisted, AI-free — the brand that states it plainly is the one that gets trusted.
tip 01
Name the stance in one term
One word the brand will stand behind, plus one sentence of why. Hedged stances read as hidden ones — this is the page readers screenshot.
tip 02
Archetypes you can claim up front
Autonomous AI: the system acts end-to-end, and the brand says so. QA AI: AI produces, a human gate approves everything that ships. AI Limited: AI works internally, and nothing AI-authored ever faces the public. Each is a claimable position, not a confession.
tip 03
Same machinery, different claim
"We never use AI in public-facing communication" and "internally, AI dictates our tasks — but everything sent to the public is 100% human-authored, traceable, and accountable" can describe the same company. The policy is choosing which sentence you can stand behind, then structuring the work so it stays true.
tip 04
Disclosure is the default
When AI contributes to published work, say so, and say how it is labeled. Disclosure costs a line; discovered non-disclosure costs the brand.
tip 05
Draw the human line
Name where AI is welcome, where it is forbidden, and where a human must review before anything ships. Accountability stays with a person, always.
▶13 · AI Policy — record 7–30s
14Sub-brands & Ecosystem
Multi-brand organizations need an architecture before they need assets: what is the parent, what is endorsed, what merely coexists. The coding system — a color per division, a mark variant, a naming pattern — is how a stranger tells siblings apart without a org chart.
The hard part is the boundary: the shared core no sub-brand may deviate from (usually the tokens and the logo rules), and the deviations that are allowed, each recorded explicitly.
why
Architecture decides whether brands compound or compete. Without a declared parent-and-siblings structure, every new property dilutes the ones before it.
tip 01
When to split, when to stay
Split when the ideal customer changes — a new fear/passion pair means new traffic sources, new conversion logic, new product promises, and one brand cannot aim at two people at once. Same customer, same brand: a venture that serves the existing ICP belongs in the existing ecosystem, even if it stretches it.
tip 02
Traffic · Conversion · Product
A venture is viable when it holds all three — where the customer comes from, why they convert, what they buy — aimed at one consistent ICP. The brand is the harness that keeps the three pointed at the same person; harnessing them under a brand is wise even when that brand branches slightly from its parent.
tip 03
Code the siblings
A color per division, a mark variant, a naming pattern — the coding system is how a stranger tells siblings apart without reading an org chart.
tip 04
Harden the shared core
Name what no sub-brand may deviate from — usually the tokens and logo rules — and record every allowed deviation explicitly. Undocumented deviation is drift.
tip 05
Channels are depths, not divisions
The same brand can meet its customer at several depths — discover, learn, build alongside. Slice channels by the customer's journey, not by internal structure.
▶14 · Sub-brands & Ecosystem — record 7–30s
15Asset Naming & Governance
The operational tail keeps the system alive: a file-naming convention with worked examples, delivered formats per asset type, and — most importantly — where the truth lives. The governance statement names the single source and the direction changes propagate.
A brand book that can silently drift from what teams actually ship will eventually lie. The cure is structural: consumers read the tokens, and the tokens are generated from the spec.
why
A brand system nobody can maintain dies within a year. Governance — naming, formats, and where the truth lives — is what keeps the book honest after everyone stops looking at it.
tip 01
Pitfall — the Downloads graveyard
Generated assets land wherever the tool drops them — Downloads, Dropbox, a chat export, five places at once. The asset exists but the system does not know it, so it gets regenerated, and now the brand owns three slightly different versions of the same image.
tip 02
Automate the filing
A watcher that detects new files and moves them into the convention turns organization from an act of will into a process. The naming pattern becomes real the moment a script enforces it — humans drop files anywhere, the automation puts them where they live.
tip 03
Human filing vs. AI filing
Humans want shallow, browsable, memorable folders. AIs want predictable, greppable paths where the name carries the metadata — for an agent, the naming convention IS the index. A system readable by both is flat, convention-dense, and boring on purpose.
tip 04
One naming pattern, worked examples
A stated pattern like {brand}-{category}-{label}-{variant} with real examples beats a folder of final_final_v3. Findability is a brand asset.
tip 05
Name the single source of truth
The spec outranks the site; the tokens outrank the components. When two artifacts disagree, governance says which one is lying.
tip 06
Receipts over claims
Numbers that are computed from the artifacts cannot drift from reality. A hand-typed stat can lie the day after it is written; a generated one is re-proven every build.
▶15 · Asset Naming & Governance — record 7–30s