---
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,
generated from the brand repo's token file, so it never drifts from the brand.
Every path in this skill is relative to the folder this file is in.

## 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 |
| Fallback | Inter, same weights, where Alliance No.2 cannot load: PowerPoint, Keynote, Google Slides, Word. Never both in one file (`references/deck.md`) |
| 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 " - ", never the long dash). 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 them all.

| 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: `assets/graphics/README.md`
- `decisions/` - the brand decision records, cited by number (decision `0005`
  is `decisions/0005-slogan.md`). Read one when you need the reason behind a
  rule, not to look the rule up