The Nistor mark

The mark

Lockups

The wordmark is nistor, lowercase, in Inter SemiBold with −3.5 % tracking, always in the ink colour of the ground, never the accent. In prose and titles the name is written Nistor.

• Horizontal (the default): the mark is 1.15 × the font size, the gap 0.32 × the mark, the mark centred on the middle of the capitals.
• Stacked: the mark above the word, centred; the mark is twice the cap height, the gap half the cap height.
• Each comes in four colourways: two colours on dark, two colours on light, one colour, and white.

Colours

The mark's own colours. The interface's are under UI colours, its status colours under Status colours.

• Accent #6366f1
  The three diagonal cells, on every ground: the brand accent. The interface's accent is #4F46E5 (see UI colours).
• Ink on dark #EAEBF2
  The edge cells and the wordmark on #0B0C12 and other dark grounds.
• Ink on light #0B0C12
  The edge cells and the wordmark on white and #F4F5F9.
• Ground #0B0C12
  Dark backgrounds and the dark app-icon tile.
• Icon tile #6366f1
  The coloured app-icon tile; the mark on it is all white.

The accent reaches 4.47:1 on white and 4.37:1 on the dark ground, above the 3:1 that graphics need, and under the 4.5:1 that text needs: it is never the colour of UI text.

Clear space and size

The 16 px exception

The mark's minimum size is 16 px. The 16 px favicon is the one file that goes under it: its 16 px image is a dark tile, and a 16 px mark would leave the tile no margin, so it carries the mark's hinted 14 px layout (cells 4 px at 0, 5 and 10, corners 1 px) at offset 1, every cell edge on a whole pixel and 1 px of tile around it. No other file draws the mark under 16 px.

Don'ts

One-colour use keeps all six cells: the meaning then rests on their position alone. Never:

• Rotate it.
• Recolour or reorder the diagonal.
• Fill the lower half.
• Outline the cells.
• Add gradients, shadows or effects.
• Squash or stretch it.
• Put the accent cells on an accent ground.
• Change the corner radius.

The logo animation

The loader morphs the same matrix through five related drawings and always lands back on the mark. A cell's colour never changes, only its place and shape. One loop lasts 7.1 seconds; every move takes 560 ms and starts upstream.

1. Six Cells: the mark (900 ms)
2. Zeros Below: the full matrix; the empty half as three dots (520 ms)
3. Flat Diagonal: the triangle turned, the assets along the base (520 ms)
4. Matrix N: the outer columns in ink, the lit diagonal between them (620 ms)
5. Node Path: the assets as discs on one line (560 ms)
6. Bracket N: the diagonal between square brackets (620 ms)

On a page load the mark assembles once (the intro, 900 ms). A loader appears only after 400 ms of loading, stays at least 600 ms, and ends on the mark. The custom element is one dependency-free script: nistor-loader.js.

The same animations, as GIF and as WebM video, are in the downloads below. Under reduced motion this page shows the still mark in place of each GIF.

UI colours

The interface takes its colours from Nistor's design tokens, not from the mark. The tables below are drawn from the same token files the product ships, so they always show what it uses.

Two accents, two jobs

• #6366F1 (indigo 500), the brand accent: the mark's diagonal, illustrations, and display type of 24 px and more. It reads 4.47:1 on white, under the 4.5:1 body text needs, so it never colours UI text or controls.
• #4F46E5 (indigo 600), the UI accent (--primary): the primary action, links, the current nav item, selection and focus. In the dark theme the fill is #818CF8 with ink text on it, and accent text is #A5B4FC.

Indigo marks only what the user can act on, or where they are; everything else is neutral. The neutrals carry the mark's own ink, #0B0C12, and ground, #F4F5F9.

Tonal ramps

Roles

Each role's light and dark value. Code names the role (var(--primary)), never a ramp step or a literal. The status roles are under Status colours.

Contrast

Every text role on every surface, as WCAG 2 contrast ratios rounded down. The token build fails when a pair drops under its minimum.

Status colours

