VECTORHEART // Design System & Brand Guide Rev 2.1 // Register 01 · COBALT // Key-Art / Maximal
Geometric Brutalism · Technical HUD · Conditional Glitch

VECTOR
HEART

A single component system on a hard Swiss grid. One grid, one type pairing, one rule that doesn't change — only the ground and the signal role-mapping vary. That is the whole discipline.

VCTR_SET · K6FZLCAAM · CL 6023 / RN BT70 · + 04°N
Design System PDF · Web · App By Adam Aguila

10 sections · living guide · a VCTR original

02 / FoundationPG 02 — STYLE DNA // Register 05 · BLACK
The Rule That Doesn't Change

One System.
The Theme Varies.

One component system. One grid. One type pairing. Only the ground and the signal role-mapping change between registers. The style stays fixed; the theme varies. If a new theme needs a new component, it's not this style.


Style DNA — Non-Negotiables

The look dies without these.

01 — GRID FIRST

Hard orthogonal grid

8px base. Brutalist blocking — solid fields, hairline-to-heavy rules, framing brackets, null-state X-boxes.

02 — TWO VOICES

Two type voices only

Condensed grotesque display + technical monospace. No third face. Display can go huge and break.

03 — DATA AS ORNAMENT

Data is decoration

Barcodes, version stamps, coordinate strings, QR blocks, mono filler, scattered + crosses. Reads logged, means nothing.

04 — ACID LEADS

Acid lime carries it

Lime is the primary signal. Cobalt and magenta support. Warning-red is data-only.

05 — GROUND

Choose for contrast

Cobalt, fog, print-grey — and black is now allowed (v2.1). Pick the ground for contrast and readability.

06 — FLAT & HARD

Flat, hard, sharp

No gradients (except glitch), no shadows, no rounded corners. Pure hues. Separate with rules, never elevation.

v2.1 change · The original "never black" rule is retired. Black may be used as a ground or as ink — chosen deliberately for contrast and readability.
03 / The CombinationsPG 03 — REGISTERS // Register 02 · FOG
Registers = Ground + Signal Map + Intent

Same DNA.
Different Job.

A register is the only thing allowed to vary: the ground, the signal role-mapping, and the intent. Pick a register by the job in front of you.

RegisterGroundSignal mapBest for
01 · COBALTultramarine lime primary · white stencil · red micro-datasplash, hero key-art, poster — most source-accurate
02 · FOGcold pale teal + magenta (v2.1) · red datadocs, dashboards, readable UI, clinical splash
03 · CMYKprint grey cobalt · magenta · lime · orange spotposters, covers, marketing, print
04 · TAU CETIultramarine electric green · periwinkle UI · blue-knockoutlive in-world UI / HUD screens, terminals
05 · BLACK (v2.1)near-black lime lead · cyan support · red datahigh-contrast splash, dark UI, covers
06 · WHITE (v2.1)white cyan + pink (no acid on white)editorial, clean docs, light UI
01 vs 04 · Both sit on the cobalt ground but split on signal map and intent. 01 is lime/white key-art (poster, document); 04 is green/blue interface — filled blue panels, periwinkle UI bars, datamosh edge. Same DNA, different job. That split is the point of the register system.

Plus a MODE, not a register → KEYART / MAXIMAL: any register can switch glitch to maximal for poster & key-art.

04 / Register ShowcasePG 04 — LIVE COMBINATIONS
The Same System, Four Ways

Showcase

Each panel below is the identical component kit rendered in a different register — proof the discipline holds while the theme moves.

01 · COBALT+ KEY-ART
SPLASH

Lime + white + red-data on ultramarine. The hero / poster default.

PRIMARYSTENCIL
02 · FOGDASHBOARD

Readable UI

Teal + magenta on cold pale — calm, clinical, document-grade legibility.

ATIRAOK
STATUS: NOMINAL · 98.4% · 2 ALERTS
03 · CMYKPRINT

Poster / Cover

Cobalt + magenta + lime + orange spot on print grey. The print spec is the decoration.

PROCESS BLUE MAGENTA 0EC
04 · TAU CETIHUD / UI

In-World Interface

Electric green in blue, periwinkle UI bars, blue-knockout panels. The DTRM screen.

DTRM // ONLINE // SYNC 0241
05 / ColorPG 05 — TOKENS + LEGIBILITY
Palette & Application

Color

Acid lime leads; cobalt and magenta support; warning-red is data-only. The full allowed palette spans grounds, signals, neutrals and the print set — Tau Ceti's green/blue live inside it, not beside it.

Grounds — pick ONE per composition
Cobaltground
Cobalt DKlayer
Fogground
Print Greyground
Blackv2.1 ground
Whiteground
Signals + Tau Ceti + Data + Neutrals
Acid LimePRIMARY
Magentasignal
Cyansignal
Tealsignal
UI GreenTau Ceti
PeriwinkleTau Ceti UI
Warning RedDATA ONLY
Orange SpotCMYK spot

Color application & legibility — v2.1
DO

White ground → cyan + pink

