Icons and Illustration

This page sets which icons the website uses and how, why languages are named in text instead of shown as logos, how diagrams of working time are drawn, and how social images are made. Use it before adding an icon, a diagram or an image.

Icons

The set

Lucide, through lucide-react (ISC licence). It is already a dependency of fumadocs-ui ("lucide-react": "^1.61.0" in 16.17.8), so Fumadocs' icons and ours come from one set and the site adds no package. In lucide-react 1.x (version 1) brand icons were removed (Fumadocs draws the GitHub mark itself when the layout has a githubUrl), and icons are aria-hidden="true" by default.

Size, stroke and colour

Property	Value
Sizes	16 px inline and in controls (buttons, callouts, menus, breadcrumb); 20 px in the header. No others.
Stroke	1.5 on Lucide's 24-unit grid (Lucide's default is 2, stroke width): a 1 px line at 16 px, matching the site's hairlines. No absoluteStrokeWidth.
Colour	currentColor: text-2 normally, text on hover or when active. Never amber.
Alignment	Centred on the text; 8 px gap to the label (6 px in 13 px buttons).

The stroke is set once with LucideProvider strokeWidth={1.5} in components/provider.tsx (Website Tech Stack). LucideProvider (lucide-react 1.61.0, dist/esm/context.mjs) sets defaults for every icon below it. Check in the first build that Fumadocs' icons pick it up too: they do if npm ls lucide-react shows one copy.

Which icon for what

Use these and no others without updating this table. Every name exists in lucide-react 1.61.0.

