Implementation · ISQ

ISQ visual foundations

The values on this page are the governed ISQ theme implementation. They are not universal eLearning Design System values.

Boundary: shared foundations define semantic roles and accessible behaviour. This page maps those roles to ISQ colours, typography, spacing and production Rise tokens.

Colour

ISQ token	Value	Purpose	Contrast on white
`--isq-blue`	#005680	Primary controls, active states, links, structural emphasis	7.6:1
`--isq-blue-dark`	#073B58	Headings, dark panels, hover states	11.2:1
`--isq-blue-deep`	#062F46	Darkest gradient stop, deep structural tone	13.6:1
`--isq-yellow`	#FFC72A	Selective accent — rules, markers, focus. Never a dominant field, never body or eyebrow text on light surfaces	1.6:1 (non-text use only)
`--isq-charcoal`	#333333	Body text	12.6:1
`--isq-muted`	#526874	Secondary text and metadata	5.9:1
`--isq-border`	#CFE0E7	Borders and separators	n/a — non-text
`--isq-tint`	#E6EEF2	Tinted panel surfaces	n/a — surface only
`--isq-pale`	#F3F7F9	Neutral grouped surfaces	n/a — surface only
`--isq-ice`	#EAF6FA	Selected and informational surfaces	n/a — surface only
`--isq-success`	#266141	Correct / completed state. Always paired with a text label, never colour alone	6.8:1
`--isq-warning`	#333333	Warning-state text, used on the warning-pale surface Shares its value with Charcoal rather than a distinct hue. Confirm this is intentional (text stays readable on a pale-yellow surface) before treating it as settled — see Decisions.	12.6:1
`--isq-warning-pale`	#FFF7DF	Warning-state background	n/a — surface only
`--isq-error`	#A22B2A	Incorrect / error state. Always paired with a text label	6.1:1

ISQ Yellow is an accent, never a large dominant surface. Status is always communicated with a text label as well as colour.

Typography

A geometric sans for headings, a readable humanist sans for body text, sentence case throughout.

Role	ISQ class	Use
Display	`isq-heading--xl`	Section openers and course-level statements only
Large	`isq-heading--large / --h1`	Primary topic and major content-block headings
Medium	`isq-heading--medium / --h2`	Subsections, cards and activities
Small	`isq-heading--small / --h3`	Minor headings and compact components
Eyebrow	`isq-eyebrow`	Short uppercase content-type label
Body	`isq-body`	Running content at generous line height
Intro	`isq-body--intro`	Short orienting paragraph beneath a heading

ISQ font stacks

Heading: "Century Gothic", "Avenir Next", Avenir, Futura, Arial, sans-serif
Body: "Open Sans", Arial, sans-serif

Rise loads a licensed Century Gothic woff2 for headings in the actual courses. This reference site has not been supplied that font file, so it renders the heading stack's next available match (Poppins, loaded locally) with the full stack declared as documented. Swap in the licensed woff2 the moment it is available — no other change is required.

Spacing

A single scale used everywhere. One-off gaps are the fastest way to make a restrained system look inconsistent.

4px

8px

16px

24px

32px

48px

64px

Widths

Four content widths cover nearly every layout need.

Name	ISQ token	Value
Narrow	`--isq-width-narrow`	760px
Standard	`--isq-width-standard`	960px
Wide	`--isq-width-wide`	1120px
Full	`--isq-width-full`	1280px

Radius

Three radii, used to express hierarchy rather than decoration.

Name	ISQ token	Value	Use
Small	`--isq-radius-small`	10px	Controls, buttons, small elements
Medium	`--isq-radius-medium`	16px	Cards
Large	`--isq-radius-large`	22px	Panels

Focus and accessibility

Keyboard focus is never removed or hidden. Every interactive element carries a visible focus treatment with sufficient contrast and offset.

State (selected, correct, incorrect, disabled) is always reinforced by text, icon or structural cue as well as colour — colour is never the only signal.

Breakpoint: 760px — two-column layouts and grids restack to one column at this width.