{"node":{"id":"5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7","handle":"5e1f","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Tool: DESIGN.md, the look written down","aiSummary":null,"content":"## What it does\n- One markdown file that holds the look of a site.\n- Tokens (named values) sit at the top in YAML. Written rules sit below.\n- Agents read it before every change, so the look stays the same.\n\n## When to reach for it\n- The direction is chosen and building is about to start.\n- Several agents or sessions will touch the site.\n- The look has started to drift.\n- You've inherited a site whose look lives only in its code. Use `document` to write it down.\n\n## How to use it\n**Write it by hand, in the format awesome-design-md uses**\n- Top-level keys: `version`, `name`, `description`, `colors`, `typography`, `rounded`, `spacing`, `components`.\n- `colors` maps role names (primary, ink, canvas, hairline…) to hex values.\n- `typography` holds named roles, each with fontFamily, fontSize, fontWeight, lineHeight and letterSpacing.\n- `rounded` and `spacing` are named scales. Claude's file runs corners from 4px to a 9999px pill, and spacing from 4px to 96px.\n- `components` builds each element from token names in braces. Never type a raw hex colour.\n- Sections below, in order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts.\n\n**Or generate it from existing code with impeccable**\n- Run `/impeccable document`.\n- It reads, in order: CSS custom properties, the Tailwind config, CSS-in-JS themes, token files, the component library, the global stylesheet, then styles from the rendered site.\n- It gives colours descriptive names (\"Deep Muted Teal-Navy\", not \"blue-800\").\n- It adds one named guiding image, the \"Creative North Star\", and short named rules, such as \"The One Voice Rule. The primary accent is used on ≤10% of any given screen.\"\n- It never overwrites an existing DESIGN.md silently. It offers refresh, overwrite or merge.\n\n**Keep it honest**\n- impeccable's rule checker flags any font, colour, corner size or text size not declared in DESIGN.md.\n- 34 awesome-design-md files say to run `npx @google/design.md lint DESIGN.md` after edits. Nobody here has run it.\n- When to write it is disputed. See Drawer 5.\n\n## What happened when we used it\n- Our build wrote the look down in one DESIGN.md, in this collection's format, partway through, once three versions existed.\n- Colours, type, spacing and components came first, then layout, motion, voice, and what to do and not do.\n- Every later change reads it, so the look doesn't drift.\n- The page's advice: when you turn the build into a skill for a new site, make DESIGN.md the first thing it writes.\n\n## Source\n- Source: awesome-design-md (the format and 84 examples).\n- Source: impeccable (the `document` command and the rule checker).","capturedAt":"2026-10-29T09:31:15.116Z","createdAt":"2026-10-29T09:31:15.117Z","updatedAt":"2026-10-29T09:31:15.117Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:15.852Z"}],"fingerprint":"1fddcc701e7b8ee8581304eac00f9d21309205010c6f6cf36ed613071c24efc4","revisionNo":"1","structureHash":"b776ac85e0e71758fce3ccfe1e1c7c30221b2684bf47375df56b75778c3580b7","page":"https://lattris.com/by/b/memories/5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7"},"links":[{"direction":"out","verb":"references","reason":"Follow to see 84 finished examples.","hash":"d1b3ac9b29c8c6ce38fb6fb9d63f370fcfb3f296658d26bf32bf96884290647c","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":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"bf0e65829e90a06d699b9c06451b73b91febdaff2729fa8123d6d71887deaa10","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 for the dispute on whether to write DESIGN.md first or last.","hash":"9a7cfc7904b02dfa013f05b7030d4aec614fd84aead7161539b9295676266eb9","node":{"id":"98841826-13b8-4843-ba74-fd26981525db","handle":"9884","type":"note","title":"Drawer 5: Building it","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/98841826-13b8-4843-ba74-fd26981525db?links=1","fingerprint":"5ed8da87f333ea517c55f8b050ca46d893bb1b907cb1151fa7feef68cc0cccdf","revisionNo":"3","structureHash":"f4b3deab8497b5b9ae3a7026a8ae25e2d882e23aeece6ec80513f14acd2b4221","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/98841826-13b8-4843-ba74-fd26981525db"}},{"direction":"out","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"d4c18e10c8078803818bddf6c2911c5965022f7260bdb31c5024d27ed483408b","node":{"id":"fad275a2-ccbf-44cd-b45a-9e22212ef775","handle":"fad2","type":"note","title":"Source: awesome-design-md","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/fad275a2-ccbf-44cd-b45a-9e22212ef775?links=1","fingerprint":"da4fead153a16ecc7f621e56c57958df0ad74fd1dd6a0a4ebb0e2c14302b2e70","revisionNo":"1","structureHash":"b8c7cab820be8606e868364b84e10fcea3d18a79225ef015290bf44d428e5bf9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/fad275a2-ccbf-44cd-b45a-9e22212ef775"}},{"direction":"in","verb":"references","reason":"Pick it to fix the choices in one file every later change reads.","hash":"9d9d1474d90b7fde5787e8013dd73acd756eec3c82fc8bb003ebf9e42d0bcad2","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":"Follow for the DESIGN.md format itself.","hash":"3bcc4d04ec51c9695d5c8f4068a72e18ca7d598e0ae2e75b577f96e7a28f4bb0","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":"in","verb":"references","reason":"Pick it once the direction is chosen, so it doesn't drift.","hash":"c0bd217c180c552f2133ffa2217b4d19842bcad9a23348bb3ad08642d5c3047b","node":{"id":"7179765c-95bd-468d-abe7-9cc4daa6bed2","handle":"7179","type":"note","title":"Drawer 1: Direction","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/7179765c-95bd-468d-abe7-9cc4daa6bed2?links=1","fingerprint":"c0fa97db802a962d6c156578d81d5a0637516c4dfc2c10cfac9a59a1f36ee28c","revisionNo":"2","structureHash":"9f0efe1fa71cc332fb8cb1af8a8bd4f7f71e9ecc5f8131f8441ba3932845f68d","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/7179765c-95bd-468d-abe7-9cc4daa6bed2"}},{"direction":"in","verb":"references","reason":"Follow to see how to use this capability.","hash":"bfbfb6c8b8a888ee2ea57f4524b6afc318f921ddfac96d714adf8dc94bf4c02b","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":"in","verb":"references","reason":"Follow to write down the values the theme must match.","hash":"b2b7bc3eac8e3282996f459ab1e1eae629c2ce8097839a0517a5a760dffbfe02","node":{"id":"803f6d6d-0ecf-4a9c-8438-26d25e3f73b7","handle":"803f","type":"note","title":"Tool: Astryx theming","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7?links=1","fingerprint":"dc9053afefddf3d2523af49f2dc7652c9ce9955adc55647354c3fbbbee347beb","revisionNo":"1","structureHash":"f8aecdf69fc5b9e2c44844d6a75246bb7995d69e7545fae9599379f4f58453e9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7"}},{"direction":"in","verb":"references","reason":"Pick it once the direction is chosen, so every later change reads the same rules.","hash":"99c60e91bb5cc2bef5e8bee26a3597a6ef7bb5add9aeb8bdfba66f33a5e06f5d","node":{"id":"98841826-13b8-4843-ba74-fd26981525db","handle":"9884","type":"note","title":"Drawer 5: Building it","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/98841826-13b8-4843-ba74-fd26981525db?links=1","fingerprint":"5ed8da87f333ea517c55f8b050ca46d893bb1b907cb1151fa7feef68cc0cccdf","revisionNo":"3","structureHash":"f4b3deab8497b5b9ae3a7026a8ae25e2d882e23aeece6ec80513f14acd2b4221","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/98841826-13b8-4843-ba74-fd26981525db"}},{"direction":"in","verb":"references","reason":"Follow to see how to use this capability.","hash":"2ebf46e11613aa401f6ac09a615390edc36dbf497d6e7b5167347cf3be068d8f","node":{"id":"fad275a2-ccbf-44cd-b45a-9e22212ef775","handle":"fad2","type":"note","title":"Source: awesome-design-md","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/fad275a2-ccbf-44cd-b45a-9e22212ef775?links=1","fingerprint":"da4fead153a16ecc7f621e56c57958df0ad74fd1dd6a0a4ebb0e2c14302b2e70","revisionNo":"1","structureHash":"b8c7cab820be8606e868364b84e10fcea3d18a79225ef015290bf44d428e5bf9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/fad275a2-ccbf-44cd-b45a-9e22212ef775"}}],"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."}