Design system

CyberSIXT design system

One visual language for every page: the tokens, shadcn/ui primitives themed with them, a small set of product components, one chart grammar, and the words around them. Everything on this page is the running code, so what you see here is what the pages use.

Cohesive: One set of tokens, components and chart marks; no page has its own variant.
Useful: Each element answers a reader’s question: is it exploited, how likely, who reported it, is it still moving.
Calm: Ink on paper, one red signal, one shadow, motion that shows order once.

1 · Foundations

Tokens

Three layers: CyberSIXT’s own tokens, shadcn’s semantic variables mapped onto them (--background, --primary, --ring…), and a Tailwind theme so classes such as bg-paper and text-fg-3 exist. Values are read live from the stylesheet.

Colour

Both themes are designed, not flipped. Contrast is measured on the reading surface (--bg-1) and labelled with the WCAG 2.2 use it allows. Red means one thing: known exploited.

light · contrast against paper

Surfaces

--bg-0groundPage and sidebar ground
--bg-1paperReading sheet, chart surface
--bg-2raisedQuiet fills: code, chips
--bg-3hoverHover, selected nav item
--bg-4pressPressed, active segment in dark
--bg-inverseinverseSkip link

Lines

--line-1line-1Row dividers, panel border, chart grid
--line-2line-2Input borders, axis
--line-3line-3Leader lines, hover border

Ink

--fg-1fg-1Headings, values, primary text
--fg-2fg-2Body and summaries
--fg-3fg-3Meta, labels, axis text
--fg-4fg-4Non-text only

Brand and focus

--accent-textlinkLinks and in-text actions
--accent-cbrandChart highlight, this-article ring
--focusfocusFocus outline
--accent-tintbrand-tintCurrent row in a list

Signals

--kevkevKnown exploited diamond, and nothing else
--okokFix available, live status dot
--infoinfoReserved for informational notes

Severity ramp

--sevs-1sev-1Low
--sevs-2sev-2Medium
--sevs-3sev-3High
--sevs-4sev-4Critical

Chart palette

--vz-kevvz-kevInk fill under the KEV diamond
--vz-cvevz-cveCites a CVE not in KEV
--vz-othervz-otherNo CVE
--vz-gridvz-gridGridlines
--vz-axisvz-axisBaselines

dark · contrast against paper

Surfaces

--bg-0groundPage and sidebar ground
--bg-1paperReading sheet, chart surface
--bg-2raisedQuiet fills: code, chips
--bg-3hoverHover, selected nav item
--bg-4pressPressed, active segment in dark
--bg-inverseinverseSkip link

Lines

--line-1line-1Row dividers, panel border, chart grid
--line-2line-2Input borders, axis
--line-3line-3Leader lines, hover border

Ink

--fg-1fg-1Headings, values, primary text
--fg-2fg-2Body and summaries
--fg-3fg-3Meta, labels, axis text
--fg-4fg-4Non-text only

Brand and focus

--accent-textlinkLinks and in-text actions
--accent-cbrandChart highlight, this-article ring
--focusfocusFocus outline
--accent-tintbrand-tintCurrent row in a list

Signals

--kevkevKnown exploited diamond, and nothing else
--okokFix available, live status dot
--infoinfoReserved for informational notes

Severity ramp

--sevs-1sev-1Low
--sevs-2sev-2Medium
--sevs-3sev-3High
--sevs-4sev-4Critical

Chart palette

--vz-kevvz-kevInk fill under the KEV diamond
--vz-cvevz-cveCites a CVE not in KEV
--vz-othervz-otherNo CVE
--vz-gridvz-gridGridlines
--vz-axisvz-axisBaselines

Type

Mona Sans for everything people read; JetBrains Mono for identifiers, never for prose. Figures are tabular wherever numbers line up.

text-t4
2rem · 32px · lh 1.12
Page title (h1)
Known exploited, in CISA KEV since 26 Oct
text-t3
1.5rem · 24px · lh 1.22
Phone h1, big numbers
Known exploited, in CISA KEV since 26 Oct
text-t2
1.25rem · 20px · lh 1.3
Section heading (h2)
Known exploited, in CISA KEV since 26 Oct
text-t1
1.0625rem · 17px · lh 1.4
Headlines in lists, h3
Known exploited, in CISA KEV since 26 Oct
text-read
1rem · 16px · lh 1.68
Reading text
Each summary is written from the original article only, and every article page links to that original.
text-reg
0.9375rem · 15px · lh 1.5
Standfirsts, takeaways
Known exploited, in CISA KEV since 26 Oct
text-small
0.875rem · 14px · lh 1.5
UI text, summaries, nav
Known exploited, in CISA KEV since 26 Oct
text-mini
0.8125rem · 13px · lh 1.45
Meta, legends, table cells
Known exploited, in CISA KEV since 26 Oct
text-micro
0.75rem · 12px · lh 1.45
Kickers, rail labels
Exploit probability · EPSS

Spacing, radii and elevation

A 4px scale. Boxed controls are never closer than 4px, rows get 12–20px, sections 40–48px. One popover shadow, used only for things that float.

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px

xs · 4pxChips, kbd

sm · 6pxButtons, inputs

md · 8pxPanels, menus

lg · 12pxImages, sheets

Motion

