An AI-tech design language for Viganium's website, system admin and employee app. Dark-first console surfaces, crimson edge-lighting in place of drop shadows, live telemetry, machined geometry, and a monospace machine voice for every number.
Nothing here is invented. Every brand value is sampled pixel-exact from the official brand sheet (brand/images/logo_variation.png), so the system and the printed identity cannot drift apart.
Approved grounds
Clear space equals the height of the circular mark on all four sides. Never recolor outside this set, add effects, stretch or rotate.
Crimson leads and everything else supports it. The AI accents carry data, models and automation — a functional layer, never a second brand. Their text colors change with the mode; their dots never do.
Primary — Viganium Crimson
Brand text takes 600 on light and 300 on dark — never 500. The section numbers on this page do exactly that; watch them change when you flip the toggle. See §03.
Signal — Amber
Data, models, automation, anomalies.
Circuit at full strength is 9.5:1 on the console but only 1.8:1 on white — so in light mode its text drops to #0A6E85. Same token, different mode.
The dot pulses only while the state is live, and never travels without its label.
Error is deliberately hotter and more orange than the brand crimson, so a destructive state can never be mistaken for a brand button. Never use primary-500 for an error.
Every ratio below was computed, not estimated — and six token values moved because the measurement disagreed with the first choice. The failures are listed too, because knowing where a color cannot go is what keeps it out of production.
| Pair | Where | Ratio | Verdict |
|---|---|---|---|
| A White on crimson | Primary buttons, both modes | 5.93 | AA |
| A #B00D28 on white | Brand text — light | 7.16 | AAA |
| A #F9949F on ink card | Brand text — dark | 8.00 | AAA |
| A Ink on amber | Every amber surface | 10.92 | AAA |
| A Ink on light ground | Body text — light | 16.22 | AAA |
| A Mist on ink deep | Body text — dark | 17.72 | AAA |
| A Circuit on ink card | Data labels — dark | 9.52 | AAA |
| A #0A6E85 on info tint | Data labels — light | 5.38 | AA |
| A White on #D6323A | Destructive button fill | 4.80 | AA |
| A White on amber | Never — amber's foreground is ink | 1.58 | FAIL |
| A Circuit on white | Never as light-mode text | 1.81 | FAIL |
| A Crimson 500 on ink card | Never for text — lift to 300 | 2.90 | FAIL |
| A Crimson 400 on light ground | Never for text — use 600 | 3.24 | FAIL |
| A Plasma on ink card | Graphics only — text uses #9B85FF | 3.96 | TEXT |
| A White on error base | Buttons use the darker fill | 3.91 | FILL |
Three roles. Space Grotesk is engineered and slightly off-grid — it carries the AI-tech character in headings. Inter does the reading. JetBrains Mono is the machine voice: every ID, metric and timestamp the system reports.
metric is monospace on purpose: tabular digits mean a live value never reflows its own tile as it ticks. Any numeric data gets tabular-nums.
The radius scale is tight on purpose — Sentinel is precision hardware, so panels read as milled components rather than soft cards.
Elevation changes technique with the mode
On light, elevation is an ordinary shadow. On dark it becomes an edge-light — because a dark card genuinely cannot cast a visible shadow on a dark canvas, but it can glow. Two parts: a 1px colored rim and a soft bloom, mirroring the light seams on the mascot's armor. A colored edge is a status indicator, so spend it only when the color means something. Flip the toggle and watch these four swap.
Everything in this section follows your current mode. The two-up at the bottom pins both modes side by side, which is the one place where comparing them is the point.
Amber is never a button fill — it is attention, not action.
An error carries an icon and a message, never color alone.
Badge numbers are six digits — this one has two.
KPI tiles — the admin's signature component
Data table
| Unit | Site | Status | Last ping | Uptime |
|---|---|---|---|---|
| VG-001482 | North Depot | Online | 00:00:04 | 99.98% |
| VG-001483 | Airport Gate 4 | Syncing | 00:00:11 | 99.71% |
| VG-001490 | Harbour Yard | Idle | 00:04:37 | 98.40% |
| VG-001501 | South Tower | Offline | 02:18:56 | 91.02% |
Numeric columns are mono, tabular and end-aligned — logical end, so they flip correctly in Arabic.
Both modes, pinned side by side
Brand text lifts to #F9949F. Elevation is an edge-light.
Brand text drops to #B00D28. Elevation is a real shadow.
Nothing here moves for effect. Each behavior reports a real state and stops when that state settles — and every one is disabled under prefers-reduced-motion.
Not a translation layer. The layout mirrors, the type switches to IBM Plex Sans Arabic, and tracking resets to zero — negative tracking hurts Arabic. Numbers, IDs and timestamps stay LTR inside Arabic text, because they are the machine voice.
آخر تحديث قبل أربع ثوانٍ
Visor is the signature — the mascot's dark faceplate catching a crimson highlight. It belongs on feature cards, the login panel and app-icon grounds. Gradients do not flip with the mode; they are brand artifacts.