---
name: bauhaus-human-design
description: >-
  Design content-led, functional interfaces with Bauhaus lineage. Use when a
  frontend still feels generic after a taste pass or needs authored composition
  and usability evidence.
license: MIT
---

# Bauhaus Human Design

> Make the subject visible. Make the action obvious. Prove both.

This is Dr Non's contemporary interpretation, not a historical Bauhaus manual
or a guarantee that software can detect AI authorship. Its production trigger
was Dao × Palette: compliant colours still left tiny prose, passive empty space,
and a wandering reading path. A ban list did not resolve the composition.

## Before CSS

1. Read the project contract and inspect the actual surface. List earned content,
   interactions, routes, languages and exports that must survive. An audit request
   permits findings, not a rewrite. Change only what the user placed in scope.
2. Write the human task: **person / situation / intended outcome / likely obstacle**.
   Name the surface's primary job: operate, read, persuade, or experience. An
   exhibition and its help page can have different jobs without different brands.
3. Inventory real content. Choose the one thing that must be understood first.
   Do not design containers and fill them later. No fabricated claims, testimonials,
   screenshots, data, sources or author biography.
4. Sketch two materially different compositions using the same real content.
   Explain which task each serves. A font/colour swap is not a second composition.
   Prefer the clearer proposal; do not ask a nontechnical user to pick a library.

## Compose, don't costume

- **Craft and implementation are one job.** Build an inexpensive working prototype.
  Test real text, real images and states before investing in a finish.
- **Form carries relationships.** Prominence follows importance; proximity follows
  belonging. Use shared edges and deliberate scale. Space must separate, frame,
  orient or pace something. Do not fill a quiet region just to make it symmetrical.
- **Geometry is a grammar.** Assign circles, planes, numbers and divisions a real
  purpose. A chapter number can orient; repeated decorative numbering cannot.
- **Colour is a relationship, not a style sticker.** For an expressive surface,
  use a verified Wada chord and authored proportions; assign functional roles
  separately. For a cockpit, preserve its closed signal/identity system. Never
  recolour alerts to fit a mood. Measure the actual foreground/background pair.
- **One work, several reading distances.** The opening view, navigation, prose,
  error, export and README must share the same information logic. Not every region
  needs the same density or loudness.
- **Honest digital materials.** Use links for destinations, buttons for actions,
  selectable text and native scrolling. Label simulations and conversions. Do not
  draw a control that does nothing or hide a working one behind a clever symbol.
- **Economy is not emptiness.** Spend bytes, attention and motion where the task
  benefits. No library, animation or image added merely to suggest sophistication.

## Communicate

Write what the user needs to know or do, using the words they search for. Preserve
necessary context, uncertainty and meaning while removing ceremony. A reading
surface may invite sustained reading; do not turn every essay into fragments.

For every important control: destination/action, present state, result and recovery
must be understandable. An icon may lead only when a visible or readily available
label makes it understandable on touch as well as by assistive technology.

Test entry through a deep link, not only through the home page. Can a newcomer
identify the publisher/system, this page, its position, available actions and a
return path? Match destination headings to the link promise. Include every real
navigation depth in the prototype; do not polish the home page and improvise the
rest. A small reading room need not invent a search engine to pass this check.

For multilingual systems, keep equivalent tasks and facts, not identical line
breaks. Use appropriate script fonts and language attributes. Test the longest
real labels, failed font loads, long identifiers and browser text enlargement.
Ask a fluent reader to review nuance; do not report that review as performed when
only a model has inspected it.

## Two separate gates

**Mechanical floor:** semantics, keyboard/focus, contrast, reflow, complete states,
working links/exports, reduced motion, and preserved functionality. Use current
HTML and WCAG guidance; old browser hacks and edition-era legal claims are not
current requirements. House targets such as 44px touch controls are design policy,
not a claim that every WCAG AA control must be 44px.

**Authored quality:** inspect actual pixels and the flow. Answer:

1. **Content-swap test:** if another product's names replaced ours, what important
   arrangement or interaction would stop making sense? If nothing, identify the
   subject-specific decision missing. Familiar controls are not a failure.
2. **Relationship test:** at a glance, what is primary, what belongs together, and
   where does the eye go next? Check full-width and narrow compositions.
3. **Language test:** can the reader predict what clicking will do? Can they explain
   the result and recover from no match, failure or cancellation?
4. **Use test:** observe an uninstructed person perform the core task. Record actual
   hesitation and failure, not praise. Dr Non's Mama Rule is an early test with an
   older nontechnical person, not evidence that one person represents everyone.
5. **Conservation test:** compare before/after content and behaviour. Simplicity
   must not mean destroying the original product.

