Japetella Security System · v2.0

Design tokens & components

Deep-ocean intelligence meets modern SaaS. Dark, precise, and calm — a security operations console, not a hacker cliché. The palette derives from the Japetella mark: crimson → violet → azure. The canonical spec lives in STYLE-GUIDE.md; this page renders it live.

Color

Violet conveys decisiveness and emphasis. Azure conveys live signal and verification. Crimson is reserved for the brand gradient and offense contexts. Team colors are semantic, never decorative.

Neutrals — deep water

Night--jss-night · #070b12

Surface--jss-surface · #0d141f

Surface raised--jss-surface-raised · #121b29

Text--jss-text · #edf1f7

Text muted--jss-text-muted · #8fa0b5

Text faint--jss-text-faint · #5c6b80

Brand accents — the logo gradient

Crimson--jss-crimson · #e02e4d

Violet--jss-violet · #a879f5

Violet deep--jss-violet-deep · #7c3aed

Azure--jss-azure · #3f8dfd

Azure deep--jss-azure-deep · #2f6ff0

Warn (semantic)--jss-warn · #e3b458

Team semantics

Red team--jss-red-team · #f0596d

Blue team--jss-blue-team · #58a6ff

Purple team--jss-purple-team · #a78bfa

Typography

System font stacks — zero external requests. Fluid scale clamped between 360px and 1280px viewports. Mono is reserved for eyebrows, tags, terminal panels, and numerals.

--jss-fs-hero · clamp(2.375rem → 4.25rem) · 700 · -0.015em

Speed of modern threats

--jss-fs-2xl · clamp(1.75rem → 2.625rem) · 700

Section heading

--jss-fs-lg · clamp(1.125rem → 1.375rem) · lede

Lede paragraph — supporting the heading with context.

--jss-fs-base · 1.0625rem · body · line-height 1.65

Body copy. Confident, precise, operations-literate. No fear-mongering, no hacker clichés.

--jss-fs-xs · 0.8125rem · mono eyebrow · 0.14em trackingManaged Security Operations

Components

Buttons

Primary action Ghost action

Team cards

Offense

Red card

3px top border in the team color; otherwise standard card chrome.

Defense

Blue card

Raised surface, hairline border, 16px radius, subtle long shadow.

The Loop

Purple card

Team colors are semantic — never decoration.

Terminal panel

PANEL · EXAMPLE

$ status
✓ ok state      key value
▲ warn state    threshold approached
✗ critical      requires human approval

Loop banner

Discover→Validate→Improve→Measure

Principle + checklist

Principle item

2px violet left border, no card chrome. For value statements.

Checklist item with CSS-drawn azure checkmark