The CI · Chapter 11
Examples and UI elements
Colour values and font names say a lot, but only a poster, a business card or a button on a web page shows how the CI comes across. There are three things for that: examples you upload, and two that nexbrand draws itself.
Examples
In the editor, tab Examples, Upload examples takes any files, several at once too: photos of printed matter, PDFs, presentations. You give each a name, reorder and remove them. A version holds at most 60 examples; how large a file may be is the operator's choice, 50 MB out of the box.
In the Examples tab of the client's page, each file stands as a card with a picture or a file symbol, name, file type and size. A picture opens in a new tab, anything else is downloaded. nexbrand stores identical files within one client only once.
The sample page
The Sample page in this CI is a small website in the version's colours and fonts: a header with logo and navigation (Services, About, Contact), a heading, body text, a button “Book a visit”, a link, three cards and a footer. You see it in the editor beside the checks, in the wizard, in the client's review and in the dark mode card.
UI elements
The tab UI elements draws the building blocks of an interface from the version's colours, fonts and dark mode. There is nothing to upload, and everything changes with the CI.
| Group | What you see |
|---|---|
| Buttons | “Save”, “Cancel” and a link “Learn more” |
| Fields | a search field and a switch “Notifications on” |
| Card | surface, text, quiet text and a badge “New” |
| Badges | up to four colours of the palette and a “Draft” |
The switch Light and Dark shows the same elements in dark mode once the version has one. The values are under As code.
Pavo saysA file that the client keeps anywhere as an in-house font does not go outside as an example either. So keep font files in the Fonts tab.