{"node":{"id":"7179765c-95bd-468d-abe7-9cc4daa6bed2","handle":"7179","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Drawer 1: Direction","aiSummary":null,"content":"**Open it when:** no look exists yet, or the look you have isn't working and you need to decide again. This drawer is about what the site is for, who it's for, the tone, and the one thing people will remember.\n\n## What we know\n\n**Who it's for comes first**\n- Before coding, work out the purpose, the audience, the technical limits, and the one thing someone will remember. [frontend-design]\n- Settle who it's for before you pick a look. Say where it sits (between budget and luxury, say), how it should feel, and how it must never feel. [our build]\n- The look is a decision about who the site is for. The AI can't make it for you. [our build]\n- A dark, luxurious look was dropped once. It would have scared off the mid-range buyers the site was for. [our build]\n- For a new look, first name four things in one sentence each: what the product uniquely does, the audience's real scene, its cultural home, and what this first page must prove. [impeccable]\n- Before building, ask two or three questions that change the work. Ask what success looks like, what must stay untouched, and what would make a polished result feel wrong. Never ask for CSS values. [impeccable]\n\n**Pick the mode from the page, not the product**\n- impeccable sorts pages into four modes by what the visitor needs to succeed. [impeccable]\n  - Persuade (landing, marketing, pricing): the visitor decides and acts.\n  - Operate (app screens, dashboards, settings): scanning, consistency and the real task come before expression.\n  - Read (docs, articles, help): structure for understanding first.\n  - Experience (portfolios, galleries): the work leads and the interface steps back.\n- A tool's landing page is Persuade. A fashion house's docs are Read. [impeccable]\n- Scale ambition to the mode. Persuade and Experience get bold work. On Operate and Read, ambition shows as precision and restraint. [impeccable]\n\n**Commit to one direction**\n- Pick one clear direction and carry it out precisely. Minimal and maximal both work. What matters is intent, not intensity. [frontend-design]\n- When torn between refined and committed, commit. [impeccable]\n- frontend-design offers a menu of tones: brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft pastel, industrial. [frontend-design]\n- The brief wins. Honour fonts, palettes and eras the brief pins, even when they trip a warning. Steering a clear brief toward your own taste is failure. [impeccable]\n- \"No hype\" in a brief rules out hype, not energy. [impeccable]\n- A pinned world pins the whole world, not its softest version. [impeccable]\n- A missing DESIGN.md doesn't make a project new. A look already in the code counts. [impeccable]\n- Anything added inside an existing page inherits that page. It is never a new identity exercise. [impeccable]\n\n**The one thing people remember**\n- Ask: what's the one thing someone will remember? [frontend-design]\n- The first screen is a thesis, not a header. Test it: if someone left after one screen, what would they describe an hour later? If the answer is a mood, the idea hasn't committed. [impeccable]\n- Prove, don't claim. Show the subject doing its job, with details a competitor couldn't copy and paste. [impeccable]\n\n**Stay out of the rut**\n- Name the page your category always ships, and its predictable opposite. Both are the rut. Keep both off the list. [impeccable]\n- If someone could guess your look from the category alone, rework it. [impeccable]\n- impeccable names four common AI looks. If the brief leaves the look free and you land in one, rework it. [impeccable]\n  - cream, serif headlines and terracotta;\n  - near-black with one neon accent and glow;\n  - editorial hairlines, italic serif and tracked mono labels;\n  - flat ink, black boxes and hard offset shadows.\n- impeccable says AI-made interfaces cluster around a few looks whatever the subject (asserted, no evidence shown). We saw it: three of four \"different\" looks once picked green on their own. [impeccable; our build]\n- Never converge on the same choices across designs. Vary light and dark, fonts and looks. [frontend-design]\n\n**Explore several looks, then choose**\n- Ask for several looks that are really different. Give each one a different layout to follow: magazine, catalogue, full-screen photos, bright retail. Name the colours too. Left to choose, agents drift together. [our build]\n- Make three image mock-ups (\"comps\"), not one. One invites rubber-stamping. Make the second and third from the direction in words, not from the first image, or all three collapse into one. [impeccable]\n- Use impeccable's `concept-seed`: a dice roll assigns the direction, which stops every run landing on the category default. [impeccable]\n- Always offer one quiet exit: the category standard, played straight. Never recommend it. [impeccable]\n- Show the options as a preview hub. Each version gets its own address, a date, a short list of what changed, and a thumbnail. Use the same words in every look, so the choice is made by eye. [our build]\n- Narrow down deliberately. Going broad helps only until it's time to pick one or two and go deep. [our build]\n\n**Light or dark**\n- impeccable: light or dark is never a default. Write one sentence about the physical scene (who, where, under what light) and let it decide. [impeccable]\n- awesome-design-md: some brands are dark only and ban a light mode (Raycast, xAI, Linear, The Verge). [awesome-design-md]\n- In our build, the audience decided it: the dark look was dropped because of who the site was for. [our build]\n\n**Borrowing from known brands**\n- awesome-design-md: copy one brand's whole DESIGN.md into your project and tell the agent to use it. [awesome-design-md]\n- Our build: borrow by fit, not fame. Pick the two or three brands whose problem is like yours and take one idea from each. [our build]\n- These clash. Our build took one idea from each of several brands, not one brand's whole file.\n\n**Truth**\n- Never invent prices, customers, benchmarks or features. Sample content is fine at full quality if it's labelled as sample. [impeccable]\n- Refusing a bold direction because its sample data doesn't exist yet is timidity, not honesty. [impeccable]\n\n## Tools in this drawer\n- **Plan the brief before code: `/impeccable shape <what you're building>`.** Pick it when the job or the audience is still fuzzy. It asks one round of questions, writes a short brief, and waits for your yes before any code.\n- **Tool: borrow from a brand (awesome-design-md).** Pick it when a known brand has solved a problem like yours and you want to see how.\n- **Tool: DESIGN.md, the look written down.** Pick it once the direction is chosen, so it doesn't drift.","capturedAt":"2026-10-29T09:31:19.938Z","createdAt":"2026-10-29T09:31:19.939Z","updatedAt":"2026-11-06T04:43:53.726Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:10.087Z"}],"fingerprint":"c0fa97db802a962d6c156578d81d5a0637516c4dfc2c10cfac9a59a1f36ee28c","revisionNo":"2","structureHash":"9f0efe1fa71cc332fb8cb1af8a8bd4f7f71e9ecc5f8131f8441ba3932845f68d","page":"https://lattris.com/by/b/memories/7179765c-95bd-468d-abe7-9cc4daa6bed2"},"links":[{"direction":"out","verb":"references","reason":"Follow once the direction is set and you're choosing type, colour and layout.","hash":"11757aabccd0cc88ccb0786884ded77f9db44b4890badaa0b105282b60d88277","node":{"id":"25a75047-6f28-4228-8728-3b212e241ed5","handle":"25a7","type":"note","title":"Drawer 2: The look","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5?links=1","fingerprint":"a7e6643893360cbb761c32fe35ac2ff509b39c054c2bef570dd0f45f48ae5652","revisionNo":"2","structureHash":"6c940c1ec3e9834f903982e4a24e1fec9929335b8b1c32092d274305442e70eb","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5"}},{"direction":"out","verb":"references","reason":"Pick it when a known brand has solved a problem like yours and you want to see how.","hash":"49cc9930ec9e25f6cbc7e9b92efa4e7f70b5b94f949ba98f981fdef75bd9d1a0","node":{"id":"335daa15-76fb-4e73-bd51-41e8672d0b9e","handle":"335d","type":"note","title":"Tool: borrow from a brand (awesome-design-md)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/335daa15-76fb-4e73-bd51-41e8672d0b9e?links=1","fingerprint":"aec6259a235f1b6acac87dd41abb270618663023f41b0ec4bedcd22f334b42e5","revisionNo":"1","structureHash":"d9cd5257f1be680a4cadc768e2687fd4c9aaf8e1efb5f399f68a799380e56adc","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/335daa15-76fb-4e73-bd51-41e8672d0b9e"}},{"direction":"out","verb":"references","reason":"Pick it once the direction is chosen, so it doesn't drift.","hash":"c0bd217c180c552f2133ffa2217b4d19842bcad9a23348bb3ad08642d5c3047b","node":{"id":"5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7","handle":"5e1f","type":"note","title":"Tool: DESIGN.md, the look written down","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7?links=1","fingerprint":"1fddcc701e7b8ee8581304eac00f9d21309205010c6f6cf36ed613071c24efc4","revisionNo":"1","structureHash":"b776ac85e0e71758fce3ccfe1e1c7c30221b2684bf47375df56b75778c3580b7","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7"}},{"direction":"out","verb":"references","reason":"Follow back to pick a different drawer.","hash":"bb73de99a62054db6ab4bf5edb858be853ad2e68403f0ed539d255e896ed58a4","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}},{"direction":"out","verb":"references","reason":"only if you need to install impeccable before running one of the commands above, or check its cautions first","hash":"7f6c51c8c8973455f5b90700689f5c3095c818cca48b598837348047de663686","node":{"id":"7b1bf5e3-1c32-4b94-8e8a-1436409042a0","handle":"7b1b","type":"note","title":"Source: impeccable","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/7b1bf5e3-1c32-4b94-8e8a-1436409042a0?links=1","fingerprint":"118dd05f30af956d68616de75423a1b8c7180a16da21f5788bf8e6589414c0bd","revisionNo":"3","structureHash":"32d1be7421efd06d67641aa60439c18dac3b6e676e9b31dc5ca978b397c949e0","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/7b1bf5e3-1c32-4b94-8e8a-1436409042a0"}},{"direction":"out","verb":"references","reason":"Follow when a line marked [our build] needs its full context.","hash":"20d910dfd9e1b535ce3c69109ce4b5044b308148ddfa16d561ba64943784fee4","node":{"id":"ec50a07f-f1ee-4008-b3ce-b7e1a847d706","handle":"ec50","type":"note","title":"Pattern: building a website with AI","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ec50a07f-f1ee-4008-b3ce-b7e1a847d706?links=1","fingerprint":"62d9975e4cd521f59b3f3e71719dbcae5835d307e28597ea0104247bb6721bb2","revisionNo":"1","structureHash":"e63b54c083aa93ec272c5d03a5b587824c3c5a78373b8839600f59268a5f2083","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ec50a07f-f1ee-4008-b3ce-b7e1a847d706"}},{"direction":"in","verb":"references","reason":"Follow back if no direction has been chosen yet.","hash":"3e8065ff02445d84b4f0bc46c45300cddcc748fac86bbf2b856188e81d1fa8d1","node":{"id":"25a75047-6f28-4228-8728-3b212e241ed5","handle":"25a7","type":"note","title":"Drawer 2: The look","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5?links=1","fingerprint":"a7e6643893360cbb761c32fe35ac2ff509b39c054c2bef570dd0f45f48ae5652","revisionNo":"2","structureHash":"6c940c1ec3e9834f903982e4a24e1fec9929335b8b1c32092d274305442e70eb","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5"}},{"direction":"in","verb":"references","reason":"Open it before any look exists: what the site is for, who it's for, the tone, the one thing people will remember.","hash":"c207a797d7f06a6f5e670cf84bea5361801f953836dddb629e5c6f0c51cf306d","node":{"id":"5f8b457d-b87a-4e61-9af2-3008deaf37a9","handle":"5f8b","type":"note","title":"Front-end design: the toolbox","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9?links=1","fingerprint":"49e1c7f41f22c466c7ef1a993cab80b6dcbedab4552d2ac684133d60dea7e60b","revisionNo":"2","structureHash":"64df670c7bd82572e0ad9b2e06b8829d3b2e509be134591c04ea1fa281fca3ef","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5f8b457d-b87a-4e61-9af2-3008deaf37a9"}}],"dictionary":{"lattris":"A personal knowledge base — how a person captures what they know as linked blocks they own and control. To understand how this knowledge base works: https://lattris.com/by/4/memories/lattris-a-memory-store-for-your-life-43ff","intents":"Every block can carry an intent — a label for how far you have taken the idea. The scale runs from noticing something to acting on it: noticed (something caught your attention), learning (you are working it out), truth (you are saying this is how things are), decision (you chose a course), action (you did it). Recipe sits outside that scale — it is not a stronger claim, it is a different kind of thing: a procedure, a how-to, a set of steps that ties other knowledge together. Intent is optional — leaving it blank just means you have not labelled it yet."},"instructions_to_ai":"This is knowledge from a personal knowledge base. Read it and consider how it's relevant to what the person you're talking to needs. Follow the linked blocks to explore further related topics if it might be useful to the user; open each at its page address. Start by letting the user know what this is about and how it may be relevant to them."}