Asset Inventory

This page lists every brand file in assets/brand/ and every design illustration on the wiki, with its size, format, theme variant, where to use it and the platform rule behind it, plus the markup to use the files and the steps to rebuild them.

Last reviewed: 1 Nov 2026

What this is and why it matters

A brand asset is a ready-made file, such as a logo, a browser-tab icon or the picture shown when a link is shared. Each platform (GitHub, docs.rs, browsers, social sites) wants a different size or format, so the same logo exists as many files. This page says which file goes where and why, so nobody has to resize a logo by hand, and every file can be regenerated from the script and the design tokens.

All files were measured from disk on 1 Nov 2026. Every SVG and PNG in assets/brand/ is generated by build_brand_assets.py and must not be edited by hand (DD-023 in DECISIONS.md). Links point to main and resolve once the design-foundation branch is merged.

Terms used on this page

Term	Meaning
symbol	The `[ )` mark on its own.
wordmark	The name "fiscalclock" set in IBM Plex Sans SemiBold, converted to outlines.
lockup	Symbol and wordmark together in fixed proportions (DD-022).
small drawing	A separate 16-unit drawing of the symbol with 2 px strokes, for 16 to 23 px (DD-021).
tile	The symbol on a filled dark square, for places where the background colour is unknown (DD-024).
`viewBox`	An SVG's own coordinate box. SVGs scale to any size; the `viewBox` gives their proportions.
favicon	The small icon in a browser tab and bookmark list.
maskable icon	An app icon that a phone may crop to a circle or rounded square; its content must sit inside a central safe zone.
Open Graph (OG) image	The picture shown when a link is shared on social sites and chat apps.
outlines	Text converted to shapes, so the file needs no installed font.

Logo files: `assets/brand/logo/`

