# tofupilot brand guide

Version 2.2 · 14 September 2026

The current identity for the tofupilot marketing site and shared brand materials. Use this guide with the files in the brand kit. Earlier explorations are not part of the current kit.

## 1. Overview

Software for the people who build hardware.

We help hardware teams trust their tests and understand their results. Our identity makes that work clear and approachable.

- **Be useful.** Show the test, the result, or the next step.
- **Be precise.** Name the hardware, label the units, and support claims with evidence.
- **Be human.** Speak like a helpful engineer, with warmth and curiosity.

### Short company description

> tofupilot is a hardware testing platform for engineering, manufacturing, and quality teams. It helps teams develop and run tests, trace individual units, and investigate failures in production test data.

Write **tofupilot** as one word, all lowercase, including at the start of a sentence. Name the open-source product **the tofupilot framework**. Do not imply that all hosted products are open source.

## 2. Logos

Use supplied SVG artwork rather than retyping or redrawing the logo.

| Mark               | Use                                                        | Minimum width  |
| ------------------ | ---------------------------------------------------------- | -------------- |
| Wordmark           | Default for websites, documents, and partner lists         | 112 px / 28 mm |
| Full logo (lockup) | The name and pilot together when there is room             | 160 px / 40 mm |
| Symbol             | Avatars and compact spaces where the name is already clear | 24 px / 6 mm   |

The supplied favicon may be used at 16 px.

Use the Neutral 800 mark on light backgrounds and the white mark on dark backgrounds. Black SVG variants are supplied for single-color printing.

Keep at least the height of the lowercase “o” clear around the wordmark and full logo. Around the symbol, leave at least 20% of its width. These dimensions refer to the visible artwork, not the file’s canvas.

Keep original proportions. Do not retype the lettering, recolor the mark, add effects, crop it, or place it over a busy image. Keep partner marks separate; do not construct a new combined logo.

## 3. Color

Neutral first. Color with a job.

| Role                                       | Token       | sRGB reference |
| ------------------------------------------ | ----------- | -------------- |
| Ink, logos, primary actions, dark sections | Neutral 800 | #262626        |
| Light surfaces and actions on dark         | Neutral 100 | #F5F5F5        |
| Graphic accents                            | Sky 500     | #00A6F4        |
| Links and essential indicators on light    | Sky 700     | #0069A8        |
| Pilot cap reference                        | Sky 900     | #024A70        |
| Cap band, button, and wing emblem          | Amber 400   | #FFB900        |
| Product canvas                             | White       | #FFFFFF        |

The brand palette uses Tailwind CSS v4 colors. Hex values are nearest 8-bit sRGB equivalents. `tokens.css` preserves the published OKLCH values; illustration shading may vary around these references.

Primary buttons are Neutral 800 with Neutral 100 text. On dark sections, invert that pairing. Secondary links use Sky 700 on light surfaces and Sky 400 (`--tofupilot-active-dark`) on dark surfaces. Sky 500 is a graphic accent, not small text on white. Use dark text on amber.

### Outcomes and execution states

Brand accents and test states have separate jobs. Sky decoration does not mean Running; amber on the pilot does not mean Aborted.

| State        | Family | Text/chart on light | Text/chart on dark | Meaning                             |
| ------------ | ------ | ------------------- | ------------------ | ----------------------------------- |
| Pass         | Lime   | #4D7C0F             | #BEF264            | Test requirements met               |
| Fail         | Pink   | #BE185D             | #F9A8D4            | Test requirements not met           |
| Error        | Red    | #B91C1C             | #FCA5A5            | Execution encountered an error      |
| Timeout      | Orange | #C2410C             | #FDBA74            | Execution exceeded its allowed time |
| Aborted      | Yellow | #A16207             | #FDE047            | Execution was stopped               |
| Skip         | Slate  | #475569             | #CBD5E1            | A test or step was skipped          |
| Unset        | Gray   | #4B5563             | #D1D5DB            | No outcome assigned                 |
| Running      | Blue   | #1D4ED8             | #93C5FD            | Execution in progress               |
| Input needed | Violet | #6D28D9             | #C4B5FD            | Operator action needed              |

Running and Input needed are execution states, not final outcomes. Pink Fail and red Error remain distinct. An alert’s lifecycle (triggered, acknowledged, resolved) is separate from a historical test outcome.

Use uppercase mono labels for outcomes, without an adjacent decorative icon. Do not rely on color alone. Use theme-specific text and chart shades for small markers and thin lines; bright core swatches are palette references. Surfaces and all ramps are in `tokens.json` and `tokens.css`. Optional standalone icons include their Lucide license.

## 4. Typography

**Archivo** carries headings, body text, and controls. **IBM Plex Mono** carries code, measurements, identifiers, and short technical labels.

