Brand

This page sets out how the name, descriptions and logo of workclock are used, and where the brand files live. Use it when writing about the project, making an image for it, or placing the logo.

Name

workclock: one word, all lowercase, everywhere, including the start of a sentence, as in the README ("workclock ports the test suite…").

Write	Don't write
workclock, workclock's	WorkClock, Workclock, Work Clock, work-clock, WC
workclock (package, crate, module, import)	WorkClock

In code the name is workclock in every language: cargo add workclock, import workclock, import { Schedule } from "workclock". The only capitalised form is the error class WorkclockError, always in code font. The compatibility layer is workclock.compat, in code font. The project it replaces is businesstimedelta, lowercase, in code font only as an import.

Descriptions

Use these exactly. They come from the README and the package metadata.

Length	Text	Where
One line	Fast, correct business-time arithmetic for Rust, Python and JavaScript.	Browser title suffix, social cards, the hero
Short	Fast, correct business-time arithmetic (working hours, SLAs, shifts) for Rust, Python and JavaScript, and a maintained replacement for businesstimedelta, with a compatibility layer for existing code.	<meta name="description">, the GitHub repository description, the top of llms.txt
PyPI, npm	Fast, correct business-time arithmetic: working hours, SLAs and shifts	pyproject.toml, js/package.json
crates.io	Business-time arithmetic over working hours, breaks, holidays and time zones, including overnight shifts	crates/workclock/Cargo.toml

"Fast" and "correct" are allowed because the site links the proof beside them: benchmarks/RESULTS.md for "fast", the oracle tests and shared fixture for "correct". No other adjectives. Until 0.1.0 is published, any description shown with install commands is followed by the README's status line: "In development. No release has been published yet."

Logo

Concept "bars + amber dot" (decision log on Design System). The approved logo is three SVG files, mark.svg (light), mark-dark.svg (dark) and favicon.svg, whose geometry below is the reference. Never redraw the mark by eye; scale the SVG.

Mark

A clock face built from working time: a circle filled with horizontal bars, each a block of working hours, clipped by the circle so they read as a clock face from a distance and a timetable up close. One bar stops short, and an amber dot follows it after a gap: the due time, the instant add returns. Bars have rounded ends; the circle cuts the full bars, so only the short bar shows its rounded end.

Geometry of mark.svg and mark-dark.svg (viewBox="0 0 200 200"):

Part	Value
Clipping circle	Centre (100, 100), radius 96: 4 units of margin
Bars	6, each 22 high, end radius 11, 10 apart; tops at y = 9, 41, 73, 105, 137, 169
Full bars	x = 0 to 200, cut by the circle
Short bar	The fourth (y = 105 to 127), x = 0 to 138
Dot	Radius 11 (diameter = bar height), centre (160, 116) on the short bar's centre line; gap 11

Favicon

favicon.svg is the simplified mark for 16 and 32 px (viewBox="0 0 32 32"):

Part	Value
Clipping circle	Centre (16, 16), radius 15.5
Bars	4, each 5.5 high, end radius 2.75; tops at y = 1.5, 9.5, 17, 25
Short bar	The third, x = 0 to 20
Dot	Radius 2.9, centre (25.5, 19.75)

At 16 px each bar is 2.75 px tall, which is why the favicon has four bars. A <style> block inside the SVG switches to the dark colours under @media (prefers-color-scheme: dark), so one file serves light and dark tabs.

Colours

Version	Bars	Dot	Background
Light	text #0F1729	logo-dot #D98A00	bg #FFFFFF
Dark	text #E8ECF2	#FFB224	bg #0B0E14
One colour	text	Same as the bars	Any plain background

The light dot keeps the amber the owner picked, #D98A00; the site's light accent is the darker #C27C00, because interface markers need 3:1 and logos are exempt (Color has the ratios). So never use #D98A00 in the interface, and never recolour the logo's dot to #C27C00. In dark mode both are #FFB224. In Canva, type the hex values; never pick by eye. The one-colour version is for places that cannot show amber, such as single-colour print.

Wordmark

"workclock" in lowercase Instrument Sans 600, letter spacing −0.03em, in text. No amber.

Lockups

Lockup	Use	Proportions
Horizontal: mark, then wordmark	Site header, README, social cards	Site header: mark 24 px, wordmark 18 px, gap 10 px (owner's choice, 2026-10-24). Elsewhere Proposed: mark height = 1.25 × the wordmark's cap height; gap = 0.5 × mark height
Mark only	Square spaces: avatar, social card corner	mark.svg or mark-dark.svg as they are
Favicon	Browser tab	favicon.svg as it is

No lockup file has been exported yet; until one is, the header sets the wordmark as live text beside the mark SVG.

Don'ts

• Don't recolour the bars or make any bar amber; amber is only the dot.
• Don't change the number of bars, their spacing, or which bar is short.
• Don't join the dot to its bar or move it off the bar's centre line.
• Don't add gradients, shadows, glows, textures, outlines or a ring.
• Don't rotate, skew or stretch the mark, or add a second dot.
• Don't capitalise the wordmark or set it in another typeface.
• Don't place the logo on photos or busy backgrounds; use bg or surface.

Files

What	Where
Logo masters	mark.svg, mark-dark.svg, favicon.svg, held by the owner; website/assets/mark.svg (social images) and website/app/icon.svg (favicon) are in the repository
Logo files in the repository	website/public/brand/ (Proposed path)
Site icons and the site card	website/app/, with the Next.js metadata file names below
Canva	Folder "workclock brand": "Workclock logo concepts" (3 pages, the concepts shown) and "workclock logo system" (4 pages: light and dark lockups, mark, favicon at 32 px)

The Canva pages are drafts and differ from the SVG masters in detail (the Canva favicon draws a ring; the SVG has none). The SVG files win. To use the logo in a Canva design, upload the SVG master; don't copy the drafts.

Proposed files in website/public/brand/: mark.svg and mark-dark.svg (the masters, unchanged); mark-mono.svg, lockup-light.svg, lockup-dark.svg (not drawn yet); mark-light-512.png, mark-dark-512.png for places that do not take SVG. Before committing an SVG, check it opens in a browser and contains no embedded raster; in a lockup, outline the wordmark text.

Icons and social images

Next.js turns these files in website/app/ into <link> and <meta> tags at build time (app icons, Open Graph images).

File	Size	Content
icon.svg	Scalable	favicon.svg, unchanged
favicon.ico	16 and 32 px in one file	Rendered from favicon.svg, light colours
apple-icon.png	180 × 180	mark.svg on bg with clear space, no transparency
opengraph-image.png	1200 × 630, under 1 MB	The site card, made in Canva, used by the home page
opengraph-image.alt.txt	Text	"workclock: fast, correct business-time arithmetic for Rust, Python and JavaScript"

Docs pages get their own cards, drawn at build time with next/og. The GitHub social preview uses the Canva card's design at GitHub's recommended 1280 × 640 (GitHub docs); the owner uploads it in the repository settings. Card layouts are on Icons and Illustration; the build is on Website Tech Stack.

Voice

Plain, exact and calm: state what the library does, show it, link the proof. Writing Style has the rules.

Open items

• Proposed: lockup proportions; clear space of 2 × the dot's diameter around the mark or lockup; minimum sizes (six-bar mark at 24 px or more, the favicon below; lockup at 96 px wide or more, the mark only below); the website/public/brand/ file set.
• Export the lockups, the one-colour mark and the PNG copies.