Cognitum interface language

Intelligence,
made legible.

A production grounded system for trusted edge intelligence. Calm surfaces, precise hierarchy, observable state, and motion with purpose.

Explore the system ↓Copy starter code

SYSTEM / EDGE 07LIVE

COG

Inference84%

Trust97%

Calm by default

Dark, sparse surfaces reduce noise around operational decisions.

State is visible

Color, labels, and motion reinforce one another.

Trust is structural

Accessibility, provenance, and safe defaults are part of the UI.

02 / Foundations

A compact visual grammar

The production site uses semantic HSL tokens so themes, opacity, and utility classes compose without hard coded color drift.

TypographyOutfit + JetBrains Mono

Aa

Intelligence at the edge

Operational interfaces need rhythm before ornament. Outfit provides open geometry and calm authority.

policy.status = "verified";

Spacing4px base unit

4

8

12

16

24

32

48

Use 16 to 24px inside controls and cards. Use 64 to 120px between major narrative sections.

Shape + depth12px core radius

Borders define structure. Shadows indicate focus or elevation. Cyan glow is reserved for active intelligence.

03 / Brand assets

A visual language for intelligence in motion

The wordmark is the anchor. Signal fields, cognitive lattices, spectral edges, and precision linework create the surrounding world without competing with it.

PRIMARY SIGNATURE / DARK SURFACE Cognitum

Minimum digital width 160px · preserve original proportions · never rebuild the letterforms.

CCOGNITIVE
FIELD 01

01 / SIGNAL FIELDInference in motion

Use for hero moments, live state, and system intelligence.

02 / TRUST LATTICEGoverned connection

Use for policy, provenance, identity, and secure coordination.

03 / SPECTRAL EDGEPhysical intelligence

Use for sensing, RF, spatial state, and edge infrastructure.

Clear space1× cap height

Protect the wordmark from controls, copy, and strong graphic edges.

Preferred surfaceNear black navy

White wordmark with cyan and emerald environmental light.

Asset behaviorQuiet center

Place richer topology around the signature, never through it.

Motion ruleField, not logo

Animate the surrounding signal system. Keep the wordmark stable.

PRODUCTION ASSETSUse originals, never reconstructed marks.

Download wordmark PNG Download signal atlas Download token JSON

04 / Components

Controls that expose intent

Each control carries a clear hierarchy, complete interaction states, a visible focus ring, and a 44px minimum touch target.

Buttons5 variants · 3 sizes

Inputsdefault · focus · error

Agent nameRuntimeEndpointEnter a valid HTTPS endpoint.

State + feedbacksemantic, never color only

Healthy Learning Degraded Blockedv2.4.1

✓

Policy verified

Deployment passed signature, scope, and resource checks.

Cardsdefault · interactive · selected

MEMORY24.8 GBAcross 18 active cogs

AGENTSentinelOpen workspace →

RUNTIMEWASMSelected environment

Overlaydialog · tooltip · toast

✓ Configuration saved

Operational primitivesbounded action · explicit authority

Human approvalRequired before external mutation

DAILY BUDGET$48.0062% remaining

AUTHORITYRead + proposeDeploy and revoke require approval

05 / Data display

Dense data, quiet presentation

Use one dominant signal per view. Cyan represents the primary series, green represents verified or positive state, and pink is a comparison series rather than decoration.

Inference efficiency

3.8×+18.2%

Optimized

JanFebMarAprMayJun

Workload placement

42.6krequests

Edge18ms

Regional46ms

Cloud128ms

Always label values directly. Tooltips add detail; they must not contain the only readable value.

ACTIVE COGS109+8 this week

POLICY PASS99.97%30 day window

P95 LATENCY18ms↓ 4ms

COST / 1K$0.42↓ 12.4%

Operational tablestatus first · actions last

Agent	Runtime	Latency	Status
Sentineledge 07	WASM	12ms	Healthy	•••
Navigatorregion ca	Native	38ms	Learning	•••
Observercloud 02	WASM	91ms	Degraded	•••

06 / Motion

Motion explains change

Production patterns use a 600ms expressive entrance, 300ms control transitions, and 100ms stagger. Continuous animation is limited, offscreen work is paused, and reduced motion is mandatory.

