With clients · Chapter 21
Collecting
Instead of typing hex values from a style guide, you let nexbrand look. The values are always measured. Rules or your own AI only sort them, that is give roles and names and leave out what does not belong.
Three sources
| Source | What nexbrand reads |
|---|---|
| Website | the colour for the browser bar, styles in the page and up to ten style sheets, linked web fonts, logos: pictures with “logo” in their name, the page's icon and the preview picture for social networks |
| GitHub repository | Tailwind configuration, token files, style sheets and font packages in package.json, at most 40 files |
| PDF style guide | values in hex, RGB, CMYK and Pantone from the text, up to 80 pages, and embedded fonts |
Pictures are not a source for collecting. The wizard takes colours from a picture, in the browser.
How it goes
- Open Collect
Collect in the header, or on the page of a client without a CI.
- What should happen?
Use as a draft or Check against the CI; the next chapter explains the second.
- Choose a client
An existing one, or New client with a name. Addresses kept with the client stand ready to click.
- Add sources
Up to six, mixed. With Sort with AI, your AI service sorts; the AI sees only the measured values.
- Click Collect
Then you go through the result.
The result
nexbrand merges colours that are nearly the same, less than ΔE 2 apart; at most 40 remain. Each stands with its share in per cent, where it was found and its names, such as the CSS variable. Colours that Bootstrap or a similar framework brings along carry from the framework and are unticked. Without AI, fixed rules sort: the most frequent colourful one leads, greys become neutrals, tiny shares and nearly identical colours are unticked.
nexbrand takes fonts by name. Their files only when you tick them one by one and confirm that there is a licence that allows copying them. Who confirmed it, and when, stands at the font and in the log. You see logos in a preview the server fetches, so the other site does not learn who is looking; Use adds one to the client's files.
Using it as a draft
The ticked colours become the palette of a new draft, chosen fonts replace those of the version that applies, logos are added, and everything else stays. The draft is called “Collected on …” and carries the origin collected. It is published only on the client's page, by a person.
Safely outside
The server fetches websites and repositories. It asks only public addresses, never one in your own network, checks every redirect again and gives up after twelve seconds. Collecting from websites and repositories is off out of the box; the operator turns it on under Settings, Server, Collecting and AI. A PDF always works: it goes into the client's files and never leaves the house.
Pavo saysIf nexbrand finds nothing on a website, the page probably loads its colours with JavaScript only. A repository or the style guide helps then.