Fix observed task failures before cosmetic tells. Capture the result as
**passed / failed / unverified**, with evidence. A screenshot cannot prove a
workflow; automation cannot certify human taste. Do not calculate a fake
"human design percentage" or claim that a conventional font proves AI use.

## Deliver

Leave a short design receipt: human task; conserved features; chosen composition
and rejected alternative; source → adaptation → visible consequence; token roles;
test evidence; remaining human review. Use the project's existing journal and
design contract rather than making another mandatory documentation framework.

Use [the field guide](#field-guide--authored-functional-design) for source distinctions and
negative examples. The adjacent reading ledger states how much has actually been
read. Never call five extracted files five carefully read books.

## Influences and boundaries

Books: Magdalena Droste / Bauhaus-Archiv, *Bauhaus 1919–1933*; Steve Krug,
*Don't Make Me Think, Revisited*; Jeffrey Zeldman with Ethan Marcotte,
*Designing with Web Standards*, third edition; Joel Sklar, *Principles of Web
Design*, fifth edition; *The Responsive Web Design Handbook*, volume II, including
Noah Stokes, Steve Fisher, Dan Tello and Clarissa Peterson.

Repository ideas studied, not installed or copied wholesale:
[Impeccable](https://github.com/pbakaus/impeccable),
[UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill),
[Taste](https://github.com/leonxlnx/taste-skill),
[Hallmark](https://github.com/nutlope/hallmark), and
[Avoid AI Design](https://github.com/funboy322/avoid-ai-design).

Original procedure and writing: MIT. Source books, artworks, fonts and third-party
repositories keep their own rights. No endorsement by the authors or institutions.


---

# Field guide — authored functional design

## The synthesis

The useful question is not “does this look AI-made?” It is “which decisions were
made for this person, this content and this task?” A model can generate either
thoughtful or generic work. Humans can too. Review the artifact, not its presumed
author.

### Bauhaus without the costume

Droste's account describes an institution with competing teachers, workshop
methods and changing aims. Its early craft emphasis and later production work
are not interchangeable periods. Read geometry alongside making, material
experiments, teaching, theatre and collaboration. The printing/advertising
workshop joins design and execution; typographic position follows meaning rather
than compulsory symmetry (Italian edition, printed pp. 148–150).

Dr Non's tenets translate that into: prototypes before finish, content before
geometry, truthful materials, unified communication, economy and iterative
development. These are contemporary interface rules, not ten quotations from
Gropius. “Form follows function” is not attributed here as a Gropius quotation.
Minimalism is not a warrant to erase art, warmth or cultural specificity.

### Ten working commitments

The user supplied ten Bauhaus-inspired tenets as the design brief. The following
is our contemporary operational interpretation, not authentication of that list
as a historical manifesto or a claim that Bauhaus had one unchanging style.

| Commitment | Interface consequence | Evidence to ask for |
|---|---|---|
| Join art and craft | The person choosing the composition also checks the built result | A working prototype, not only a moodboard |
| Master the material | Understand semantic HTML, script type and browser behaviour | The task works without a mouse and when fonts fail |
| Let purpose shape form | Importance determines prominence; function determines the control | Explain why the arrangement serves this task |
| Make one coherent work | Page, navigation, errors, exports and README explain the same system | Follow a complete path, including its downloaded artifact |
| Be truthful about materials | Text remains text; links go somewhere; simulations are labelled | Select/copy/read the content; inspect what a control actually does |
| Reduce without flattening | Remove competing signals, not earned meaning or personality | A conservation comparison plus a clearer reading order |
| Use technology deliberately | Choose a native capability before adding a dependency | Show the smallest implementation that meets the task |
| Spend resources intentionally | Budget bytes, rendering work and human attention | Check the slow/failed-loading path; justify an expensive element |
| Make the action effective | Clear wording, current state, feedback and recovery | An uninstructed person completes and recovers from the task |
| Develop through evidence | Revise the observed failure rather than defend the first design | Record what changed after a test and what remains unverified |

Typography and colour are governed by the project's tokens and semantics. An
exhibition may use expressive colour fields; a control room's closed grammar
remains closed. None of these commitments permits a decorative “Bauhaus” skin.

### Standards as a foundation

Zeldman and Marcotte make accessible, semantic structure central, not a stripped
down second edition for disabled readers (ch. 14). A page should retain meaning
when its presentational layer changes. Current implementation authority is the
[HTML Living Standard](https://html.spec.whatwg.org/multipage/) and
[WCAG 2.2](https://www.w3.org/TR/WCAG22/), not the book's 2009 browser landscape.
Do not carry forward Flash advice, XHTML as a compulsory default, obsolete IE
workarounds, positive-tabindex recipes or old legal-compliance equivalences.

Our practical floor: logical headings and landmarks; native links and buttons;
keyboard access and visible, unobscured focus; useful alternatives; task-level
feedback; actual contrast; text enlargement and reflow. Test the entire process,
not just its landing screen. Automated checks cover only part of accessibility.

### Space that does work

Sklar distinguishes deliberate space that structures information from leftover
space (ch. 2, printed pp. 66–79). Shared edges communicate belonging; repeat the
navigation grammar across pages, not an identical layout everywhere. The book's
fixed-width examples and 960px system are historical options, not today's house
grid. Its discussion of seven-plus-or-minus-two is not a universal navigation
limit or a rule that procedures may contain only nine steps.

### Responsive character

The Handbook's contributors offer complementary checks:

- Stokes, pp. 84–86: repeated implementation patterns can flatten character.
  Improve the content-specific structure, not merely the colour tokens.
- Fisher, pp. 104–106: inventory and prioritise content around audience and purpose.
  Keep the core content available across devices. Do not design empty buckets.
- Tello, pp. 114–116: a phone should have an intentional experience, not a reduced
  desktop afterthought. Low existing mobile use does not prove low mobile interest.
- Peterson, pp. 188–191: measure, type size, leading and space work together. Test
  incremental widths and actual readability. Her Latin 45–75-character range is
  a starting point, not an equivalent Chinese/Thai measure or a compliance rule.

### Usability without flattening expression

Krug's chs. 1–3 explain unnecessary interpretive work, scanning, conventions and
visual relationships. Distinctiveness does not require reinventing Back, search
or scrolling. Ch. 9 separates observing a task from asking for an opinion. Small
qualitative rounds uncover useful failures; they do not statistically prove that
the design works for everyone. An older nontechnical participant belongs in our
early round, alongside other relevant users, not as a stereotype.

Ch. 6 treats navigation as an explanation of the system, not just a menu. Our
adaptation tests direct entry at every real depth: identity, location, next action,
return path and search where the collection requires it. Destination labels must
honour their links. Keep the principle, not a compulsory 2014 tab illustration.
Ch. 12 joins accessibility to usability, including text-only enlargement and
screen-reader reading paths. Its malformed illustrative `<alt="">` is not copied
as HTML: the correct attribute belongs on an image, e.g. `<img alt="" …>`.
Standards checks cannot repair an incomprehensible error message by themselves.

## SIC — take the mechanism, improve the obligation, credit the source

Pinned source versions and reading limits are in [reading-ledger.md](#reading-ledger--2026-10-02).

| Source | Mechanism retained | Our improvement / boundary |
|---|---|---|
| Impeccable | Product purpose separate from visual direction; surface-specific jobs; bounded critique | A decision must leave a visible consequence and task evidence. No installing binaries/hooks for research; no automatic tinting away a user-selected red/black pairing. |
| UI UX Pro Max | Search a specific UX outcome; prioritise accessibility; preserve verified results | A catalogue result is a candidate, not authorship. No category-to-theme shortcut, framework migration or palette substitution. Verify rules against the actual surface. |
| Taste | Design read before implementation; context overrides dials | Dials describe intent, not a quality score. No automatic increase in motion on a preservation task. Respect its landing/portfolio scope. |
| Hallmark | Structural variety; preserve existing implementation boundaries; explicit component states | Two content-based compositions, not rotation through a theme catalogue. Only real states; do not invent an error state for a static heading. Self-scores require evidence and cannot certify taste. |
| Avoid AI Design | First- and second-order defaults; code evidence separate from pixel judgment | Test interchangeable structure directly. A familiar pattern is not proof of AI. Preserve an intentionally chosen palette, mono label or number when it does a job. |

## Negative fixtures for the skill

1. **The violet hero becomes cream with orange, same three cards.** Reject the
   claimed structural redesign. Use actual content to identify a better grouping.
2. **A flood desk gains random Wada colours on alert badges.** Reject role bleed.
   Keep signal colours; expressive harmony is subordinate to operational meaning.
3. **Huge Bauhaus numerals surround 12px prose.** Reject hierarchy that defeats
   reading. Size the text for the reader, then compose its surroundings.
4. **A button labelled “Discover” downloads a file.** Name the actual action and
   format; expose completion/failure. Mystery is not personality.
5. **A calm archive uses a conventional index.** Do not condemn it as slop. The
   index does useful orientation work; judge source specificity elsewhere.
6. **A screenshot looks wonderful; exports are broken.** The mechanical gate fails.
   Keep design quality and functional correctness as separate obligations.
7. **An agent “tests with mum” by role-playing.** Record a simulated walkthrough,
   not a real human test. The Mama Rule remains unverified.

## Example receipt — Palette reading room

Person: a builder who can select colours but cannot explain why the interface
still feels generic. Outcome: understand one rule, inspect its source, and take
an actionable brief into an agent. Conservation: 348 plates, source dataset,
finder, JSON, wallpaper exports, keyboard operation. Composition: exhibition
remains a colour field; a separate readable document has named sections and
ordinary links. Rejected alternative: adding essay cards over every colour plate.
The room is Dr Non's interpretation, not redistributed source books.


---

# Reading ledger — 2026-10-02

Status: first synthesis, selected close reading. **Not a completed cover-to-cover
reading of the five books.** Extraction is not reading. Public writing below is
original paraphrase and interpretation; no supplied book files are redistributed.

## Verified files and coverage

| Supplied source | File verified | Material inspected closely | Outstanding |
|---|---|---|---|
| Responsive Web Design Handbook, volume II (2016) | 228 PDF pages; English text | Contents; Stokes pp. 84–86; Fisher pp. 104–106; Tello pp. 114–116; Peterson pp. 188–191 | Remaining essays, case studies and projects; visual inspection beyond the selected text |
| Zeldman with Marcotte, Designing with Web Standards, third edition (2010 copyright) | 433 PDF pages; English | Contents; ch. 14, printed pp. 295–320 (PDF 316–341), accessibility principles, myths and element guidance | Other chapters and case studies; current implementation examples must replace obsolete technology |
| Joel Sklar, Principles of Web Design, fifth edition | 674 PDF pages; English; title metadata confirms edition | Contents; ch. 2, printed pp. 61–79 (PDF 89–107), especially content balance, unified design, grid and active space | Rest of ch. 2 and other chapters, exercises and visual examples |
| Droste / Bauhaus-Archiv, Bauhaus 1919–1933 (2015) | 135 PDF pages containing paired printed pages; **Italian translation**, OCR with errors | Contents/copyright/preface; selected early craft discussion; printing/advertising workshop printed pp. 148–150; PDF 77 visually inspected (printed 148–149) | Full historical reading, other workshop/artwork spreads; noisy manifesto OCR is not a verified quotation |
| Steve Krug, Don't Make Me Think, Revisited (2014) | MOBI extracted locally; English title/copyright/contents verified | Chs. 1–3; ch. 6 navigation; ch. 9 observed tasks, qualitative rounds, sample session and prioritising fixes; ch. 12 accessibility. Bounded follow-up resolves earlier text-output truncation in chs. 2, 6 and 9 | Remaining chapters and illustrations. No complete-reading claim |

Page numbers above are printed book pages unless PDF is explicitly stated. The
MOBI has reflowable locations, so use chapter/section rather than invented pages.
The file name's year is not used to override the source's edition/copyright page.

## Repository snapshots

Read-only shallow clones; no installers or hooks executed. These are source
studies, not benchmark evaluations of generated designs. All checked 2026-10-02.

| Repository | Commit | Licence | Coverage |
|---|---|---|---|
| [Impeccable](https://github.com/pbakaus/impeccable) | `508d7e8955de3b3caf2d8676e85206723d41a887` | Apache-2.0 | README and core skill source; not every command, detector or binary |
| [UI UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) | `09170eec67eefd46a7ae85de61b40c194020f997` | MIT | README; core priority/query/design-system sections; not every dataset row or platform reference |
| [Taste](https://github.com/leonxlnx/taste-skill) | `ce26fc25c0e5e8cab638f883de62d9a86ee5e45b` | MIT | Core brief inference, dials and system map; not every companion skill/appendix |
| [Hallmark](https://github.com/nutlope/hallmark) | `13ac0ec7e148655948100b6396439e481361d690` | MIT | README/core introduction, conservation, states, preflight and theme dispatch; not all themes/references |
| [Avoid AI Design](https://github.com/funboy322/avoid-ai-design) | `2b7c71836b06cdf6b3d73265b56490c1b75ad5aa` | MIT | Complete main SKILL.md; not complete catalogue/scanner implementation |

## Current authority checked

[WHATWG HTML](https://html.spec.whatwg.org/multipage/) and
[W3C WCAG 2.2](https://www.w3.org/TR/WCAG22/) checked 2026-10-02. The older books
provide design reasoning, not current browser support or legal advice. This
first implementation does not claim full WCAG conformance or human usability
validation. Keep those distinct from automated tests.

## Completion rule

Advance a source's coverage only after the agent actually reads the bounded
passage or inspects the spread. Add source → reasoning → adaptation → test.
Record contrary examples and edition-era assumptions, not just confirming quotes.
Retain original book files privately; MIT covers our original work, not them.