Build on-brand Interactor interfaces
The visual language behind the Interactor surface — a dark operating-system canvas, a kelly-green primary, and a monospace information layer. Tokens, type, components, and brand, ready to drop into your own product.
Drop in the tokens, build on them
The system is plain CSS custom properties — no framework, no build step. Load the fonts and the two token files, then reference the variables. Everything on this page is built from them.
/* 1 · fonts — Montserrat, Open Sans, JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* 2 · tokens — load first, then the component layer */
@import 'colors_and_type.css'; /* color · type · radii · spacing */
@import 'interactor.css'; /* buttons · cards · nav · inputs */
/* 3 · build on the tokens */
.cta {
background: var(--lime);
color: var(--navy);
border-radius: var(--r-sm);
font-family: var(--font-display);
}
What you get
A dark canvas, with green as the only energy
Near-black navy base, four elevation steps, a white text ramp, and kelly green as the single saturated hue. Click any swatch to copy its token.
Brand — Green is the only saturated hue in normal use — rationed to action, state, and brand moments.
Canvas & elevation — Depth comes from slightly lighter navy-blacks — not shadows on white.
Text ramp — White is reserved for type. Four steps from heading to disabled.
Semantic — State only — success is the same kelly green.
Three families, one instrumented voice
Montserrat sets the display register, Open Sans carries body and UI, and JetBrains Mono is the signature info layer — eyebrows, tags, status, and metadata in uppercase with wide tracking.
Type scale
8-pt rhythm, compact corners
Spacing steps on an 8-pt scale; a 56px column rhythm drives marketing layout. Radii are deliberately compact — nothing fully sharp, nothing bubble-round.
Spacing scale
Radii
Hairlines do the work; one glow is sacred
Borders define most surfaces. Inset hairlines plus a single soft drop for modals — and the mint glow, reserved to mark the agent entry point.
One stroked 24-grid set
A single custom set — 1.5–1.7px stroke, rounded caps, no fill, drawn with
currentColor
so every glyph inherits its parent's color. No icon font, no emoji.
The core kit
Buttons, chips, status, badges, cards and inputs — built straight from the tokens. Hover states brighten borders; press nudges 1px; focus rings switch to mint.
Buttons
Chips, status & badges
Card & input
One base card — elev-1 surface, 1px hairline, 14px radius. Roles stack on top; no colored accents.
Place the artwork — never typeset it
The wordmark is artwork and the mark is a logo, not an icon. Use the supplied lockups on the right surface; keep clearspace of at least one mark-height; never redraw or recolor.
- Place the supplied PNG lockups; pick the version for your surface.
- Keep clearspace ≥ 1× mark height on every side.
- Minimum 64px on web, 32px in-app, 20px absolute floor.
- Typeset "interactor" in Montserrat or any font.
- Redraw the mark, recolor it, or add effects.
- Use the legacy Pulzze / IoT tagline lockups.
Confident, technical, plain
A builder talking to builders. Sentence-case headlines, "you / your", outcomes stated as fact. The mono info layer carries the system's signature.
Casing
Headlines and body run sentence case. The info layer — eyebrows, tags, status, metadata — is UPPERCASE mono with wide tracking.
✓ FOUNDATIONS · TYPOGRAPHY
✗ Three Modes, One Conversation
The middot
The · middot is the connective tissue of the info layer — joining model names,
modes, latency, versions, and status into a system-log rhythm.
MIT · v2.4 · updated 2026-05-20