The Colour System

Details: Category: Signal Dark - Free Joomla Template; Published: 02 March 2026

Every colour in Signal Dark traces back to two anchors: violet for authority and interaction, and cyan for data and information. These two hues handle every accent, link, button, badge, and highlight across the entire template. Supporting roles go to emerald for success states, amber for warnings, and rose for errors — but violet and cyan do the heavy lifting.

The palette is built in layers. Backgrounds use a four-step ladder from near-black to dark grey. Borders follow the same progression at lower opacity. Text runs from bright white through two muted steps to a whisper. The result is depth without colour noise — panels, cards, and separators all have visual weight, but nothing screams.

The palette

Backgrounds

--bg
#0a0a0f

--bg2
#0f0f1a

--bg3
#181825

--panel
#141420

--panel2
#1c1c2e

Text

--text
#f0f0ff

--text-soft
76% opacity

--muted
42% opacity

--muted2
28% opacity

Brand accents

--violet
#7c3aed

--violet-lt
#a78bfa

--violet-dim
18% opacity

--cyan
#06b6d4

--cyan-lt
#67e8f9

--cyan-dim
14% opacity

Semantic colours

--emerald
#10b981

--amber
#f59e0b

--rose
#f43f5e

Borders

--border
7% white

--border-md
12% white

--border-strong
15% white

--border-lg
18% white

Alerts in action

Bootstrap alerts restyled with the template's semantic colours:

Success. Emerald background — used for confirmations, saved states, successful submissions.

Info. Cyan background — used for tips, notes, and neutral information.

Warning. Amber background — used for cautions, deprecation notices, soft errors.

Danger. Rose background — used for errors, destructive actions, validation failures.

Gradient

--grad-signal
violet → cyan

--grad-glow
Subtle glow overlay