# ASK KSA — Brand & Design Guidelines

> These guidelines define how the KSA brand should look and work across the
> website and other materials. They are the source of truth for the KSA visual
> identity and should be followed by both people and AI tools.

Full guidelines (human-readable): https://ksaconsultinginc.com/design-guidelines/
Token source of truth: https://ksaconsultinginc.com/wp-content/themes/ksa/colors_and_type.css
Generated from that file on request — the values below cannot drift from it.

## Colour tokens

Use the token name, never a raw hex, when working in the theme.

- --ksa-navy-darker:       #000C1E
- --ksa-navy:              #011F41
- --ksa-blue-dark:         #003C73
- --ksa-blue:              #00529B
- --ksa-blue-light:        #E5EEF7
- --ksa-white:             #FFFFFF
- --ksa-orange:            #E07D2C
- --ksa-orange-light:      #FBF0E6
- --ksa-orange-active:     #A6570F
- --ksa-orange-disabled:   #EFC7A0
- --ksa-burgundy:          #8B3F4D
- --ksa-burgundy-light:    #F4E7EA
- --ksa-gold:              #C18D2E
- --ksa-gold-light:        #FBF2E1
- --ksa-focus-color:       var(--ksa-blue)
- --ksa-link-visited:      var(--ksa-grey-1)
- --ksa-grey-1:            #54595F
- --ksa-grey-2:            #8D9299
- --ksa-grey-3:            #B3B8BD
- --ksa-grey-4:            #D2D7DC
- --ksa-grey-5:            #F4F5F6
- --ksa-error:             #C13515
- --ksa-error-dark:        #972910
- --ksa-error-light:       #F7EBE8
- --ksa-success:           #2B7F4D
- --ksa-success-dark:      #22633C
- --ksa-success-light:     #EBF4EF
- --ksa-info:              #235AF3
- --ksa-info-dark:         #1B46BE
- --ksa-info-light:        #E7ECF8
- --ksa-warning:           #E0AA2C
- --ksa-warning-dark:      #AF8522
- --ksa-warning-light:     #F7F2E9
- --fg:                    var(--ksa-navy)
- --fg-muted:              var(--ksa-grey-1)
- --fg-subtle:             var(--ksa-grey-2)
- --fg-on-dark:            var(--ksa-white)

## Other tokens

- --ksa-focus-width:       2px
- --ksa-focus-offset:      2px
- --fg-on-dark-muted:      color-mix(in srgb, var(--ksa-white) 72%, transparent)
- --fg-on-dark-subtle:     color-mix(in srgb, var(--ksa-white) 45%, transparent)

## Typography

- --font-sans:         "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif
- --font-condensed:    "Roboto Condensed", "Arial Narrow", sans-serif
- --font-mono:         ui-monospace, "JetBrains Mono", "Menlo", monospace

Roboto Condensed for display/headings, Roboto for reading. There is no serif
or accent face. Monospace is NOT a brand font — it appears only on the
guidelines and icon-library pages to label tokens, never in site copy.

- --type-display-size:         60px
- --type-display-lh:           1.2
- --type-h1-size:              45px
- --type-h1-lh:                1.3
- --type-h2-size:              35px
- --type-h2-lh:                1.2
- --type-lead-size:            31px
- --type-lead-lh:              1.3
- --type-quote-size:           26px
- --type-quote-lh:             1.35
- --type-h3-size:              24px
- --type-h3-lh:                1.3
- --type-h4-size:              20px
- --type-h4-lh:                1.3
- --type-body-size:            16px
- --type-body-lh:              1.6
- --type-caps-size:            13px
- --type-caps-lh:              1.4
- --type-small-size:           14px
- --type-small-lh:             1.5
- --type-micro-size:           12px
- --type-micro-lh:             1.4

## Voice and mood

Practical · Candid · Collaborative · Experienced · Reassuring

Write plainly for CPAs in public practice — expert in their own field, under time
pressure, wary of being sold to. Name the outcome (saved time, less uncertainty,
peace of mind) rather than the effort. Do not oversell, and do not pad with
jargon the reader could not check.

Drafted Aug 2026 from the site's own About and Services copy, not yet confirmed
by the client — treat as a strong indication, not a signed-off rule.

## Hard rules

- Orange (--ksa-orange, #E07D2C) is a BUTTON FILL ONLY. On white it measures
  2.94:1, which fails WCAG AA (4.5:1 for body text). Never use it for text,
  links, headings or small print.
- Navy and blue carry text and dark surfaces. One orange, reserved for action.
- Warning (--ksa-warning, #E0AA2C) is an ICON AND BORDER colour, not a text
  colour. On white it measures 2.11:1 against WCAG AA's 4.5:1. The other three
  semantic colours do pass as text on white — error 5.54:1, success 4.95:1,
  info 5.49:1 — so warning is the exception, not the rule for the set.
  On navy (--ksa-navy) it reaches 7.82:1 and is fine.
- Never put white on any of the mid-tone colours — warning, gold, or the CTA
  orange. Navy is the text colour over those fills (5.59:1 on gold, 6.66:1 on
  orange). Category colours: teal 5.47:1 and burgundy 7.20:1 on white, gold
  2.95:1 — gold is a category marker, not body text.
- If a colour is not in colors_and_type.css, it is not a KSA colour. Do not
  introduce one-off hex values in templates.
- Icons are Phosphor, Light weight, throughout. Do not mix weights.
- The logo exists only as a flattened JPG (primary) and PNG (Professional
  Development). There is no SVG and no transparent or reversed export. Do not
  stretch, recolour, rotate or add effects to either mark.

## Known gaps

Stated plainly so a model does not invent answers to fill them:

- The voice and mood above are drafted from site copy and NOT yet confirmed by
  the client. Specific wording rules (we vs ASK KSA, "Contact us" vs "Get in
  touch", words to avoid) are still undecided — do not invent them.
- Logo clear-space and minimum-size rules are proposed but unconfirmed.
- The licence and source of the site photography are not recorded.
- Nine semantic tokens (the -dark and -light variants of error, success, info
  and warning, plus --ksa-orange-disabled) are defined in the token file but
  not yet documented on the guidelines page.