# ZERO1 IO — brand guidelines

Version 1.0 · September 3, 2026 · Approved direction: **04 / Angular**

![ZERO1 IO](assets/logo-primary.svg)

## What we do

**Your company knowledge. Put to work.**

ZERO1 IO builds AI systems for repeatable, review-heavy work. We bring a company's information, rules, and tools into one focused workflow, helping teams produce source-linked work they can check and approve.

ZERO1 Core is the system behind those workflows. We start with one result, agree on what good looks like, and keep the people responsible for the work in control.

Short description: **AI systems for repeatable, review-heavy work.**

Core product line: **The system behind the result.**

Use the company tagline for introductions and About sections. Use the Core product line when describing the system or the website social card. Do not attach either line permanently to the logo.

## 01 / The identity

The angular, open zero rises into a diagonal and upright one. The shape keeps the open-loop idea the founder liked, with a flatter top and more defined corners. Its meaning comes from ZERO1; do not call it a lowercase a, alpha, infinity sign, or a generic AI sparkle.

Suman selected concept 04 on September 3, 2026. The approved AI-generated reference is preserved in [references](references/). The production SVG is a clean geometric interpretation of that reference, not an automatically extracted or pixel-identical vector. The wordmark retains the established Manrope outlined lettering.

The only current production masters are [source/mark.svg](source/mark.svg) and [source/wordmark.svg](source/wordmark.svg). Do not regenerate the logo with an image model for everyday use. Use the supplied files so the geometry stays consistent.

## 02 / Logo variants

| Use | Asset |
| --- | --- |
| Blue, navy, dark photographs with sufficient contrast | [All-white lockup](assets/logo-white.svg) |
| White and very light backgrounds | [Cobalt symbol + graphite wordmark](assets/logo-primary.svg) |
| Single-color printing | [Graphite lockup](assets/logo-mono.svg) |
| Blue single-color use | [Cobalt lockup](assets/logo-blue.svg) |
| Very shallow placement | [Wordmark](assets/wordmark-primary.svg) |
| Avatars and compact product surfaces | [Standalone symbol](assets/mark-blue.svg) |
| Browser tabs | [SVG favicon](assets/favicon.svg), [ICO](assets/favicon.ico) |
| Social profile picture | [1024px square avatar](assets/icon-1024.png) |
| Apple touch icon | [180px icon](assets/icon-180.png) |

Every SVG is true vector artwork with outlined text and no font or network dependency. Matching transparent PNGs are included. PNG lockups are 1600px wide; standalone marks are 1024px wide. Favicon PNGs are 16, 32, and 48px. App/avatar PNGs are 180, 192, 512, and 1024px square. ICO contains independent 16/32/48px PNG entries.

The all-white lockup is the preferred expression over the brand gradient. Keep ZERO1 and IO the same color and opacity. Use the supplied spacing; write the company name **ZERO1 IO**, the product **ZERO1 Core**, and the domain **zero1io.com**.

## 03 / Spacing and size

Let H be the visible symbol height. Keep at least **H / 4** clear on all sides of a logo. This clear space is additional to any padding in the file.

- Full lockup: recommended 180px or wider, minimum 138px in constrained mobile navigation.
- Wordmark alone: minimum 100px wide.
- Standalone symbol: minimum 24px high.
- At 16–32px, use the dedicated favicon with its cobalt tile.
- Keep at least 10% breathing room around an avatar. The supplied icon tiles already have it.

Preserve the aspect ratio. Never stretch, squeeze, crop the open loop, round the diagonal tip, recolor only the one, add shadows, outline the mark, or put gradients inside the mark. A containing tile is for app icons and favicons, not the primary logo.

The old boxed zero with a separate typed one and concepts 01–03 are retired. Do not promote an old file based on its name containing “master” or “final.”

## 04 / Color and gradient

| Token | Value | Role |
| --- | --- | --- |
| Cobalt | `#005CFF` | Main accent, logo, links, icon tile |
| Azure | `#00A9FF` | Supporting gradient color |
| Cyan | `#00D4FF` | Gradient highlights on dark blue |
| Deep blue | `#003ABF` | Gradient depth |
| Graphite | `#0E1116` | Body text and monochrome logo |
| Paper | `#FFFFFF` | Main surface and reverse logo |
| Soft | `#F7F7F4` | Quiet secondary surface |
| Small-text blue | `#0034AC` | Extra contrast for tiny blue labels |

Use a rich cobalt base with broad, soft azure/cyan fields and deep-blue areas behind white copy. The gradient belongs to the background, never inside the logo. Avoid harsh bands, neon green, purple, metallic effects, heavy grain, and glowing outlines.

