rba-design-system

Standalone Web-only resource. Copy it into Claude, or drop it into your project.

Paste into Claude Code, Claude.ai, the desktop app, or the browser extension — ⌘/Ctrl+V.

ExperimentalNo security review

RBA Consulting — Design System & Brand Tokens

Canonical source of truth for RBA brand specifics. Any RBA skill that produces branded output (decks, documents, web pages, marketing collateral) should cite this resource for raw values and rules.

Source: RBA Design & Brand Guidelines v1.0 (Feb 2026); consolidates the RBA Design System Skill + Master Brand Tokens. Applies to: PPTX · DOCX · XLSX · HTML · PDF · Adobe Express.

How to Use This Resource

Trigger contexts — any time output should match RBA's brand identity:

"Create an RBA deck / presentation / slide"
"Build an RBA website / page / HTML"
"Make a case study / proposal / report in RBA style"
"Create an Envision presentation in RBA style"
"Design a Word doc / Excel / Adobe Express piece for RBA"

Always clarify the output format first if ambiguous. The same brand tokens apply everywhere, but typography and construction rules differ by output type.

Format Quick-Reference

Output	Fonts	Background	Section
Web / HTML	Montserrat + Libre Caslon (Google Fonts)	White / tinted	§ Web / HTML
PowerPoint	Arial only	Dark navy or White	§ PowerPoint
Word / Excel	Arial (Calibri fallback)	White	§ Word / Excel
Adobe Express	Montserrat + Libre Caslon	White / brand colours	§ Adobe Express
Case Study (PDF/print)	Montserrat + Libre Caslon	White sections, navy accents	§ Case Studies
One-Pager (PDF/print)	Montserrat (Libre Caslon title only)	White + navy header band	§ One-Pagers
Dashboard / web app	Montserrat	`#F5F5F5` surface-alt	§ Dashboard

Brand Purpose & Principles

Purpose: The RBA brand exists to bring clarity and confidence to complex, high-stakes work.

Brand Principles:

Clarity over cleverness — structure, legibility, and precision. If it's not immediately clear, it doesn't belong.
Systematic, not ad hoc — every element connects. Nothing is accidental.
Confidence, not volume — authority comes from restraint. Avoid excess, decoration, and unnecessary emphasis.

Visual Philosophy: Structured · Restrained · Modern, not trendy

Voice (summary): Direct and plainspoken · Thoughtful, not academic · Strategic, not buzzword-driven · Explain the why · Assume a smart audience · Avoid overpromising, jargon without context, sales-first language. (Full rules in § Brand Voice & Writing Style.)

Colour Palette

Token	Hex	Usage
`--brand-red`	`#C8252D`	Logo & mark ONLY — see approved uses
`--primary`	`#1D366D`	Headings, nav, primary buttons
`--primary-dark`	`#162a57`	Button hover states
`--secondary`	`#185FA5`	Links, secondary elements
`--action-blue`	`#3178BF`	Links, highlights
`--accent`	`#0D8FA9`	CTA buttons, active states
`--aqua`	`#14BADB`	Icons, accent lines, stat highlights, sketch art
`--soft-blue`	`#8EC3DB`	Borders, backgrounds
`--sky-blue`	`#BDE4F1`	Backgrounds, hero gradient end
`--white-blue`	`#F5FAFC`	Subtle tinted backgrounds
`--navy-dark`	`#182449`	PPTX dark backgrounds
`--surface`	`#FFFFFF`	Page / card background
`--surface-alt`	`#F5F5F5`	Alternate section background
`--bg-dark`	`#1A2332`	Footer, dark CTA banner (web)
`--text`	`#333333`	Primary body text
`--text-muted`	`#666666`	Captions, meta
`--border-strong`	`#AAAAAA`	Strong borders
`--border`	`#DDDDDD`	Card borders
`--text-inv`	`#FFFFFF`	Text on dark backgrounds

Gradients

Name	Value
Sky Blue Gradient	`#E6F8FB` → `#9DDBF6`
Hero Gradient	`#E6F8FB` → `#BDE4F1`

PPTX Theme ("RBA Brand Colors" — theme1.xml)

Role	Hex
dk1	`#222222`
lt1	`#FFFFFF`
dk2	`#182449`
lt2	`#F5FAFC`
accent1 (aqua)	`#40CAE3`
accent2 (navy)	`#1D366D`
accent3 (mid blue)	`#3078BF`
accent4 (soft blue)	`#8EC3DB`
accent5 (light blue)	`#BDE3F1`
accent6 (grey)	`#CCCCCC`

Note: In PPTX, aqua is #40CAE3 (and #00B8D9 for accent bars/dividers) — NOT the web aqua #14BADB.

RBA Red — Approved Uses Only

RBA logo and mark
Section headers that directly reference RBA
Cover slides and section dividers
Never on interactive elements, backgrounds, or decorative use

CSS Root Variables (web)

:root {
  --primary:       #1D366D;
  --primary-dark:  #162a57;
  --secondary:     #185FA5;
  --accent:        #0D8FA9;
  --accent-light:  #14BADB;
  --brand-red:     #C8252D;
  --mid-blue:      #3178BF;
  --soft-blue:     #8EC3DB;
  --surface:       #FFFFFF;
  --surface-alt:   #F5F5F5;
  --surface-tint:  #F5FAFC;
  --bg-light:      #BDE4F1;
  --bg-dark:       #1A2332;
  --border:        #DDDDDD;
  --border-strong: #AAAAAA;
  --text:          #333333;
  --text-sec:      #444441;
  --text-muted:    #666666;
  --text-inv:      #FFFFFF;
  --font:          'Montserrat', Arial, Helvetica, sans-serif;
  --font-serif:    'Libre Caslon Text', Georgia, serif;
}

Typography

Web / HTML / Case Studies / One-Pagers / Adobe Express

Role	Font	Notes
Display / Hero headings	Libre Caslon Text	Google Fonts (free, preferred for ease of use)
All other text — UI, body, nav, buttons, labels	Montserrat	Google Fonts

Google Fonts import:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />

PowerPoint / Word / Excel (Microsoft formats)

All text: Arial (system font, cross-platform fidelity)
Display / covers: Arial Black
Word fallback body: Calibri (acceptable when Arial unavailable)
Never use Montserrat or Libre Caslon in Office formats — they aren't system fonts.

Type Scale (Web — Official)

