Cartemy Visual Identity System / M2

Territory-A.The precision instrument.

The complete visual system behind Cartemy: a single accent on true black, hard mechanical edges, monospace as structure. Every token here is lifted verbatim from the live, operator-felt-gated surface - the system as built, not as proposed.

GROUND #0A0A0A ACCENT #0055FF RADIUS 0px TYPE Geist + JetBrains Mono STATUS LOCKED
01

Colour

A near-black ground in four tiers, ink in three, and one structural blue. Colour carries signal, never decoration. Hover a swatch to see it at work; click to copy. The accent appears as a fill for action and as a lifted text-tone for labels so it clears AA on the dark grounds.

Ground
THE CANVAS
Groundclick to copy
#0A0A0A
Everything sits on true near-black.
PANELS / HUD
Surface L1click to copy
#121212
Raised panels, cards, the HUD body.
OVERLAYS
Surface L2click to copy
#1A1A1A
Overlays, nested panels.
SUMMARY BOXES
Surface L3click to copy
#202022
Deepest tier - summary boxes.
Ink
HEADINGS
Inkclick to copy
#F4F4F5
Headings, primary copy.
AA 18.6:1 on ground
BODY COPY
Ink 2click to copy
#A1A1AA
Secondary copy, sub-labels.
AA 7.3:1 on ground
EYEBROWS
Ink 3click to copy
#8A8A92
Muted - eyebrows, helper text. Lifted from zinc-500 so small text clears AA.
AA 4.9:1 on ground
Accent + signal
FILLS / BORDERS
Accentclick to copy
#0055FF
Fills, borders, structural marks only.
LABELS / LINKS
Accent Textclick to copy
#4D86FF
Accent as small text: labels, links, values.
AA 5.4:1 on ground
DRIFT
Warnclick to copy
#EAB308
Drift, attention - amber.
UNGOVERNED
Dangerclick to copy
#EF4444
Ungoverned, breach - red.
02

Typography

Two families. Geist carries voice - headings and copy, set tight. JetBrains Mono carries instrument - labels, values, telemetry, every number. Tabular figures throughout, so columns of data never shift.

Aa Bb
Geist 500 / Geist 300 - the voice, set tight at -0.035em
Aa
A B C D E F G a b c d e f g 0 1 2 3 4 5 6 7 8 9
Sans / Geist - 300 400 500 600
Aa
ABCDEFGabcdefg 0123456789 -> {} //
Mono / JetBrains Mono - 400 500 600
Scale (Nicola floors binding)
Displayclamp 34-64AI is alive in your systems
H2clamp 24-34See what it is doing, right now
H319px floorEvery model, agent, and data flow
Body17px floorConnect read-only. In minutes, Cartemy maps the estate your systems call.
Caption15px floorHelper text and as-of dates sit here.
Eyebrow12-14 monoREAD-ONLY ESTATE MAP

Body / item-name / caption / eyebrow floors (17 / 19 / 15 / 14px) are a ship-block. Nothing renders below except the mono eyebrow, uppercase-tracked and exempt by register.

03

Space + edge

Every spatial value resolves to one 8px tessellation scale, routed through a single shared gutter. The radius is zero - everywhere, enforced. Hard edges are the brand: this is an instrument, not an app.

8px tessellation scale
4pxhairline inset, icon gap
8pxtight inline
16pxstandard component padding
24pxcard padding, row gap
32pxsection inset, the gutter base
48pxminimum tap target, block gap
80pxsection rhythm
128pxmajor vertical break
Zero radius
--radius: 0px, set !important on the universal selector. No component gets a rounded corner. The hard edge is what makes the surface read as a calibrated instrument rather than consumer software.
One shared gutter
All chrome routes through a single --gutter custom property. Content never sets its own horizontal inset - what the aligned-tessellation lint verifies mechanically.
04

The mark

An open bracket with registration ticks - an aperture, a viewport, a frame placed around a system to see inside it. It is drawn, never filled: butt caps, mitre joins, a single 3px stroke on a 48-unit grid. Watch it construct itself.