The signature animated background uses [ShaderGradient](https://shadergradient.co/), the actual library from the earlier ZERO1 site. The original `waterPlane` settings were recovered from commit `b334dfc`, `src/components/zero1/HeroGradient.tsx`. [gradient.json](gradient.json) is the reusable preset: pale blue `#E6F6FF`, azure and cyan; speed 0.18, strength 1.6, density 1.3; rotation 50 / 0 / -60; no grain. The website uses `@shadergradient/react` 2.4.20, React Three Fiber, and Three.js, lazy-loaded by `kit/brand-gradient.js`. Rebuild with `bun run build:gradient` after changing the preset or `kit/gradient/renderer.jsx`.

Keep the original fluid water-plane motion, not the later domain-warped replacement or CSS blobs. A cobalt/navy overlay protects white copy; unlike the older black-text page, do not add its white wash. Static CSS gradients remain the no-JS, no-WebGL, and reduced-motion fallback. Render resolution stays at 1×. Rendering stops off-screen, on hidden tabs, and with the visible pause control; resuming continues from the paused position. Reduced-motion changes are respected while the page is open. Keep body text at least 4.5:1 against its actual background; large text at least 3:1. Logos have different accessibility requirements, but still need obvious contrast. Never use cyan or azure for small text on white.

Machine-readable colors are in [tokens.json](tokens.json).

The homepage uses the **luminous cobalt water-plane**: [gradient-home.json](gradient-home.json). The earlier black shader regions were too dark. This refinement preserves the original 3D geometry and motion, with deep blue `#003ABF`, cobalt `#005CFF`, and cyan `#00D4FF`. The CSS scrim protects text with blue rather than a blanket black wash; its lightest area leaves the right-side volumes visible. The mobile scrim follows the stacked copy and illustration.

The brand-page cover retains the **graphite water-plane**: [gradient-dark.json](gradient-dark.json), with graphite `#06080D`, slate `#1A263C`, and cobalt `#005CFF`. The palette specimen retains the original blue version. `data-z1-gradient="home"` selects luminous cobalt; `"dark"` selects graphite; an empty attribute retains original blue. All variants share pause, visibility, and reduced-motion behavior. The selected social preview image stays unchanged.

## 05 / Typography

- **Instrument Serif 400** for editorial headlines. One italic phrase is enough; do not fake bold.
- **Manrope 400–800** for paragraphs, navigation, controls, and identity lettering.
- **IBM Plex Mono 400–500** for restrained labels and technical captions.

The wordmark uses Manrope outlines at weight 760. Do not retype or approximate the wordmark with a live font. Website body copy is normally 16–18px with generous line height. Keep paragraph lines around 45–65 characters.

Font licensing: Manrope is SIL Open Font License 1.1; the included [license](licenses/Manrope-OFL.txt) accompanies its outlined identity source. Other website fonts remain loaded through the existing Google Fonts links.

## 06 / Voice and About copy

Write plainly. Say what the system helps someone do, what information it uses, and who approves the result. Prefer “source-linked,” “review,” “workflow,” and “human control” over abstract AI language.

Avoid “revolutionary,” “seamless,” “game-changing,” unsupported autonomy, invented traction, or claims that a working example proves production readiness.

Keep these distinct:

- ZERO1 IO: the company.
- ZERO1 Core: the reusable system behind focused workflows.
- RFQ review: a working example, not the entire company identity.
- A design, synthetic demonstration, pilot, and production deployment are different states.

Do not add customer names, private files, unapproved testimonials, or unsupported metrics to brand material.

## 07 / Social and co-branding

The general website card uses the white Angular lockup, the Core product line, and the blue gradient. Use [website-social-card-approved.png](references/website-social-card-approved.png) unchanged: this is the exact **1729 × 910** image Suman supplied and selected on September 3, 2026. Its SHA-256 is `2dbee911b64bffefef53c974ce757b8522ed144d279a4a0df00910bfdb75004c`. The earlier generated file and prompt remain archived separately. Social metadata uses `og-zero1-angular-2dbee911.png` so the selected image has a fresh URL; `og.png` is retained for compatibility.

Browser favicons use only the white Angular symbol on cobalt, with a larger 52/64-size symbol for legibility at 16–48px. Avatars retain their original clear space. Do not squeeze the full wordmark or social card into a favicon.

The Texas A&M finals announcement is a separate campaign under `brand/campaigns/velocity-finals-2026/`. ZERO1 remains the dominant identity. The University of Silicon Valley logo belongs in a smaller footer; keep the original partner mark, adequate clear space, and a truthful relationship label such as “Representing.” Texas A&M is the competition host; do not imply either university endorses the product.

Do not move university/event marks onto the permanent company site or identity lockup. Third-party marks remain their owners' property. The public evergreen asset download excludes the campaign and partner assets.

## 08 / Maintenance

1. Edit source SVGs only when a new design decision is approved.
2. Run `bun run build:brand` to regenerate SVG/PNG/ICO exports and site copies.
3. Run `bun run package:brand` to refresh the downloadable ZIP after changing this guide or any assets.
4. Run `bun run check:brand` and `bun run build`.
5. Inspect desktop/mobile logos, the 16px favicon, About copy, download, and dark/light contexts.
6. Commit the guide, sources, generated assets, and consuming website updates together.

Do not overwrite archived AI references. A GitHub push and a verified live deployment are separate states.