Bootstrap 5 powers the responsive, mobile-first foundation of MokoCassiopeia, delivering a scalable grid system, standardized components, and utility classes. This implementation integrates Moko Consulting brand variables to ensure consistency, accessibility, and performance across all interfaces.

Brand & Theme Colors

The three root brand colours drive the entire visual identity. --color-primary is the primary brand navy used for navigation backgrounds, buttons, and key UI surfaces. --accent-color-primary and --accent-color-secondary are the two accent blues used for links, highlights, borders, and interactive states.

 
--color-primary
Primary brand colour — deep navy
 
--accent-color-primary
Primary accent — mid blue, links and highlights
 
--accent-color-secondary
Secondary accent — lighter blue, hover and gradient ends

Body & Surface Colors

These variables define the page canvas. --body-bg is the root page background. --secondary-bg and --tertiary-bg are progressively lighter surface layers used for cards, sidebars, and nested containers. --body-color is the default text colour — a cool off-white chosen for comfortable contrast on dark surfaces.

 
--body-bg
Root page background — near black
 
--secondary-bg
Card and panel surface — one step lighter
 
--tertiary-bg
Nested containers — slightly lighter than root
 
--body-color
Default body text — cool off-white
 
--heading-color
Heading text — slightly brighter than body
 
--emphasis-color
Maximum emphasis text — pure white
 
--muted-color
Muted / secondary text — mid grey

Link Colors

Link colours are tuned for dark-theme legibility. --link-color is the default anchor colour; --link-hover-color is its hover state. Both are perceptually lighter than their light-theme equivalents to maintain sufficient contrast against dark surfaces without oversaturation.

 
--link-color
Default link colour
 
--link-hover-color
Link hover colour — lighter blue
 
--link-active-color
Active link — same as default

Bootstrap Semantic Palette

The Bootstrap semantic palette is remapped for the dark theme. All eight semantic roles — primary, secondary, success, info, warning, danger, light, and dark — are overridden with values tuned for dark-surface rendering. Note that light and dark are inverted relative to their light-theme meanings.

 
--primary
Bootstrap primary — deep indigo navy
 
--secondary
Bootstrap secondary — slate
 
--success
Bootstrap success — muted green
 
--info
Bootstrap info — steel blue
 
--warning
Bootstrap warning — amber
 
--danger
Bootstrap danger — muted red
 
--light
Bootstrap light (dark theme) — dark surface
 
--dark
Bootstrap dark (dark theme) — near-black

Semantic Text Emphasis Colors

Text emphasis colours are lightened variants of the semantic palette, designed for use as coloured text on dark-theme subtle backgrounds. They maintain WCAG AA contrast against their paired subtle background colours.

 
--primary-text-emphasis
Primary text emphasis — soft indigo
 
--secondary-text-emphasis
Secondary text emphasis — light slate
 
--success-text-emphasis
Success text emphasis — light green
 
--info-text-emphasis
Info text emphasis — light steel blue
 
--warning-text-emphasis
Warning text emphasis — light amber
 
--danger-text-emphasis
Danger text emphasis — light red

Semantic Subtle Backgrounds

Subtle background colours are very dark tinted variants of each semantic colour. They are used for alert backgrounds, badge fills, and contextual table rows — providing a colour hint without overwhelming the dark canvas.

 
--primary-bg-subtle
Primary subtle bg — deep indigo tint
 
--secondary-bg-subtle
Secondary subtle bg — dark slate tint
 
--success-bg-subtle
Success subtle bg — dark green tint
 
--info-bg-subtle
Info subtle bg — dark blue tint
 
--warning-bg-subtle
Warning subtle bg — dark amber tint
 
--danger-bg-subtle
Danger subtle bg — dark red tint

Standard Named Colors

The full standard colour set is remapped for the dark theme. Each named colour is a lighter, more luminous variant of its light-theme counterpart — necessary to maintain visibility against dark backgrounds while preserving hue identity.

 
--blue
Blue — periwinkle, brighter for dark bg
 