On white, the legible signal pair is cyan + pink (magenta).

CYAN PINK
DO

Fog ground → teal + magenta

On fog, the legible signal pair is teal + magenta.

TEAL MAGENTA
Watch · Acid lime is a signal on dark / cobalt grounds — do not use acid for legible text on white or fog. Never place cobalt on cobalt. And never mute the lime toward olive — that kills the signature. Keep it acid.
Go-to pairings
06 / TypographyPG 06 — TWO VOICES // Register 06 · WHITE
Two Voices Only

Type

A condensed grotesque display face and a technical monospace. No third face. Display goes huge and is allowed to break; mono carries every number, label and stamp.

DISPLAY — condensed grotesque
Archivo Narrow

Oversized, caps, tight tracking. Free stand-in for Helvetica LT Pro / NUCORE Condensed.

MONO — technical data
Space Mono

All numeric / data UI. Departure Mono optional for a pixel / terminal edge.

0241 · AF-45 · E3.128 · VCTR_SET
Type ramp
TokenUseTreatment
Hero01. · 0241 · AF-45oversized display / stencil, can knock out of a block
Deconstructkey-art titleoffset-repeat or glitch-fragment glyph
Display H1section titlecondensed, caps, tight
Labelcallsign / stampmono, caps, small
Datacoordinate / serial / QRmono, micro, gridded
Display is allowed to break
KNOCK-OUT OFFSET FRAGMENT
07 / Grid & SpacingPG 07 — 8PX BASE
Everything Snaps

Grid

A hard orthogonal grid on an 8px base. Radius is always zero. Hairline rules on light grounds, heavy rules on cobalt / print. Frame with brackets and registration ticks.

Spacing tokens

--vh-base: 8px; /* everything snaps */ --vh-radius: 0; /* never round */ --vh-rule: 1px solid; /* hairline (light) */ --vh-rule-heavy: 2px solid; /* heavy (cobalt/print) */

Live 8px grid

Brutalist blocking — frames, brackets & null-states

+ CROSS

BRACKET FRAME

PROCESS BAR

08 / Motif LibraryPG 08 — DATA AS ORNAMENT
First-Class Furniture

Motifs

The connective tissue. Used everywhere, meaning nothing — it just reads logged. Invent your own fake-corp lockups and serials; consistency of style matters more than content.

OUTLINE + CROSS

QR BLOCK

FAKE-CORP ECOSYSTEM
NUCALORIC CYBERACME R2 CYBERTECH MOK1 AIRND

Circle-bar mark + invented lockups. Furniture, never a real brand.

RED MICRO-DATA ON COBALT

+ 04°N / 128.3°E · ⊕ H · ⚠ RN BT70 · SER 6023

A distinct data layer — scattered red coordinate tags, circled H, warning ticks.

HALFTONE DUOTONE

DOT-SCREEN, TWO-COLOR

PANTONE / CMYK CALLOUT
TURQUOISE 325 C LIME · PROCESS Y
SERIAL / COORDINATE

VCTR_SET · K6FZLCAAM
CL 6023 / RN BT70
E3.128 · AF-45 · 0241

09 / Glitch ProtocolPG 09 — CONDITIONAL
Never Accidental

Glitch

Glitch is rationed for UI and documents, maximal only for posters and key-art. Even at maximal it stays composed — chaos sits behind a clean type layer and a clean furniture layer. All motion is guarded by prefers-reduced-motion.

RATIONED — UI / docs / boarding-pass

Restraint

Thin single scanline band · pixel-sort on edge strips only · dither dissolve between two zones · RGB-split on one type element. Never full-frame.

SCANLINE BAND — ONE, HARD STOPS
MAXIMAL — posters / key-art / covers

Permission to wreck

Full datamosh fields, large pixel-sort blocks, halftone wreckage, channel shift, knocked-out glitch type. Still framed.

MAXIMAL
Hard rule · Rationed glitch never goes full-frame. Maximal glitch always keeps a clean frame and a clean type layer on top. If it isn't composed, it isn't VECTORHEART.
10 / ApplicationsPG 10 — PDF · WEB · APP // Register 03 · CMYK // EOF
From System to Surface

Applications

The same tokens drive every output. Here is how the system maps onto the three surfaces it's built for.

PDF

Vector everything

Embed both faces. Build glitch as placed vector strips / halftone so it stays crisp. Hard rules, never box-shadow.

BOARDING-PASS LAYOUT
WEBSITE

radius:0 globally

Kill shadows; separate with border, never elevation. Rationed glitch as scoped, reduced-motion-guarded CSS. Maximal reserved for hero key-art.

DASHBOARD CARD
98.4%NOMINAL
APP THEME

Map the tokens

One ground; lime as primary interactive; magenta for alerts; red strictly for data badges. Square components, hairline dividers, mono for all numeric UI.

HUD PANEL · DTRM ONLINE
Discipline · Square components · hairline dividers · mono for every number · condensed grotesque for headers. If a surface needs a new component to work, the design isn't VECTORHEART — fix the layout, not the system.