One brand,
every format
Every rule, token, logo and template for making Gritmind work, for people and for Claude. Read live from the brand repo, so it is always the current version.
Using the Gritmind brand
In Claude, the brand loads itself. Anywhere else, give your tool the Markdown file for the job. Every page shows both: a prompt to try in Claude, and the files to hand over elsewhere.
Every Gritmind token, asset and rule in one place. Values on this page are read live from
tokens/tokens.json; the rules summarise guidelines/ and the brand skill.
Where this page and a source file disagree, the source file wins.
- Sign in with your Gritmind account in claude.ai, Claude Desktop, Cowork or Claude Code. The
gritmind-brandplugin comes with the company account; there is nothing to install. Not there? Look under Customize › Plugins. - Ask for the work and name the brand. "A Gritmind deck from these notes", "make this page on-brand".
- Claude does the rest. It reads the brand rules and the reference for that deliverable, and uses the shipped logos and tokens, with Alliance No.2 on the web and Inter in editable Office files.
/plugin install gritmind-brand --marketplace gritmindinc/gritmind-brand-marketplace
- Pick the file for what you are making, from the list below or from any page's banner.
- Copy its link with the link icon, or open it and copy the text. Every file is hosted next to this page, so no clone is needed.
- Paste it into your tool (ChatGPT, Copilot, Cursor, a design brief) with "Follow this brand guide", or read it yourself.
- SKILL.mdthe rules for every medium
- references/web.mdweb pages, app UI
- references/deck.mdslide decks, talks
- references/docs.mdone-pagers, reports, social cards
- references/canvas.mddiagrams, illustrations
- references/motion.mdvideo, motion
- tokens/tokens.jsonevery value, machine-readable
Guides
The brand page by page.
Every guide in one place
The brand page by page: the foundations, the formats you make, and how the brand changes.
Quiet, precise, deliberate
Gritmind is an applied-AI consultancy. Everything is quiet so the one thing that matters can be loud.
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.
Numbers are mono, prose is sans
Stats, timestamps, code and labels are always JetBrains Mono. Prose is always Alliance No.2. That split is a large part of what makes the work recognisable.
One accent per scope
Mint is the brand. Blue and green are sanctioned alternates that give a secondary page, section or deck chapter its own identity. Never two accents in one view.
Motion clarifies
It never decorates. Calm by default, the spring curve reserved for the logo, and prefers-reduced-motion always honoured.
Four arches and a wordmark
Use the SVG masters. Never redraw, trace or screenshot the logo.
Colourways
Both lockups are built from the designer's mark: the same arches, wordmark and ™, never retyped in Alliance No.2 (decision 0002).
Also in assets/logo/: one-colour navy-mono and white-mono versions for photos and print, the arches-only gritmind-mark-* for avatars, and a transparent 2000px PNG of every file for PowerPoint, Keynote and Word (decision 0006).
Clear space
x = arch height, on every sideThe arch spring
Hover or focus the logoArches draw together (outer arches 7.3% of the arch height, inner 2.6%: -18.5, -6.5, 6.5 and 18.5 master units) over on . The spring curve belongs to the logo alone.
Formal animation
0.6s, stacked lockup · gritmind-logo-animation.jsDon't
Each of these is wrongStretch or squash
Rotate
Recolour the arches to the accent
Add shadows, glows or effects
Not yet defined: minimum sizes, the arches-only mark (favicon, avatar), when to use stacked rather than horizontal, single-colour versions, co-branding lockups.
Navy ink, off-white ground, one mint
Never pure white or pure black as a ground. Contrast ratios below are computed live from the tokens.
Brand constants
Do not vary by themeSemantic roles
Contrast against that mode'sbg| Role | Light | Contrast | Dark | Contrast |
|---|
Accents
One per scope, applied withdata-accentThree days to twenty minutes
Everything inside a data-accent subtree recolours, CSS and canvas alike. Switch it:
Accent rules
- Mint is the brand. Every page ships mint unless a scoped alternate has been approved.
- Errors are red, never the accent. Error states use the
errortoken so they read as errors under any accent. - Blue and green are scoped. A secondary page, a case study, a deck chapter. Never mixed in one view.
- Never red and green as two categories in the same chart.
- Tints (
signal-tint) are for section dividers and backgrounds behind a figure, never for text.
Canvas palette
RGB triplets; navy inverts in dark mode| Name | Light | Dark |
|---|
Elevation
Resting cards are flatShown in the current theme. Section boundaries are a 1px hairline rule, never a shadow or a filled band.
Alliance No.2 and JetBrains Mono
Headings at 500, body at 400, tracking on everything sans. Headings never look loose.
Lead time fell from 72h to 20 min across 14 teams in Q3 2026.
Numbers, dates, IDs, currency and code in mono. Everything else sans.
Web type scale
Generated fromtype.scaleLong-form article text uses --body, softer than --ink; reserve full ink for headings.
Fallback: , same weights and tracking, wherever Alliance No.2 cannot load: PowerPoint, Keynote, Google Slides and Word files opened on a machine without it. Never both in one file (decision 0007). On the web it sits after Alliance No.2 and is not loaded; the rest of the stack:
Restraint is the whole point
Motion clarifies, it never decorates. Durations and curves below are the tokens, played as they are.
The signature move
- Grey wandering lines, equally weighted. About 1s of noise.
- One resolves left to right over 1.2 to 1.6s: jitter flattens, ink turns to signal, a soft glow arrives with the colour.
- The rest drop to about 18%. The resolved line holds. Once per piece.
Video timing
| Element enter (fade, 14px rise) | 250 to 300ms |
| Title card in | 600ms |
| Social loop line build | 300ms, 70ms stagger |
| Section transition | 400ms |
| Noise to signal | 1.2 to 1.6s |
| Hold on a stat | 2.5s min |
Reduced motion
- Web: a real
prefers-reduced-motionmedia query, everywhere. - Canvas: render the resolved end state, never frame zero.
- Video used as a page loop: ship a still of the resolved end state.
- Never linear, except continuous loops (marquees, tickers).
Quiet ink structure, one live accent element
If a diagram would not read as a still frame in a print deck, the animation will not save it.
The swoosh
Source: assets/graphics/ ·gritmind-swoosh.js- Four outlined bands through an arch and a U, offset like the logo's arches. One wave is an arch and a U; lengthen it by adding waves, never by stretching.
- Lines in the ground's ink colour. The band fill must match the ground, because it is what hides the bands behind; use it on flat grounds only.
- Not yet defined: where it appears, sizes, accent use, and motion timing.
draw(t)is the mechanism only.
Mark vocabulary
Reuse these before inventing new onesOpacity encodes attention
Exactly one signal-coloured element per canvas, and it is always the live one. Structure is never accent-coloured; ink never glows.
Charts
- One accented series; the rest slate at 40 to 85%.
- Label the accented series at its end, in mono. No legend box.
- Baseline only, at 12% ink. No box, no top or right spines.
- Round numbers: 4.4T, not 4,412,890,000.
Static SVG
Deterministic, non-looping. Built at build time, no JS.
Scroll-gated
One narrative diagram per view. Draws in once (~1.6s), then a calm 8 to 10s loop.
Hover-gated
Grids of glyphs. Still until hovered or focused; the resting frame reads on its own.
Pointer-driven
The hero showpiece. A one-off; never repeated elsewhere.
Declarative and anti-hype
Concrete beats abstract. Name the real number, the real constraint, the real failure. If a sentence would survive on any competitor's site, it is noise.
Writing rules
- No em dashes. A spaced hyphen ( - ) for asides. Anywhere: copy, code comments, JSON.
- Sentence case for every heading and title. Never Title Case.
- No exclamation marks. Contractions are fine.
- Every number is real and sourced. Unsourced numbers are exactly the noise we claim to cut.
One idea per slide
1600x900, margins 120 / 100, 12 columns with a 40px gutter. The mockup is drawn at native size and scaled down.
not days.
Title slide, column grid shown. Body content sits in the left 7 to 8 columns.
- Title · eyebrow top-left, headline 96px/1.05 with one accented word, client and date in mono at the foot.
- Section divider · number in mono at 140px in
signal-tint, name at 64px,surface-2ground. - Statement · one sentence, 72px/1.15, 12 words max.
- Stat · mono figure at 180px, label 28px in the accent, one line of context in muted.
- Content · heading 48px, at most 4 bullets at 24px/1.5 with a 7px accent dot.
- Quote · 40px/1.35 weight 500, 2px accent rule above at 50%, attribution in mono.
- Closing · the tagline, with courage and grit in the accent.
Careful on paper, plain in the inbox
Proposals, one-pagers and reports at A4 or Letter with 18mm margins. Email stays plain text or lightly styled.
PROPOSAL
Every claim is read twice and keyed once. Median handling time is 3.1 days, and most of it is waiting, not work. We propose a six-week build that removes the second read.
| Phase | Weeks | Fee |
|---|---|---|
| Discovery | 2 | $40,000 |
| Build | 4 | $120,000 |
Documents
- Title 36pt/1.1, one accented word. Body 11pt/1.6 in
body, 72ch measure. - Tables: no vertical rules, no zebra; numeric columns right-aligned in mono.
- Print styles are not optional. A table split across pages undercuts the argument that we are careful.
- Plain text or lightly styled HTML. No image-heavy templates, no tracking pixels.
- One accent element at most, usually none.
Signature: name, role, gritmind.com. Nothing else.
One build, three formats
30 fps, H.264 and AAC. Type is built in code, and every format keeps its content clear of the platform UI.
Process
On screen
- Build type in code (Remotion). AI video only for footage no type touches; never the logo, type or UI.
- First words by 2s. No logo intro. End on logo and
gritmind.com, held 2 to 3s. - Social loops (under 10s, muted in a feed): first frame is the last frame, text builds in 300ms with a 70ms stagger, the card holds about 3s, and the homepage signal lines may run behind it. Reference build:
templates/video/new-hire/. - Reading floor: 0.3s per word, 0.8s per card minimum. Gritmind sits at the slow end.
- One idea per card, 6 words ideal, 9 the ceiling. Works muted; captions on any speech.
- Cut to the beat when there is music; never hardcode frame counts.
- Sound is sparse. Music under -18 LUFS, effects only on structural moments, mix peaks below -1 dBFS.
- Log every asset in
LICENSES.md: source, licence, prompt and job id if generated.
Generous space, hairline structure
This page is built to the web spec, so the nav, cards, buttons and focus ring around you are the real thing.
Card grid gap 18 to 20px; card padding 24px, 32px for a feature card.
Components
A few primitives, used everywhereMono, uppercase, 60% ink
Optional 8px accent dot. 12px above the heading it introduces.
40px tall, fully rounded, 14px/500. Primary inverts in dark mode. Tab to see the focus ring: 2px signal, 3px offset, :focus-visible only.
Hover me
Surface, 20px radius, no border. Elevation only on hover: lift and the card shadow over .
8px radius. Focus uses the focus token, not the accent.
CSS only: a duplicated track translating -50%, for logos, for testimonials. Pauses on hover; both edges masked. Never rebuilt in JS.
In code
- Tokens flow through two CSS layers; Tailwind's
@theme inlineis load-bearing for scoped accents. - Islands only where needed. Marquees stay CSS.
- Canvases share one hook for DPR, resize, offscreen pause and reduced motion.
- Every canvas:
role="img"and a label describing what it depicts, not that it moves.
Before anything goes out
Tick through it here; nothing is saved. The guideline for each format adds its own items.
How the brand changes
Anyone can improve the guide. Nobody changes it in only one place.
Source-of-truth order
- 1 · tokens/tokens.json · every design value
- 2 · guidelines/ · the rules and the reasons
- 3 · assets/ and templates/ · published masters
- 4 · plugin/skills/gritmind-brand/ · the Claude skill, partly generated
When two disagree, the higher one wins and the lower one is a bug.
Flow
- Branch
brand/<topic>frommaster - Change it everywhere it applies: token, guideline, asset, template, skill
- Changelog entry under Unreleased, below
### Breaking,### Addedor### Fixed; that heading sets the version bump - PR into master with before and after images; review against the checklist and the PR checks
- Release with
node scripts/release.mjs: it writes the version into the changelog andplugin.json, then PR from master into main, taggedvX.Y.Z
| Class | Examples | Version | Needs |
|---|---|---|---|
| Breaking | A token value, logo geometry, a typeface, a core rule; renaming or removing an asset | Major | Decision record, owner approval, consumer list |
| Additive | New guideline, template, asset, token or spec | Minor | One maintainer review |
| Editorial | Wording, typos, examples, identical re-exports | Patch | One maintainer review |
Not decided yet
Gaps and inconsistencies in the current brand. Each one becomes a decision record when it is settled.
- Accent text contrast. Mint on the light ground measures , and in dark mode. Light mode passes only for large text (24px+, or 18.7px+ bold). Decide whether light-mode accent text below that size is allowed, or add a darker text token.
- Spelling. Shipped site copy is US English; the brand skill is British.
- Social look. The Forbes LinkedIn quote card uses a
#0e121dground,#5ab28agreen and bold 700 headlines. None are tokens. - Imagery. Team photos in social are decided (decision 0001). Stock, event and client-site photography is still open.
- Tagline and boilerplate. Long, short and one-line versions. The slogan, "With courage and grit, always first into the fire.", is settled (decision 0005).
- Deck tools. HTML only, or Keynote, PowerPoint and Google Slides templates too.
- Primary button colour.
web.mdspecifies#141936; the navy token is . This page uses the token.
Nothing changes silently
What changed in each version of the brand. Consumers such as the website pin a version tag
(vX.Y.Z), so check here what moved before upgrading.
One headline, one accented word
OG and social cards at 1200x630. Nothing in the outer 48px but the wordmark.