Colour variants use color.logo.ink and color.logo.open-end from the token build (#1a1a19 and #0b6b69 for light backgrounds, #ececea and #5cc6be for dark). One-colour variants use #1a1a19 (-mono) or #ffffff (-mono-white). Rules for using the logo are on Logo-Guidelines.

File	Size	Format	Variant	Use it for
`fiscalclock-lockup.svg`	`viewBox` 578.53 × 82	SVG, transparent	Colour, light backgrounds	Website header, documents
`fiscalclock-lockup-dark.svg`	`viewBox` 578.53 × 82	SVG, transparent	Colour, dark backgrounds	Website header in the dark theme
`fiscalclock-lockup-mono.svg`	`viewBox` 578.53 × 82	SVG, transparent	One colour, light backgrounds	Single-colour printing, embossing
`fiscalclock-lockup-mono-white.svg`	`viewBox` 578.53 × 82	SVG, transparent	White, dark or photo backgrounds	Single-colour use on dark
`fiscalclock-lockup.png`	1096 × 272 px	PNG, opaque `#fdfdfc` background, clear space included	Colour, light	Places that accept no SVG: the GitHub wiki, slides, documents
`fiscalclock-lockup-dark.png`	1096 × 272 px	PNG, opaque `#121212` background, clear space included	Colour, dark	As above, on dark pages
`fiscalclock-symbol.svg`	`viewBox` 64 × 64	SVG, transparent	Colour, light	Symbol at 24 px and larger
`fiscalclock-symbol-dark.svg`	`viewBox` 64 × 64	SVG, transparent	Colour, dark	Symbol at 24 px and larger on dark
`fiscalclock-symbol-mono.svg`	`viewBox` 64 × 64	SVG, transparent	One colour, light	Single-colour use
`fiscalclock-symbol-mono-white.svg`	`viewBox` 64 × 64	SVG, transparent	White	Single-colour use on dark
`fiscalclock-symbol-512.png`	512 × 512 px	PNG, transparent	Colour, light	Raster symbol where SVG is not accepted, such as an avatar
`fiscalclock-symbol-dark-512.png`	512 × 512 px	PNG, transparent	Colour, dark	As above, on dark
`fiscalclock-symbol-small.svg`	`viewBox` 16 × 16	SVG, transparent	Colour, light	Symbol at 16 to 23 px
`fiscalclock-symbol-small-dark.svg`	`viewBox` 16 × 16	SVG, transparent	Colour, dark	Symbol at 16 to 23 px on dark
`fiscalclock-symbol-small-mono.svg`	`viewBox` 16 × 16	SVG, transparent	One colour, light	Small single-colour use
`fiscalclock-symbol-small-mono-white.svg`	`viewBox` 16 × 16	SVG, transparent	White	Small single-colour use on dark
`fiscalclock-wordmark.svg`	`viewBox` 484.3 × 76	SVG, transparent	Light	Only where the symbol is already shown nearby, or cannot be shown (Logo-Guidelines)
`fiscalclock-wordmark-dark.svg`	`viewBox` 484.3 × 76	SVG, transparent	Dark	As above, on dark
`fiscalclock-wordmark-mono.svg`	`viewBox` 484.3 × 76	SVG, transparent	One colour, light	As above, one colour
`fiscalclock-wordmark-mono-white.svg`	`viewBox` 484.3 × 76	SVG, transparent	White	As above, white

The light and dark logo SVGs carry fixed colours; they do not switch with the theme. Use them in pairs (see README banner markup).

Icons: `assets/brand/icons/`

File	Size	Format	Variant	Use it for
`favicon.svg`	`viewBox` 16 × 16	SVG, transparent, small drawing	Switches colours with `prefers-color-scheme`	Browser tab icon on the website
`favicon.ico`	16, 32 and 48 px layers	ICO, dark tile	One file for both themes; the 16 px layer uses its own pixel-fitted drawing	`/favicon.ico` at the site root; docs.rs `html_favicon_url`; browsers without SVG favicons
`apple-touch-icon.png`	180 × 180 px	PNG, opaque, full-bleed dark tile	One	iOS home screen; Google Search favicon
`icon-192.png`	192 × 192 px	PNG, rounded dark tile, transparent corners	One	Web app manifest, `purpose: "any"`
`icon-512.png`	512 × 512 px	PNG, rounded dark tile, transparent corners	One	Web app manifest, `purpose: "any"`
`icon-maskable-512.png`	512 × 512 px	PNG, opaque, full-bleed dark tile	One	Web app manifest, `purpose: "maskable"`
`docsrs-logo.svg`	`viewBox` 64 × 64	SVG, rounded dark tile (corner radius 14)	One	docs.rs `html_logo_url`
`icon-tile.svg`	`viewBox` 512 × 512	SVG, rounded dark tile (corner radius 112)	One	Source of `icon-192.png`, `icon-512.png` and the 32 and 48 px `favicon.ico` layers
`icon-maskable.svg`	`viewBox` 512 × 512	SVG, full-bleed dark tile	One	Source of `icon-maskable-512.png` and `apple-touch-icon.png`

The tile colour is #1a1a19 (color.bg.subtle of the dark theme) with the dark-theme logo colours, so it reads on light and dark surfaces alike (DD-024).

Maskable safe zone, checked from the drawing code: the symbol occupies a centred box of 176 × 217.9 px in the 512 px canvas, whose corners are about 140 px from the centre, inside the 204.8 px radius (40 % of 512) that the Web App Manifest and web.dev define.

README banner: `assets/brand/readme/`

File	Size	Format	Variant	Use it for
`readme-banner-light.svg`	`viewBox` 840 × 150	SVG, text as outlines, `#fdfdfc` background	Light	GitHub README in the light theme
`readme-banner-dark.svg`	`viewBox` 840 × 150	SVG, text as outlines, `#121212` background	Dark	GitHub README in the dark theme
`readme-banner.png`	1680 × 300 px (2× the SVG)	PNG, opaque `#fdfdfc` background	Light; the fallback everywhere	The `<img>` inside `<picture>`; what PyPI and npm show; the wiki

Content: the lockup and the line "Fiscal calendar engine: compute any fiscal calendar from a JSON definition." (DD-025). The repository's README opens with the banner, using the markup below with main as the ref; that README is shown only on GitHub, because each package publishes its own. The package READMEs do not use the banner yet.

Social cards: `assets/brand/social/`

Social cards are opaque and light: they appear inside other sites' themes, which fiscalclock does not control, so there is no dark pair (asset specs, section 2). The cards show an illustrative year strip of NRF 4-5-4 fiscal 2023, labelled as an example on the card.

File	Size	Format	Use it for
`og-image.png`	1200 × 630 px, 87,112 bytes	PNG, opaque	Website `og:image` and `twitter:image`
`og-image.svg`	`viewBox` 1200 × 630	SVG	Source of `og-image.png`; not for direct use (X does not accept SVG)
`github-social-preview.png`	1280 × 640 px, 87,832 bytes	PNG, opaque	GitHub repository social preview (upload by hand, see Manual steps)
`github-social-preview.svg`	`viewBox` 1280 × 640	SVG	Source of the PNG
`og-template-background.png`	2400 × 1260 px (2× of 1200 × 630)	PNG, opaque	Background of the Canva template
`og-template-background.svg`	`viewBox` 1200 × 630	SVG	The card without its headline; source of the PNG

The folder also holds README.md at assets/brand/README.md, which summarises the folders and points here.

Platform requirements behind each size

All checked on 1 Nov 2026 in asset-specs.md, which has the full notes.

Platform	Requirement (as of 1 Nov 2026)	Our file	Source
GitHub social preview	PNG, JPG or GIF under 1 MB; at least 640 × 320 px, 1280 × 640 px for best display; solid background recommended	`github-social-preview.png`	GitHub Docs
Open Graph	No size given; set `og:image:width`, `og:image:height`, `og:image:type` and `og:image:alt`	`og-image.png`	ogp.me
Facebook	At least 1200 × 630 px; as close to 1.91:1 as possible; 8 MB maximum	`og-image.png`	Meta
LinkedIn	At least 1200 × 627 px, ratio 1.91:1, 5 MB maximum	`og-image.png`	LinkedIn Help
X `summary_large_image`	2:1, at least 300 × 157 px, under 5 MB, no SVG. The card documentation is no longer published; these are the last published rules, from an archived copy of 31 May 2025. `og-image.png` is about 5 % short of 2:1, so X may crop slightly.	`og-image.png`	Archived X card page
Browser favicon	`sizes` must list only sizes the file contains; `any` for scalable files; without any icon link a browser may fetch `/favicon.ico`	`favicon.ico`, `favicon.svg`	HTML Standard, `rel="icon"`
SVG favicons	Supported in Chrome and Edge 80+, Firefox 41+, Safari 26+	`favicon.svg`	Can I use
Google Search favicon	Square, larger than 48 × 48 px recommended; SVG not accepted; reads `icon` and `apple-touch-icon`	`apple-touch-icon.png`, `favicon.ico`	Google Search Central
Apple touch icon	`apple-touch-icon.png` at the root or a `link`; 180 × 180 is the largest size in Apple's examples, not a stated requirement	`apple-touch-icon.png`	Apple (archived documentation)
Web app manifest	Chrome's install prompt needs a 192 px and a 512 px icon; maskable safe zone is a centred circle of radius 40 %; do not mark one file as both `any` and `maskable`	`icon-192.png`, `icon-512.png`, `icon-maskable-512.png`	web.dev install criteria, W3C Web App Manifest, web.dev maskable icons
docs.rs	`html_logo_url` and `html_favicon_url` take one URL each; no size rule. The sidebar logo was observed at 48 × 48 CSS px and the mobile bar at 35 × 35 px; custom logos get no help on dark themes	`docsrs-logo.svg`, `favicon.ico`	rustdoc book; observations in asset specs, section 5
GitHub README	`<picture>` is supported; images scale down to the column but not up (column observed at 838 CSS px); SVG shown through `<img>` cannot load web fonts, so text is outlined	`readme-banner-*.svg`, `readme-banner.png`	GitHub Docs, GitHub changelog, MDN
crates.io	No logo field; README sanitiser allows `picture` and `source`	`readme-banner-*`	Cargo manifest reference, crates.io Markdown code
PyPI	No logo field; the README renderer allows `picture` and `img` but not `source`, so only the fallback `<img>` shows (derived from the code, not tested by upload)	`readme-banner.png`	readme_renderer
npm	No logo field; README rendered as GitHub Flavored Markdown; npm wraps each `<img>` in a link, which breaks `<picture>`, so the fallback always shows (observed)	`readme-banner.png`	npm Docs; observation in asset specs, section 7
GitHub wiki	Displays PNG, JPEG and GIF; SVG not listed	`fiscalclock-lockup.png`, `readme-banner.png`, wiki illustrations	GitHub Docs

Markup

No website exists yet (DD-009), so the paths below assume the icon files are copied to the site root when it is built.

Favicon and app icon tags

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The manifest line is needed only if the site should be installable as an app. No site.webmanifest file exists in the repository yet.

Web app manifest `icons`

{
  "name": "fiscalclock",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Open Graph and X tags

<meta property="og:image" content="https://<site>/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="fiscalclock: fiscal years, quarters, periods and weeks from one JSON definition. Rust, Python and JavaScript, with byte-identical results.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="fiscalclock: fiscal years, quarters, periods and weeks from one JSON definition. Rust, Python and JavaScript, with byte-identical results.">

README banner (`<picture>` element)

Use absolute URLs: the same README is published to crates.io, PyPI and npm, which do not resolve repository-relative paths the same way (asset specs, section 4). The <img> must be the last child of <picture>, after the <source> elements (HTML Standard). Replace <ref> with a release tag for published READMEs, so an old release keeps its own banner.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Karthik-beta/fiscalclock/<ref>/assets/brand/readme/readme-banner-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Karthik-beta/fiscalclock/<ref>/assets/brand/readme/readme-banner-light.svg">
  <img alt="fiscalclock: fiscal calendar engine. Compute any fiscal calendar from a JSON definition." src="https://raw.githubusercontent.com/Karthik-beta/fiscalclock/<ref>/assets/brand/readme/readme-banner.png" width="840">
</picture>

Do not use the #gh-dark-mode-only and #gh-light-mode-only URL suffixes: current GitHub Docs do not mention them, and crates.io, PyPI and npm would show both images (asset specs, section 4).

rustdoc attributes for docs.rs

Add to the top of crates/core/src/lib.rs (not done yet). Point at a tag that contains the files, so old documentation does not change when the files do:

#![doc(html_logo_url = "https://raw.githubusercontent.com/Karthik-beta/fiscalclock/<tag>/assets/brand/icons/docsrs-logo.svg")]
#![doc(html_favicon_url = "https://raw.githubusercontent.com/Karthik-beta/fiscalclock/<tag>/assets/brand/icons/favicon.ico")]

favicon.ico is used rather than favicon.svg because Safari supports SVG favicons only from version 26 (asset specs, section 5).

Wiki illustrations: `images/design/` in the wiki

The GitHub wiki shows PNG but not SVG, so these are rendered to PNG by the same script (--wiki-images) and committed to the wiki repository, not to the main repository. They explain rules; they are not brand assets.

File	Size	Shows	Used on
`logo-variants.png`	1600 × 600 px	Lockup in colour and one colour, on light and dark backgrounds	Logo-Guidelines
`logo-clear-space.png`	1200 × 480 px	Clear space: half the symbol's height on every side	Logo-Guidelines
`logo-sizes.png`	1000 × 400 px	Symbol at 16, 20, 24, 32, 48 and 64 px, small and master drawings, light and dark	Logo-Guidelines
`logo-misuse.png`	1200 × 520 px	Six ways not to use the symbol	Logo-Guidelines
`diagram-year-strip-light.png`	1200 × 250 px	Reference year strip, NRF 4-5-4 fiscal 2023 (illustrative), light	Diagrams-and-Data-Visuals
`diagram-year-strip-dark.png`	1200 × 250 px	The same, dark	Diagrams-and-Data-Visuals

Embed them with ![alt text](images/design/<file>.png) and real alt text that states what the image shows.

Canva social-card template

Item	Value
Design	"fiscalclock social card template (1200 x 630)", design ID `DAHZsdFZm-k`
Edit link	`https://www.canva.com/d/UgnEI2FmpLxcKZv` (copy into a browser; Canva refuses automated link checks)
Background	`og-template-background.png` (2400 × 1260 px), generated by the script
Editable parts	Two text boxes (headline and second line)
Purpose	Variant cards, for example a release announcement, without running the build script. The standard cards are the generated `og-image.png` and `github-social-preview.png`.

Caveats:

Typeface: Canva's editing tools could not set a typeface, so the owner must set both text boxes to IBM Plex Sans in Canva once (DD-023).
Unsaved edits: the latest edits to the design are not saved yet; saving waits for the owner's approval.
Plan limits: the Canva plan has no Brand Kit and no SVG export (DD-008). Export as PNG at 1200 × 630 px, and keep the file under 1 MB if it is also used on GitHub.
Drift: if a brand colour changes, rebuild the background and replace it in the template, then check the text colours in Canva against the token values; Canva does not read the token files.

Manual steps

These cannot be done from the repository:

Step	Where	File
Upload the social preview	Repository Settings, under Social preview (GitHub Docs)	`github-social-preview.png`
Set the Canva text boxes to IBM Plex Sans, then save	Canva editor	Canva template
Upload the wiki illustrations	Commit to the wiki repository	`images/design/*.png`

Repository changes still to make (each needs its own pull request): add the README <picture> banner, and add the rustdoc attributes to crates/core/src/lib.rs after a tag contains the files.

How to rebuild

Requirements:

Python with the packages pinned in requirements-brand.txt (fontTools, Pillow, uharfbuzz), in a virtual environment. Nothing else in the repository needs them.
IBM Plex Sans, variable version, from Google Fonts' repository (ofl/ibmplexsans, SIL Open Font License 1.1). The script checks the file's SHA-256 and stops on a different file.
Inkscape 1.4, which renders every PNG. The script finds it on PATH or at its default Windows location; --inkscape overrides.

Commands, from the repository root:

python -m venv .venv
.venv/Scripts/python -m pip install -r design/scripts/requirements-brand.txt   # .venv/bin/python on Linux and macOS
.venv/Scripts/python design/scripts/build_brand_assets.py --font "path/to/IBMPlexSans[wdth,wght].ttf" --wiki-images path/to/fiscalclock.wiki/images/design
python -I design/scripts/check_brand.py --wiki path/to/fiscalclock.wiki

Colours come from design/tokens/generated/; run python -I design/scripts/build_tokens.py first if a token changed.
check_brand.py fails if any SVG in assets/brand/ or any design page uses a colour that is not a palette token, or names a --fc-* variable that does not exist.
Commit the changed files in assets/brand/ to the main repository and the PNGs in images/design/ to the wiki repository, then replace the Canva background if the cards changed.

Links

Design-System, Logo-Guidelines, Colour-System, Design-Tokens, Diagrams-and-Data-Visuals, Accessibility, Design-Decisions
Research: asset-specs.md
Files: assets/brand/, build_brand_assets.py, check_brand.py, DECISIONS.md

fiscalclock is licensed under MIT OR Apache-2.0 (MIT, Apache-2.0). Last reviewed: 31 Oct 2026. Found an error on this page? Report it with the documentation form.

Asset Inventory

Asset Inventory

What this is and why it matters

Terms used on this page

Logo files: assets/brand/logo/

Icons: assets/brand/icons/

README banner: assets/brand/readme/

Social cards: assets/brand/social/

Platform requirements behind each size

Markup

Favicon and app icon tags

Web app manifest icons

Open Graph and X tags

README banner (<picture> element)

rustdoc attributes for docs.rs

Wiki illustrations: images/design/ in the wiki

Canva social-card template

Manual steps

How to rebuild

Links

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Start

Design

Decisions

Logo files: `assets/brand/logo/`

Icons: `assets/brand/icons/`

README banner: `assets/brand/readme/`

Social cards: `assets/brand/social/`

Web app manifest `icons`

README banner (`<picture>` element)

Wiki illustrations: `images/design/` in the wiki