Look and assets

This page lists the colours, the type, the tone and the pictures of Tilde, and the rules for them. Read it before you add a page, a picture or a colour to the site or to the program.

Tilde is a black and white cat in a tuxedo that sits on a mailbox. Its tail is a mint tilde. It is small, calm, a little humorous and built from square pixels. The name is the home sign of the shell, so the site looks like a good terminal theme: dark, flat, monospace accents and one bright colour.

Colours

Dark is the identity. Light is paper with the same accents darkened, not an inversion. The tokens are in website/src/styles/theme.css.

Token	Dark	Light	Role
--td-black	#0b0d12	#f6f5ef	Page background
--td-navy-700	#10131b	#ecebe3	Navigation and sidebar
--td-navy-600	#151925	#e3e2d9	Cards and code blocks
--td-navy-500	#222838	#cfcfc5	Borders and inline code
--td-cream	#f8f5ec	#0b0d12	Headings and strong text
--td-mint	#4ade80	#146b37	Links, the current page, focus, the primary button, the tilde
--td-mint-low	#0f2a1c	#d5f0df	A tinted background behind mint
--td-mint-shadow	#229656	#0e4a28	The shaded part of the tilde
--td-slate	#8a96c2	#3e4766	Notes, the slate blue of the mailbox
--td-red	#e5484d	#b3261e	Danger only, the flag of the mailbox

• There is one bright colour on a screen, the mint. Red appears only for danger.
• Text on its background keeps a contrast of AA or better.
• The greys inside the cat belong to the picture and are not used as colours of the interface.

Type and shape

• System fonts only: the system sans for text, the system mono for headings, code and the terminal accents. No external font and no icon font.
• Square corners, borders of 1 pixel instead of shadows, a mint bar on the current page.
• Not used: gradients, shadows, rounded corners, external fonts, emoji as decoration, a second bright colour.

Tone

• Short sentences, in the present tense, one idea in a paragraph.
• Say what the reader does: “Run tcli check”, not “You may want to consider running”.
• In text of the repository I write in the first person. A page speaks to the reader as “you”.
• No exclamation marks, no marketing words, no jokes inside a procedure.
• Names are written as the program writes them, in lower case: tt, tcli, config.toml, keybind.lua.
• A page says only what the code does. What is not done yet carries the Planned aside, never a date.

The mascot and the mark

• mascot.png is 56 by 58 pixels and mark.png, the tilde, is 13 by 7.
• Scale them only by whole numbers (twice, three times) and always with image-rendering: pixelated. Never smooth, blur, rotate, outline, recolour or stretch them.
• Leave a clear space of four of the picture’s pixels around them. On a light background the picture keeps its colours.
• The mark can stand alone: in the header, as the favicon and as the blinking cursor after the home title, which stops with prefers-reduced-motion.
• The mascot is for the home page and the social image. It is not repeated on every page.

The chat sign

Tilde is mail and chat, so the pair of the mascot is a speech bubble that holds the same tilde as the mark. It is 21 by 14 pixels: an outlined bubble with a dark fill and its tail at the bottom left. It follows the rules of the mascot, with square corners and no smoothing, and the home page draws it at four times its size. It is used in the “Mail and chat” block of the home page and in the social image next to the mascot, and nowhere else.

Where each picture is used

Picture	Use
website/src/assets/mark.png	The logo in the header, next to the title and the version
website/public/favicon.png	The icon of the browser tab
website/public/mascot.png	The home page, at four times its size and five on wide screens
website/public/chat-sign.png	The “Mail and chat” block of the home page
website/public/social.png	The preview of a link, 1200 by 630: the mascot and the chat sign on the black of the page, Tilde and mail and chat in one terminal in the system mono
assets/mascot.png	The README of the repository, 1152 by 1152, never the site

Checklist for a page or a picture

1. Only colours from the table, and one bright colour.
2. Pixel art at a whole scale and not recoloured.
3. System fonts only.
4. Square corners and borders, no shadows and no gradients.
5. Text in the tone above, with no claim that the code does not back.

A test (website/tests/theme.test.mjs) checks that the theme defines every token with its value in both modes and has no gradient, shadow or rounded corner. See Write the documentation to run it.