ASK KSA
The source of truth for the KSA visual identity — colour, type, logos, icons, spacing, and the rules around them. Follow these whenever you create or update anything for KSA.
Foundation
To give small- and mid-sized public accounting firms the technical and quality management support larger firms hold in-house — so the standards a firm is held to are matched by the resources it can actually draw on.
Public practice where meeting professional standards is a matter of confidence rather than uncertainty, and where a firm of any size can face an inspection knowing its work will hold up.
Working directly alongside Canadian firms on the matter in front of them — a complex engagement, a system of quality management, an inspection, a team that needs developing — and leaving them able to move forward with less uncertainty and less unnecessary effort.
Stock photography
Stock is only for the Services page, standing in until we have real photography for each one. Choose corporate imagery with cool blue tones that reflects the service it represents — not a generic office mood shot. Every stock photo in the media library is shown below for reference.
Icons
Phosphor, Light weight, always this suffix. A sample below, 1412 in the full set.
Patterns
Colour
--ksa-white
Cards, surfaces
--ksa-grey-5
Default page canvas
--ksa-navy
Hero slabs
--ksa-navy-darker
Navy-darker surfaces, footer
--ksa-blue
Logo, interactive, emphasis
--ksa-blue-dark
Hover, pressed
--ksa-blue-light
Tinted background, selected
--ksa-grey-1
Secondary text, subtext
--ksa-grey-2
Labels, placeholders
--ksa-grey-3
Secondary borders, disabled
--ksa-grey-4
Dividers, borders
--ksa-grey-5
Hairline surface, alt rows
--ksa-orange
Primary button only
--ksa-orange-active
Hover and pressed
--ksa-orange-light
Tinted background
--ksa-orange-disabled
Button disabled — not clickable
Two pairs, one per course category on the Professional Development page — a strong colour for the label, a light tint for the surface behind it. These exist to tell categories apart, nothing else, and normally exclude orange and blue for that reason (action stays orange, interactive stays blue). Audit Engagements is the one deliberate exception: it retired its teal pair and now reuses the core --ksa-blue / --ksa-blue-light directly, shown in Primary above.
--ksa-burgundy
Other Engagements — label
--ksa-burgundy-light
Other Engagements — surface
--ksa-gold
Ethics & Practice Mgmt — label
--ksa-gold-light
Ethics & Practice Mgmt — surface
--ksa-error
Icons, borders, error text
--ksa-success
Icons, borders, success text
--ksa-info
Icons, borders, info text
--ksa-warning
Icons and borders — never text on light (2.11:1)
The semantic aliases that actually get typed in template/CSS code — three tiers on light surfaces, the same three tiers again for dark surfaces, so no template ever hardcodes a grey or reaches for white directly. Every one is the same colour as a swatch already shown above, not a colour of its own. Links use --accent (Brand blue, above) and CTA button text uses --cta-text (Dark, above — fixed 2026-07-26 after the original white-on-orange failed WCAG AA).
--fg--fg-muted--fg-subtle--fg-on-dark--fg-on-dark-muted--fg-on-dark-subtleType
No serif or accent face — every page uses the same two families, weight and size doing the differentiating work.
Display / UI
Body
Spacing, radius & elevation
--radius-none
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-pill
Site components
These are the exact classes running in production today — not a fresh component invented for this page.