Logo Guidelines

Logo guidelines

This page explains the fiscalclock logo: what the [ ) symbol means, which version to use where, how much space and size it needs, its colours, the app icons, and what not to do with it.

Last reviewed: 1 Nov 2026

What this is and why it matters

A logo is only recognisable if it looks the same everywhere, so these rules fix its shape, colours, spacing and smallest sizes. The logo files are generated by a script from exact geometry and the design tokens, which means nobody has to redraw them and they cannot drift from the colour palette (DD-023). If you need the logo, take a file from assets/brand/logo/; never recreate it.

The symbol and its meaning

The symbol is [ ), the notation for a half-open interval: every fiscalclock period runs from start (included) to end_exclusive (excluded) (ADR-0007; Brand-Foundation).

Part	Shape	Meaning	Colour role
Left	Closed square bracket [	The start date is included.	Ink (color.logo.ink)
Right	Open parenthesis )	The end date is excluded.	Accent (color.logo.open-end), because the excluded end is the detail that matters (Phase 3 sketches)

Geometry (DD-021; build_brand_assets.py):

• Master drawing, for 24 px and larger: the bracket is straight lines on a 64-unit grid with an 8-unit stroke. The parenthesis is the band between two half-ellipses, cut flat at the bracket's height, so its stroke tapers from about 8.3 to 6.9 units like a typeset parenthesis. The drawn symbol is 42 units wide and 52 units tall.
• Small drawing, for 16 to 23 px: a separate 16-unit drawing with 2 px strokes on whole pixels, so the symbol stays sharp at favicon size.

Variants

Three forms, each in four colour versions.

Form	What it is	Use it for
Lockup	The symbol and the wordmark side by side	The default: README banner, social cards, slides, the website header
Symbol	The [ ) alone, in the master and the small drawing	Small spaces: favicons, app icons, avatars, and wherever the lockup would be under its minimum width
Wordmark	"fiscalclock" alone, in IBM Plex Sans SemiBold, converted to outlines	Only where the symbol is already shown nearby, or cannot be shown

Colour version	File suffix	Colours	Use on
Colour, light	none	ink #1a1a19, open end #0b6b69	Light backgrounds
Colour, dark	-dark	ink #ececea, open end #5cc6be	Dark backgrounds
One colour	-mono	#1a1a19 for both parts (palette.neutral.900)	Light backgrounds where only one colour can be printed or shown
White	-mono-white	#ffffff for both parts (palette.neutral.0)	Dark or coloured backgrounds where only one colour can be shown

Colours

The logo uses two semantic tokens; their values come from the token build (tokens.light.json, tokens.dark.json).

Token	Light theme	Dark theme	Contrast on color.bg.default (light / dark)
color.logo.ink	#1a1a19	#ececea	17.11:1 / 15.83:1
color.logo.open-end	#0b6b69	#5cc6be	6.21:1 / 9.16:1

WCAG exempts logos from contrast requirements, but both colours are checked anyway on every token build (contrast report). The same colours used for text, links or diagrams are not exempt; see Accessibility.

Lockup proportions

Proportions are given in em, where 1 em is the wordmark's font size (DD-022; constants BRACKET_EM, BELOW_EM, GAP_EM and WM_TRACK in build_brand_assets.py).

Measure	Value	Note
Bracket height	0.82 em	The full height of the lockup.
Overhang	0.04 em above the ascenders and 0.04 em below the baseline	The ascenders of f, l and k reach 0.74 em.
Gap from symbol to wordmark	0.28 em
Wordmark typeface	IBM Plex Sans SemiBold (weight 600)	Converted to outlines, so no file needs the font installed.
Tracking	-10 font units per letter, which is -0.01 em	IBM Plex Sans has 1,000 units per em: the wordmark SVG, drawn at 100 px, scales every glyph by 0.1.
Bracket stroke	0.126 em	A little heavier than the letters' stems (about 0.108 em), so the symbol has presence without dominating.
Shape	578.53 × 82 units at a 100 px font size, about 7.06 : 1	From the width and height of fiscalclock-lockup.svg.

Clear space

Clear space is the empty margin kept around the logo so that nothing crowds it.

Rule	Value	Basis
Clear space on every side of the lockup or the symbol	Half the height of the symbol, measured from the drawn shapes, not the file's edges	The lockup PNG exports are padded by exactly this amount (pad_png in build_brand_assets.py).
What may sit inside it	Nothing: no text, edges, other logos or busy background

Minimum sizes

Item	Minimum	Below the minimum	Status
Symbol, master drawing	24 px tall	Use the small drawing	Decided (DD-021)
Symbol, small drawing	16 px tall (used from 16 to 23 px)	No drawing exists below 16 px; the 16 px favicon.ico layer is the smallest	Decided (DD-021)
Lockup on screen	24 px tall, about 170 px wide	Use the symbol alone	Decided (DD-026)
Lockup in print	30 mm wide	Use the symbol alone	Decided (DD-026)

