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.
- tokens/tokens.jsonbrand, semantic, accents, canvas, shadow
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 stacks:
Generous space, hairline structure
Card grid gap 18 to 20px; card padding 24px, 32px for a feature card.
A few primitives, used everywhere
This page is built to the web spec, so the nav, cards, buttons and focus ring around you are the real thing.
Mono, 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.
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.
- skill/gritmind-brand/SKILL.mdVoice
- CLAUDE.mdWriting rules
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.
Specs by medium
Same rules, different canvases. Mockups below are drawn at native size and scaled down.
Decks
1600x900 · margins 120 / 100 · 12 columns, 40px gutternot 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.
Documents
A4 or Letter · 18mm margins
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 |
- 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.
OG and social cards
1200x630 · nothing in the outer 48px but the wordmark- Headline 56 to 72px, 9 words max, one accented word. Mono eyebrow with the accent dot.
- One geometric element bleeding off the right at ~10%: the dial or a resolved signal line. No photo, unless the card is about a team member: then a real photo of that person (decision 0001).
- Generated at build time from frontmatter, so every post has one and none drift.
Video
One build, three formats · 30 fps · H.264, AACProcess
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.
Web
- 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.
- 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.
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 · skill/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
- PR into master with before and after images; review against the pre-flight
- Release by PR from master into main, tagged
vX.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 |
Before anything goes out
Tick through it here; nothing is saved. Each production guideline adds its own items.
- CHECKLIST.mdPre-flight
Not decided yet
Gaps and inconsistencies in the current brand. Each one becomes a decision record when it is settled.
- CHECKLIST.mdDecisions to make first
- 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.