VECTORHEART // Design System & Brand Guide Rev 3.0 // Register 01 · ACID // 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 — and the hero ground. Magenta and cyan support. Cobalt is a strip accent. Warning-red is data-only.

05 — GROUND

Choose for contrast

Acid, fog, print-grey, black, carbon, white. Cobalt is never a ground (v3) — it rides strips, panels and rules at ≤10% coverage.

06 — FLAT & HARD

Flat, hard, sharp

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

v3 change · Cobalt is demoted from ground to accent. Large fields of saturated ultramarine force chromostereopsis and accommodation strain — the source material never does it: in the reference lineage, blue lives in strips on an acid or near-black ground. So does VECTORHEART now.
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 · ACID (v3)acid lime ink type · cobalt strips · red micro-datasplash, hero key-art, poster — most source-accurate
02 · FOGcold pale teal-ink + magenta · red datadocs, dashboards, readable UI, clinical splash
03 · CMYKprint grey cobalt · magenta · lime · orange spotposters, covers, marketing, print
04 · EMBER (v3)carbon orange lead · cyan support · cobalt panels ≤10%live in-world UI / HUD screens, terminals
05 · BLACKnear-black lime lead · cyan support · red datahigh-contrast splash, dark UI, covers
06 · WHITE (v3)white cobalt + magenta (no acid on white)editorial, clean docs, light UI
Where did cobalt go? · It's an accent now — strips, panels, rules and chips at ≤10% of any viewport, never a page ground, never behind body text, and magenta never sits directly on it. 01 puts ink on acid with cobalt riding the divider strips; 04 puts orange/cyan on warm carbon with cobalt panels rationed. 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 · ACID+ KEY-ART
SPLASH

Ink on acid; cobalt rides the strip; red micro-data. The hero / poster default.

VCTRSET
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 · EMBERHUD / UI

In-World Interface

Orange on warm carbon, cyan support, cobalt panels rationed to ≤10%. The terminal screen.

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

Color

Acid lime leads — as signal on dark grounds and as the hero ground itself. Cobalt is a rationed accent; magenta and cyan support; orange leads the Ember HUD surface; warning-red is data-only.

Grounds — pick ONE per composition
Acidv3 hero ground
Fogground
Print Greyground
Blackground
Carbonv3 Ember ground
Whiteground
Accent + Signals + Data
CobaltACCENT ≤10% — never a ground
Acid LimePRIMARY (dark grounds)
Lime Bodybody text on dark
Acid Tonetone-on-tone on acid
Magentasignal
Cyansignal (dark)
Tealsignal (dark)
Teal Inktext on fog
Warning RedDATA ONLY
OrangeEmber lead · CMYK spot

Color application & legibility — v3
DO

White ground → cobalt + magenta

On white, the legible signal pair is cobalt (8.6:1) + magenta. Bright cyan fails contrast on white — dark grounds only.

COBALT MAGENTA
DO

Fog ground → teal-ink + magenta

On fog, text takes the ink-grade teal step; bright teal stays a non-text accent. Magenta is for large/accent sizes.

TEAL-INK MAGENTA
Watch · Cobalt is never a ground and never sits behind body text; magenta never sits directly on cobalt (2.75:1 — an outright fail). Body-size lime on dark steps to the deeper lime-body tone to cut halation; display lime stays full acid. 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 dark / print. Frame with brackets and registration marks — and give every mark its clearance.

Spacing tokens

--vh-base: 8px; /* everything snaps */ --vh-radius: 0; /* never round */ --vh-rule: 1px solid; /* hairline (light) */ --vh-rule-heavy: 2px solid; /* heavy (dark/print) */ --vh-mark: 12–16px; /* registration mark */ --vh-mark-clear: 2 × mark; /* clear space */

Live 8px grid

Mark clearance (v3) · Every registration mark keeps clear space equal to 2× its own size, and lives in a reserved gutter nothing else may occupy — page padding is floored at the mark zone, so marks never bleed into hairlines or content at any viewport. + marks page corners; separates inline runs. Never mixed, never mirrored on a shared edge.
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

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

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

COBALT DIVIDER BAND — v3
STRIPNOT A FIELD≤10%

The sanctioned home for cobalt: a full-width strip with reversed mono type and ✕ separators.

DOTTED HAIRLINE

2-on / 3-off rhythm — reads as a 50% hairline at distance. Horizontal cuts only.

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 — and always single-axis (v3). 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-smear on edge strips only · channel shift ≤2px, horizontal · 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-smear blocks, halftone wreckage, channel shift, knocked-out glitch type. Still framed — and still one axis.

MAXIMAL
The axis rule (v3) · One axis per composition. Perpendicular periodic layers — scanlines over vertical streaks — multiply into checkerboard moiré, which is exactly what real pixel sorting never does: it follows one scan axis. If two textures must coexist, separate them by 30–45°, never 90°; keep layer periods coprime and an order of magnitude apart.
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 · TERMINAL 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.