Uwazi Design
Why the mark is a colon
A new identity for Uwazi, the open-source database Huridocs builds for human rights documentation.
Juan M. Cornejo
Uwazi Design
A notebook
This notebook covers one part of the Uwazi rebrand: why the mark is a colon, and how it reads on each of six grounds.
- Notes2
- A record, sketched3
- Why the mark is a colon4
- The inks, measured5
- Try it6
- The mark7
- The wordmark8
- From record to mark9
- In short10
A new identity for Uwazi, the open-source database Huridocs builds for human rights documentation.
1Uwazi Design
Notes
- Uwazi is an open-source database for human rights documentation. Its smallest unit is a property and its value.
- A colon separates the two, so the mark is a colon.
- The mark is two blocks. Seal sits above, as a wax seal certifies a document. Carbon sits below, as a carbon copy lies beneath the original. Never the other way round.
- A record is written witness : value, and every colon in it is the mark.
- The type is Inter for headlines, Merriweather for running text and Syne Mono for metadata.
2Notes
A record, sketched
Figure 1. A record, sketched in code. Each row has a property, a colon and a value, and the colon is drawn as two small blocks.
3Uwazi Design
Chapter 1
Why the mark is a colon
Uwazi is a database of records, and a record is a list of properties and their values. The guidelines write each one as property, colon, value. The mark is that colon: a red Seal block above a blue Carbon block.
The mark has to read on six grounds, the colours it sits on, from Paper to Ink. Three rules cover it: Seal is always above Carbon, the wordmark has no box behind it on Parchment or Paper, and dark grounds take the white icon.
4Why the mark is a colon
The inks, measured
| Ground | Ink text | White text | Seal block | Carbon block |
|---|---|---|---|---|
| Text needs 4.5:1; each block of the mark needs 3:1 | ||||
| Seal | 5.07:1 AA | 3.44:1 | 1.00:1 | 1.40:1 |
| Carbon | 7.09:1 AAA | 2.45:1 | 1.40:1 | 1.00:1 |
| Ink | 1.00:1 | 17.40:1 AAA | 5.07:1 AAA | 7.09:1 AAA |
| Vellum | 15.00:1 AAA | 1.16:1 | 2.96:1 | 2.11:1 |
| Parchment | 15.34:1 AAA | 1.13:1 | 3.03:1 AA | 2.16:1 |
| Paper | 17.40:1 AAA | 1.00:1 | 3.44:1 AA | 2.45:1 |
On the pale grounds the wordmark is Ink, 15:1 and more. The Seal block clears 3:1 on Parchment and Paper and falls just short on Vellum, at 2.96:1. The Carbon block reaches it on none of the three: 2.1 to 2.5:1. The colon still reads as a pair, but on Vellum neither block alone would pass as a mark. On Ink both blocks clear 3:1.
Table 1. The six inks as grounds, with the contrast of text and of each block on each. The ratios are WCAG contrast, computed with the code Mantel uses for its palette, when the page was built. AA is the minimum level and AAA the higher one.
5Uwazi Design
Try it
- witness
- : W-14, name withheld
- date
- : 9 October 2020
- location
- : district 3
- status
- : verified
ground
Figure 2. The wordmark and a record on six grounds, with the contrast of each pair read live. Tap a ground, or try to swap the colon.
6Try it
The mark
- 1Seal, the block on top
- 2Carbon, the block below
- 3The gap between them: the colon
- 4The dark ground, Ink
Plate 1. The mark on a dark ground: two blocks, Seal above Carbon, the colon between a property and its value.
7Uwazi Design
The wordmark
- 1Seal, the colon’s top block
- 2Carbon, its bottom block
- 3The letters in Ink and a halftone grey
- 4The dot of the i, a square block again
Plate 2. The wordmark on the site’s pale ground, with the colon recoloured to the logo’s own pair. The letters are Ink and a halftone grey.
8The wordmark
From record to mark
Figure 3. One line of a record, with its colon enlarged. The colon is two blocks, Seal above Carbon: the mark.
- 1A record: a property, a colon, a value.
- 2The colon enlarged: Seal above Carbon, the mark.
9Uwazi Design
In short
On Ink, Vellum, Parchment and Paper the colon reads because it travels as a pair: on Vellum neither block alone reaches 3:1, and on Parchment and Paper only the Seal block does. On Seal and Carbon the mark is drawn in one ink.
The rest of the rebrand is in the case study: the wordmark, the art direction, and the website and platform in the new brand.
another notebook Railcar Management
10In short
