A website you run yourself
nith is a website builder with forms and a leads board built in. Owners change their own pages, see everyone who gets in touch, and sell through Stripe.
This page explains why nith looks the way it does, then gives you the files.
Nothing is too hard
nith stands for nothing is too hard. Four small letters, always lowercase: it is a tool that sits beside a business’s own name, so it does not shout over it.
The logo is drawn, not typed. No font makes it.
nothing is too hard: n, i, t, h.
Drawn on a grid
The logo is 33 cells wide and 10 tall. Every stroke is two cells thick, so it stays sharp when a cell is one screen pixel.
The n and the h lose one cell at the shoulder. That cut is how a square letter turns a corner.
One red thing
The dot over the i is the only colour nith owns. In the product, red means something is waiting for you: Jot, nith’s assistant, turns its own dot red when it needs your press.
So red is never decoration, and it never moves unless it means that.
- nith
- Jot, at rest
- Jot, waiting for you
The smallest piece
For anything smaller than the logo there is the shoulder: the one cut corner every nith letter turns on, with the dot inside it. It is the smallest piece of the logo that is still nith.
Nothing is too hard. A corner is one cell taken away.
Three materials
Ink, Paper and Bone. They are warm so the page reads as made rather than default, and they have no hue so your own site’s colours are the only ones on screen beside the dot.
- Ink#0F0F0D16.6:1 with Paper
- Paper#F1EEE616.6:1 with Ink
- Bone#D8D3C612.8:1 with Ink
- Fog#A8A49A7.7:1 on Ink
- Signal#E53A354.6:1 on Ink
- Signal on paper#C923234.8:1 on Paper
Words and values
Fira Sans for headings, Noto Sans for reading. Anything that is a value, such as an address, a price or a size, is set in IBM Plex Mono, and labels are its capitals.
Pills are the only round thing, because a pill is the one thing you press.
Fira Sans 400, 500
Owners change their own pages
Noto Sans 400
They see everyone who gets in touch, and nothing goes live until they press Publish.
IBM Plex Mono 400, 500
halden.nith.app/classes$24.00264 x 80
Download SVG
The pill
All three are open fonts, under the SIL Open Font License 1.1.
Showing the change
nith shows a change the way an editor does: the old line struck out, the new line added.
Lists are ruled like a ledger, because they are records, not cards.
- slash
- minus
- plus
- dot
- check
halden.nith.app/classes
It happens once
The logo assembles once when you arrive, and travels to the header once when you scroll. Nothing loops.
If you ask your device for less motion, you get the finished logo.
The files
The logo, the symbol and a few pictures of nith working. Each one downloads as it is.
Logo, symbol and app icon
- nith-wordmark-ink.svgInk letters, for Paper and Bone33 x 10, scales758 BDownload SVG
- nith-wordmark-paper.svgPaper letters, for Ink33 x 10, scales758 BDownload SVG
- nith-wordmark-mono.svgOne colour, dot included, for print33 x 10, scales758 BDownload SVG
- nith-wordmark-ink-264.pngInk letters, no background264 x 80584 BDownload PNG
- nith-wordmark-ink-528.pngInk letters, no background528 x 1601.7 KBDownload PNG
- nith-wordmark-paper-264.pngPaper letters, no background264 x 80585 BDownload PNG
- nith-wordmark-paper-528.pngPaper letters, no background528 x 1601.7 KBDownload PNG
- nith-symbol-ink.svgSymbol, Ink strokes, for Paper and Bone10 x 10, scales351 BDownload SVG
- nith-symbol-paper.svgSymbol, Paper strokes, for Ink10 x 10, scales351 BDownload SVG
- nith-symbol-mono.svgSymbol, one colour, dot included, for print10 x 10, scales351 BDownload SVG
- nith-symbol-ink-40.pngSymbol, Ink strokes, no background40 x 40153 BDownload PNG
- nith-symbol-ink-120.pngSymbol, Ink strokes, no background120 x 120344 BDownload PNG
- nith-symbol-ink-400.pngSymbol, Ink strokes, no background400 x 4002.0 KBDownload PNG
- nith-symbol-paper-40.pngSymbol, Paper strokes, no background40 x 40154 BDownload PNG
- nith-symbol-paper-120.pngSymbol, Paper strokes, no background120 x 120345 BDownload PNG
- nith-symbol-paper-400.pngSymbol, Paper strokes, no background400 x 4002.0 KBDownload PNG
- nith-icon.svgApp icon: the symbol on an Ink square512 x 512, scales401 BDownload SVG
- nith-icon-16.pngApp icon, Ink square16 x 16134 BDownload PNG
- nith-icon-32.pngApp icon, Ink square32 x 32150 BDownload PNG
- nith-icon-48.pngApp icon, Ink square48 x 48177 BDownload PNG
- nith-icon-180.pngApp icon, Ink square180 x 180510 BDownload PNG
- nith-icon-192.pngApp icon, Ink square, with room for a round crop192 x 192540 BDownload PNG
- nith-icon-512.pngApp icon, Ink square512 x 5122.3 KBDownload PNG
Sizes
The logo at every size it is drawn for, in true pixels. For anything smaller there is the symbol, at 10, 20, 30 and 40.
66 x 202px a cellThe smallest
99 x 303px a cellThe header
132 x 404px a cell
198 x 606px a cell
264 x 808px a cell
396 x 12012px a cell
528 x 16016px a cell
- 10203040On Ink
- 10203040On Paper
- 10203040On Bone
- 16
- 32
- 180
16, at 8x
Using the logo
- Lowercase, always. Never a capital N, even at the start of a sentence.
- Do not stretch, tilt, outline, round or shadow it, or fill it with a gradient.
- Its cells land on whole pixels. Use a size from the ladder, not a height chosen by eye.
- Below 66 x 20, use the symbol.
- The symbol needs no square behind it. Only browser tabs and phones put it on Ink.
- Use the logo or the symbol, not both side by side.
- Never typeset the name as a logo. The logo is drawn; in a sentence, nith is a word.
- The dot is signal red, or the same ink as the letters. Nothing else.
- Do not put it on a photo without an Ink, Paper or Bone field behind it.
- Do not blink or pulse the dot. Red that changes means Jot is waiting.
- Keep three cells clear on every side.
Pictures of nith
Halden Bakehouse is an invented business, set up on nith for these pictures.
What you can do with them
- You can use these files to write about nith, link to nith, or show that your site runs on nith.
- Do not change the logo, make it your own logo, or use it in a way that suggests nith endorses you.
- Do not present Halden Bakehouse as a real business.
- nith can withdraw this permission.
Writing about nith? Get in touch.
We are taking on new customers by introduction.
Tell us about your business, or about the sites you run for clients, and we will come back to you.