01 — Typography
Font Pair · Arial Black + Inter
All headlines use Arial Black (weight 900) — a system font with zero load overhead. Body copy uses Inter, optimised for screen and print readability. Sizes are set larger than typical to ensure comfort for all audiences.
Accessibility rules for this type system
- Never use Inter below 14 px. At 14 px use weight 500 or above, never 400.
- Body text minimum is 16 px. Preferred default is 18 px (--text-body-lg).
- Line height for all body text is 1.75 — do not tighten below 1.6.
- Max paragraph width is 65 ch (~65 characters). Wider lines fatigue the eye.
- Never use light grey body text on white. Minimum contrast ratio: 4.5 : 1 (AA).
- Avoid all-caps for anything longer than 3 words (labels and overlines only).
Cyber Armor
Hero sectionsLanding pages
Reserved for full-width hero headlines only. One per page maximum.
Reserved for full-width hero headlines only. One per page maximum.
Endpoint Protection
Page titleSection hero
One H1 per page. Pair with a lead paragraph (20 px Inter).
One H1 per page. Pair with a lead paragraph (20 px Inter).
Managed Security Services
Major sections
Primary section divider. Use gold (#f59b00) for accent H2 on dark backgrounds.
Primary section divider. Use gold (#f59b00) for accent H2 on dark backgrounds.
24/7 Threat Monitoring
SubsectionsCards
Card headlines and page subsections. Always followed by body text.
Card headlines and page subsections. Always followed by body text.
Compliance Reporting
Sidebar headingsList sections
Use where H3 would feel too large. Avoid more than 3 H4 levels deep.
Use where H3 would feel too large. Avoid more than 3 H4 levels deep.
Real-time Alerts
Callout labelsSmallest headline
Smallest permissible headline. Never go below 18 px for Arial Black.
Smallest permissible headline. Never go below 18 px for Arial Black.
Cyber Armor Systems provides enterprise-grade security for organisations of all sizes. Our 24/7 SOC team monitors, detects, and responds to threats before they become breaches.
Hero sub-copySection intros
One lead paragraph immediately below a Display or H1. Max 2–3 sentences.
One lead paragraph immediately below a Display or H1. Max 2–3 sentences.
Threat actors are continuously evolving their tactics. Our platform analyses over 2 billion security events daily, correlating signals across your entire attack surface to surface only the alerts that matter — reducing analyst fatigue by up to 80%.
Default bodyArticles
Recommended default for all marketing and web body copy.
Recommended default for all marketing and web body copy.
Real-time threat monitoring across all managed endpoints. Automated containment isolates infected devices within seconds, preventing lateral movement across your network.
UI copy16 px — minimum
Absolute minimum body size. Use 18 px wherever layout allows.
Absolute minimum body size. Use 18 px wherever layout allows.
All client data is encrypted at rest and in transit. SOC 2 Type II certified. ISO 27001 compliant.
Bold inlineKey facts
Use for emphasis within body text. Never use weight 700 for body — reserve that for labels.
Use for emphasis within body text. Never use weight 700 for body — reserve that for labels.
Figure 1: Mean time to detect (MTTD) across all managed clients, Q1 2026. Data excludes incidents under 5 minutes duration. Source: CAS SOC Operations Report.
CaptionsHelper text500 weight required
Must use weight 500 minimum. Colour must be ≥ 4.5 : 1 contrast. Never use #aec6e8 on white at this size.
Must use weight 500 minimum. Colour must be ≥ 4.5 : 1 contrast. Never use #aec6e8 on white at this size.
Managed Services · Threat Intelligence · Compliance
Eyebrow labelsForm labels3 words max
UI labels, form field labels, nav items, section eyebrows. Never use for body text — too small.
UI labels, form field labels, nav items, section eyebrows. Never use for body text — too small.
02 — Colours
Brand Colour System
A structured palette built around Navy and Gold as primary brand anchors, with accessible tints/shades for each use context. Click any Copy button to copy the hex value to your clipboard.
Core Brand
Navy
#002f54
rgb(0, 47, 84)
--cas-navy
Gold
#f59b00
rgb(245, 155, 0)
--cas-gold
White
#ffffff
rgb(255, 255, 255)
--cas-white
Off White
#f5f8fc
rgb(245, 248, 252)
--cas-off-white
Navy Scale
Navy Dark
#001e36
rgb(0, 30, 54)
--cas-navy-dark
Navy
#002f54
rgb(0, 47, 84)
--cas-navy
Navy Light
#1a4a70
rgb(26, 74, 112)
--cas-navy-light
Mid Blue
#324a6e
rgb(50, 74, 110)
--cas-mid-blue
Text Muted
#aec6e8
rgb(174, 198, 232)
--cas-text-muted
Gold Scale
Gold Dark
#c07800
rgb(192, 120, 0)
--cas-gold-dark
Gold
#f59b00
rgb(245, 155, 0)
--cas-gold
Gold Light
#fdb94b
rgb(253, 185, 75)
--cas-gold-light
Accent
Teal
#0c7b93
rgb(12, 123, 147)
--cas-teal
Dark Mode — Recommended Pair B (AAA ≥ 7 : 1 on #002f54)
Gold Light
#fdb94b
rgb(253, 185, 75)
--cas-gold-light · 7.7 : 1 AAA
Text Muted
#aec6e8
rgb(174, 198, 232)
--cas-text-muted · 7.4 : 1 AAA
White
#ffffff
rgb(255, 255, 255)
--cas-white · 18.4 : 1 AAA
03 — Spacing
Spacing Scale
An 8 px base grid. All padding, margin, and gap values snap to this scale. Never use arbitrary pixel values.
space-4 — 4 px — icon gap, tight inline spacing
space-8 — 8 px — label-to-field, badge padding
space-12 — 12 px — button padding block
space-16 — 16 px — card inner padding (small), form group gap
space-24 — 24 px — section header gap, card padding (standard)
space-32 — 32 px — card padding (large), column gap
space-48 — 48 px — section inner padding, content block gap
space-64 — 64 px — section margin, hero padding
space-96 — 96 px — major section breaks, footer padding
04 — Components
UI Components
All components use the type scale and colour tokens above. Targets are sized for touch (44 px minimum tap target) and large cursors.
Buttons
Dark surface (#002f54)
Badges & Status
Status badges
ActiveCriticalWarningInfoProtected
All systems operational
No active threats detected across 2,400 monitored endpoints. Last scan completed 3 minutes ago.
Suspicious login detected
Login attempt from new location: Frankfurt, DE. Two-factor authentication was triggered successfully.
Ransomware attempt blocked
Endpoint WKSTN-047 quarantined. Lateral movement prevented. Incident report available in your dashboard.
Form Inputs
Standard form — 16 px inputs
We'll only use this to send your security report.
Data Table
| Service | Status | SLA | Last checked |
|---|---|---|---|
| Endpoint Detection | Active | 99.97% | 2 min ago |
| Cloud Posture | Active | 99.94% | 5 min ago |
| Vulnerability Scan | Scheduled | 99.80% | 12 min ago |
| SIEM Integration | Syncing | 99.91% | 1 min ago |
05 — Accessibility
Contrast & Legibility Rules
WCAG 2.2 AA is the minimum. CAS targets AAA where practical. The preview column shows the text colour on its background — click Copy to grab the hex.
| Text colour | Background | Ratio | Rating | Use for | Preview & Copy |
|---|---|---|---|---|---|
#002f54 Navy | White #ffffff | 18.4 : 1 | AAA | All body text on white/off-white | A color:#002f54 |
#002f54 Navy | Off-white #f5f8fc | 17.1 : 1 | AAA | Body text on page background | A color:#002f54; background:#f5f8fc |
#324a6e Mid-blue | White #ffffff | 8.2 : 1 | AAA | Secondary body, captions | A color:#324a6e |
#f59b00 Gold | Navy #002f54 | 6.0 : 1 | AA | Headline accents on dark bg | A color:#f59b00; background:#002f54 |
#fdb94b Gold Light | Navy #002f54 | 7.7 : 1 | AAA | Body text on dark bg (Pair B) | A color:#fdb94b; background:#002f54 |
#aec6e8 Text Muted | Navy #002f54 | 7.4 : 1 | AAA | Secondary text on dark bg (Pair B) | A color:#aec6e8; background:#002f54 |
#ffffff White | Navy #002f54 | 18.4 : 1 | AAA | Body & headline text on dark bg | A color:#ffffff; background:#002f54 |
#002f54 Navy | Gold #f59b00 | 6.0 : 1 | AA | Button text on gold buttons | A color:#002f54; background:#f59b00 |
#5a7a9a Blue-grey | White #ffffff | 4.6 : 1 | AA | Placeholder text — 16 px+ only | A color:#5a7a9a |
#aec6e8 Text Muted | White #ffffff | 2.5 : 1 | Fail | ❌ Never use on white/light bg | ADo not use color:#aec6e8 ← ❌ Fail |
06 — CSS Tokens
Copy-paste Reference
Add this block to any stylesheet that imports cas-brand.css. Inter is self-hosted from /fonts/ via /css/cas-fonts.css.
/* Typography tokens — add to any stylesheet that loads cas-brand.css */ /* Self-hosted Inter (weights 300–700, Latin) */ @import url('/css/cas-fonts.css'); :root { /* Font stacks */ --font-display: 'Arial Black', Arial, sans-serif; --font-body: 'Inter', Arial, Helvetica, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Type scale */ --text-display: 64px; --text-h1: 48px; --text-h2: 36px; --text-h3: 28px; --text-h4: 22px; --text-h5: 18px; --text-lead: 20px; --text-body-lg: 18px; /* preferred default */ --text-body: 16px; /* absolute minimum */ --text-caption: 14px; /* bold/500 only */ --text-label: 12px; /* UI labels only */ /* Line heights */ --lh-tight: 1.1; --lh-heading: 1.25; --lh-loose: 1.4; --lh-body: 1.75; --lh-caption: 1.6; /* Spacing (8 px grid) */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* Paragraph max-width */ --measure: 65ch; }