Design Glossary

Design glossary

This page defines, in plain language, every design term used on the design pages, with an example from fiscalclock where one helps.

Last reviewed: 1 Nov 2026

What this is and why it matters

Design has its own vocabulary, and the design pages use it to stay short and exact. Each term below is explained for someone who writes code but has no design training, and points to a standard where one defines the term. Fiscal and engine terms (period, extra week, half-open interval, calendar_id and so on) are defined on the project Glossary and are not repeated here.

Brand and logo

Term	Meaning	In fiscalclock
clear space	The empty margin that must surround a logo so that nothing crowds it.	Half the height of the symbol on every side (Logo-Guidelines).
favicon	The small icon a browser shows in the tab, bookmarks and history, declared with <link rel="icon"> (HTML Standard).	favicon.svg and favicon.ico (Logo-Guidelines).
lockup	A fixed arrangement of the symbol and the wordmark, with set sizes and spacing, used as one unit.	The symbol [ ) beside "fiscalclock", with a gap of 0.28 em (Logo-Guidelines).
maskable icon	An app icon drawn to fill its whole square so that a phone or operating system can crop it to its own shape (circle, rounded square). Everything important must sit inside a central "safe zone", a circle with a radius of 40 % of the icon (web.dev).	icon-maskable-512.png.
monochrome	In one colour only. A one-colour logo is needed where colour cannot be printed or shown. A web app manifest can also mark an icon's purpose as monochrome (Web App Manifest).	The -mono and -mono-white logo files. No monochrome manifest icon exists.
Open Graph	A set of <meta> tags that tell social sites and chat apps which title, description and image to show when a link is shared (ogp.me). The image is often called an "OG image" or "social card".	og-image.png, 1200 × 630 px (Asset-Inventory).
safe zone	The part of an icon that is never cropped; see maskable icon.
symbol	The picture part of a logo, usable without the name. Also called a mark.	[ ) (Logo-Guidelines).
tile	A filled square or rounded square placed behind a symbol so that it reads on any background.	A dark tile, #1a1a19, behind every app icon (DD-024).
wordmark	The product name set in a fixed typeface as part of the logo, usually converted to outlines so that it never depends on an installed font.	"fiscalclock" in IBM Plex Sans SemiBold, always lowercase.

Colour and themes