ENTER600ms0.22, 1, 0.36, 1

24px rise + fade

CONTROL300msease out

color + shadow + 2% scale

STAGGER100mssequential

lists and narrative groups

AMBIENT4–6sease in out

glow, pulse, float only

Reduced motion contract@media (prefers-reduced-motion: reduce) { animation-duration: 0.01ms; scroll-behavior: auto; }

07 / Product patterns

Compose around decisions

The recurring interface pattern is context, dominant signal, evidence, then a bounded action. Avoid generic dashboard density and decorative science fiction.

Hero narrative

One declarative claim, one supporting paragraph, one primary action, and a live product proof.

Marketing · product launch

Operational workspace

Persistent navigation, compact metrics, state labels, and progressive disclosure for advanced controls.

Fleet · agents · memory

Guided workflow

Visible progress, reversible steps, validation before mutation, and an explicit confirmation summary.

Deploy · configure · provision

Evidence surface

Direct labels, provenance, time window, uncertainty, and downloadable data alongside every conclusion.

Charts · reports · trust

AAContrast

4.5:1 for normal text. 3:1 for large text and UI boundaries.

44Touch target

44px minimum on every actionable control.

⌘Keyboard

Visible focus, logical order, Escape closes overlays.

TXTRedundancy

Never communicate state through color alone.

08 / Certification design

Credentials that carry their evidence

Cognitum certificates combine institutional authority, human recognition, and machine-verifiable evidence. The system scales from a full-screen presentation to print, social proof, and compact credential cards.

UNIVERSITY

CU / 2026

Certificate of achievement

Cognitum University hereby certifies that

Reuven Cohen

has demonstrated advanced technical mastery in

Agentic Systems Engineering

8 MODULES · 4 APPLIED LABS · CAPSTONE VERIFIED

CUVERIFIED

01 / SCREENPresentation mode

Use a landscape ratio, generous negative space, and restrained ambient motion.

02 / PRINTArchival output

Remove navigation and motion while preserving contrast, signatures, and evidence.

03 / PORTABLECredential card

Collapse to issuer, recipient, program, status, and a resolvable credential ID.

VERIFICATION CONTRACTRecognition is visual. Trust is resolvable.

Open verifier ↗

01Resolve

Credential ID maps to a canonical record.

02Validate

Issuer, integrity receipt, and status are checked.

03Evidence

Modules, labs, and capstone remain inspectable.

04Govern

Revocation and expiry never disappear from history.

09 / Governance

A system with owners, gates, and evidence

A production design system is a governed interface contract. Each layer has a maturity state, an accountable owner, and a measurable adoption gate.

STABLE

Foundations

Tokens, typography, spacing, motion

GATE / No hard coded brand values

BETA

Components

Controls, data display, agent primitives

GATE / Keyboard and visual regression pass

BETA

Credentials

Certificate, badge, verifier, receipt

GATE / Resolvable ID and status contract

EXPERIMENTAL

Spatial patterns

RF, sensing, fields, uncertainty

GATE / Evidence and privacy review

OWNERDesign Systems Council

Product, engineering, accessibility, security, and brand.

RELEASESemantic versioning

Deprecations remain supported for one minor release.

QUALITYFive mandatory gates

Visual, keyboard, contrast, reduced motion, and API stability.

ADOPTIONMeasured, not declared

Token coverage, component reuse, violations, and migration time.

10 / Implementation

Start from the source contract

These starter fragments preserve the production semantic tokens, component hierarchy, and motion curve. Copy them into a shared package before adding product specific variants.

:root {
  --background: 220 25% 6%;
  --foreground: 210 20% 92%;
  --card: 220 20% 10%;
  --primary: 185 80% 50%;
  --accent: 142 70% 50%;
  --muted: 220 15% 15%;
  --muted-foreground: 215 15% 55%;
  --border: 220 15% 18%;
  --radius: 0.75rem;
  --font-display: "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

Recommended package boundary@cognitum/design-system

tokens.css · primitives · data display · motion · accessibility tests

Adoption gate

No new hard coded brand colors. Every interactive primitive has focus, disabled, loading, error, and reduced motion states.