# Logo Masters are SVG. Do not redraw, trace, retype or screenshot the logo - use these files. Every master is built from the designer's mark (decision `0002`): the same arches, wordmark and ™ in both lockups. | File | Lockup | Natural size | Use on | Arch fill | Outline and wordmark | | --- | --- | --- | --- | --- | --- | | `gritmind-logo-full-navy-on-light.svg` | Horizontal | 195x40 | `#fafafa`, white, light photography | `#ffffff` | `#131938` | | `gritmind-logo-full-white-on-dark.svg` | Horizontal | 195x40 | `#20243a` and darker | `#20243a` | `#ffffff` | | `gritmind-logo-stacked-navy-on-light.svg` | Stacked | 125x77 | `#fafafa`, white, light photography | `#ffffff` | `#131938` | | `gritmind-logo-stacked-white-on-dark.svg` | Stacked | 125x77 | `#20243a` and darker | `#20243a` | `#ffffff` | Each box is tight to the artwork, with no built-in margin. Add the clear space yourself. Both lockups share one scale, so at natural size the arches are the same size in each. On a dark ground other than `#20243a`, set the arch fill to that ground colour so the overlaps still read. ## One-colour versions, the mark and PNGs Built from the masters by `scripts/build-logo-exports.mjs` (decision `0006`). Never edit them by hand or export your own - re-run the script. | File | What it is | Natural size | | --- | --- | --- | | `gritmind-logo-{full,stacked}-navy-mono.svg` | One colour, `#131938`, arch interiors transparent | as the master | | `gritmind-logo-{full,stacked}-white-mono.svg` | One colour, `#ffffff`, arch interiors transparent | as the master | | `gritmind-mark-navy-on-light.svg`, `gritmind-mark-white-on-dark.svg` | The four arches alone, same colourways as the masters | 53x40 | | `gritmind-mark-{navy,white}-mono.svg` | The four arches alone, one colour | 53x40 | | `.png` | Transparent PNG of every SVG here, masters included | 2000px on the long side | The mono versions cut the arch interiors out instead of filling them, so the ground shows through and the overlaps still read on any colour. `favicon.ico` at the repo root is built from `gritmind-mark-navy-on-light.svg` by `scripts/build-favicon.mjs`: the mark centred in a square, at 16, 32 and 48px. Netlify serves it at `/favicon.ico`, which is where browsers look for an icon on pages with no ``, such as the Markdown sources. Re-run the script whenever the mark changes. ## Which file to use Pick the SVG wherever the tool accepts it; it stays sharp at any size. Use the PNG only where SVG is not supported or renders badly, such as PowerPoint, Keynote, Word, Google Slides, email signatures and most social uploads. | You are making | Use | | --- | --- | | Web page, HTML deck or document on `#fafafa` or white | `gritmind-logo-full-navy-on-light.svg` | | Anything on `#20243a` | `gritmind-logo-full-white-on-dark.svg` | | PowerPoint, Keynote, Google Slides or Word | The matching `.png` of the two above | | A photo, video frame or coloured ground that is not `#fafafa`, white or `#20243a` | `navy-mono` on light, `white-mono` on dark | | One-colour print: embroidery, engraving, single-ink | `navy-mono` or `white-mono` | | Title slides, end cards, posters and other formal, centred layouts | The `stacked` lockup in the same colourway | | Social avatars and small squares where the wordmark cannot be read | A `gritmind-mark-*` file, centred with clear space equal to its height | Default to the horizontal lockup. Why: it fits headers, footers and narrow bands, and is what the website uses. Do not use the mark where there is room for the full logo; it is not a replacement for the name. ## Structure Each part is its own group, so CSS and animation can address it: ```html arch-1 is the leftmost, front arch; arch-4 the rightmost the interior ... letter-g, letter-r, letter-i-1, letter-t, letter-m, ... letter-i-2, letter-n, letter-d, tm ``` Recolour for a theme with `.arch-fill { fill: }` and `.arch-outline, .wordmark path { fill: }`. Arch outlines are filled shapes, not strokes, so their weight scales with the logo. ## Rules carried over from the brand skill - Never recolour the arches to the accent. - Never stretch, rotate or add effects (shadow, glow, gradient, outline). - Never set the wordmark in a typeface, Alliance No.2 included; it is drawn. - Clear space on all sides equals the arch height. ## Motion On the website the four arches draw together on hover, over 300ms on the logo spring `cubic-bezier(.34,1.56,.64,1)`. The outer arches move 7.3% of the arch height and the inner ones 2.6%: in master units, `#arch-4` moves `-18.5`, `#arch-3` `-6.5`, `#arch-2` `6.5` and `#arch-1` `18.5`, as a `translateX` on the group. No movement under `prefers-reduced-motion`. The spring curve is reserved for the logo. The formal logo animation is `assets/graphics/gritmind-logo-animation.js`, a dependency-free rebuild of the After Effects master (see "Sources") that runs on an inline stacked master. In 0.6s the arches fan out from a single arch, the wordmark is revealed by a circle growing from its centre, and the wordmark pops 5% as the circle completes. Every keyframe and easing curve comes from the `.aep`, and a render compared frame by frame against `Gritmind logo.mp4` differs only by edge antialiasing. ```js var anim = GritmindLogoAnimation.prepare(svgElement); // an inline gritmind-logo-stacked-*.svg anim.play(); // real time; resolves when done; reduced motion shows the end state anim.render(0.25); // one exact frame, for video renders (Remotion and similar) ``` Use it to bring the logo in at the end of a video or page load, then hold it still; it is not a loop and not a hover effect. ## Regenerating the masters All four masters are built from the designer's Illustrator files, with every colour mapped onto `tokens/tokens.json`. Re-run when the designer updates the `.ai` files, and never hand-edit the output: ```bash V="/Work/Gritmind/Brand/Logo vector" python3 -I scripts/import-logo-ai.py "$V/gritmind logo.ai" light stacked assets/logo/gritmind-logo-stacked-navy-on-light.svg python3 -I scripts/import-logo-ai.py "$V/gritmind logo black.ai" dark stacked assets/logo/gritmind-logo-stacked-white-on-dark.svg python3 -I scripts/import-logo-ai.py "$V/gritmind logo.ai" light horizontal assets/logo/gritmind-logo-full-navy-on-light.svg python3 -I scripts/import-logo-ai.py "$V/gritmind logo black.ai" dark horizontal assets/logo/gritmind-logo-full-white-on-dark.svg node scripts/build-logo-exports.mjs node scripts/build-skill.mjs && node scripts/build-reference.mjs ``` `build-logo-exports.mjs` renders the PNGs in headless Google Chrome. Set `CHROME` to its binary if it is not in `/Applications`. The horizontal lockup's spacing (the gap between arches and wordmark, and the arches' vertical position) is set by two constants in the script, taken from the previous website lockup. Change them there, not in the SVG. ## Sources Working files live in the shared iCloud drive, not in git: - Logo vectors: `Work/Gritmind/Brand/Logo vector/gritmind logo.ai` (dark on light) and `gritmind logo black.ai` (light on dark) - Logo animation: `Work/Gritmind/Animations/Logo animation/gritmind logo.aep`, comps "Gritmind logo 2" and "Gritmind logo black animated" - Rendered animations: `Work/Gritmind/Video/Gritmind logo.mp4` and `Gritmind logo black animated.mp4` (3840x2160, 29.97 fps, 1s) ## Still to define Minimum sizes (the ™ gets hard to read below about 24px tall), the favicon and app icon built from the mark, print-specific colours (CMYK, Pantone) for the mono versions, and co-branding lockups. Tracked in `CHECKLIST.md`.