| Role            | Typeface      | Size                     | Weight  | Line height |
| --------------- | ------------- | ------------------------ | ------- | ----------- |
| Display         | Archivo       | 56–104 px                | 600     | 0.98        |
| Section heading | Archivo       | 32–56 px                 | 600     | 1.08        |
| Body            | Archivo       | 16–20 px                 | 400     | 1.55        |
| UI label        | Archivo       | 14–16 px                 | 500     | 1.5         |
| Technical label | IBM Plex Mono | 12–14 px                 | 400–500 | 1.5         |
| Emphasis        | Archivo       | Inherit surrounding size | 700     | Inherit     |

Scale display headings down on small screens. Do not shrink body text to make a layout fit. Keep body copy around 45–70 characters per line. Use sentence case; uppercase is reserved for short mono labels. Keep units next to their values and use consistent numerical precision.

Both typefaces are included as TTF files, with self-hosting CSS and their SIL Open Font Licenses. Archivo 800 is available in the font package but is not the default heading weight.

## 5. Voice

Direct, calm, specific. Write as if speaking to an engineer across the bench.

| Less clear                                               | Use this approach                                         | Why                                                            |
| -------------------------------------------------------- | --------------------------------------------------------- | -------------------------------------------------------------- |
| From “what changed?” to the next test.                   | Find out why your tests fail.                             | Lead with a recognizable job.                                  |
| Connect your tests. Or build with ours.                  | Connect existing tests. Build new ones.                   | Name the choice; explain the framework in the supporting copy. |
| Review your procedures, stations, and integration needs. | Our engineers help you plan your rollout, free of charge. | Explain the help and the cost.                                 |

These are editorial examples, not attributed customer quotes.

- Prefer concrete verbs: write, run, connect, trace, compare, investigate.
- Explain what the feature does before describing its value.
- Use natural sentences and contractions. Avoid inflated claims and long feature lists.
- Call an AI finding a **probable cause** until it has been confirmed.
- Include context with numbers. Distinguish illustrative data from production evidence.
- Keep quotes faithful to the source. Obtain approval for translations or edits before publication.
- Describe the next action clearly. Use a single primary call to action within each decision context.

## 6. Mascot and illustration

### The tofu pilot

Curious, capable, quietly playful. Preserve the soft tofu body, small face, blue cap, amber band, and wing emblem. Use simple gestures and restrained expressions.

Use the pilot in introductions, documentation, community, and support. Give charts, errors, and operator decisions enough space to remain the focus. The illustrated character complements the identity; it does not replace the official symbol in small logo placements.

### Technical scenes

Use recognizable neutral hardware with controlled sky accents, crisp outlines, soft shading, and one clear focal point. Show plausible wiring, test fixtures, and scale. Use outcome colors only where a result needs them.

The current selection shows a motor station, an Outlook test alert, a robot arm assembly, and a quality hold rack. The industry and template collections use matching charcoal outlines, pale gray shading, and blue electronics. Template artwork shows the fixture and device under test without a computer. Use the files listed in `brand-kit-manifest.json`; older explorations are deliberately excluded.

### Backgrounds and formats

The supplied raster artwork has opaque backgrounds. Use light artwork on matching light surfaces and dark variants on matching dark surfaces. Do not assume WebP or PNG means transparency. The white-background investigation image is displayed on the website with `mix-blend-mode: multiply`; in slides or other editors, choose a matching white surface. Do not place a visible image rectangle on a contrasting canvas.

SVG logos are the scalable identity source. The selected WebP files are for digital illustration. Request another format or higher-resolution export when needed instead of enlarging a small raster file beyond its useful resolution.

## 7. Interface

Use a 4 px spacing rhythm, square panels, 1 px dividers, and 4 px corners on buttons and inputs. Prefer spacing and contrast to decorative shadows. The default page gutter is 24 px, adjusted responsively.

Use a neutral filled primary action and blue secondary links. Give interactive areas clear hover and keyboard focus states and usable touch targets. Do not use hover as the only way to access essential information.

Label units, limits, states, and time ranges. Match displayed values, charts, captions, and conclusions. Keep pink for failed readings and neutral colors for the baseline. Animate in reading order to explain a sequence, and provide the complete static result for reduced-motion preferences.

Light theme: white canvas, Neutral 100 surfaces, Neutral 800 text, Neutral 600 secondary text, Neutral 300 decorative dividers.
Dark theme: Neutral 800 canvas, Neutral 700 surfaces, Neutral 100 text, Neutral 400 secondary text, Neutral 600 decorative dividers.

## 8. Kit and usage

`tofupilot-brand-kit.zip` includes current logos, selected illustrations, fonts and licenses, tokens, this guide, and an asset manifest. `tofupilot-illustrations.zip` contains the same selected illustration and character files with this usage guide.

Use these assets to identify or discuss tofupilot. Keep the artwork intact. Do not imply endorsement or partnership without agreement. Font and icon licenses apply to their respective files; those licenses do not license tofupilot trademarks.

For press, another file format, or a co-branded layout: **hello@tofupilot.com**.