--indigo
Indigo — soft violet
 
--purple
Purple — light lavender
 
--pink
Pink — bright rose
 
--red
Red — coral red
 
--orange
Orange — warm amber orange
 
--yellow
Yellow — soft gold
 
--green
Green — mint green
 
--teal
Teal — bright cyan-teal
 
--cyan
Cyan — sky blue
 
--black
Black — absolute
 
--white
White — absolute

Gray Scale

The gray scale is inverted for the dark theme — --gray-100 is the darkest value and --gray-900 is the lightest. This inversion preserves Bootstrap's numeric convention (lower = lighter in light mode) while mapping correctly to dark-theme surface hierarchy.

 
--gray-100
Gray 100 — darkest (inverted scale)
 
--gray-200
Gray 200
 
--gray-300
Gray 300
 
--gray-400
Gray 400
 
--gray-500
Gray 500 — mid scale
 
--gray-600
Gray 600
 
--gray-700
Gray 700
 
--gray-800
Gray 800 — light (inverted)
 
--gray-900
Gray 900 — lightest (inverted)

Hero / Banner Colors

The banner position in MokoCassiopeia renders a full-viewport-height hero section controlled entirely by CSS custom properties. The system is split into two layers: a background layer (the raw colour behind everything) and an overlay layer (a semi-transparent gradient composited on top to ensure text legibility regardless of the background image or colour used).

Two named variants are provided — Primary (deep navy #0d1e3a, 65% overlay) and Secondary (near-black navy #080f1e, 80% overlay). The heavier overlay on Secondary is intentional — it is designed for hero sections where the background image carries more detail and needs stronger suppression to keep foreground content readable.

Inside the hero area, the inner .hero card element is independently controlled via --hero-card-* and --hero-alt-card-* variables, allowing the card background, text colour, border radius, padding, and max-width to be configured independently of the full-bleed background. Switching between variants requires only a moduleclass_sfx change in the Joomla module settings — no CSS edits needed.

 
--hero-primary-bg-color
Primary hero / banner background — deep navy
 
--hero-secondary-bg-color
Secondary hero background — darker navy
 
--hero-primary-color
Primary hero text colour — near white, safe on both overlays
 
--hero-overlay-bg
Default hero overlay — 30% black
 
--hero-primary-overlay
Primary overlay — 65% navy, standard legibility
 
--hero-secondary-overlay
Secondary overlay — 80% near-black, stronger suppression

Block Colors (top-a / top-b / bottom-a / bottom-b)

Block colour variables control the background and text colour of modules placed in the auto-grid positions (top-a, top-b, bottom-a, bottom-b). Four numbered presets are available, assignable via moduleclass_sfx on individual modules. Highlight, CTA, and Alert overrides provide semantic block variants for common content patterns.

 
--block-color-1
Block preset 1 — secondary surface (default)
 
--block-color-2
Block preset 2 — accent primary blue
 
--block-color-3
Block preset 3 — subtle amber tint
 
--block-color-4
Block preset 4 — subtle green tint
 
--block-highlight-bg
Block highlight bg — accent primary
 
--block-cta-bg
Block CTA bg — brand primary navy
 
--block-alert-bg
Block alert bg — danger red

Gable Component Colors

The Gable color set provides a consistent palette for the Gable extension components. These are intentionally lighter and more saturated than the standard palette to ensure visibility in component-specific UI elements.

 
--gab-blue
Gable blue
 
--gab-green
Gable green
 
--gab-red
Gable red
 
--gab-orange
Gable orange
 
--gab-gray1
Gable gray 1 — medium
 
--gab-gray2
Gable gray 2 — light medium
 
--gab-gray3
Gable gray 3 — light

RGB & Tonal Gradients

The RGB spectrum and black-to-white gradient are provided as quick reference tools for evaluating colour relationships and contrast. Hover any gradient to sample the exact pixel colour at that point.

RGB Spectrum

Black to White