--- # Deconflict brand pack Everything needed to make on-brand Deconflict work: pages, sections, posts, emails. Deconflict tells a bank whether a crypto wallet is already under investigation by law enforcement. **If you're an AI reading this:** read this file, then the Identity section, the Rules section, the Voice section and the Layouts section before making anything. Build only from what's here. When something isn't covered, say so rather than inventing it. **If you're a person:** open Claude (or the AI you use), add this file, and say what you need, for example "a landing page for our February event". If you get stuck, ask it what to do next. ## Making a web page 1. **Write a one-line brief:** who it's for, what they should do, what it must say. 2. **Pick sections from the Layouts section, nothing else.** A page the website doesn't have (careers, about, an event) follows its recipe in the Page recipes section and may use the designed sections. Otherwise start with a hero (H1), end with a call to action (C1) and the footer (F1), kept as the brand has it (U-21). In between, 6 to 9 sections chosen for what the brief needs: explain, prove, show people, pause. 3. **Order them by the page rules** in the Rules section: no two neighbours with the same skeleton (U-03), a dark act then a light act (U-04), a loud section next to a quiet one (U-05). 4. **Write the copy** in Deconflict's voice, within each slot's word limit (the comments in each layout's HTML give them) and its `data-lines`: the lines it was designed at on desktop. Copy that runs longer is rewritten shorter, never left to push the next part down. Claims come from the Facts section and the request only; if a fact is missing, leave it out (never a placeholder) and list it in your reply. 5. **Build it** by copying each layout's `

` from the Layouts section and replacing the copy. Navigation and footer links in the layouts are placeholders ("Link 01"): replace them with the site's real page names. Keep the classes; link the tokens.css code in this file, the layouts.css code in this file and the brand.js code in this file. Links are `` with the layout's classes on them; never add rules for bare elements (`a { }`, `[data-layout] a`), which override the layouts' colours. Put an approved photo in every media box (an `` with the box's class, without `media`; the Images section gives kind and focus) or delete the box. A finished page has no grey boxes, logo stand-ins, "Lorem ipsum", "John Smith" or "Link 01". 6. **Keep it working on a phone.** The layouts' CSS carries their tablet and phone rules (the `@media` blocks): keep them. Anything you add or change follows them: below 768px rows stack, cards go one per row, margins are 24px, nothing scrolls sideways. 7. **Check it** against the Checklist, at 1440 and at 390 wide. To work in another stack (Webflow, Next.js, WordPress), use the layouts as the blueprint: same structure, same tokens, same spacing. Keep the type sizes and the grid exactly; they carry most of the brand. ## Making something else Posts, emails, slides and documents follow the same Rules section, the Voice section and the Facts section, and use the same tokens: the fonts, the light, mist, dark, forest, blue, beige, green, mint tones, the text styles. Keep to two type sizes about twice apart, one idea per piece, and the voice's plain, specific sentences. ## The system at a glance - **Font:** PP Telegraf, Instrument Sans, DM Mono. - **Tones:** light #FFFFFF, mist #FAFAFA, dark #0A1B17, forest #112D26, blue #E7F5FF, beige #E8EADE, green #CAFDDB, mint #DDF7DF. - **Grid:** 12 columns of 78px, 24px gutter, 120px margin, on a 1440px page. - **Spacing scale (px):** 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 216. - **Text styles:** 20, from 144px display to 12px labels. Use them; don't invent sizes. --- # Fonts | Font | Use | Where it comes from | If it isn't available | | --- | --- | --- | --- | | PP Telegraf | Display: headlines, quotes, the call to action | Licensed (Pangram Pangram). tokens.css loads it from the brand book; nothing to install, and never use a copy from your own machine. | Instrument Sans at the same size, tracking -2%, only if the font fails to load | | Instrument Sans | Text: body, headings under 32px, links, buttons, labels | Free, Google Fonts | none needed | | DM Mono | Eyebrows only (the small labels above section headings) | Free, Google Fonts | none needed | In an artifact or prototype, load the free ones like this; keep the licensed face first in each font stack so it's used where it's installed: ```html ``` --- # Building with the code Every page is one self-contained HTML file. Copy tokens.css and layouts.css from the end of this file into a