---
name: gritmind-brand
description: Gritmind's visual and verbal identity - colour tokens, typography, motion, layout and voice - for producing any branded asset. Use when creating or reviewing Gritmind web pages, UI, slide decks, videos or motion graphics, PDFs, one-pagers, proposals, reports, social cards or OG images, or when asked to "make this look like Gritmind" / "use our brand" / "on-brand".
---

# Gritmind Brand

Gritmind is an applied-AI consultancy. The identity is built on one idea:
**signal over noise**. Everything is quiet, precise and deliberate, so the one
thing that matters can be loud.

Work from `assets/tokens.json` - it is the machine-readable source of truth,
copied from the `gritmind-brand` repo's `tokens/tokens.json` by
`scripts/build-skill.mjs`, so it never drifts from the brand.

## The one rule

**The accent colour is a scalpel, not a highlighter.** Roughly one accented
element per view: one word in a headline, one line on a chart, one active state.
If two things are accented, neither reads as the signal. This is the single
easiest way to get Gritmind work wrong.

## Core invariants

These hold across every medium.

| | |
|---|---|
| Ink | `#131938` navy - text and primary strokes |
| Ground | `#fafafa` off-white (light) / `#20243a` (dark) |
| Accent | `#5e8e81` mint (light) / `#93e0c6` (dark); tint `#eaf6f0` |
| Error | `#fb0102` red (light) / `#ff452d` (dark) - error states only |
| Muted | `#5c6475` (light) / `#95a2be` (dark) |
| Display / body | Alliance No.2, weight 500 for headings, 400 for body |
| Data / labels / UI meta | JetBrains Mono, uppercase for labels |
| Tracking | `-0.02em` on everything sans; headings never look loose |
| Corner radius | 20px cards, 999px pills, 8px inputs |

**Blue `#2156f6` and green `#06a550` are sanctioned alternates**, used to give a
secondary page, section, or deck chapter its own identity. Pick one accent per
scope and commit - never two accents in one view. Dark-mode variants and tints
are in `assets/tokens.json` under `accents`.

Numbers, stats, timestamps, code and labels are **always mono**. Prose is
**always sans**. That split is a large part of what makes the work recognisable.

## Voice

Declarative and anti-hype. Concrete beats abstract. Name the real number, the
real constraint, the real failure.

- "Three days to twenty minutes" - not "dramatic efficiency gains"
- "not demos, not decks" - not "production-ready solutions"
- "teams that ship, not teams that watch"

Avoid: *leverage, seamless, cutting-edge, revolutionise, unlock, empower,
game-changing, transform your business*. If a sentence would survive on any
competitor's site, it is noise - cut or sharpen it.

The slogan is **"With courage and grit, always first into the fire."** - exact
wording, a sign-off not a headline, at most once per piece (decision `0005`).

Regular hyphens for asides, never em dashes (write " - ", not "—"). Sentence case for headings, never Title Case. Contractions
are fine. Never exclamation marks.

## Motion

Restraint is the whole point - motion clarifies, it never decorates.

| Purpose | Duration | Easing |
|---|---|---|
| Hover / colour change | 180ms | `ease` |
| Card lift, reveal | 250ms | `ease` |
| Modal, overlay | 300ms | `cubic-bezier(.34,1.3,.5,1)` |
| Signal resolving from noise | 450ms | `ease` |
| Logo arch spring | 300ms | `cubic-bezier(.34,1.56,.64,1)` |

The spring curve is reserved for the logo. Everything else stays calm.
**Always honour `prefers-reduced-motion`** - in web output that means a real
media query; in video it means shipping a reduced-motion cut when the piece is
used as an embedded loop.

## Which reference to read

Read the one that matches the deliverable - do not read all four.

| Building | Read |
|---|---|
| Web pages, app UI, components | `references/web.md` |
| Canvas/SVG diagrams, animated illustrations, glyphs | `references/canvas.md` |
| Slide decks, pitch decks, talks | `references/deck.md` |
| Video, motion graphics, animated loops | `references/motion.md`, then `guidelines/production/video.md` for the production process |
| One-pagers, proposals, reports, OG/social cards | `references/docs.md` |

## Assets

- `assets/tokens.json` - all colour, type, spacing, motion and shadow values
- `assets/logo/gritmind-logo-full-*.svg` (horizontal) and
  `gritmind-logo-stacked-*.svg` (stacked), each `navy-on-light` and
  `white-on-dark` - four arches + the drawn wordmark and ™. Never set the
  wordmark in a typeface, Alliance No.2 included. Never recolour the arches to
  the accent; never stretch, rotate, or add effects. Clear space on all sides
  equals the arch height; the files carry no margin of their own. On dark grounds
  the arches are filled with the ground colour and outlined white. Parts are
  grouped and classed (`arch`, `arch-fill`, `arch-outline`, `wordmark`) for CSS
  and animation.
- `assets/logo/*-navy-mono.svg` and `*-white-mono.svg` - one colour with the
  arch interiors cut out, for photos, coloured grounds and single-ink print.
  `gritmind-mark-*.svg` - the arches alone, only where the wordmark cannot be
  read (avatars). Every SVG has a transparent `.png` beside it, 2000px on the
  long side, for PowerPoint, Keynote, Word and email. Which to pick:
  `assets/logo/README.md`, "Which file to use".
- `assets/graphics/gritmind-logo-animation.js` - the formal logo animation
  (0.6s, stacked lockup), rebuilt from the After Effects master. Use it, never
  re-animate the logo by hand; `render(t)` gives exact frames for video
- `assets/fonts/` - Alliance No.2 and JetBrains Mono woff2 files
- `assets/graphics/gritmind-swoosh.js` and `gritmind-swoosh-*.svg` - the swoosh:
  four outlined bands through an arch and a U, a nod to the logo's arches.
  Lines in the ground's ink colour; the band fill must match the ground, so use
  it on flat grounds only. Lengthen it by adding waves, never by stretching.
  Rules and API: the brand repo's `assets/graphics/README.md`