--- 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](references/field-guide.md) 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.