Why 24 px: the lockup always uses the master drawing of the symbol, which is drawn for 24 px and larger (DD-021). From the lockup's shape (7.06 : 1, and 5.79 em wide), a 24 px tall lockup is about 170 px wide, with the wordmark set at about 29 px. At 30 mm wide in print, the wordmark is set at about 5.2 mm.

Favicon and app icons

Where the colour behind an icon is unknown (app icons, favicon.ico, docs.rs, package registries), the symbol sits on a dark tile in the dark-theme logo colours: tile #1a1a19 (the dark theme's color.bg.subtle), ink #ececea, open end #5cc6be. A tile reads on light and dark surfaces alike, and docs.rs gives custom logos no help in its dark themes (DD-024; asset research).

File	Size	Drawing and background
favicon.svg	16 × 16, scalable	Small drawing, transparent; switches between light and dark logo colours with prefers-color-scheme. Browser vendors do not document whether this media query is honoured inside an SVG favicon, so treat the switch as an enhancement and test it (asset research).
favicon.ico	16, 32 and 48 px in one file	Dark tile. The 16 px layer has its own pixel-fitted drawing, 12 px tall with 2 px strokes.
icon-192.png, icon-512.png	192 and 512 px	Rounded dark tile from icon-tile.svg (corner radius 112 of 512); transparent outside the tile.
icon-maskable-512.png	512 px	Full-bleed dark square from icon-maskable.svg; the symbol sits inside the central safe zone, a circle with a radius of 40 % of the icon size (web.dev).
apple-touch-icon.png	180 px	Full-bleed dark square, rendered from icon-maskable.svg.
docsrs-logo.svg	64 units, shown at 48 CSS px on docs.rs	Rounded dark tile (corner radius 14 of 64).

Misuse

Don't	Why	Shown above
Swap the colours	The accent belongs on the open end, the part that carries the meaning.	Yes
Stretch, squash or change the proportions	The geometry is exact; distorting it changes the stroke weights.	Yes
Rotate or tilt it	[ ) is notation and reads left to right.	Yes
Use colours outside the palette	Only the token colours above, or the one-colour and white versions.	Yes
Place it on a busy background (patterns, photos)	It must sit on a plain surface; use a token background colour.	Yes
Add effects: shadows, glows, outlines, gradients, bevels	The system has no shadows (DD-019) and avoids glows and gradients (research brief).	Yes (shadow)
Retype the wordmark in any font, or capitalise it	The wordmark is IBM Plex Sans outlines with set tracking; text typed in an editor such as Canva cannot match it (DD-023).	No
Use the master drawing below 24 px	The small drawing exists to keep the symbol legible at 16 to 23 px (DD-021).	No
Put anything inside the clear space	See Clear space.	No

Files and how they are made

Every logo file is in assets/brand/logo/; icons are in assets/brand/icons/. The Asset-Inventory lists every brand file.

File pattern	Contents
fiscalclock-lockup{,-dark,-mono,-mono-white}.svg	Lockup, four colour versions
fiscalclock-lockup.png, fiscalclock-lockup-dark.png	Lockup, 960 px wide plus clear space (1096 × 272 px), on an opaque #fdfdfc or #121212 background
fiscalclock-symbol{,-dark,-mono,-mono-white}.svg	Symbol, master drawing (64 × 64)
fiscalclock-symbol-small{,-dark,-mono,-mono-white}.svg	Symbol, small drawing (16 × 16)
fiscalclock-symbol-512.png, fiscalclock-symbol-dark-512.png	Symbol, 512 px, transparent background
fiscalclock-wordmark{,-dark,-mono,-mono-white}.svg	Wordmark, four colour versions

The generated SVG files are the masters. Never redraw, trace or adjust the logo by eye. To change it, change the geometry or the tokens and rebuild (DD-023):

python design/scripts/build_brand_assets.py --font "path/to/IBMPlexSans[wdth,wght].ttf"
python -I design/scripts/check_brand.py

The build needs the Python packages in requirements-brand.txt, the IBM Plex Sans variable font (the script checks its SHA-256) and Inkscape 1.4, which renders every PNG. check_brand.py fails if any SVG uses a colour that is not in the palette. Every SVG carries role="img" and the title "fiscalclock"; when you place the logo as an image, its alt text is "fiscalclock".

Open questions

• Terms for using the logo outside this project (for example in articles or by integrators) are not decided. Until they are, ask the maintainer.

Links

• assets/brand/logo/ and build_brand_assets.py
• Design-Decisions: DD-013 and DD-021 to DD-024
• Brand-Foundation, Colour-System, Asset-Inventory
• Design-Glossary for lockup, wordmark, clear space and other terms