Construction

  • 48-unit grid. The aperture is an open bracket on a 48x48 field; the opening faces right, never closed.
  • 3px single weight. One stroke weight throughout - no tapering, no variable width.
  • Butt caps, mitre joins. Hard mechanical terminals, consistent with the 0px radius law.
  • Registration ticks. Six external ticks (in accent) read as calibration marks on an instrument bezel - the precision tell.
  • Mono-weight wordmark. Geist 500, 0.13em tracking, uppercase.
Primary lockup
Cartemy
Clearspace: one tick-length on every side. Mark and wordmark share an optical baseline.
05

Idioms

The recurring components, rendered live - the same code that ships on the surface. Hover the button; watch the telemetry settle.

Mechanical CTA
Connect read-only ->
Transparent body, single 1px accent border, mono uppercase. Fills to a 10% accent wash on hover; the arrow advances on the house easing. Never a soft filled pill.
Eyebrow
READ-ONLY ESTATE MAP
Mono, 0.12em tracking, muted ink, led by a 12px accent dash. Labels without shouting.
Telemetry HUD
The diegetic readout. Tabular mono; signal colour carries meaning. Counts settle once on entry - the earned micro-delight.
Diegetic scrim
Copy reads against true black
Imagery never carries copy directly. A directional scrim pours true-black under the text so legibility holds against any busy plate.
06

Motion grammar

Generation makes the still; code makes the motion. Movement is quick, quiet, eased - never bouncy, never decorative. It degrades cleanly under reduced-motion, and no flow waits on an animation. The proven moves from the live hero.

Scale-plunge depth

Depth-banded planes scale apart on scroll - near rushes, far recedes - a forward plunge into the estate. Progress is lerped toward target, so the scrub is continuous with no binary snap.

smoothstep / lerp 0.12 / no FLF morph

Phosphor beams

Hairline traces shoot inward toward the vanishing-point cores - the signature phosphor-assembly motif. Mostly accent-blue, occasionally white, fading as they arrive.

canvas / ~14 concurrent / accent-weighted

Self-constructing mark

The bracket draws its own stroke, then the registration ticks pop in sequence - the identity assembling itself like a phosphor line on a scope. Used on this page above.

SVG stroke-dashoffset / staggered

Count-up telemetry

The HUD counts up to the resolved estate on entry, then holds. One settle, not a loop - the single earned micro-delight per surface.

150-260ms band / eased / once
07

Signature moves

The house style - reach for these when building any Cartemy surface. What makes a screen unmistakably Territory-A rather than generic dark-mode SaaS.

01Diegetic HUD lensFrame reads as an instrument viewport, not webpage chrome. The user looks through a calibrated lens at their estate.
02Phosphor assemblyStructural elements draw themselves in like a phosphor line on a scope - the signature motion motif.
03Instruments as a numbered axisData renders as labelled hairlines on a sticky axis, never as blobs or rounded cards.
04Mechanical 1px CTAPrecise hairline buttons, transparent with an accent border. Mechanical, never soft.
05Accent is structural onlyThe blue marks structure and signal - never decoration. Headings stay monochrome; the accent earns each appearance.
06Grain + true depthA fine grain overlay for material finish; light handled deliberately, never muddy shadow. The difference between rendered and made.
08

Provenance + gates

This system is not proposed - it is extracted from a surface that already passed every gate, including the operator felt-gate that sits above the design board.

Proven on

  • +The live Cartemy hero - cartemy-hero.pages.dev - operator-felt-gated as exceptional.
  • +The landed product shell + shop-front - deploy/web-front, deploy/shell.
  • +Token source of record: deploy/web-front/index.html :root.
  • +Hero plate forged with Nano Banana Pro (4K), Territory-A aperture motif.

Mechanical gates held

  • +Aligned-tessellation lint - 8px scale, one shared gutter.
  • +WCAG 2.2 AA at the smallest text in use (ink-3 lifted to clear 4.5:1).
  • +Voice gate block=0 - R6 register, operator is the voice authority.
  • +Brand-wall: zero Taelis, zero Chancery strings on buyer-facing Cartemy surfaces.