The interface kit.

One stylesheet for the developer center and every product surface. Every token starts with --ih- and every class with ih-, so it drops into any framework without collisions.

Download ih-interface.css Brand guidelines

Use
Tokens
Type
Buttons
Score
Cards
Code and tables

Use.

Link the fonts and the kit from this domain, then put ih-root on the element that should inherit the base type and color. The shared header and footer come from chrome.css and chrome.js.

<link rel="stylesheet" href="https://intelligenthandshake.com/assets/fonts.css">
<link rel="stylesheet" href="https://intelligenthandshake.com/brand/interface/ih-interface.css">
<link rel="stylesheet" href="https://intelligenthandshake.com/assets/chrome.css">
<script src="https://intelligenthandshake.com/assets/chrome.js" defer data-current="resources"></script>

<body class="ih-root">
  <div data-ih-header></div>
  ...
  <div data-ih-footer></div>
</body>

Tokens.

--ih-paper
--ih-white
--ih-wash
--ih-tint
--ih-ink
--ih-ink-soft
--ih-rule
--ih-risk
--ih-sapphire
--ih-sapphire-deep
--ih-turq
--ih-turq-deep

Type: --ih-font Inter, --ih-font-display Newsreader, --ih-mono IBM Plex Mono. Sizes --ih-size-1 to -7. Shape: --ih-radius 4 px, --ih-hairline. Space: --ih-space-1 to -6. Score colors: --ih-s-H to --ih-s-U.

Type.

Eyebrow · ih-eyebrow

Person Action endpoint

Returns the IH Score and the decision for a known person, in milliseconds. This is ih-lede.

Body text is Inter at --ih-size-3. A product name is set as Intelligent Call, second word bold. A note is ih-note, soft ink.

Buttons, pills, badges.

Get an API key Read the guide Tag verified Small Beta Live GET POST DELETE v2

<a class="ih-btn ih-btn-primary">Get an API key</a>   <a class="ih-btn">Read the guide</a>   <a class="ih-btn ih-btn-live">Tag verified</a>
<span class="ih-pill">Beta</span>   <span class="ih-pill ih-pill-live">Live</span>   <span class="ih-badge ih-badge-get">GET</span>

The score.

HMLNRU

Inline in a sentence: this session scored H in 86 ms.

<span class="ih-score s-H">H</span>   sizes: ih-score-sm · ih-score · ih-score-lg

Cards and panels.

Intelligent Tag

The script that identifies the visitor and asks for the decision while the page loads.

Person Action

The call that returns the IH Score and the decision.

Subject panel

ih-panel: the tinted panel for the one thing this view is about.

ih-callout: a note that matters. The endpoint is non-blocking; if no score returns, render the default.

ih-callout-warn: API keys are shown once. Store them in your secrets manager.

Developer center

ih-panel-dark: midnight, for the single call to action or the closing band.

Code and tables.

// ask for the decision while the page loads
const r = await fetch("https://api.intelligenthandshake.com/v2/action", { method: "POST", body });
const { score, decision, latency_ms } = await r.json();   // "H", {...}, 86

Field	Type	Meaning
score	string	One of H, M, L, N, R, U.
decision	object	The offer, route, and copy for this moment.
latency_ms	number	Time to decide, measured server side.

API key

Environment

Download ih-interface.css Brand guidelines