Skip to content
NEXBRAND

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

SourceWhat nexbrand reads
Websitethe 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 repositoryTailwind configuration, token files, style sheets and font packages in package.json, at most 40 files
PDF style guidevalues 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

  1. Open Collect

    Collect in the header, or on the page of a client without a CI.

  2. What should happen?

    Use as a draft or Check against the CI; the next chapter explains the second.

  3. Choose a client

    An existing one, or New client with a name. Addresses kept with the client stand ready to click.

  4. Add sources

    Up to six, mixed. With Sort with AI, your AI service sorts; the AI sees only the measured values.

  5. 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.

Collect
The Collect page with the result from a PDF style guide, colours with their share in per cent and the fonts found
Collected from a PDF style guide.

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.