Motion shows order and what changed, once. Under reduced motion, or Settings › Motion › Reduced, every animation drops to 1ms and the ambient textures hold one frame.

--d-080ms · Press feedback
--d-1120ms · Hover, fades
--d-2200ms · Chevron turns, tab pills
--d-ui240ms · Ceiling for UI movement
--d-3320ms · Entrances
--d-4480ms · Chart marks landing

outDefault for UI state

out-quintEntrances, sheets

out-expoRoute and panel morphs

in-outCurves that sweep

Breakpoints

Content first, then rails. Below 1024px the sidebar becomes a sheet and rails fall below the main column.

< 640
Phone
16px gutter, one column, primary action full width
sm 640
Large phone
Stats in a row
md 768
Tablet
Two-column forms
lg 1024
Laptop
Sidebar 240px, framed sheet
xl 1280
Desktop
Max content 1180px

2 · Components

Primitives and product components

shadcn/ui primitives themed with the tokens, and the product components every page uses to show the same facts the same way.

Button

Primary is ink on paper, one per view. Outline for secondary actions, ghost for tertiary.

Field

Label above, hint below; an error replaces the hint, in ink with an icon.

Account key

Spaces and hyphens are optional.

That key was not recognised.

Select and segmented radios

Select picks one value. Small enumerations are segmented radios.

As it happensDaily digestWeekly · Monday

Marks

KEV diamond (the only red), severity in the slate ramp, mono CVE IDs, outlet chips and status facts.

Exploited9.8Critical5.3MediumCVE-2026-1234SecurityWeek3Fix available

Section header, stat and properties

One size per level. Counts in headings are plain numbers beside the title.

Known exploited5

Added to CISA KEV in the last 48 hours

5known exploited

12CVEs in the news

Vector: CVSS:3.1/AV:N/AC:L
Added: 26 Oct

Empty and error states

Empty says why and gives the next step. Errors name what failed and that nothing is lost.

No alerts yet

An alert watches a vendor, threat actor, CVE or phrase.

The timeline did not load

Nothing is lost. It usually returns within seconds.

3 · Patterns

Forms, account rows and ambient texture

Composite patterns built from the primitives. Each appears on several screens and behaves the same on all of them.

Account rows and status

An icon tile, a name, meta in fg-3 and actions at the end; on phones the actions wrap under the row. Status is a 6px dot plus a word.

Fortinet
ActiveAs it happens
Slack
FailingFor Fortinet
Personal security key
PausedAdded 12 Oct

Auth steps

Sign in takes the 24-character key (O is read as 0, I and L as 1) or a passkey; create is generate → save → tick → create; there is no recovery. The security check is Cloudflare Turnstile, shown only when it needs the person. Each auth page fits one viewport.

Security check passed

Destructive actions

Always a dialog that names what is lost and what stays. Deleting the account also asks for the account key and for DELETE to be typed.

Delete the alert “Fortinet”?

Its inbox history, private feed and delivery channels are removed with it. Other alerts do not change.

Ambient texture and the hero moment

The grey Dither glow sits in empty space (the sidebar foot, 404); the Aurora only above the auth forms and on this cover. Never behind text, charts or forms, and never both animating at once.

4 · Data visualisation

One chart grammar

Colour says what an article is about, shape says who published it, and rings say what it is to the story. The same marks, tooltip and keyboard model appear in every chart; each chart is drawn from real data on its page.

Marks and legend

Known exploited (KEV)
Cites a CVE
No CVE
Official advisory
First report
This article

Where the charts live

Latest news dots on Today; the story pulse and strip on articles; EPSS and CVSS meters and coverage lanes on CVE pages; KEV additions per quarter on vendor pages; activity on threat-actor pages.

Today CVEs Vendors Threat actors

5 · Content

Words

Plain British English, facts before adjectives, and no urgency the facts don’t carry. The interface states what is true and lets the reader decide.

Numbers, dates and times

Time17:45 UTC24-hour clock, always UTC
Date26 Oct · Mon 26 Oct · 26 October 2026Day before month, no leading zero
Relative58m ago · 3h ago · 6d agoUnder a week only; then the date
Counts1 article · 17 articles · 1,100Numerals, comma thousands
Percentages99.9% · 1.0% · 33%One decimal under 10% and above 99%
Ranges10–13En dash, no spaces
IdentifiersCVE-2026-1234 · CWE-416 · T1190Mono, never abbreviated

Banned phrasing and what to write instead

Act nowFederal deadline 26 Oct
Patch now!Vendor fix available
Critical alert!Known exploited · in CISA KEV
Don’t miss…(nothing: show the fact)
Unlock / upgrade to see(no paid language anywhere)
Click hereA link named after its destination
Oops! Something went wrongThe timeline did not load

6 · Usage

Do and don’t

The three patterns that most often go wrong.

Red is a signal, not a colour scheme

A known exploited productExploited9.9CriticalFederal deadline 26 Oct

DoOne small diamond marks known exploitation; severity stays in the slate ramp; the deadline is plain text.

A known exploited productEXPLOITEDPatch now!

Don’tRed fills, red text and red severity turn every row into an alarm, so the real exploited signal disappears.

Groups breathe

DoBoxed controls keep 8px between them; the row wraps before it squeezes.

Exploited onlyStoryOutlet

Don’tTouching controls read as broken, and the targets fall under 24px.