Element	Font	Size	Weight	Line Height	Letter Spacing
Hero	Libre Caslon Text	100px	400	110%	-3%
H1 / Display	Montserrat	48px	800	120%	—
H2 / Large Heading	Montserrat	40px	800	120%	—
H3 / Medium Heading	Montserrat	36px	800	120%	—
H4 / Small Heading	Montserrat	32px	800	120%	—
H5 / Mini Heading	Montserrat	24px	800	120%	—
H6 / Micro Heading	Montserrat	20px	800	120%	—
P Large	Montserrat	20px	400	150%	—
P Default	Montserrat	16px	400	150%	—
P Small	Montserrat	14px	400	150%	—

A common hero pattern in practice: Libre Caslon, 58px, weight 400, --primary, letter-spacing -0.03em. The 100px value above is the official top of the scale; size hero to context.

PowerPoint Type Scale

Element	Font	Size	Weight
Cover title	Arial Black	60pt	Black
Cover subtitle / prepared for	Arial	14pt	Bold
Section title	Arial	48pt	Bold
Slide title	Arial	28pt	Bold
Body / bullets level 1	Arial	16pt	Regular
Body bullets level 2	Arial	14pt	Regular
Column header	Arial	14pt	Bold
Captions / labels	Arial	11–12pt	Regular
Agenda numbers (01–05)	Arial	20pt	Bold or Light
Stats / numbers	Arial	varies	Bold
Table header	Arial	11pt	Bold
Table body	Arial	11pt	Regular

Spacing & Layout

Web

Max container: 1280px, padding: 40px
Section padding: 80px 0 · Nav: 64px sticky
Card: 1px solid #DDDDDD, border-radius: 8px, hover box-shadow: 0 4px 20px rgba(29,54,109,0.1)

PPTX

Slide: 13.33" × 7.5" (widescreen 16:9)
Logo: top-right 1.14" × 1.14" at (11.65", 0")
Left margin: ~0.5" · Title: y ≈ 0.71" · Content starts: y ≈ 1.52"

Section Accent Line

Size: 50px × 5px (case study / one-pager variant: ~32–40px × 3–4px)
Colour: #14BADB aqua
15px whitespace below, before the heading
Used above section headings on content/marketing pages and documents
NOT used on dashboards or app UI
NOT used immediately below a header band (proximity suffices)

Logo

Primary

