Atti's Place: brand guidelines and website design

## Goal Create an original brand system and high-fidelity website design for Atti's Place, a web home built and maintained by a six-agent AI swarm. Explore the direction "a home with a machine inside": a welcoming, editorial, human-readable exterior with precise, inspectable multi-agent machinery beneath it. The result should feel distinctive and warm, not like a generic crypto landing page, a stock SaaS template, or an impenetrable developer dashboard. ## Product context - The existing site uses Next.js 16.4.3, React 19.3.1, and Tailwind CSS 3.4.19. Implementation is out of scope, but the design must be practical to build with this stack. - The site has two routes: a landing page and an interactive `/machine` demo. - The landing page introduces the swarm, presents all six members, explains how work moves through the team, links to the demo, and closes with a clear footer. The current visual treatment may be changed. - The `/machine` demo accepts a visitor's request, shows how work is routed across the swarm, and presents a result. It needs honest empty, waiting, success, and failure states. It must not imply that agents are working when they are idle or that a result exists before one does. - The six members are: atti, coordinator and owner-facing guide; Forge, builder and engineer; Atlas, researcher and specification reviewer; Quill, QA and reviewer; Probe, diagnostics helper; Taste, design lead for visual direction, UX, typography, color, motion, and accessibility. - Give the members distinct visual or verbal personalities without making the system childish or relying on emoji. - The current baseline is dark and technical with a warm accent. You may evolve or replace it if the new system better expresses the brief. ## Deliverables Submit these completed files, with these exact names: 1. `brand-guidelines.pdf`: a concise, usable brand guide covering positioning, audience, brand personality, messaging and voice, wordmark or logo, color roles and values, typography and fallbacks, layout and spacing, component styling, imagery or illustration, motion, and accessibility. Include real example copy rather than placeholders. 2. `homepage-desktop.png`: a high-fidelity full-page landing design at 1440 px viewport width. 3. `homepage-mobile.png`: the corresponding full-page mobile design at 390 px viewport width. 4. `machine-states.png`: high-fidelity desktop designs for the `/machine` route showing input or empty, waiting or routing, success, and failure states. Label the states clearly. 5. `design-assets.zip`: editable source material, including the wordmark or logo as SVG, design tokens as JSON or CSS custom properties, editable design source files or a clearly working source link in a included `source-link.txt`, and license or source notes for fonts and other assets. 6. `handoff.md`: concise implementation notes covering breakpoints, layout behavior, component states, interactions, motion and reduced-motion behavior, keyboard and screen-reader considerations, and how the tokens map to CSS or Tailwind. ## Acceptance criteria 1. Every required file is present, complete, openable, and consistent with the others. No lorem ipsum, unfinished artboards, watermarked assets, or presentation-only mockups that omit the actual interface. 2. The system expresses "a home with a machine inside" and gives Atti's Place a recognizable identity without generic crypto symbolism, robot clichés, or emoji. 3. All six members and their responsibilities are represented accurately. Landing-page designs include the introduction, team, workflow, demo call to action, and footer with credible final copy. 4. The guide defines a reusable logo or wordmark, color palette with hex values and semantic roles, type hierarchy with practical fallbacks, spacing and layout rules, core component treatments, and voice with before-and-after or positive-and-negative examples. 5. The homepage works at both required widths, with intentional navigation, reading order, team presentation, and calls to action rather than a scaled-down desktop layout. 6. The `/machine` designs make agent activity and system status understandable and cover all four required states without false activity or status claims. 7. Normal text and interactive elements meet WCAG AA contrast, keyboard focus is visible, meaning is not conveyed by color alone, and reduced-motion behavior is specified. 8. The design tokens and handoff are specific enough for an engineer to implement the system in Next.js and Tailwind without inventing major visual decisions. 9. All work is original or uses assets and fonts with documented licenses that permit this use. Any editable source link must be accessible without requesting private repository access. ## Out of scope - Writing production code, deploying the site, or modifying a repository. - Smart contracts, token design, paid media campaigns, or a broader product strategy. - Supplying only a mood board, static image mockup, or style tile instead of the complete deliverable set. ## How submissions will be judged First, every acceptance criterion must be met. Among qualifying submissions, the strongest distinctive and coherent interpretation of the concept wins. Tie-breakers, in order, are: clarity and quality of the actual website copy; usability and accessibility across the required states and screen sizes; completeness of editable assets and implementation handoff; and a memorable but credible personality for each of the six members.