One page, three layers. Section A tests the GeneratePress theme layer (Customizer). Section B tests GenerateBlocks Global Styles. Sections C onward test ecosystem.css. Under each block is a line telling you which layer to fix if it looks wrong — that is the whole point of the sheet. FluentForms, FluentCRM and LifterLMS are excluded.
This reads the computed value of each token straight off <html>, so it cannot be faked by anything on this page. Every token empty means ecosystem.css §0 did not parse at all — usually an unterminated or prematurely-closed /* */ comment above the :root block, since CSS comments do not nest and a stray */ in prose ends the comment early, taking the token block down with it. One token empty means that single GP global colour’s name is misspelled.
Measure. Learn. Transform.
AI Ready is the goal.
Behavioural anchors, not self-assessment
Fifteen dimensions across five pillars
The AI Readiness Framework provides a comprehensive, evidence-based system for measuring and developing AI readiness — at both individual and organisational levels. Built on eight-plus years of real-world AI transformation experience, it uses behavioural anchors with measurable evidence, not self-assessed attitudes. Read the full specification for all 75 anchors.
Expect Manrope throughout: H1 2.5rem/800, H2 1.875rem/700, H3 1.25rem/700, body 1rem/1.6 at #404040, links #C00000. Wrong family → Manrope not installed locally (Stage 3). Wrong size or colour → GP Typography or Global Colors (Stages 4–5). Letter-spacing visible on any heading → you set tracking in GP Typography; it belongs only on eyebrows.
All three must be #C00000 → #9B0000 on hover, white text, 8px radius, 1px lift. Dark navy #2C3338 means GP button colours are still default — that is the one shown by the search widget on a bare site. ecosystem.css deliberately does not style .button; theme chrome is GP’s layer.
--airi-red → --accent--airi-red-hover → --accent-hover--airi-black → --contrast--airi-text-strong → --contrast-2--airi-text-medium → --contrast-3--airi-text-subtle--airi-bg-subtle--airi-bg-lighter--airi-borderliteral #2E7D32These read through the bridge in §0 of ecosystem.css. If a swatch renders the right colour, the GP global colour and the token agree. Two distinct failures, and telling them apart saves an hour: all ten blank at once = §0 never parsed (see A0). One blank = that global colour’s name is misspelled — GP derives the variable from the name, and the §0 fallback only fires when the GP variable is absent, not when it is malformed. Success green is a literal by design: it must not be operator-editable.
#C00000#1A1A1A#404040#6B6B6B#999999#D9D9D9#B0B0B0#C00000#6B6B6B#1A1A1AFramework semantics, so they stay literal in ecosystem.css — a site operator must not be able to change what “L2 = AI Ready” looks like from the Customizer. L2 is red because it is the success target, not because it is a warning.
.gbp-button--primary / --secondaryThese are the classes GB Pro’s 200+ library patterns actually use, and they ship black by default. Restyle these two Global Styles to AIRI values and every stock pattern becomes on-brand at once — far cheaper than rebuilding patterns. Secondary must invert to solid red on hover, not merely darken.
.gbp-section familyFive pillars that matter.
Each pillar addresses a critical dimension of AI readiness. The naming differs between oAIRI and pAIRI to reflect context — but the architecture is identical.
GB ships .gbp-section at 7rem padding; AIRI uses 64px (40px mobile). Override it in the Global Style, not per-block. .gbp-section__tagline is GB’s name for the eyebrow — style it identically to .airi-hero-label so the two vocabularies cannot drift.
.gbp-card familyLeadership & Culture
Is there commitment and capability to succeed?
Ethics & Governance
Are risks managed and ethics considered?
Business Value
Can value be identified and captured?
Compare these directly against C3 below. They should be indistinguishable: 8px radius, 1px #E5E5E5, 24px 18px padding, the soft shadow, 2px hover lift. If they differ, a pattern dropped onto a page will not match a hand-built card — which is exactly the drift this sheet exists to catch. GB’s --border default is 1px solid black.
.airi-hero-label / -headline / -subheadlineYou do not need to be an AI expert.
Discover your AI readiness with The AIRI Framework — whether you are building your own skills with pAIRI or leading your organisation’s adoption with oAIRI.
Eyebrow: 0.8rem, 600, uppercase, 1px tracking, red. Header headline 3.25rem/800/1.1 — one per page, dropping to 2.25rem under 768px. Subheadline 1.15rem at #6B6B6B. This is the brand’s most repeated pattern; if the eyebrow looks like a small heading rather than a label, the tracking is missing.
Five maturity levels
pAIRI measures where you are. AI4E gets you to L2. Both use the same scale.
.airi-bg-lighter is #F9F9F9 (sunken/callout ground), .airi-bg-subtle is #F2F2F2 (alt section ground, stats band). Two off-whites, and they are not interchangeable. .airi-content-narrow caps prose at 720px inside a 1200px container.
.airi-card, .airi-card-top-p1..p5Leadership & Culture
Commitment and capability.
Ethics & Governance
Risks and responsibility.
Business Value
Value identified and captured.
Data Foundation
Accessible, sufficient data.
Infrastructure
Tools and standards.
Plain card
No accent rule. Fills its grid row — hover me.
-static
Hover lift suppressed. For dense lists.
L2 · AI Ready
The goal for most professionals.
Hover each: shadow steps to .12 and the card lifts exactly 2px. The target card carries a 2px red border, a 4px 5%-red ring and a pinned ★ SUCCESS TARGET pill from ::after. -auto shrink-wraps instead of filling the row. If the pill is clipped, the parent has overflow:hidden.
.airi-infobox, -flatpAIRI
Discover your readiness across five pillars. Unlocks AI For Everyone, personalised to your role, industry and level.
15 questions · ~20 min · Free
-flat
Off-white, no border, no shadow, no hover. For supporting and legal blocks that should not compete for attention.
Info box is the roomier marketing container: 12px radius, 28px 32px padding — deliberately not the same as a card. Hover lifts the default variant only.
Default. Grey left rule on #F9F9F9 — a neutral aside inside a lesson or a long section.
Red rule. Raises emphasis without changing the fill.
Black rule. Structural or definitional asides.
Decision Engine
Your lowest-scoring pillar sets the first intervention. That is where AI4E will start you.
You are AI Ready — Level 2. Your pAIRI score has been updated.
4px left rule, 0 8px 8px 0 radius. The engine variant tints to 4% red and its h4 is red, 700, uppercase, 0.06em. Success green appears here and nowhere else — if you see it on general positive framing, that is a misuse, not a bug. Never create a generic “card with a coloured left border”: that is the pattern the brand deliberately avoids.
Pills and badges: 20px radius, 0.7–0.75rem, 600, uppercase, 0.5px tracking. Level and step icons are perfect circles — 32px, or 48px with -lg. Numbered circles are this brand’s preferred “icon” for sequences; reach for them before any glyph.
.airi-level-rowAI Unaware 0.00–0.99
Have not explored AI.
AI Aware 1.00–1.99
Tried AI a few times.
AI Ready 2.00–2.99
Use AI weekly, save 2–4 hours, verify outputs.
Success target
AI Competent 3.00–3.99
Redesigned role, mentor others.
AI Catalyst 4.00–5.00
Design AI processes others follow.
Left edge carries the level colour; only L2 gets -target (4% red fill, red edge). Descriptions must be behavioural — “verify outputs”, never “feel confident”.
.airi-table, -striped| Level | Name | Score band | Persona | Behaviour |
|---|---|---|---|---|
| L0 | AI Unaware | 0.00–0.99 | Bystander | Has not explored AI. |
| L1 | AI Aware | 1.00–1.99 | Explorer | Tried AI a few times. |
| L2 | AI Ready | 2.00–2.99 | Practitioner | Uses AI weekly, verifies outputs. |
| L3 | AI Competent | 3.00–3.99 | Builder | Redesigned role, mentors others. |
| L4 | AI Catalyst | 4.00–5.00 | Pioneer | Designs processes others follow. |
Header row solid black on white, 8px radius with clipped corners, hairline body rules, rows tint on hover. Add airi-table-striped to the wrapper past about eight rows.
- Complete oAIRI and pAIRI assessment instruments
- All 75 behavioural anchors (5 levels × 15 dimensions)
- Scoring methodology and score ranges
- AIRI Decision Engine prioritisation guide
Ticks are the unicode ✓ in red via ::before — there is no icon font for it. Progress is red in flight, green only when genuinely complete. The arrow on the link comes from ::after; never type “→” into the label or you will get two.
.airi-stats-row#F2F2F2 ground, 2.25rem/800 numbers (1.75rem mobile), 0.9rem grey labels, hairline dividers between columns on desktop only. On the live site the dividers come from .airi-stats-row .gb-grid-column, so build this with a GB Grid — a plain flex row will lose them.
.airi-bg-blackAI Ready For Everyone
A 21-day sprint to AI readiness. No programming. No prior AI experience needed. 35 lessons, 30 minutes a day, each matched to your level, role and industry.
Headings go white, body copy to rgba(255,255,255,.85) — the softened white is deliberate and reads as intended hierarchy, not a contrast failure. The one place white text is correct.
This is a real gap, not a test. The airi-utility-bar.php snippet outputs .airi-utility-bar markup, but ecosystem.css contains no rule for it — so on the live site this renders as unstyled inline links. If the bar above looks correct here it is because this sheet’s preview CSS is faking it. Add the block below to ecosystem.css §1 before you export.
/* --- 1.11 Ecosystem utility bar --- */
.airi-utility-bar {
display: flex; justify-content: flex-end; gap: 16px;
background: var(--airi-black); color: rgba(255, 255, 255, .7);
font-size: .85rem; padding: 8px 16px;
}
.airi-utility-bar a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.airi-utility-bar a:hover { color: var(--airi-white); }
.airi-utility-bar .current-site { color: var(--airi-white); font-weight: 700; }
@media (max-width: 767px) {
.airi-utility-bar { justify-content: center; font-size: .75rem; gap: 12px; }
}
.gbp-footer familyUppercase 0.75rem column headings, 0.7-alpha links, hairline rule above the legal line. The “not affiliated with AI Singapore” disclaimer appears on every property — never drop it. If you build the footer from a GB pattern, restyle .gbp-footer__title and __link rather than overriding per-block.
- Responsive. Narrow the window to 375px. Hero drops to 2.25rem, sections to 40px, buttons full-width, nothing scrolls sideways.
- Print. Cmd-P. Cards lose shadows for a 1px border, the utility bar and stats band vanish, body drops to 12pt, the black table header prints light. §6 of
ecosystem.cssowns this. - Reduced motion. Enable it in the OS; every hover lift and transition should collapse to nothing.
- Windows. Manrope renders heavier there. If 800-weight hero type looks blocky, that is expected — do not “fix” it with a lighter weight.
- Editor parity. Open this page in the block editor. Manrope and brand colours should hold; the Frontend-Header CSS will not be visible, which is exactly why the Gutenberg Editor snippet exists.
- Zero gradients. Scan the whole page. There are none in 1,200 lines of stylesheet, and there should be none here.