--- client: Cobot title: Cobot Brand Book tagline: Robotics that people want to work alongside. updated: August 2026 version: 1.0 wordmark: /brand/cobot/wordmark-black.svg site: co.bot studio: More Air --- ```json:theme { "surface": "#FFFFFF", "paper": "#F2EDDC", "ink": "#000000", "dark": "#000000", "onDark": "#FFFFFF", "inkRgb": "0, 0, 0", "onDarkRgb": "255, 255, 255", "display": "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "ui": "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "fonts": "" } ``` ```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, the symbol system, and the Figma library.", "jump": ["typography", "colour", "symbol"] }, { "for": "Engineers", "need": "Tokens as CSS or JSON, and brand.md for your own AI tooling.", "jump": ["files"] } ] ``` ## Essence Cobot builds robots that work alongside people rather than replacing them. The brand has to carry both halves of that: serious engineering credibility, and an approachability that stops a machine on a factory floor feeling like a threat. So the system is precise without being cold. Generous space, a restrained sans, and two colours doing the emotional work against a warm neutral ground. The robot is the hero; the brand is the room it stands in. ### The three tenets The products are built on three core tenets, and they are the test any new work should pass. ```json:principles [ { "name": "Trustworthy", "note": "Predictable behaviors that blend naturally with your operations" }, { "name": "Adaptable", "note": "Brilliant hardware and software that easily adapts to your application and environment" }, { "name": "Useful", "note": "Real-world applicability with real-world return on investment" } ] ``` ### The five values How the company works, which shapes how the brand sounds. ```json:values [ { "name": "Listen", "note": "Collaboration starts with listening, learning from each other, and empowering one another to rise to the challenge." }, { "name": "Trust", "note": "Trust is where we start. Trust enables us to move faster together. We earn it every day by delivering on our commitments." }, { "name": "Contribute", "note": "We are here to make an impact and contribute to building a better future. We share our skills and insight with the community." }, { "name": "Empower", "note": "A clear direction and transparent decision-making empowers teams to move with purpose and camaraderie." }, { "name": "Reflect", "note": "We reflect on the world through fresh eyes. We are always curious, never complacent, and willing to change our minds." } ] ``` ## Logo The wordmark is lowercase, drawn rather than set, with the counter of the letterform carrying the system's one piece of geometry. It was designed with the hardware in mind: it has to survive being etched, moulded and printed on a physical product, not only rendered on a screen. ```json:logo.plates [ { "src": "/brand/cobot/wordmark-black.svg", "label": "Black on white", "ground": "#FFFFFF" }, { "src": "/brand/cobot/wordmark-white.svg", "label": "White on Cobot Purple", "ground": "#907EFF", "on": "rgba(255,255,255,0.7)" } ] ``` ```json:logo.specs [ { "label": "Primary", "value": "Black wordmark on white or Cobot Taupe Light" }, { "label": "Reversed", "value": "White wordmark on black or Cobot Purple" }, { "label": "Minimum width", "value": "80px on screen, 20mm in print" }, { "label": "Clear space", "value": "The height of the wordmark on all sides" }, { "label": "On product", "value": "Single colour only, no gradients or effects" } ] ``` ```json:logo.rules { "do": [ "Use the supplied vector files, always", "Keep the full clear space on every side", "Place it on a solid ground, or a quiet area of an image", "Use the reversed version whenever the ground is dark" ], "dont": [ "Redraw, restretch or recolour the letterforms", "Add a shadow, outline, gradient or bevel", "Place it over a busy part of a photograph", "Set it in any typeface as a substitute for the artwork" ] } ``` ## Typography ```json:type.faces [ { "name": "ABC Oracle", "role": "Display and editorial", "note": "The whole system is set in Oracle. An elegant sans serif with friendly, smooth contours and subtle contrast, in six weights plus italics. Thin and Light carry display sizes; Regular carries everything functional.", "source": "Dinamo", "sample": "Robotics that work alongside you" }, { "name": "ABC Oracle", "role": "Functional and UI", "note": "The same family at Regular. Using one family across display and interface is deliberate: it keeps the system tight and removes a pairing decision from every new surface.", "source": "Dinamo", "sample": "Payload / Reach / Repeatability" } ] ``` ### Getting the fonts ```json:type.fonts [ { "family": "ABC Oracle", "licence": "Commercial, licensed from Dinamo", "bundled": false, "source": "Dinamo", "url": "https://abcdinamo.com/typefaces/oracle", "weights": "Six weights plus italics. Thin, Light, Book and Regular are the ones in active use", "fallback": "-apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif", "office": "Helvetica Neue, or Arial if it is unavailable" } ] ``` **This page is set in the fallback stack, not in Oracle.** A webfont licence does not permit serving the files from a page like this one, so the book shows the system fallback that the guidelines specify. It is the honest option: rendering Cobot's own guidelines in a lookalike would be worse than showing what the fallback actually does. **Oracle is a commercially licensed typeface and is not included in the asset pack.** Cobot holds the licence directly with Dinamo. Anyone who needs the files, whether an agency, a printer or a new hire, should be added to that licence rather than sent a copy of the font. Web use needs a webfont licence, which is a separate tier. ### Scale ```json:type.scale [ { "element": "Display", "font": "ABC Oracle Thin", "weight": "200", "size": "128 / 8rem", "tracking": "0" }, { "element": "Page title", "font": "ABC Oracle Thin", "weight": "200", "size": "96 / 6rem", "tracking": "0" }, { "element": "Section title", "font": "ABC Oracle Thin", "weight": "200", "size": "64 / 4rem", "tracking": "0" }, { "element": "Heading", "font": "ABC Oracle Light", "weight": "300", "size": "48 / 3rem", "tracking": "0" }, { "element": "Subheading", "font": "ABC Oracle Regular", "weight": "400", "size": "32 / 2rem", "tracking": "0" }, { "element": "Body large", "font": "ABC Oracle Thin", "weight": "200", "size": "24 / 1.5rem", "tracking": "0" }, { "element": "Body", "font": "ABC Oracle Light", "weight": "300", "size": "16 / 1rem", "tracking": "0" }, { "element": "Caption", "font": "ABC Oracle Regular", "weight": "400", "size": "14 / 0.875rem", "tracking": "0" }, { "element": "Metadata", "font": "ABC Oracle 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 carry the brand. Purple is the one people remember, green is the contrast that keeps it from feeling corporate, and the taupes stop the whole thing reading as a technology startup template. ### The named colours ```json:colour.named [ { "name": "Cobot Purple", "hex": "#907EFF", "value": "#907EFF", "use": "The primary brand colour and the one to reach for first on branded material. Large fields, key surfaces, the colour people should associate with Cobot." }, { "name": "Cobot Green", "hex": "#4FDF9A", "value": "#4FDF9A", "use": "The contrast to purple. Fresh, and used alongside rather than instead. Accents, highlights, states." }, { "name": "Cobot Taupe", "hex": "#D8D4C7", "value": "#D8D4C7", "use": "Warmth. Blocks and background colour where a white ground would feel clinical." }, { "name": "Cobot Taupe Light", "hex": "#F2EDDC", "value": "#F2EDDC", "use": "The softer taupe. Page grounds and large quiet areas." }, { "name": "Black", "hex": "#000000", "value": "#000000", "use": "Text and UI elements: icons, dividing lines, and block colour where the contrast has to be absolute." }, { "name": "White", "hex": "#FFFFFF", "value": "#FFFFFF", "use": "Text and UI on dark or saturated grounds, and the default page ground." } ] ``` ### Secondary palette Extra flexibility when designing interfaces. These are for UI states: warnings, errors and informational banners. They are not brand colours and should not appear in marketing material. ```json:colour.secondary [ { "name": "Red", "hex": "#FF7067", "value": "#FF7067", "use": "Errors and destructive actions." }, { "name": "Orange", "hex": "#FFB23D", "value": "#FFB23D", "use": "Warnings." }, { "name": "Yellow", "hex": "#FBD15E", "value": "#FBD15E", "use": "Caution and pending states." }, { "name": "Blue", "hex": "#7EC6EE", "value": "#7EC6EE", "use": "Informational banners." } ] ``` ### Supporting greys ```json:colour.foundation [ { "name": "Grey 700", "value": "#ADAA9F" }, { "name": "Grey 400", "value": "#E8E5DD" } ] ``` Warm greys, not neutral ones. They belong to the taupe family, which is why they sit comfortably next to it and why a generic grey does not. ### Pairing discipline ```json:colour.pairing [ { "context": "On white or Taupe Light", "light": "", "dark": "Black" }, { "context": "On Cobot Purple", "light": "White", "dark": "" }, { "context": "On Cobot Green", "light": "", "dark": "Black" }, { "context": "On black", "light": "White", "dark": "" } ] ``` ```json:colour.never [ "Never put Cobot Green and Cobot Purple directly against each other as type and ground. They are contrast partners, not a text pairing.", "Never use white text on Cobot Green. The green is light and the contrast fails.", "Never introduce a neutral grey. The greys here are warm, and a cool grey breaks the palette.", "Never use purple and green in equal measure. Purple leads, green supports." ] ``` ## Voice **This section is not yet written.** The brand book carries the placeholder "Cobot to provide copy and tone of voice principles", with an overview paragraph and three principles still to be supplied. Nothing here has been invented to fill the gap. What the source does record as the intent: tone of voice matters for a robotics company that has to connect with people, and the balance to strike is friendly and professional at once. Until the principles are written, the safest guidance is the three tenets above. Copy that is trustworthy, adaptable and useful in what it actually says will not be far off. ## Symbol The symbol is the wordmark's geometry taken on its own, for the places the full wordmark cannot go: app icons, favicons, product moulding, social avatars, and the status indicator on the machine. It is not a decorative element. It should not be scattered across layouts, used as a bullet, or tiled as a pattern without a specific reason. ```json:symbol.specs [ { "label": "Minimum size", "value": "24px on screen" }, { "label": "Clear space", "value": "Half the symbol's width on all sides" }, { "label": "Colour", "value": "Single colour. Black, white, or Cobot Purple" }, { "label": "Use it when", "value": "The full wordmark will not read, or the space is square" } ] ``` ## Motion Motion in the Cobot system mirrors how the hardware moves: deliberate, weighted, and never sudden. Nothing snaps. Elements ease in and settle, the way a well-tuned arm comes to rest. Keep it purposeful. Motion signals state changes and guides attention. It is not decoration, and on a product used all day it becomes irritating faster than it becomes charming. ## 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/cobot/cobot-brand-assets.zip", "primary": true }, { "name": "Wordmark, black", "format": "SVG", "note": "For white and Taupe Light grounds.", "href": "/brand/cobot/wordmark-black.svg" }, { "name": "Wordmark, white", "format": "SVG", "note": "For black and Cobot Purple grounds.", "href": "/brand/cobot/wordmark-white.svg" }, { "name": "Wordmark, black", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/cobot/wordmark-black.png" }, { "name": "Wordmark, white", "format": "PNG", "note": "2048px wide, transparent.", "href": "/brand/cobot/wordmark-white.png" }, { "name": "Wordmark, inheriting", "format": "SVG", "note": "Fill set to currentColor, for inline use in code.", "href": "/brand/cobot/wordmark-currentcolor.svg" }, { "name": "Colour tokens", "format": "CSS", "note": "Custom properties, ready to drop into a stylesheet.", "href": "/brand/cobot/tokens.css" }, { "name": "Colour tokens", "format": "JSON", "note": "The same values as data, for build tooling.", "href": "/brand/cobot/tokens.json" }, { "name": "brand.md", "format": "Markdown", "note": "This document as a machine-readable file. Point your AI tooling at it.", "href": "/brand/cobot/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/cobot/DESIGN.md" } ] ``` Fonts are not in the pack. Oracle is licensed from Dinamo and has to be obtained through that licence, which is covered under Typography above. 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.