One set for every surface: the product and its plugins, Nistor Cloud, the status page and the extensions. Error, warning, success, info and neutral, each with a container and the text colour on that container.

• Status colour is for status only: an icon plus its text, a status badge, a banner, or a chart series that means a state. Never a card fill, a card border, a left rail or a section tint.
• Colour never carries a state alone: the icon and the word say it too.
• No other red, amber, green or blue: a surface that needs a status colour takes these roles.

Type

Inter for everything; JetBrains Mono only for identifiers and code (asset names, SQL, IDs, hashes), never for labels or numbers. Sentence case everywhere; uppercase only for rare overlines. The product reads at 14 px, with a 12 px floor and 13 px only inside dense tables. The display scale belongs to this website alone, for the hero and section titles. The wordmark is outlines, not type.

Shape and depth

• Radii 4, 8, 12 and pill, nothing else. Buttons are pills.
• Elevation 0 to 2. Cards and panels are flat and separated by 1 px hairlines; only what floats casts a shadow: menus and tooltips (1), dialogs and the snackbar (2). No card inside a card.
• No glow, gradient or blur on any brand element: the mark, the lockups, the tiles, the social cards and the store images sit on a flat ground.

Icons

• lucide only, one pinned version across the product, its plugins and the extensions. Codicons only inside VS Code, where they are the editor's own icons.
• Sizes 16, 20 and 24 px; stroke 1.75 at 16 px, 2 at 20 and 24 px. Icons take the text colour.
• No emoji anywhere in a UI, status included: a status is its icon in the status colour, plus its text.
• A button with only an icon has an accessible name, and a tooltip with the same words.

Illustration

Empty states carry a spot illustration drawn in the mark's own language:

• On the Six Cells grid: a 64-unit box, cells of 16 units with 4-unit gaps and 4-unit corners. A drawing may leave the 3 × 3 layout (more cells, a partial row), never the module.
• Two colours: the ink of the ground and the brand accent #6366F1. No third colour and no status colour: the error illustration is not red.
• Filled cells only: no outlines, no faces or characters, no gradients or shadows.
• 64 or 96 px, so every edge stays on a whole pixel, above the empty state's title.
• Six to start, one per kind of empty state: no data, no results, all clear, error, not connected, locked.

Screenshots

• Marketing pages and the docs show the real product: never a mock-up, a redrawn screen or a stock image.
• Capture them from the demo with the product's capture tool, in the light theme, at 1440 × 900 and 2× (a 2880 × 1800 PNG).
• Crop to the part that makes the point; never edit the pixels (no blur over data, no recoloured UI). Demo data only.
• When the screen changes, capture it again: a screenshot that no longer matches the product comes down.

Names

Every title, page, manifest, store listing and doc uses these names. Product names are capitalised; nistor.cloud is a domain, never a name; the lowercase nistor exists only as the wordmark.

Partners

• Use a partner's logo unaltered, from the vendor's own brand or press page, and note the source beside the file.
• Full colour on light grounds; on dark grounds, the vendor's own dark (reversed) variant. Where the vendor offers none, set the colour logo on a white chip with an 8 px radius.
• Never recolour a logo, with CSS filters (invert, hue-rotate, brightness) or by hand; never redraw, stretch or crop it.
• A product of a larger vendor appears with that product's own logo: Google Workspace's, not Google's “G”.
• “Works with Google Cloud” and every partner badge follow Google's partner guidelines. Partner logos are their owners' trademarks and appear only to say that Nistor works with the product.

Downloads

Every file is generated from the master mark in the Nistor repository (brand/); SVG wherever it is accepted, PNG at 1× and 2× otherwise.

Trademark

The Nistor name and the mark identify the Nistor project and its editions. The Apache License 2.0 that covers the Nistor core grants no rights to them: its section 6 excludes the licensor's trade names, trademarks and product names. You may use the name and the mark to refer to Nistor, unchanged and following this page. For anything else, such as a product name, a logo of your own or merchandise, write to info@nistor.io.