{"node":{"id":"bf82afc5-032e-4ecd-8a6a-205ab29f22d7","handle":"bf82","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Drawer 6: Is it any good","aiSummary":null,"content":"**Open it when:** something is built and you need to judge it. That covers design critique, technical audit, AI tells, accessibility, phones and other screens, and speed.\n\n## What we know\n\n### How to judge\n\n- Judge the real rendered page, at the sizes it ships at. Never judge from one full-page thumbnail. [impeccable]\n- Take a desktop shot at 1440 wide (full page) and a phone shot at 390 wide. Open each file to check it shows what its name says. [impeccable]\n- Narrow targets get better results. One section looked at closely beats a whole page at a glance. [impeccable]\n- Have a fresh agent do the final review. A reviewer that has read your whole conversation inherits your framing and your optimism. [impeccable]\n- Report the verdict at its real size. \"The reviewer scored all three fixes resolved\" is fair. \"No material issues remain\" is not. [impeccable]\n- If the user answers \"ship it\" with evidence that it's broken, their evidence beats your screenshots. Start a fresh full review instead of patching and approving it yourself. [impeccable]\n- A clean result from a rule checker is a floor, not proof of quality. [impeccable]\n- Check every answer with something rendered or in the source, never a bare \"yes\". [impeccable]\n\n### Critique: does it work for people?\n\n- First question: does this feel made for this product, or could it belong to anyone in the category? [impeccable]\n- Cover the name. Does it still read as a product of its category, and could someone do the task from it? [impeccable]\n- impeccable scores against Nielsen's ten heuristics. A heuristic is a rule of thumb for judging whether a design is easy to use. [impeccable]\n  - 36 to 40: Excellent. 28 to 35: Good. 20 to 27: Acceptable. 12 to 19: Poor. 0 to 11: Critical.\n  - On marketing and portfolio pages, two of the ten may be marked \"n/a\". Then read the score as a percentage.\n  - impeccable says most real interfaces score 20 to 32 (asserted, no evidence shown).\n- Mental load: at a decision point, four items or fewer is fine. Five to seven is pushing it. Eight or more is overload. [impeccable]\n- One main action, one or two secondary ones, the rest in a menu. Keep top navigation to five items or fewer. [impeccable] impeccable bases the four-item limit on a 2001 study it names but doesn't show.\n- Imagine named users, and report what broke for each. [impeccable]\n  - Alex, the impatient power user: can they finish the core task in under a minute?\n  - Jordan, the confused first-timer: is the first action clear within five seconds?\n  - Sam, on a screen reader or keyboard.\n  - Riley, the stress tester.\n  - Casey, distracted, one-handed on a phone: are actions in the bottom half, with targets at least 44 by 44?\n- For a landing page, test with Jordan, Riley and Casey. For a dashboard, Alex and Sam. [impeccable]\n\n### Audit: does it work technically?\n\n- An audit checks accessibility, performance, theming, responsiveness and whether the code holds together. It lists issues. It doesn't fix them. [impeccable]\n- Each of the five scores 0 to 4, out of 20. 18 to 20 Excellent, 14 to 17 Good, 10 to 13 Acceptable, 6 to 9 Poor, 0 to 5 Critical. [impeccable]\n- Rank every issue. [impeccable]\n  - P0 Blocking: fix now.\n  - P1 Major: real difficulty, or a failure of the WCAG AA accessibility standard. Fix before release.\n  - P2 Minor: a workaround exists.\n  - P3 Polish: no real impact.\n- Unsure between two? Ask whether a user would contact support about it. If yes, it's at least P1. [impeccable]\n- Keep P3s few. A long tail of small issues buries the ones that matter. [impeccable]\n\n### The tells of an AI-made page\n\n**Where the sources agree with our build**\n- Our build's list: a number on every section (01, 02…), a small capitals label above every section, a cream or beige background, gradient text, frosted glass for decoration, a coloured stripe down the side of cards, and rows of identical icon cards. [our build]\n- Numbers belong only on a real sequence, like \"how it works\". [our build; impeccable]\n- Let warmth come from the accent colour, the photos and the type. [our build]\n- impeccable bans or flags every item on that list. It bans the small label above a heading outright: \"no brief earns it back\". [impeccable]\n- frontend-design calls out overused fonts (Inter, Roboto, Arial, system fonts), purple gradients on white, and predictable layouts. [frontend-design]\n\n**More tells impeccable flags** [impeccable]\n- The hero-number template: big number, small label, supporting stats, accent.\n- A tiny capitals label or pill sitting right above the main headline.\n- Purple or violet gradients, and cyan on dark.\n- Coloured glows: halos with no offset, radial glows on dark pages, a \"spotlight\" behind the hero.\n- Pulsing status dots not tied to live data.\n- A fake typing cursor in the hero.\n- Content that scrolls by itself forever.\n- A full-sentence headline set at display size.\n- An oversized italic serif headline. Editorial pages may want it.\n- A small rounded-square icon box above a heading.\n- Hard offset shadows, decorative grid backgrounds, and stripe backgrounds.\n- Writing tells: many em-dashes, three or more sections ending \"X. No Y.\", calling something \"theater\", and buzzwords.\n\n**What is asserted without evidence**\n- impeccable says these tells \"show up again and again, across models and projects\". It gives no data (asserted, no evidence shown).\n- It calls the side stripe, and purple gradients with cyan on dark, \"the most recognizable\" tells (asserted, no evidence shown).\n- It says every generator outputs the icon box above a heading (asserted, no evidence shown).\n\n**Where the sources clash**\n- awesome-design-md shows real brands using some of these on purpose: cream pages (Claude, Cursor, Oura), monospace section labels (xAI), and one hero gradient (Vercel, Stripe, Mistral). [awesome-design-md]\n- impeccable says the brief wins. A brief that pins one of these keeps it. The tells are for when the look was left free. [impeccable]\n- Our build avoided cream, section labels and gradient text. [our build]\n\n### Accessibility\n\n- Body text needs 4.5 to 1 contrast. Large text, controls, icons and focus rings need 3 to 1. [impeccable]\n- A grey chosen for elegance came out at about 2.5 to 1. Never lighten text for looks. [our build]\n- The audit checks contrast, missing ARIA labels, keyboard traps, heading order, alt text and form labels. [impeccable]\n- Heading levels must not skip, such as h1 then h3. [impeccable]\n- Keyboard, touch and screen-reader order must match the visual order. [impeccable]\n- Colour is never the only signal. [impeccable]\n- Touch targets at least 44 by 44px. [impeccable]\n- Automated checks catch only part of it. Astryx runs the axe checker on every change, and still says keyboard, focus and screen-reader behaviour need checking by hand. [Astryx]\n- Astryx's README calls all its 150+ components accessible. Its own contributing guide says a green automated check doesn't prove that. [Astryx]\n- Reduced motion is in Drawer 3.\n\n### Phones and other screens\n\n- No sideways scrolling on a phone. Check at 375 pixels wide. Anything decorative or scaled up sits inside a box that hides overflow. [our build]\n- Run the real copy at every breakpoint and fix what overflows. [impeccable]\n- Flex and grid overflow: add `min-width: 0` to the items. [impeccable]\n- Write phone styles first, then add `min-width` media queries. [impeccable]\n- Add a breakpoint where the design breaks. Three usually do: 640, 768 and 1024px. [impeccable]\n- Also check common desktop widths, 1280 to 1600. [impeccable]\n- Detect touch or mouse with the `pointer` and `hover` queries, not screen size. [impeccable]\n- Use `srcset` and `sizes` for image sizes, and `<picture>` when the crop must change. [impeccable]\n- Adapting is rethinking for the new screen, not scaling pixels. [impeccable]\n- Print: page breaks in sensible places, no navigation, full URLs, page numbers. [impeccable]\n- Email: at most 600px wide, one column, inline CSS, a table layout, nothing on hover. [impeccable]\n- Handle phone notches with `env(safe-area-inset-*)` and `viewport-fit=cover`. [impeccable]\n- `display: none` hides content but still downloads it. [impeccable]\n- Screenshots check layout, never a gesture. Test on at least one real iPhone and one real Android. [impeccable]\n- Astryx themes can change values by screen width, pointer, contrast or motion setting. [Astryx]\n\n### Speed\n\n- Measure before and after. Fix the biggest slowdown first. Don't speed up what isn't slow. [impeccable]\n- Targets: largest content shown within 2.5 seconds (LCP), response to input within 200 ms (INP), layout shift under 0.1 (CLS). [impeccable]\n- Generated images come out around 2,700 pixels wide and 2.5 MB each. [our build]\n- Resizing to about 1,800 pixels took one site's images from 22 MB to 3.5 MB with no visible loss. Squeezing without resizing saved only about 7%. [our build]\n- Serve the right size, not 3,000px for a 300px slot. Use WebP or AVIF. [impeccable]\n- Lazy-load images below the first screen. Never lazy-load what's on the first screen. [impeccable]\n- impeccable says 80 to 85% image quality is usually invisible (asserted, no evidence shown).\n- Set image and video sizes, or use `aspect-ratio`, so the page doesn't jump. [impeccable]\n- Read all layout values first, then write all changes, so the browser doesn't recalculate the page between each one. Use `content-visibility: auto` on long lists. [impeccable]\n- Test on a cheap Android phone on slow 3G, not just a flagship. [impeccable]\n\n## Tools in this drawer\n- **Tool: design review with scores (impeccable critique).** Pick it to judge whether the design works for people and feels made for this product.\n- **Tool: technical audit (impeccable audit).** Pick it to list technical faults by severity before release.\n- **Tool: rule checker for AI tells (impeccable detect).** Pick it for a quick, repeatable scan for AI tells and mechanical faults.\n- **Tool: final quality pass (impeccable polish).** Pick it when the direction is right and you want the last details fixed.\n- **Fit other screens: `/impeccable adapt <target>`.** Pick it when the page breaks on phones, tablets, print or email.\n- **Find the real slowdown: `/impeccable optimize <target>`.** Pick it when the page feels slow and you need to know why.","capturedAt":"2026-10-29T09:31:22.428Z","createdAt":"2026-10-29T09:31:22.428Z","updatedAt":"2026-11-06T04:43:58.247Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:11.749Z"}],"fingerprint":"1ea050b70d61986658d4c7346ee96979c14c9774d0b6aec5e490cddf0d5d8d57","revisionNo":"2","structureHash":"4d658c915f02ec511a2c0ee3b538c0b53325db079b1e2a9444d2bd2cb0737dd9","page":"https://lattris.com/by/b/memories/bf82afc5-032e-4ecd-8a6a-205ab29f22d7"},"links":[{"direction":"out","verb":"references","reason":"Pick it to list technical faults by severity before release.","hash":"a2e01c938989e0cf2b73395fd916b1f4a9250fc8ab8242db51eb35136a1ba47b","node":{"id":"088fac12-576b-44c8-9d19-6f1c64d1e9db","handle":"088f","type":"note","title":"Tool: technical audit (impeccable audit)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/088fac12-576b-44c8-9d19-6f1c64d1e9db?links=1","fingerprint":"7024862c19bda4e5ae0fb26ad3f907a4aa33c2cf99f1b426bdfbcc897e0396ef","revisionNo":"1","structureHash":"019284935b09ef7f00cfa2c7df6bd588ba3f79032124647b34de298e84c06b4c","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/088fac12-576b-44c8-9d19-6f1c64d1e9db"}},{"direction":"out","verb":"references","reason":"Follow when a tell needs fixing in type, colour or layout.","hash":"c48378622af6217251c33b7f1848ec37aa8892b1d99db3fdba4301ef7d17c9ee","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":"Follow back to pick a different drawer.","hash":"791c50fda5db94eef9891c65b318fed43ed64df1d5ac21fe602d29145fc73716","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":"Pick it to judge whether the design works for people and feels made for this product.","hash":"1867aeda821d105b488e87e462a8100574b1890fc592a69dba4074303293954d","node":{"id":"5fe71f15-457c-4836-a17d-ba3091b4df29","handle":"5fe7","type":"note","title":"Tool: design review with scores (impeccable critique)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5fe71f15-457c-4836-a17d-ba3091b4df29?links=1","fingerprint":"a966b516fb3f77bfc2699451d8b69a66539d0052af1ebc3f848901b863c6b614","revisionNo":"1","structureHash":"a204eadd466d95e6abbd692d0d724bb951974f7b46595704e67cbba8bf050cb9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5fe71f15-457c-4836-a17d-ba3091b4df29"}},{"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":"f542ef13aebe02e42b6f107ebc7d111a94020087ebee494d8de9fc9d28da79d2","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":"Pick it when the direction is right and you want the last details fixed.","hash":"1bdea2ba9fa3b72bdee97bd4b5b0217227562d573347baf889d1f6457b6f2810","node":{"id":"9c6c32cb-d7fd-484b-97fa-e7d9565d66a9","handle":"9c6c","type":"note","title":"Tool: final quality pass (impeccable polish)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/9c6c32cb-d7fd-484b-97fa-e7d9565d66a9?links=1","fingerprint":"fdf58ffd4d1125a12f24bc03a42bb3930a2a5fc58068df768ee1992f751ff728","revisionNo":"1","structureHash":"9465db5787632148a9fbcc38672f467c6a20e770acc928952c291a13144d0c7e","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/9c6c32cb-d7fd-484b-97fa-e7d9565d66a9"}},{"direction":"out","verb":"references","reason":"Pick it for a quick, repeatable scan for AI tells and mechanical faults.","hash":"fd3812a4e76f0daea5a0b6f907334941abeaa95bb72d11a68a047b165c987022","node":{"id":"ac67d1f2-f6ea-41c4-a982-2696e9410fd3","handle":"ac67","type":"note","title":"Tool: rule checker for AI tells (impeccable detect)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3?links=1","fingerprint":"e339198a7edb93614129a6a94e5ba5b5257c715e4c1bde6d2cca64be2f438878","revisionNo":"1","structureHash":"82afdc94d333b4dc696c834ed2d0f9b552f2fbfdf0092c698725f66ddbd19f3b","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3"}},{"direction":"out","verb":"references","reason":"Follow for reduced-motion rules.","hash":"e70b4c391e9e97d9ba633f26f5502cf89ff92e4fcc830a8aed4559df55b8acb0","node":{"id":"d1fb677c-ee19-4031-bfea-72774baaa944","handle":"d1fb","type":"note","title":"Drawer 3: Motion","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/d1fb677c-ee19-4031-bfea-72774baaa944?links=1","fingerprint":"4737fba3103bacfa85ff73ecc7bd88535ff37c2ffbb06555670987e986aa34da","revisionNo":"2","structureHash":"a254f5077efc5d74424160fdbda8d8b0321093d6433b99164b68d09bd99212d3","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/d1fb677c-ee19-4031-bfea-72774baaa944"}},{"direction":"out","verb":"references","reason":"Follow when a line marked [our build] needs its full context.","hash":"0a0466f504403c46db68ff040b7c06c7e1264d468d4eec63d616d609dc93d481","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 for the full list of AI tells to avoid.","hash":"434329ed743116583bc1fd25789bdd3db4bcbe7daecf03fd1dd67ce11f50600a","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 when something is built and you need to judge it: critique, audit, AI tells, accessibility, phones, speed.","hash":"2e60b171661017781b447730f75471805913c0fc75c3efddbb2d7bcc2ffd19ad","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":"in","verb":"references","reason":"Follow for the score bands, mental-load limits and named test users.","hash":"81c11e1a1ac4c7a7031c7f125c7a489449488886b5a052f83f747a43aa80d049","node":{"id":"5fe71f15-457c-4836-a17d-ba3091b4df29","handle":"5fe7","type":"note","title":"Tool: design review with scores (impeccable critique)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5fe71f15-457c-4836-a17d-ba3091b4df29?links=1","fingerprint":"a966b516fb3f77bfc2699451d8b69a66539d0052af1ebc3f848901b863c6b614","revisionNo":"1","structureHash":"a204eadd466d95e6abbd692d0d724bb951974f7b46595704e67cbba8bf050cb9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5fe71f15-457c-4836-a17d-ba3091b4df29"}},{"direction":"in","verb":"references","reason":"Follow for the list of tells it catches.","hash":"0351c11899701396a445bc1ac0fc80f9d2ba8b71ec865bb118bab5b85b7b224c","node":{"id":"ac67d1f2-f6ea-41c4-a982-2696e9410fd3","handle":"ac67","type":"note","title":"Tool: rule checker for AI tells (impeccable detect)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3?links=1","fingerprint":"e339198a7edb93614129a6a94e5ba5b5257c715e4c1bde6d2cca64be2f438878","revisionNo":"1","structureHash":"82afdc94d333b4dc696c834ed2d0f9b552f2fbfdf0092c698725f66ddbd19f3b","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ac67d1f2-f6ea-41c4-a982-2696e9410fd3"}}],"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."}