Meaning	Lucide name	Where
Search	Search	Header search trigger
Copy, copied	Clipboard, Check	Code blocks and the install block (Fumadocs' code block)
Copy page, copied	Copy, Check	"Copy page" (Fumadocs' MarkdownCopyButton)
Opens a menu	ChevronDown	"Open" page action
Breadcrumb separator, next	ChevronRight	Breadcrumb, Next card, end of a long week strip
Previous	ChevronLeft	Previous card
Leaves the site	ExternalLink	External sidebar links, "Open in Claude", "Open in ChatGPT"
Markdown version	FileText	"View as Markdown"
Light, dark, system	Sun, Moon, Monitor	Theme toggle
Menu, close	Menu, X	Mobile header, dialogs
Note, warning, danger	Info, TriangleAlert, CircleX	Callouts (Fumadocs' defaults)
Heading link, link copied	Link, CopyCheck	Fumadocs heading anchors

Rules

• An icon never stands alone without a name. An icon-only button has an aria-label ("Switch to dark theme"); the icon stays hidden.
• Icons are never amber (Color).
• No icons in the sidebar, on headings, or next to paragraphs, list items or card titles. Leave Fumadocs' icon field in front matter and meta.json empty.
• If Lucide has no fitting icon, use a word. Don't draw a new one.

Languages and other marks are named in text

Every language, tool and service is named in text. The site shows two logos only: its own, and the GitHub mark as the link to the repository. The owners' rules, which text labels avoid:

Mark	What its owner's rules say	Source
Rust	The word may be used without approval for software written in or compatible with Rust. Logo use "is also governed by trademark", and nothing may appear "official, affiliated or endorsed".	Rust trademark policy
Python	The word or unaltered logos may show compatibility, but the logo needs trademark symbols and sometimes an attribution statement.	PSF trademark policy
TypeScript	"Please Don't" use the logos for your application or product.	TypeScript branding
GitHub	"Use the Invertocat logo as a social button to link to your GitHub profile or project", unmodified, black or white.	GitHub logo guidelines
Claude, ChatGPT	Named in text in the page actions (Components). Fumadocs' default menu shows their logos; ours does not.

Text labels also read the same to screen readers and agents, and fit the monochrome direction. This is not a legal opinion; if logos are wanted later, read each policy again then.

Diagrams

The house diagram: the week strip

Working time is shown one way across the site: the week strip, days as rows and hours across, with work bars, the used fill, hatched holidays and one amber due marker. Its spec is on Components.

Proposed placements, using Docs Site Structure pages:

Page	Diagram
Landing page	Interactive week strip, the README scenario
Concepts: Schedules	Compact: a work day minus a break gives two periods
Concepts: Rules	Week strip: a holiday hatched across a working day
Concepts: Adding time	Week strip: the README scenario, 8 hours added
Concepts: Measuring time	Compact: between(a, b) as a bracket over counted time
Concepts: Periods	Compact: next_period(t) inside and before a period
Concepts: Time zones and DST	Compact: a 22:00–06:00 shift on the night clocks change, 7 hours not 8 (DESIGN.md D1)
Guides: Overnight shifts	Week strip: 22:00–06:00 shifts crossing midnight
Playground	Interactive week strip, every input

How diagrams are drawn

• From the library. Every period, due instant and counted time comes from workclock. Never draw a bar from a number typed into the page.
• In the page, themed. HTML and CSS (or inline SVG) using the token variables, so light and dark both work. No PNG or JPEG diagrams.
• Flat and thin. Fills work, used, surface; lines 1 px rule, hatching rule-strong; bars radius 4. No gradients, shadows, 3D, textures or glows.
• Type. Labels Instrument Sans 12–13 px, times JetBrains Mono 12 px, tabular figures, text-2. Times are 24-hour in the schedule's zone, named in the caption (Writing Style).
• One amber mark. The due marker and its label only. A diagram without a due instant has no amber.
• A text alternative. role="img", an aria-label sentence built from the same data, and a caption (Accessibility).
• Not used: stock photos, people or offices, clock faces (the logo is the only one), calendars drawn as pages, emoji, screenshots of code or terminals.

Social images

The picture a link shows when shared: 1200 × 630 px PNG, the Open Graph size and Next.js' default for ImageResponse (ImageResponse).

Card	Made with	Used for
Site card	Canva, folder "workclock brand" (Brand); committed as website/app/opengraph-image.png	The home page; also the GitHub social preview, at 1280 × 640
Per-page cards	next/og at build time, from each docs page's front matter (Website Tech Stack)	Every docs page

Rules for every social image:

• Same tokens, type and amber rule as the site. No photos, gradients or shadows.
• Text at least 24 px, readable in a small preview.
• In Canva, type the hex values from Color; never pick colours by eye. Check Canva offers Instrument Sans first; if not, the owner decides how to proceed (no substitute typeface).
• Export at exactly 1200 × 630 (1280 × 640 for GitHub), under 1 MB, and open the file afterwards to check.

Proposed site card layout:

Part	Spec
Background, margins	bg #FFFFFF; 80 px on every side, nothing outside
Top left	Horizontal lockup, mark 72 px tall
Middle	"Fast, correct business-time arithmetic for Rust, Python and JavaScript." Instrument Sans 600, 56 px, −0.03em, text #0F1729, at most two lines
Bottom	Two week-strip rows of the README scenario (Tue 29 and Wed 30 December), due marker accent #C27C00, label "Due Wed 30 Dec, 09:30" in accent-text #8F5A00
Bottom right	workclock.karthik.nz, Instrument Sans 400, 24 px, text-2 #4A5363
Alt text	opengraph-image.alt.txt (Brand)

Proposed per-page card layout, on the same grid:

Part	Spec
Top left	Horizontal lockup, mark 48 px tall
Middle	Section name ("Concepts"), 28 px, text-2; page title, Instrument Sans 600, 64 px, −0.03em, text, at most two lines
Bottom right	The page path, workclock.karthik.nz/docs/…, 24 px, text-2

No week strip and no amber on per-page cards except the logo dot.

Open items

• Proposed: diagram placements; the compact one-row variant of the week strip. The per-page card layout is approved (decision log on Design System); the site card is the approved Canva card.
• Confirm that Canva offers Instrument Sans before making the site card.