Full colour: red mark (#C8252D) + wordmark
Minimum clear space: 30px all sides
Light backgrounds: full colour · Dark backgrounds: white version

Secondary (Block Treatment)

Red square block with white mark + wordmark
Placed flush to the top edge, aligned top-right
Used for extra impact on covers and presentations

Logo Don'ts

Don't reposition elements · Don't distort proportions · Don't use as read-through in text
Don't enclose in a shape or use red on black · Don't recolour or use pure red
Don't add drop shadows · Don't ignore 30px clear space · Don't outline

Iconography (Three Tiers — never mix within one design)

Tier	Style	Use for	Source
Single-Accent Line	1px stroke, black + aqua	Service/brand icons	Envato — upnowgraphic
Monochrome Line	Single-colour, iOS style	Supporting content, docs	icons8.com/icons/ios
Color Icons	Multi-colour flat	Visual emphasis, marketing	icons8.com/icons/color

Web UI icons: Phosphor thin — https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css — 42px feature / 18px UI / colour #14BADB

Rules: Never mix tiers. Never use off-palette colours. Never use brand icons in UI — use Google Material Design for UI icons instead.

Data Visualisation Palette (WCAG 2.1 AA Compliant)

All 8 colors meet the 3:1 non-text contrast minimum (WCAG 1.4.11) against a white background.

⚠️ Because all colors are in the same blue/teal family, adjacent series cannot achieve 3:1 contrast against each other. Per WCAG 1.4.1, color alone must never convey information. Patterns are mandatory alongside color for all chart series.

Apply colors in sequence — never skip or reorder. Each series gets both a color AND a pattern.

#	Hex	Label	vs White	Pattern
1	`#1D366D`	Navy	11.66:1 ✅	Solid fill
2	`#6B859C`	Steel blue	3.85:1 ✅	45° diagonal lines
3	`#0A7A91`	Deep aqua	4.99:1 ✅	Horizontal lines
4	`#4A7A99`	Slate blue	4.63:1 ✅	Vertical lines
5	`#3B586F`	Dark teal	7.47:1 ✅	Cross-hatch
6	`#5B8FA8`	Mid blue	3.54:1 ✅	Small dots
7	`#3178BF`	Royal blue	4.60:1 ✅	135° diagonal lines
8	`#4A5568`	Slate grey	7.53:1 ✅	Large dots

Note on #14BADB (brand aqua): Contrast ratio 2.31:1 — fails WCAG 1.4.11. Use for decorative/non-informational elements only (accent lines, borders, icons). Never use as a chart series fill or to convey data.

SVG Pattern Definitions

Embed once in any SVG chart, then reference by ID:

<defs>
  <!-- viz-1: Solid (no pattern needed) -->

  <!-- viz-2: 45° diagonal lines -->
  <pattern id="viz-pattern-2" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#6B859C"/>
    <path d="M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2" stroke="#FFFFFF" stroke-width="1.5"/>
  </pattern>

  <!-- viz-3: Horizontal lines -->
  <pattern id="viz-pattern-3" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#0A7A91"/>
    <line x1="0" y1="4" x2="8" y2="4" stroke="#FFFFFF" stroke-width="1.5"/>
  </pattern>

  <!-- viz-4: Vertical lines -->
  <pattern id="viz-pattern-4" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#4A7A99"/>
    <line x1="4" y1="0" x2="4" y2="8" stroke="#FFFFFF" stroke-width="1.5"/>
  </pattern>

  <!-- viz-5: Cross-hatch -->
  <pattern id="viz-pattern-5" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#3B586F"/>
    <line x1="0" y1="4" x2="8" y2="4" stroke="#FFFFFF" stroke-width="1"/>
    <line x1="4" y1="0" x2="4" y2="8" stroke="#FFFFFF" stroke-width="1"/>
  </pattern>

  <!-- viz-6: Small dots -->
  <pattern id="viz-pattern-6" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#5B8FA8"/>
    <circle cx="4" cy="4" r="1.5" fill="#FFFFFF"/>
  </pattern>

  <!-- viz-7: 135° diagonal lines -->
  <pattern id="viz-pattern-7" patternUnits="userSpaceOnUse" width="8" height="8">
    <rect width="8" height="8" fill="#3178BF"/>
    <path d="M9,1 l-2,-2 M8,8 l-8,-8 M1,9 l-2,-2" stroke="#FFFFFF" stroke-width="1.5"/>
  </pattern>

  <!-- viz-8: Large dots -->
  <pattern id="viz-pattern-8" patternUnits="userSpaceOnUse" width="10" height="10">
    <rect width="10" height="10" fill="#4A5568"/>
    <circle cx="5" cy="5" r="2.5" fill="#FFFFFF"/>
  </pattern>
</defs>

CSS Custom Properties (accessible palette)

:root {
  --viz-1: #1D366D;
  --viz-2: #6B859C;
  --viz-3: #0A7A91;
  --viz-4: #4A7A99;
  --viz-5: #3B586F;
  --viz-6: #5B8FA8;
  --viz-7: #3178BF;
  --viz-8: #4A5568;
}

Per-Format Output Guidance

§ Web / HTML (Marketing Pages)

Fonts

Display / Hero headings: Libre Caslon Text
All other text (UI, body, nav, buttons, labels): Montserrat
Import via the Google Fonts <link> above.

Key Patterns

Hero H1: Libre Caslon, 58px, weight 400, --primary, letter-spacing -0.03em
Section H2: Montserrat, 40px, 800 weight
Accent line above H2: 50px × 5px, #14BADB — content pages only, not dashboard
Buttons: border-radius: 4px, Montserrat 600
Cards: border: 1px solid #DDDDDD, border-radius: 8px, hover box-shadow: 0 4px 20px rgba(29,54,109,0.1)
Nav: 64px sticky, white bg, border-bottom: 1px solid #DDDDDD
Footer: #1A2332 bg, 4-col grid, white logo

§ PowerPoint

Slide Canvas

Size: 13.33" × 7.5" (widescreen 16:9)
Font: Arial throughout (no Montserrat/Caslon — Arial ensures cross-platform fidelity in .pptx)
Slide theme: "RBA Brand Colors" (theme1.xml)

Colour Usage in Slides

Context	Colour	Hex
Dark slide backgrounds	Navy dark	`#182449`
Light slide backgrounds	White	`#FFFFFF`
Primary headings (light bg)	Primary navy	`#1D366D`
Headings (dark bg)	White	`#FFFFFF`
Aqua accent elements	PPTX aqua	`#40CAE3`
Body text (light bg)	Dark text	`#222222`
Body text (dark bg)	White	`#FFFFFF`
Accent bar / divider	Aqua	`#00B8D9`
Subtle backgrounds	Light surface	`#F5FAFC`
Mid-tone fills	Soft blue	`#8EC3DB`

Logo Placement

Top-right corner, 1.14" × 1.14", at (11.65", 0")
Light slides: full-colour logo · Dark slides: white logo
Always present on every slide

Accent Bar

Cover slides: 0.79" × 0.05" horizontal bar in #00B8D9 aqua, positioned above the main title
Use sparingly on content slides as a thin divider

Available Slide Layouts (22 total)

Structural: Blank (custom/cover/agenda) · Title + Content · Section dark (dark navy, white text) · Section light (white, navy text)

Column layouts: 2 columns · 3 columns · 4 quadrants (2×2 SWOT/quadrant) · 5 columns · Text content + image

Content layouts: 2 columns + 2 headers + 2 photos · 3 columns + 3 headers + 3 photos · Process · 3 key points · 3 key points + photo · 4 key points

Quote layouts (4): Quote dark · Quote light · Quote + photo dark · Quote + photo light

Team layouts: 3-person team · 4-person team · 5-person team

Standard Slide Types & Construction Rules

Cover Slide — Option A (Dark gradient):

Full-bleed dark navy gradient or solid #182449
Aqua accent bar 0.79" × 0.05" at (1.07", 2.49")
Main title: Arial Black, 60pt, white, at (0.93", 2.66"), size 11.55" × 1.92"
Prepared-for line: Arial Bold, 14pt, white, at (0.97", 4.67")
Logo: white, top-right

Cover Slide — Option B (Photo overlay):

Full-bleed photo behind a dark left overlay panel
Overlay: semi-transparent dark rectangle 8.68" × 7.5" on left
Same title/metadata placement as Option A
Photo caption: Arial 9pt, white, bottom-right (9.05", 7.03")

Agenda Slide:

Background: dark navy #182449
Title "Agenda": Arial, 48pt, white, top-left at (0.58", 1.12")
Numbered items (01–05): number Arial Bold 20pt aqua #40CAE3 at x=4.35", spaced every 1.14" vertically; topic Arial 16pt white at x=5.14"; 2 lines max per item

Section Slides (Dark): #182449 bg · title Arial Bold 48pt white · subtitle Arial Regular 16pt white/light · optional graphic top-right or centered 4.48" × 4.48"

Section Slides (Light): #FFFFFF bg · title Arial Bold 48pt #1D366D · subtitle Arial Regular 16pt #333333

Title + Content Slide: white bg · title Arial Bold 28pt #1D366D at (0.48", 0.71") 11.1" × 0.58" · content from (0.48", 1.52") 12.29" × 5.02" · body Arial 16pt #222222 · optional 4pt aqua bar below title

Column Slides (2/3/4/5): title as Title+Content · columns evenly spaced, left margin ≈ 1.08" · column header Arial Bold 14pt #1D366D · column body Arial Regular 14–16pt #222222 · process step number Arial Light/Bold 28–36pt aqua #40CAE3

Chart Slide: Title + Content with embedded chart · chart colours viz-1 (#1D366D) → viz-2 (#6B859C) → viz-3 (#40CAE3) → viz-4 (#BDE3F1) · chart title Arial Bold 12pt #1D366D · axis labels Arial Regular 10pt #666666 · legend Arial Regular 10pt

Table Slides:

Default: header row #1D366D bg, white text, Arial 11pt Bold · body rows alternating white / #F5FAFC, border-bottom: 1px solid #DDDDDD · cell padding 8pt
Premium: header #1D366D bg white text · even rows #F5FAFC · right-aligned numbers
Pricing: multi-tier with highlighted "recommended" column (#1D366D header, #F5FAFC body) · disclaimer Arial Italic 10pt #666666

Timeline / Roadmap: horizontal timeline bar #1D366D with aqua #40CAE3 milestone markers · milestone labels Arial Bold 11pt above; date Arial Regular 10pt below · date header Arial Bold 14pt #1D366D

Stats / Numbers ("RBA by the Numbers"): white or navy bg · large number Arial Black/Bold 48–72pt aqua #40CAE3 (light bg) or white (dark bg) · descriptor Arial Regular 14pt #666666 (light) or #BDE3F1 (dark) · 3–4 stats per row

Process / Envisioning: title Arial Bold 28pt #1D366D · steps left-to-right with connecting arrows/dots · step header Arial Bold 14pt #1D366D · step body Arial Regular 12pt #333333 · connector aqua #40CAE3 · phase labels Arial Bold 14pt white on navy pills

Quote Slides: Dark — #182449 bg, quotation mark #40CAE3, quote Arial Italic 20pt white, attribution Arial 12pt #BDE3F1. Light — white bg, #1D366D quotation mark, quote Arial Italic 20pt #1D366D, attribution #666666. With photo — portrait circle/rectangle on side, 2.5"–3" wide.

Team Slides: photo circle crop or square border-radius: 8pt, width ≈ 2" · name Arial Bold 14pt #1D366D · role Arial Regular 12pt #666666 · sub-group labels #1D366D bold above each group

Thank You / Questions: "Questions"/"Thank you!" Arial Black 60pt #1D366D (light) or white (dark) · optional tagline Arial Regular 16pt #666666 · logo prominent

About RBA: left column company description Arial Regular 14pt · right side service list/visual · tagline "A Digital and Technology Consultancy" Arial Black, large · service categories with aqua bullet indicators

§ Word / Excel (Microsoft Documents)

Fonts

Primary: Arial (matches PPTX for Office-suite consistency)
Fallback body: Calibri (acceptable when Arial unavailable)
Never use Montserrat or Libre Caslon — not system fonts.

Styles

Style	Font	Size	Colour
Heading 1	Arial Bold	24pt	`#1D366D`
Heading 2	Arial Bold	18pt	`#1D366D`
Heading 3	Arial Bold	14pt	`#1D366D`
Body Text	Arial Regular	11pt	`#333333`
Caption	Arial Regular	9pt	`#666666`
Table header	Arial Bold	10pt	White on `#1D366D`
Table body	Arial Regular	10pt	`#333333`

Document Layout (Word)

Margins: 2.54cm (1") all sides · Page: A4 or Letter
Header: RBA logo left, document title right
Footer: page number centred, thin #DDDDDD top border
Section breaks: thin 3pt rule in #14BADB aqua under each H1

Tables (Word)

Header: #1D366D bg, white text, Arial Bold 10pt
Alternating rows: white / #F5FAFC · Border: 0.5pt solid #DDDDDD

Excel

Column headers: #1D366D bg, white Arial Bold 10pt
Data rows: white / #F5FAFC alternating · Total rows: #1D366D bg, white text
Chart colours: viz palette (viz-1 → viz-8)
Number format: locale-appropriate, consistent decimal places · Grid lines #DDDDDD

§ Adobe Express (Marketing Collateral)

Fonts

Heading: Montserrat Bold or Black
Body: Montserrat Regular / Medium
Accent / display: Libre Caslon Text (where supported)

Canvas Sizes by Format

Format	Dimensions
Social post (square)	1080 × 1080px
Social post (landscape)	1200 × 630px
LinkedIn banner	1584 × 396px
Event / webinar banner	1920 × 1080px
Email header	600 × 200px
Flyer (A4)	2480 × 3508px

Design Rules

Use RBA brand colours — same hex values as web
Logo: top-left or top-right, clear space equal to logo height on all sides
Brand red #C8252D appears in logo only
Aqua accent #14BADB for highlight bars, icon fills, accent elements
Dark navy #1D366D or #182449 for header bands
Photography: navy/aqua colour overlay at 30–50% opacity on hero images
Avoid drop shadows on text; use colour contrast instead
Minimum text size: 14pt equivalent for body, 28pt for headlines

§ Case Studies (Portrait PDF / Print)

RBA case studies are portrait PDF/print documents, not web pages — clean editorial layout with generous white space.

Format & Page Setup

Orientation: Portrait · Page size: US Letter (8.5" × 11") or A4 · Margins: ~0.75"–1" all sides
Font: Montserrat (body/UI) + Libre Caslon Text (display headings only)
Page footer: page number bottom-left; "Copyright © [Year] RBA, Inc. All Rights Reserved." bottom-right, italic, ~9pt, #666666

Document Sections (in order)

Cover — title, subtitle, visual hero area, logo
Overview — 1–2 paragraph executive summary
Challenge — problem framing, what was at stake
Approach — numbered phases with process diagram
Impact — outcomes and results
Reflections — strategic takeaways
CTA — briefing request or next step block

Cover Page

Top half: white background · Bottom half: soft gradient white → light blue/aqua (#BDE4F1 → #8EC3DB) with faint network/constellation overlay
RBA logo: top-right, red square mark (#C8252D), ~1"
Main title: Libre Caslon Text, ~52–60px, weight 400, #1D366D, left-aligned, top section
Subtitle: Montserrat Bold, ~18–20px, #1D366D, centred in gradient area
Description line: Montserrat Regular, ~13–14px, #1D366D, centred below subtitle
Copyright: Montserrat Italic, ~9pt, #666666, bottom-right

Interior Section Heading Pattern

Accent line: short bar, ~32–40px wide × 3–4px tall, #14BADB aqua, above heading
Heading: Montserrat ExtraBold (800), ~26–30px, #1D366D

.section-heading-accent {
  display: block;
  width: 36px;
  height: 4px;
  background: #14BADB;
  margin-bottom: 10px;
}
.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1D366D;
  margin-bottom: 20px;
}

Body Text

Montserrat Regular, ~10–11px (print) / 16px (web equiv) · colour #222222 or #333333 · line height 1.7
Bold emphasis within body: Montserrat Bold, same size, for key phrases

Pull Quote

Larger text, Montserrat Regular or Italic, ~15–16px, #1D366D · standalone paragraph, slightly indented · no quotation-mark graphic (size/spacing differentiate it)

Approach Section — Numbered Steps

Step badge: filled circle, #14BADB aqua bg, white number, ~28–32px diameter, Montserrat Bold ~14px
Step subheading: Montserrat Bold, ~14–15px, #14BADB aqua, follows the badge
Step body: Montserrat Regular, ~10–11px, #333333

.step-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #14BADB;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-heading {
  font-size: 14px;
  font-weight: 700;
  color: #14BADB;
  margin-bottom: 6px;
}

Process Diagram (within Approach)

Container: rounded rectangle border-radius: 12–16px, bg #F5F5F5 or #FFFFFF with subtle border, padding ~32–40px, full content-width
Header: title Montserrat Bold/ExtraBold ~20–22px #1D366D centred; subtitle Montserrat Regular ~12px #666666 centred
Steps (3-step horizontal flow): icon in light circle, number badge below icon, step title, bullet list
- Icons: thin-line (Phosphor thin style), #14BADB or #1D366D · icon circle bg white/very light grey
- Step number badge: #14BADB · step title Montserrat Bold ~13px #1D366D · bullets Montserrat Regular ~11px #333333, · style
- Arrows: simple → in #AAAAAA or #14BADB · final step has dashed curved return arrow ("Rinse & Repeat")

CTA Block (Final Section)

Two-column: left = text content, right = Venn diagram graphic
Background: light blue tint (#F5FAFC or #E6F8FB) · RBA logo top-right (red square mark) · border-radius: 8–12px · padding ~32–40px
Left column: CTA heading Montserrat Bold ~22–24px #1D366D · sub-heading Montserrat Bold ~14px #1D366D · body Montserrat Regular ~11px #333333 · button Montserrat Bold ~13px, white text on #14BADB, border-radius: 4px, padding 10px 20px
Right column (Venn — "The Three T's"): 3 overlapping circles (grey, grey, teal/aqua); labels "Topic"/"Time"/"Team" outside each; centre "The Three T's" Montserrat Bold ~11px #1D366D; three descriptors below with bold label + regular text

Key Case Study Rules

No dark hero sections — open with white top + gradient lower half (unlike marketing pages)
Accent line always above section headings — short aqua bar, not the full-width web divider
Numbered step badges are filled aqua circles — not outline, not navy
Process diagrams live inside a grey/white rounded container — inset, not full-bleed
Bold inline emphasis used frequently to highlight key phrases
Page numbers bottom-left on all interior pages
Copyright line bottom-right on every page, italic

§ One-Pagers (Single-Page Portrait PDF / Print)

Same brand language as case studies but condensed to one page — for service overviews, offering summaries, event briefs, leave-behinds. No multi-page narrative, no full-bleed cover.

Format & Page Setup

Orientation: Portrait · Page size: US Letter (8.5" × 11") or A4
Margins: 0.75" sides, 0.6" top, 0.75" bottom
Everything must fit on one page — ruthlessly edit content to fit
Font: Montserrat throughout (Libre Caslon Text for the title only, optionally)
Footer: "Copyright © [Year] RBA, Inc. All Rights Reserved." — Montserrat Italic, 8pt, #666666, bottom-right

Header Band (replaces the case study cover)

Background: Dark navy #1D366D (or gradient #1D366D → #185FA5 left to right)
Height: ~1.4"–1.6" (compact — ~18–20% of page height)
RBA logo: top-right, white version, ~28px height, ~16px padding
Title: Montserrat ExtraBold (800), ~22–26pt, white, left-aligned, vertically centred, ~16px left padding
Subtitle: Montserrat Regular, ~11pt, #BDE4F1 light blue, below title, same alignment
Optional aqua accent bar: 36px × 4px, #40CAE3, above the title text in the band

	Case Study Cover	One-Pager Header
Height	Full page	~1.4"–1.6" strip
Background	White top + gradient bottom	Solid/gradient navy
Title font	Libre Caslon Text	Montserrat 800
Logo	Top-right, red mark	Top-right, white
Visual element	Network graphic	None (clean)

Body Layout

Two-column (most common): left ~60% (main narrative), right ~40% (stats / key points / CTA); column gap ~0.25"; optional 1px solid #DDDDDD vertical divider
Single-column: for process-heavy/narrative one-pagers; max width = page minus margins; sections stacked with #14BADB accent lines between them

Section Headings (body)

Short aqua accent bar: 36px × 4px, #14BADB, above heading
Heading: Montserrat ExtraBold (800), ~13–14pt, #1D366D
No accent bar on the first body section immediately below the header — rely on proximity

Element	Font	Size	Weight	Colour
Page title (header)	Montserrat	22–26pt	800	`#FFFFFF`
Page subtitle (header)	Montserrat	11pt	400	`#BDE4F1`
Section heading	Montserrat	13–14pt	800	`#1D366D`
Body text	Montserrat	9–10pt	400	`#333333`
Bold emphasis	Montserrat	9–10pt	700	`#333333`
Stat number	Montserrat	28–36pt	800	`#14BADB`
Stat label	Montserrat	8pt	600	`#666666`
CTA heading	Montserrat	12pt	700	`#1D366D`
Footer	Montserrat Italic	8pt	400	`#666666`

Stat / Highlight Block

Use 2–3 stats max. Horizontal row or stacked in right column. Stat number 28–36pt 800 #14BADB; descriptor 8pt 600 #666666. Separate with 1px solid #DDDDDD vertical divider or generous whitespace.

Key Points / Bullet List

Bullet marker: small aqua square/dot ■ in #14BADB, ~8pt
Item text: Montserrat Regular, 9–10pt, #333333 · spacing ~6pt between items
Max 5–6 items per list — if more, break into two columns

CTA Box

Background: #F5FAFC light tint or #1D366D navy (high-emphasis) · border-radius: 6–8px · padding 16–20px
Light CTA: heading #1D366D, body #333333, button aqua #14BADB
Dark CTA: heading white, body #BDE4F1, button white text on #40CAE3
Button: Montserrat Bold, 9pt, border-radius: 4px, padding: 8px 16px

Rules Specific to One-Pagers

One page only — if it doesn't fit, cut content, not margins
No page numbers · No section divider pages (everything inline)
Maximum 3 section headings in the body — more means it should be a case study
Stat blocks are optional — only if numbers are genuinely compelling
The header does the branding work — body should feel clean and editorial
Libre Caslon Text may be used for the page title only — all other text is Montserrat

§ Dashboard / Web Application

Font base: Montserrat, 14px · Background: #F5F5F5
Sidebar: 232px fixed, white, border-right: 1px solid #DDDDDD
Topbar: 64px sticky, white, border-bottom: 1px solid #DDDDDD
Cards: white, border: 1px solid #DDDDDD, border-radius: 8px, padding: 28px
No accent line above section headings (accent lines are marketing pages only)
Metric value: Montserrat 32px 800 #1D366D
Active nav: 3px left aqua bar #0D8FA9

§ Envision Presentation (Special Format)

RBA's "Envision" is a strategy/discovery/concept presentation type. Follows PowerPoint rules with these additions.

Phase Structure (use Section slides to divide)

Context — current state, problem framing
Insights — research findings, user/data evidence
Concepts — solution options/ideas (each concept gets its own section)
Recommendation — preferred direction with rationale
Next Steps — immediate actions, owners, timeline

Visual Language Additions

Phase divider: Section dark slide with phase number (01/02/03…) in large Arial Light, #40CAE3
Concept cards: 4 quadrants or 3 columns layouts
Insight callouts: Quote dark slide with the data point as the "quote"
Recommendation slide: 3 key points layout to summarise the why

Tone

Visual-first — minimal text per slide
Numbers/stats use the stats pattern (large aqua number, small descriptor)
Photography/imagery in section slides to set context

Brand Assets & Visual Language

§ Illustration Style

Minimalist, geometric, editorial — blends line art with simple flat/3D forms. Modern, structured, conceptual; balances friendly and technical.
Service icons (minimalist vector line drawings) for: Artificial Intelligence · Digital Experience · Software Engineering · User Experience · Digital Strategy · Cloud Infrastructure
Don't: tiny people in scenes; flashy 3D multi-colour graphics; literal/overused metaphors (lightbulbs, handshakes, puzzle pieces); retro collage or cliché business imagery

§ AI Sketch Style

A specific RBA brand asset for concept visualisation and early storytelling (presentations, case studies, proposal covers).

Colours: #14BADB aqua lines on #FFFFFF white — absolutely no other colours
Stroke: single-weight pen — no variable/tapered weights · No fills, gradients, shading, or coloured backgrounds
Slightly imperfect strokes — organic but intentional

Prompt template:

[Subject description] rendered as a loose architectural line-art illustration
in a minimal, hand-drawn sketch style.

Rules: single-weight pen, no variable line weights, no fills, no gradients,
no shading. Use only #14BADB (Aqua) for all line work and #FFFFFF for background.
No other colors permitted.

Example subjects: System Integration (chaotic scribbles → organised grid) · User Experience (human profile silhouette → interface grid) · Enterprise Orchestration (geometric nodes forming a constellation) · The Insight Loop (continuous circular line between human silhouette and grid)

§ Photography

People: Natural-light, professional lifestyle; real people in authentic work settings — no staged/posed stock
Technology: High-clarity modern tech — digital interfaces, abstract network graphics, real workplaces
Blog/article backgrounds: Topic-relevant with light overlays for legibility — clean and unobtrusive
Don't: sci-fi/hyper-futuristic overlays; heavy colour grading or filters; cliché business metaphors; staged/posed stock

§ Diagrams

All RBA diagrams use the brand palette and Montserrat/Libre Caslon typography.

Envision Phase Diagram (subway-map style) — the signature RBA process diagram. Three parallel horizontal tracks from a central "Project Kickoff" node:

Top track (Strategy): #8EC3DB — Stakeholder Interviews → Current State Assessment → Business Objectives → Measurement Strategy → Personas → Journey Mapping
Middle track (Design): #14BADB aqua — Design Concepts → Wireframes → User Flows → Digital Style Guide → Digital Survey → User Research
Bottom track (Technology): grey — Integration Strategy → Proof of Concept (POC) → Solution Architecture
Nodes: open circles on each track with diagonal labels; branching connector at kickoff links all three tracks

Standard diagram types:

Type	Description	Use for
Triangle	Strategy / Design / Engineering at three vertices	Three-discipline model
Bubble cluster	Overlapping pills in blues	Risks / Costs / People / Growth
Venn (Three T's)	Grey + teal overlapping circles	Topic / Time / Team briefing model
Numbered pillars	Filled circle badges 1–N + connector line + label	Frameworks, readiness models
Golden Circle	Concentric rings: What / How / Why	Strategic purpose framing
Sprint wheel	Circular phases around "(n) Iterations" centre	Agile delivery model

Diagram rules: Never use off-palette colours · Labels Montserrat Bold #1D366D or white per background · Connecting lines #14BADB aqua or #AAAAAA grey · Arrows simple →, no 3D/decorative · Background white or #F5F5F5 — never coloured.

§ Device Mockups

Frame screenshots in context; the mockup supports the work, never overshadows it.

Tool	Use for
Adobe Firefly	AI-generated photorealistic office/person + device scenes
Placeit.net	Quick device frame mockups
shots.so	High-quality frames, latest hardware, free

Adobe Firefly prompt template:

Photorealistic modern office scene with a professional (male or female) seated
at a desktop computer. The website on the monitor is the main focal point,
displaying the attached image exactly, sharp and undistorted. The person is
secondary, naturally engaged, and supportive of the scene.

Calm, welcoming workspace with soft natural light, minimal decor, and a
human-centered, mission-driven feel. Background subtly blurred to keep attention
on the screen. Editorial, case-study style, realistic lighting, clean composition,
no branding or stock-photo clichés.

Rules: UI/screen is always the focal point · background subtly blurred, soft natural light · no cluttered backgrounds · photorealistic only (no illustrated devices) · no outdated/legacy hardware · for phone mockups (shots.so), incorporate the downloaded status bar (4x PNG/SVG) into the UI image before generating.

§ Web Accessibility (WCAG 2.1 AA — Required for all web output)

All web items — marketing pages, dashboards, case studies, one-pagers rendered as HTML — must meet WCAG 2.1 AA. Non-negotiable. Apply without being asked.

Colour Contrast

Context	Minimum Ratio	Standard
Normal body text (<18px / <14px bold)	4.5:1	WCAG 1.4.3
Large text (≥18px / ≥14px bold)	3:1	WCAG 1.4.3
UI components, icons, chart fills	3:1	WCAG 1.4.11
Decorative elements only	None	—

Brand color accessibility status

Color	Hex	vs White	Text use	UI use
Primary navy	`#1D366D`	11.66:1	✅ any size	✅
Secondary	`#185FA5`	6.52:1	✅ any size	✅
Action blue	`#3178BF`	4.60:1	✅ any size	✅
Accent	`#0D8FA9`	3.81:1	✅ large only	✅
Aqua	`#14BADB`	2.31:1	❌ never	❌ — decorative only
Text muted	`#666666`	5.74:1	✅ any size	✅
Soft blue	`#8EC3DB`	1.91:1	❌ never	❌ — decorative only
Sky blue	`#BDE4F1`	1.35:1	❌ never	❌ — decorative only

Critical: #14BADB (brand aqua) fails WCAG at 2.31:1. Use for accent lines, decorative borders, and icon fills only — never as text colour, never as the sole indicator of state or information.

Use of Colour (WCAG 1.4.1)

Colour must never be the only means of conveying information. Always pair colour with a text label, an icon/shape, a pattern/texture (charts), underline (links), or border change (form validation).

❌ Red border alone = error state → ✅ Red border + error icon + "This field is required" text
❌ Aqua bar = highest value → ✅ Aqua bar + diagonal line pattern + data label showing the value

Data Visualisation (Charts)

Use both colour and pattern (see Data Viz Palette above for the 8-pattern system). Also:

Every chart series must have a visible text label or legend entry — not colour alone
Direct data labels preferred over legend-only identification
Axis labels: Montserrat, minimum 12px, #333333 (12.63:1 ✅)
Chart titles: Montserrat Bold, minimum 14px, #1D366D (11.66:1 ✅)
Tooltip/hover states must also be keyboard-accessible (focus states)
1px white gap between adjacent chart segments

Typography (accessibility)

Minimum body text: 16px · Minimum UI text: 12px (labels/captions, sparingly)
Line height: minimum 1.5 for body (RBA default 1.6 ✅)
Don't override letter spacing below default for body · content usable at 200% text resize · don't use text in images to convey information

Interactive Elements

Focus indicators (WCAG 2.4.7 / 2.4.11):

/* Standard RBA focus style */
:focus-visible {
  outline: 2px solid #1D366D;
  outline-offset: 3px;
  border-radius: 2px;
}

Buttons & links: minimum touch target 44×44px (WCAG 2.5.5) · links underlined or 3:1 against adjacent text · never colour alone for a link · hover and focus states on all interactive elements.

Form inputs: visible <label> on every input (never placeholder-only) · error messages = text + icon, never colour alone · required fields marked visually AND aria-required="true".

Structure & Semantics

Semantic HTML: <header>, <main>, <nav>, <section>, <footer>, <article>
Heading hierarchy never skips levels (H1 → H2 → H3) · only one <h1> per page
Lists use <ul> / <ol> — never fake lists with line breaks/dashes
Tables: <th scope="col/row"> headers, <caption> for title

Images & Media

Meaningful images: descriptive alt · decorative images: alt="" (empty, not missing)
Complex images (charts/diagrams): alt + linked long description or visible caption
Icons: aria-hidden="true" if decorative; aria-label if interactive · no info via image text only

Skip-nav link as first focusable element: <a href="#main" class="skip-link">Skip to main content</a>
Unique, descriptive page titles · fully keyboard navigable, no keyboard traps
Animations respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

WCAG Checklist (run before delivering any web output)

Colour & Contrast: [ ] body text ≥ 4.5:1 · [ ] large text & UI ≥ 3:1 · [ ] #14BADB not used for text/informational UI · [ ] no info by colour alone

Charts: [ ] each series uses colour + pattern · [ ] direct data labels present · [ ] legend not colour-alone

Interactive: [ ] visible focus state on all buttons/links · [ ] touch targets ≥ 44×44px · [ ] links underlined or 3:1 vs surrounding text · [ ] forms have visible labels

Structure: [ ] semantic HTML · [ ] heading hierarchy unbroken · [ ] images have appropriate alt text · [ ] skip-nav link present

Motion: [ ] prefers-reduced-motion implemented

§ Brand Voice & Writing Style

Applies to ALL written output — case studies, one-pagers, web copy, proposals, presentations, social, email. Check copy against this section before delivering.

Company Identity

Field	Value
Full name	RBA Consulting
Short name	RBA
Never write	rba / R.B.A. / RBA Inc.
Tagline	Powered by People. Enhanced by AI.
Formula	Strategy + Design + Engineering
Founded	2006 — 20 years delivering results
HQ	Wayzata, MN (national practice)

Four Voice Pillars

Confident & Credible — not arrogant. Show expertise through specificity and substance, not superlatives.
- ✅ "We bring deep expertise across every layer of the digital stack." ❌ "We're the best consulting firm in the nation!"
Human-Centered & Warm — not robotic. Write like a trusted advisor who cares about the reader's outcome.
- ✅ "Drop us a line — we'd love to connect." ❌ "Submit your inquiry via the contact portal."
Clear & Direct — not overly technical. Audiences include IT leaders, CMOs, COOs, HR leaders. Always explain the "so what."
- ✅ "We modernize legacy systems so your teams can move faster." ❌ "We execute TOGAF-aligned enterprise architecture rationalization."
Results-Oriented & Action-Forward. Lead with outcomes, specific numbers, named impacts.
- ✅ "We delivered a personalized commerce experience handling 5,000+ orders per hour." ❌ "We provide consulting services to support your business objectives."

Tone by Channel

Channel	Tone	Sample phrase
Website / Marketing	Authoritative, inviting, outcome-focused	"We help you get where you're going, faster."
Blog / Thought Leadership	Informed, forward-looking, accessible	"Here's what that means for your team."
Case Studies	Specific, results-driven, collaborative	"RBA helped [Client] achieve [X result]."
Email / Outreach	Direct, personable, low-friction	"Happy to set up a quick call."
Proposals / SOWs	Precise, confident, professional	"Our team will deliver [X] by [date]."
LinkedIn / Social	Engaging, credible, community-forward	"Excited to share our latest thinking on…"
Careers / Culture	Warm, energetic, authentic	"We believe exploration inspires innovation."

Vocabulary

Use these words: deliver / delivered / delivering · measurable results / measurable outcomes · trusted, proven, award-winning · partner / partnership · transform, modernize, enable · clarity, speed, confidence · forward-thinking, forward-looking · cross-disciplinary · people-first, human-centered · applied AI · meet you where you are · strategy + design + engineering

Avoid → Replace with:

Avoid	Use instead
world-class	proven, award-winning
cutting-edge	modern, leading, current
synergy / synergistic	collaboration, working together
leverage (overused)	use, apply, build on
robust	powerful, comprehensive, scalable
seamless	smooth, simple, connected
empower / empowering	enable, help, equip
holistic approach	end-to-end, across strategy to execution
operationalize	implement, launch, put into practice
stakeholders	clients, teams, users, leaders
solution(s) (vague)	platform, system, approach, program
innovative (without context)	describe the actual innovation

Grammar & Style Rules

Active voice — at least 80% of sentences
Oxford comma always: "strategy, design, and engineering"
Sentence case for most headings; title case for formal documents and page titles
Numbers: spell out one through nine; numerals for 10 and above
Statistics: always numerals — "5,000+ orders per hour", "20 years", "$1,000"
Em dash (—): no spaces before/after — "clarity—not confusion." Never double hyphens.
En dash (–): no spaces, ranges only — "2020–2025", "pages 10–12"
Contractions: OK in blog/email/social; avoid in proposals and formal documents
One CTA maximum per content unit
Vary sentence openers — don't start every paragraph with "We"
No hedging — never "potentially", "possibly", "hope to"

Named Services (capitalize exactly as shown)

Services: Artificial Intelligence · Software Engineering · Digital Experience · Data / Analytics · Digital Workplace · Digital Strategy · User Experience · Cloud Infrastructure · Modern Operations Engagement Types: Expert Staffing · Collaborative Delivery · Project Teams · Managed Support Solutions: Enterprise Technology · Customer Experience · Employee Experience

Approved Taglines & Phrases (use verbatim or in close paraphrase; do not contradict)

"Powered by People. Enhanced by AI."
"We combine trusted talent, proven technology, and applied AI to deliver measurable results."
"Designed to Deliver."
"We meet you where you are and help you get where you're going, faster."
"Exploration inspires innovation."
"From idea to execution, we help you move with clarity, speed, and confidence."

What RBA Is NOT

RBA is not…	So never write…
A big-four firm	Overly formal, bureaucratic, or out of reach
A startup or vendor	Gimmicky, hype-driven, or product-sales heavy
A hype brand	Buzzwords without substance
Impersonal	Cold, robotic, devoid of human empathy
Feature-focused	Tools/tech without tying back to client outcomes
Arrogant	Claims without evidence or context
Niche	Content narrowed to a single industry or role

Inclusive Language (Required — all channels)

Gender-neutral: Use "they/them" as default when gender is unknown. Never "he/she" or "s/he."

Avoid	Use instead
manpower	workforce, personnel, staff
chairman / chairwoman	chair, chairperson
guys (mixed group)	everyone, team, folks, colleagues
Dear Sir/Madam	Dear [Name], Dear Hiring Manager

Ableist language — avoid: crazy / insane → unexpected · blind spot → oversight, gap · crippled → severely impacted · sanity check → confidence check, validation · dummy variable → placeholder, stub

Racially coded language — avoid: grandfather clause → legacy provision · master/slave → primary/replica · whitelist/blacklist → allowlist/blocklist · master branch → main · pow wow → meeting, huddle

Military/sports/religious idioms — avoid: pull the trigger → make the decision · slam dunk → clear win · holy grail → ultimate goal · war room → strategy room · crusade → campaign, initiative

Risk & Compliance Language

Never use absolute language on compliance topics.

Avoid	Use instead
ensures compliance	supports compliance efforts
guarantees results	is designed to deliver
eliminates risk	can help minimize risk
fully compliant	designed to align with [regulation]

Always frame as operational/technical support — never legal advice. Close compliance content with: "This should be reviewed alongside your organization's legal and compliance teams."

Self-Check

Before finalizing any content, ask:

Does this sound like a confident, human expert who cares about the client's results — not a generic consulting firm?

If no, revise.

§ Common Mistakes to Avoid

❌ Using brand-red #C8252D on anything except the logo mark
❌ Using Montserrat or Libre Caslon in PowerPoint or Word files
❌ Using Arial in web/HTML output (web always uses Google Fonts)
❌ Adding an accent line above dashboard section headings
❌ Reordering the viz palette — always apply viz-1 first, then viz-2, etc.
❌ Using drop shadows on text in Adobe Express / marketing
❌ Placing the logo anywhere except top-right on PPTX slides
❌ Using more than 5 agenda items on a PPTX agenda slide
❌ Using the web aqua #14BADB in PPTX (use the PPTX-specific #40CAE3 instead)

§ Output Checklist

Before delivering any RBA-branded output, verify:

All formats:

Colours match the brand token values exactly
Logo present and correctly coloured for bg type
Brand red only appears on logo

Web / HTML:

Google Fonts imported
Accent line only on content pages, not dashboard
CSS custom properties used (not hard-coded hex in every rule)

PowerPoint:

All text is Arial
Logo in top-right on every slide
Dark slides use #182449, not #1D366D (navy-dark vs primary)
Aqua value is #40CAE3 (PPTX), not #14BADB (web)

Case Studies:

Outcome stats use aqua #14BADB
Sections follow standard order (Overview → Challenge → Approach → Impact → Reflections → CTA)

Word / Excel:

Heading styles applied (H1/H2/H3), not manual formatting
Table headers use #1D366D

Technical details

Source: Standalone resource
Author: Kassie Gibbons
Maturity: experimental
Security review: No security review
File: resources/rba-design-system.md

Edit this resource on GitHub — opens GitHub's web editor. No git knowledge needed.

rba-design-system

RBA Consulting — Design System & Brand Tokens

How to Use This Resource

Format Quick-Reference

Brand Purpose & Principles

Colour Palette

Gradients

PPTX Theme ("RBA Brand Colors" — theme1.xml)

RBA Red — Approved Uses Only

CSS Root Variables (web)

Typography

Web / HTML / Case Studies / One-Pagers / Adobe Express

PowerPoint / Word / Excel (Microsoft formats)

Type Scale (Web — Official)

PowerPoint Type Scale

Spacing & Layout

Web

PPTX

Section Accent Line

Logo

Primary

Secondary (Block Treatment)

Logo Don'ts

Iconography (Three Tiers — never mix within one design)

Data Visualisation Palette (WCAG 2.1 AA Compliant)

SVG Pattern Definitions

CSS Custom Properties (accessible palette)

Per-Format Output Guidance

§ Web / HTML (Marketing Pages)

Fonts

Key Patterns

§ PowerPoint

Slide Canvas

Colour Usage in Slides

Logo Placement

Accent Bar

Available Slide Layouts (22 total)

Standard Slide Types & Construction Rules

§ Word / Excel (Microsoft Documents)

Fonts

Styles

Document Layout (Word)

Tables (Word)

Excel

§ Adobe Express (Marketing Collateral)

Fonts

Canvas Sizes by Format

Design Rules

§ Case Studies (Portrait PDF / Print)

Format & Page Setup

Document Sections (in order)

Cover Page

Interior Section Heading Pattern

Body Text

Pull Quote

Approach Section — Numbered Steps

Process Diagram (within Approach)

CTA Block (Final Section)

Key Case Study Rules

§ One-Pagers (Single-Page Portrait PDF / Print)

Format & Page Setup

Header Band (replaces the case study cover)

Body Layout

Section Headings (body)

Typography Scale (one-pager body)

Stat / Highlight Block

Key Points / Bullet List

CTA Box

Rules Specific to One-Pagers

§ Dashboard / Web Application

§ Envision Presentation (Special Format)

Phase Structure (use Section slides to divide)

Visual Language Additions

Tone

Brand Assets & Visual Language

§ Illustration Style

§ AI Sketch Style

§ Photography

§ Diagrams

§ Device Mockups