Brand

The interface itself (accent, status colour, type scale, page anatomy, navigation) follows the design charter.

The brand kit lives in brand/ at the root of this repository: the mark, its colourways, the lockups, the loader and the rules for using them. Every file there, and every copy of the mark in the product, is generated from brand/mark.svg and brand/loader/states.json by node scripts/brand/build.mjs; CI runs node scripts/brand/build.mjs --check and fails when a copy drifts.

The mark#

A01c "Six Cells": the upper triangle of the lineage matrix of three assets. The diagonal cells (the assets) are always the accent #6366f1; the cells above it (the lineage edges) are the ink: #EAEBF2 on dark grounds, #0B0C12 on light ones. The empty lower half is part of the mark.

Rules, in short (the full list is in brand/README.md):

• keep one cell (25 % of the mark's height) of clear space on every side; never smaller than 16 px (the horizontal lockup: 80 px wide);
• never rotate, recolour, reorder, outline or squash it, change its corner radius, fill the lower half or add effects; never put the accent cells on an accent ground (on indigo, use the all-white mark);
• one-colour use keeps all six cells.

UI colour system#

The interface's colours are the design tokens (@nistor-io/tokens, web/tokens/README.md), following the design charter. The tables here and in brand/README.md are generated from the token sources by node scripts/brand/build.mjs, so they cannot drift.

• #6366F1, the brand accent: the mark, illustrations, display type of 24 px and more. Never UI text or controls (4.47:1 on white).
• #4F46E5, the UI accent (--primary): the primary action, links, the current nav item, selection, focus. Dark theme: fill #818CF8 with ink text, accent text #A5B4FC.

Text on each surface, light theme (minimum 4.5:1):

Text on each surface, dark theme (minimum 4.5:1):

Text on its fill (minimum 4.5:1):

Borders and the focus ring on each surface (minimum 3:1, light / dark):

Status colours#

One set (error, warning, success, info, neutral) with containers, for every surface. Status colour is for status only: an icon plus its text, a badge, a banner, a chart series that means a state; never a fill, a border, a rail or a tint.

Type#

Inter for everything, JetBrains Mono only for identifiers and code. The product scale is the charter's; the display scale is the website's alone.

Product scale (the shell, plugins, Nistor Cloud, the extensions, the docs):

Display scale (the website only):

Shape and depth#

Radii 4 / 8 / 12 / pill; elevation 0 (flat cards) to 2 (dialogs, the snackbar); no glow, gradient or blur on any brand element, the social cards and store images included.

Icons#

lucide only, one pinned version across the shell, its plugins and the extensions (0.577.0); 16, 20 and 24 px, stroke 1.75 at 16 px and 2 above; no emoji anywhere in a UI; codicons only inside VS Code. Details: brand/README.md.

Illustration#

Empty-state spot illustrations on the Six Cells grid (64 units, cells 16, gaps 4, corners 4), in two colours (the ink of the ground and #6366F1), filled cells only, no outlines and no faces. Six to start: no data, no results, all clear, error, not connected, locked. Details: brand/README.md.

Screenshots#

The real product only, captured from the demo with web/shell/scripts/capture-screens.mjs --scale 2, light theme, 1440 × 900 at 2×; cropped, never retouched. Details: brand/README.md.

Names#

Nistor, Nistor Cloud, Nistor Enterprise, Nistor Cloud admin (the staff console), Nistor Inspector (Chrome), Nistor (VS Code); the AI entry point is "Ask AI", its page the "AI assistant", the proposals feature "Advisor". nistor.cloud is a domain, never a name. The full table: brand/README.md.

Partners#

Partner logos unaltered, from the vendor's own asset page: full colour on light, the vendor's dark variant on dark, or the colour logo on a white 8 px-radius chip when there is none; never recoloured with filters. Details: brand/README.md.

The 16px exception#

The 16 px favicon is the only file with the mark under 16 px: the hinted 14 px layout of geometry.json at offset 1 inside the 16 px tile (decided 18 October 2026). Every icon size:

Downloads#

The website publishes the same files under /brand/, with PNG renders at 1× and 2× and the social images (avatars, banners, the repository social preview, store images). The Chrome Web Store promo tile and marquee are also in chrome-extension/store/.

In a README or a doc, use the SVG files with <img>:

<img src="brand/lockup-horizontal-light.svg" height="48" alt="Nistor">
<img src="brand/loader/loader-loop-light.svg" width="48" height="48" alt="Loading">

The name is "Nistor" in titles and prose; the wordmark in the lockups is the lowercase nistor.

The loader#

The loader morphs the mark through five related states (zeros, flat, Matrix N, line, bracket) and always lands back on the mark. Modes:

• loop (default): the full cycle, 7.1 s; renders as pulse below 28 px and under prefers-reduced-motion;
• intro: the mark assembles once (0.9 s) and stays; under reduced motion it shows the still mark;
• pulse: the mark stands still and the diagonal dims in turn (inline spinners);
• static: one state, still (state="n" …).

Page and route loaders appear only after 400 ms of loading and, once shown, stay at least 600 ms; a splash fades out over 350 ms after finish(). While loading the loader has role="status" and the label "Loading" (or the page name); when done, role="img" and the label "Nistor". The ink follows currentColor.

Web component#

brand/loader/nistor-loader.js defines <nistor-loader> with no dependency (the shell serves a copy as /nistor-loader.js for its boot splash):

<script src="nistor-loader.js"></script>
<nistor-loader style="width:64px;height:64px"></nistor-loader>
<nistor-loader mode="intro"></nistor-loader>
<nistor-loader mode="static" state="n"></nistor-loader>
<script>
  // let the current move end, land on the mark, then go on
  document.querySelector('nistor-loader').finish().then(() => { /* ready */ });
</script>

Events: nistor-loader-state (detail.state) when a state is reached, nistor-loader-done when it lands on the mark. NistorLoader.stateAt(ms) gives the exact frame at any time, for tests and frame exports.

React (@nistor-io/ui)#

import { useEffect, useRef } from 'react';
import { NistorLoader, NistorMark } from '@nistor-io/ui';

function Splash({ ready, onFinished }) {
  const ref = useRef(null);
  useEffect(() => { if (ready) ref.current.finish().then(onFinished); }, [ready]);
  return <NistorLoader ref={ref} size={64} label="Loading Nistor" />;
}

<NistorLoader mode="pulse" size={20} />      // inline spinner
<NistorLoader mode="static" state="n" />     // one state
<NistorMark size={24} />                     // the mark itself, hinted at small sizes

NistorLoader props: mode (loop, intro, pulse, static), state (static only), size in px, label, onDone, speed; its ref exposes finish(). NistorMark props: size, tone (two-colour or one-colour), title (makes it an image with that label).

Changing the brand#

Edit only the inputs (brand/mark.svg, brand/loader/states.json with brand/loader/nistor-loader.js, or brand/wordmark.svg through scripts/brand/outline_wordmark.py), then run node scripts/brand/build.mjs and commit every changed file. New or changed PNG/ICO files need a sign-off in scripts/ci/oss_reviewed.json before the leak gate passes. For the website, run make brand NISTOR=<this checkout> in the website repository; for Nistor Cloud, run node scripts/brand/build.mjs --enterprise <Nistor Enterprise checkout> here and commit what it writes there. The repositories' GitLab avatars come from node scripts/brand/build.mjs --avatars <website checkout>/docs/brand/repo-logos (one per repository listed in that folder's avatars.json, by class); setting them on GitLab is done by hand. A change to the design tokens changes the generated tables of brand/README.md and this page: run the brand build after the token build.

Trademarks#

The Apache License 2.0 of this repository grants no rights to the name "Nistor" or to the logos (section 6); see brand/README.md.