Tokens

Design tokens are named values for colour, type, spacing, and other decisions. In concordia-view they are defined as CSS custom properties on :root in the base clientlib, under design-tokens/.

Each row lists the token, its value (or reference), and a description of what it is for.

Load order (see clientlibs/base/css.txt):

• borders.less
• colors.less
• component.less
• elevation.less
• motion.less
• sizes.less
• spacing.less
• typography.less

Code location: wcms-aem/branch-maven/concordia-view/src/main/content/jcr_root/etc/designs/concordia/clientlibs/base/less/design-tokens/

How these tokens show up in the codebase

These variables are the canonical CDS contract in CSS, but adoption is uneven across concordia-view. Newer or recently touched LESS tends to use var(--cds-…); many older rules still use literal hex or px, so published pages are a mix until those files migrate.

• Typography: Gill Sans Nova and condensed (--cds-font-family-brand*) anchor headings, lead, and display treatment in page templates (for example profile, event, news, footer) and shared pieces such as headings.less, general.less, introduction, link list, mega-menu, news list, and card body copy. Inter (--cds-font-family-body) with --cds-letter-spacing-body appears in forms, Thunderstone faceted search, student-group list, and similar UI. Some templates still set font: with px sizes next to token families, so the font-size scale is not applied everywhere.
• Colour: Semantic text and background tokens (--cds-color-text-primary, --cds-color-bg-primary, …) show up on card surfaces and newer patterns. Brand hex tokens are also referenced directly for accent fills (for example card background modes) alongside author dialog hex. Black opacity steps back subtle strips and light borders (for example mobile filter chrome in Thunderstone).
• Layout: Spacing tokens appear in card spacing, buttons, and layout LESS. Border radius, border colour, shadow, and z-index support cards, toasts, alerts, status bar, and navigation stacking.
• Media: Thumbnail and icon size tokens align profile, list, and card imagery to one ramp. Motion transitions are used for interactive polish (for example card image hover).
• Caveats: colors.less references --cds-color-magenta-light for --cds-color-tint-error, but that variable is not defined in the same file. Footer and secondary navigation use --cds-font-line-height-brand-label, which is not defined in typography.less (that file has --cds-font-line-height-label at 1.4). Treat those as bugs or legacy drift when editing LESS.

---

Colour: brand palette

Each brand hue includes base, hover, pressed, and dark variants (tint lines are commented out in source). In components, these values align with author colour pickers and card themes; burgundy and blue also feed the semantic text and link tokens below.