--- client: Gritt title: Gritt Brand Book tagline: A construction super-intelligence that does physical work. updated: August 2026 version: 1.0 wordmark: /brand/gritt/wordmark-black.svg site: gritt.ai studio: More Air --- ```json:theme { "surface": "#FFFFFF", "paper": "#F9F5EE", "ink": "#1D1D18", "dark": "#1D1D18", "onDark": "#FFFFFF", "inkRgb": "29, 29, 24", "onDarkRgb": "255, 255, 255", "display": "\"Poppins\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "ui": "\"Poppins\", -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "fonts": "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" } ``` ```json:audiences [ { "for": "Marketing and partners", "need": "The logo, the palette, the tone of voice, and what not to do with any of them.", "jump": ["logo", "colour", "voice"] }, { "for": "Designers", "need": "Type scale, palette roles, icon rules, and the Figma library.", "jump": ["typography", "colour", "icons"] }, { "for": "Engineers", "need": "Tokens as CSS or JSON, fonts, and brand.md for your own AI tooling.", "jump": ["files"] } ] ``` ## Essence Gritt's mission, in their own words: *"We are building a Construction super-intelligence designed to perform physical work on outdoor sites."* That is a robotics company, not a software one, and the brand has to hold both halves. It needs the credibility to be trusted with machinery on a live site, and enough warmth that the people already working there do not read it as a threat. On the brand DNA, the source is explicit: *"The foundational elements are the core building blocks of the Gritt brand. By combining these elements together, a unique brand identity is generated that can be applied to various touch-points and branded materials to convey the Gritt story to the world."* So the system is high contrast and disciplined. One yellow doing all the signalling, a warm near-black doing the structure, and an ivory keeping it from feeling like a control panel. Yellow is borrowed from the site, and used with restraint rather than plastered across everything. ## Logo The wordmark is set in Poppins with the letterforms refined, geometric and even, so it holds up at small sizes on a phone screen in bright sun, which is where a lot of it will actually be seen. ```json:logo.plates [ { "src": "/brand/gritt/wordmark-black.svg", "label": "Gritt Black on white", "ground": "#FFFFFF" }, { "src": "/brand/gritt/wordmark-white.svg", "label": "White on Gritt Black", "ground": "#1D1D18", "on": "rgba(255,255,255,0.6)" } ] ``` ```json:logo.specs [ { "label": "Primary", "value": "Gritt Black wordmark on white or Gritt Ivory" }, { "label": "Reversed", "value": "White wordmark on Gritt Black" }, { "label": "On yellow", "value": "Gritt Black only, never white" }, { "label": "Minimum width", "value": "60px on screen, 15mm in print" }, { "label": "Clear space", "value": "The height of the wordmark on all sides" } ] ``` ```json:logo.rules { "do": [ "Use the supplied vector files, always", "Keep the full clear space on every side", "Use Gritt Black on yellow, where contrast is strongest", "Reverse to white only on Gritt Black" ], "dont": [ "Redraw or reset the wordmark in Poppins by hand", "Put white type on Gritt Yellow", "Add a shadow, outline or container the brief does not call for", "Place it over a busy site photograph" ] } ``` ## Typography ```json:type.faces [ { "name": "Poppins", "role": "Display and editorial", "note": "Geometric, even and open. Regular carries display and headings; the geometry keeps large sizes calm rather than shouty, which matters in a category that shouts.", "source": "Google Fonts", "sample": "Every site, in one view" }, { "name": "Poppins", "role": "Functional and UI", "note": "The same family at Light and Regular. One family across the whole system, so there is no pairing decision to make on a new surface.", "source": "Google Fonts", "sample": "Sites / Reports / Alerts" } ] ``` ### Getting the fonts Poppins is open source under the SIL Open Font License, so it travels with the brand. It is in the asset pack, anyone on the team can install it, and it can be embedded in the product without a per-seat cost. ```json:type.fonts [ { "family": "Poppins", "licence": "SIL Open Font License 1.1", "bundled": true, "source": "Google Fonts", "url": "https://fonts.google.com/specimen/Poppins", "weights": "300 Light and 400 Regular in active use, 100 to 900 available with italics", "fallback": "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "office": "Century Gothic, or Arial if it is unavailable" } ] ``` ### Scale ```json:type.scale [ { "element": "Display", "font": "Poppins Regular", "weight": "400", "size": "128 / 8rem", "tracking": "0" }, { "element": "Page title", "font": "Poppins Regular", "weight": "400", "size": "96 / 6rem", "tracking": "0" }, { "element": "Section title", "font": "Poppins Regular", "weight": "400", "size": "64 / 4rem", "tracking": "0" }, { "element": "Heading", "font": "Poppins Regular", "weight": "400", "size": "48 / 3rem", "tracking": "0" }, { "element": "Subheading", "font": "Poppins Regular", "weight": "400", "size": "32 / 2rem", "tracking": "0" }, { "element": "Body large", "font": "Poppins Light", "weight": "300", "size": "24 / 1.5rem", "tracking": "0" }, { "element": "Body", "font": "Poppins Light", "weight": "300", "size": "16 / 1rem", "tracking": "0" }, { "element": "Caption", "font": "Poppins Regular", "weight": "400", "size": "14 / 0.875rem", "tracking": "0" }, { "element": "Metadata", "font": "Poppins Regular", "weight": "400", "size": "12 / 0.75rem", "tracking": "0" } ] ``` Line height is 1.4 across display and body, 1.6 for small functional text. ## Colour Two colours do the work, and the discipline is in how little yellow is used. Yellow signals; black structures; ivory warms. ### The named colours ```json:colour.named [ { "name": "Gritt Yellow", "hex": "#FCE132", "value": "#FCE132", "use": "The accent. Call-to-action buttons with black text, iconography, selected states. Emphasis and visibility, not decoration." }, { "name": "Gritt Black", "hex": "#1D1D18", "value": "#1D1D18", "use": "Structure. Type, buttons with white text, and any surface that needs to hold the layout down. A warm near-black, not pure black." }, { "name": "Gritt Ivory", "hex": "#F9F5EE", "value": "#F9F5EE", "use": "Warmth and balance. Backgrounds and block elements, so the interface reads as inviting rather than clinical." }, { "name": "White", "hex": "#FFFFFF", "value": "#FFFFFF", "use": "The default page ground, and type on Gritt Black." } ] ``` ### Supporting greys ```json:colour.foundation [ { "name": "Grey 700", "value": "#ADAA9F" }, { "name": "Grey 400", "value": "#E8E5DD" } ] ``` Warm greys, from the ivory family. A cool grey next to the ivory reads as a mistake. ### Buttons Two forms, and only two. ```json:colour.pairing [ { "context": "Primary button", "light": "", "dark": "Gritt Black type on Gritt Yellow" }, { "context": "Secondary button", "light": "White type on Gritt Black", "dark": "" }, { "context": "On Gritt Ivory", "light": "", "dark": "Gritt Black" }, { "context": "On Gritt Black", "light": "White", "dark": "" } ] ``` ```json:colour.never [ "Never put white type on Gritt Yellow. The contrast fails and it is the most common misuse.", "Never use pure #000000. Gritt Black is warm and the difference is visible next to the ivory.", "Never let yellow become a background for large areas. It is an accent, and it stops signalling the moment it is everywhere.", "Never introduce a third brand colour for a one-off campaign." ] ``` ## Voice **The brand book does not cover tone of voice.** It runs Introduction, Logo, Symbol, Typography, Colour and Icons, and stops there. Nothing has been invented here to fill the gap. The one line the source does give you is the mission, quoted above, and it is a good model for the rest: plain, specific, and unembarrassed about the fact that this is physical work on real sites. ## Icons Three icons carry the brand's ideas. They are shown large, in white on Gritt Black, and they are brand marks rather than interface furniture. ```json:icons.set [ { "name": "Adaptable", "src": "/brand/gritt/icons/adaptable.svg" }, { "name": "Truth", "src": "/brand/gritt/icons/truth.svg" }, { "name": "Process", "src": "/brand/gritt/icons/process.svg" } ] ``` Use them at size, with room around them. Shrinking one into a bullet or a button throws away the only place the brand gets to be expressive. ## Files Everything below is yours. The Figma file is the source of truth for design, the asset pack is what production uses, and the markdown file carries the same decisions in a form your own AI tooling can read and your team can edit. ```json:files.list [ { "name": "Full asset pack", "format": "ZIP", "note": "Everything below in one download.", "href": "/brand/gritt/gritt-brand-assets.zip", "primary": true }, { "name": "Font files", "format": "ZIP", "note": "Poppins, desktop and web, with the OFL licence.", "href": "/brand/gritt/gritt-fonts.zip" }, { "name": "Wordmark, black", "format": "SVG", "note": "For white and Ivory grounds.", "href": "/brand/gritt/wordmark-black.svg" }, { "name": "Wordmark, white", "format": "SVG", "note": "For Gritt Black grounds.", "href": "/brand/gritt/wordmark-white.svg" }, { "name": "Wordmark, black", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/gritt/wordmark-black.png" }, { "name": "Wordmark, white", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/gritt/wordmark-white.png" }, { "name": "Wordmark, inheriting", "format": "SVG", "note": "Fill set to currentColor, for inline use in code.", "href": "/brand/gritt/wordmark-currentcolor.svg" }, { "name": "Colour tokens", "format": "CSS", "note": "Custom properties, ready to drop into a stylesheet.", "href": "/brand/gritt/tokens.css" }, { "name": "Colour tokens", "format": "JSON", "note": "The same values as data, for build tooling.", "href": "/brand/gritt/tokens.json" }, { "name": "brand.md", "format": "Markdown", "note": "This document as a machine-readable file. Point your AI tooling at it.", "href": "/brand/gritt/brand.md" }, { "name": "DESIGN.md", "format": "Markdown", "note": "The same system in Google's open DESIGN.md format, which most AI coding tools already read.", "href": "/brand/gritt/DESIGN.md" } ] ``` This page is built from `brand.md`. Edit the file and the page follows, which means the guidelines, the asset pack and whatever your team generates with AI all stay on the same source.