Term	Meaning	In fiscalclock
accent	The one colour, other than neutrals, used to draw attention to a single meaning.	Deep teal, color.accent.default: #0b6b69 light, #5cc6be dark (Colour-System).
contrast ratio	A number from 1:1 to 21:1 comparing the lightness of two colours, defined by WCAG as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour (WCAG 2.2). Higher is easier to read.	Body text is 17.11:1 in the light theme (contrast report).
hex value	A colour written as # and six hexadecimal digits for red, green and blue. These pages write hex in lowercase.	#fdfdfc, the light page background.
neutral	A grey or near-grey with little or no hue; used for text, backgrounds and borders.	palette.neutral.0 (#ffffff) to palette.neutral.950 (#121212).
palette	The full set of raw colours a design system may use. Every other colour is chosen from it.	The palette.* tokens; check_brand.py rejects any other colour in brand files.
theme	A complete set of colour choices for one appearance, such as light or dark. Both themes use the same token names with different values.	Light and dark, equal in standing (DD-005); the page follows the system setting unless data-theme is set on <html> (DD-018).
prefers-color-scheme	A CSS media query that tells a page whether the reader's system is set to light or dark (Media Queries 5).	Used by tokens.css and by favicon.svg.
forced colours	A browser or system mode, such as Windows High Contrast, that replaces a page's colours with the user's own. It removes box-shadow, so focus rings use outline (accessibility research).

Accessibility

Term	Meaning	In fiscalclock
WCAG	Web Content Accessibility Guidelines, the W3C standard for making web content usable by people with disabilities (WCAG 2.2).	Version 2.2 is the hard constraint in both themes (Accessibility).
AA, AAA	WCAG's conformance levels: A is the minimum, then AA, then AAA, the strictest (WCAG 2.2, conformance levels). For text contrast, AA needs 4.5:1 and AAA needs 7:1.	fiscalclock requires AA in both themes; every color.text.default pair also exceeds 7:1 (contrast report).
alt text	A short text alternative for an image, read aloud by screen readers and shown if the image fails to load (WCAG 2.2, 1.1.1). It says what the image shows or does, not "image of".	Every image on the design pages needs alt text.
focus ring	The visible outline drawn around the control that keyboard input will go to (WCAG 2.2, 2.4.7).	color.focus.ring, drawn as a 2 px outline (border.width.thick) (tokens README).
large text	In WCAG, text at least 18 pt (24 CSS px), or 14 pt (about 18.67 CSS px) bold; it needs only 3:1 contrast (accessibility research).

Typography

Term	Meaning	In fiscalclock
ascender	The part of a lowercase letter that rises above the x-height, as in f, l and k.	The lockup's bracket overhangs the ascenders by 0.04 em.
baseline	The invisible line that letters sit on; descenders such as in g and p drop below it.	The bracket also overhangs the baseline by 0.04 em.
cap height	The height of capital letters above the baseline; the CSS cap unit measures it (CSS Values 4).
em	A length equal to the current font size: at 16 px text, 1 em is 16 px (CSS Values 4). Proportions given in em scale with the text.	The lockup proportions (Logo-Guidelines).
font weight	How heavy the strokes of a typeface are, on a scale from 1 to 1000 in CSS, where 400 is normal and 700 is bold (CSS Fonts 4); 600 is usually named SemiBold.	font.weight.regular 400, medium 500, semibold 600.
glyph	The drawn shape of a character in a particular font (Unicode glossary). One character can have several glyphs, such as a plain or slashed zero.
lining figures	Digits that all stand on the baseline at about the height of capitals, as opposed to old-style figures, which rise and fall like lowercase letters (MDN).	Always used for data (DD-020).
monospace	A typeface in which every character is the same width, used for code.	IBM Plex Mono (Typography).
sans-serif	A typeface without serifs, the small strokes at the ends of letters.	IBM Plex Sans (Typography).
slashed zero	A zero with a slash through it, so that it cannot be mistaken for the letter O.	Available in IBM Plex Sans through the zero feature (typography research).
tabular figures	Digits that all have the same width, so numbers and dates line up in columns (MDN).	Used wherever numbers or dates are compared (DD-020); in IBM Plex Sans every digit is 600 units wide by default (typography research).
tracking	Extra space added evenly between all letters, called letter-spacing in CSS (CSS Text 3). Negative tracking draws letters closer.	The wordmark uses -10 font units per letter, which is -0.01 em (Logo-Guidelines).
type scale	The fixed set of font sizes a design may use, instead of any size.	font.size.xs (0.75 rem) to font.size.4xl (3 rem) (Typography).
x-height	The height of lowercase letters such as x, without ascenders. The CSS ex unit measures it (CSS Values 4).	IBM Plex Sans and IBM Plex Mono share an x-height of 0.516 em, so inline code matches the height of the text around it (typography research).

Tokens

Term	Meaning	In fiscalclock
design token	A named design value, such as a colour or a spacing step, stored as data so that every product uses the same value by name (tokens README).	color.text.default, space.4.
DTCG	The W3C Design Tokens Community Group, whose report defines a JSON file format for design tokens (2025.10 report).	The token files follow the 2025.10 report strictly (DD-016).
primitive token	A token that holds a raw value with no meaning attached.	palette.teal.700. Not used directly in products.
semantic token	A token named for its job, whose value is an alias of a primitive and can differ by theme.	color.accent.default is palette.teal.700 in the light theme.
alias	A token whose value is a reference to another token instead of a value of its own, written {palette.teal.700} in DTCG files.	Every semantic colour token is an alias.
resolver	A DTCG document that says which token files to combine, and how, for each theme or other variation (Resolver module).	fiscalclock.resolver.json, with a theme modifier for light and dark.
CSS custom property	A variable in CSS, written --name and read with var(--name) (CSS Variables 1).	Every token is emitted as one, prefixed --fc- (DD-017).

Layout

Term	Meaning	In fiscalclock
breakpoint	A screen width at which the layout changes, for example from one column to two.	breakpoint.sm 640 px, md 768 px, lg 1024 px, xl 1280 px (Layout-and-Spacing).
gutter	The fixed space between columns, or between content and the edge of the screen.	layout.gutter.sm 16 px and layout.gutter.lg 32 px.

Files and drawing

Term	Meaning	In fiscalclock
raster	An image stored as a grid of pixels, such as PNG or JPEG. It blurs when enlarged.	Wiki images, social cards and app icons are PNG.
vector	An image stored as shapes described by coordinates, which stays sharp at any size.	The logo masters are SVG.
SVG	Scalable Vector Graphics, the W3C vector image format for the web (SVG 2).	Every logo and icon master (Logo-Guidelines).
outline (text to outlines)	Converting the letters of a text into plain vector shapes, so that the file no longer needs the font to display correctly.	All text in brand SVGs is outlined, because SVG shown as an image cannot load web fonts (asset research).
hatch	A fill of evenly spaced diagonal lines, used to mark an area without relying on colour alone.	The extra week in diagrams is hatched and labelled (Diagrams-and-Data-Visuals).

Links

• Glossary for fiscal, engine and project terms
• Design-System, the hub for all design pages
• WCAG 2.2 and the DTCG 2025.10 format