OnePatch Guidelines

Automate on-call at agent-scale.

Introduction

OnePatch instruments your stack, verifies every PR in production and fixes what breaks, so engineering teams can ship at agent speed without losing sight of prod.

The identity is dark, exact and technical. Obsidian and Ivory carry every surface, mono type marks anything a machine produced, and Coral appears only where something needs attention.

Messaging

Click to copy

Short declarative sentences, each ending in a period. In two-part lines the second sentence takes Coral. No em dashes, no exclamation marks.

Logotype construction

Clearspace equals the height of the logomark, marked x. Keep it free on all four sides so the lockup stays clean and recognizable in every application.

Logotype scale

The mark and wordmark always scale together. Sizes refer to lockup height.

Color versions

Coral on Obsidian is reserved for the product app chrome. Never add outlines, shadows or gradients, and never place the logo on photography without a solid panel.

Core palette

Obsidian and Ivory build a strong, professional base. Coral is the focused accent for emphasis, interaction and important moments.

Shades

Click to copy

Product UI

The app runs dark by default with a light theme. Surfaces step up in small increments and every edge is a 1px border.

Status

Status always pairs color with a label. Critical is the only state that takes Coral.

Data visualization

Series order

Start every chart with Coral 800. Add Blue, Sand and Green in that order, and use the tints for areas and backgrounds.

Color proportions

Dark and light carry the system. Coral stays rare so it keeps its weight.

Accessibility

WCAG 2.2 · normal text

Use AAA and AA pairs for text and controls. Coral on Ivory and Obsidian on Coral work for large display type only.

Type system

Type to edit

Type scale

Base size
16px
Ratio
Major third

Icons

Lucide

Lucide is the icon system. Keep stroke weight, scale and spacing consistent with the geometric logomark. Click an icon to copy its SVG.

Illustrations

Engraved linework: fine flowing lines, organic texture and high-contrast black and white. It adds craft and authority against the modern product.

Product interface

A 220px sidebar, a 48px breadcrumb bar and square, bordered cards. Mono carries IDs, timestamps and status. The agent chat stays hidden until someone asks for it.

LinkedIn

The tagline sits right-aligned, clear of the profile picture. Only “on-call” takes Coral.

Pitch deck

Content slides run on Ivory with a visible grid and Coral 800 for data. Covers and closing slides switch to Coral 950 or Obsidian with the engraved illustrations.

Compositions

One photograph, one focal point and one headline. Obsidian or Coral panels hold the message so the photo never has to.

Export assets

For AI agents

Give DESIGN.md to your coding agent (Claude Code, Cursor, v0, Framer AI) with your UI or website task. It holds every token, type rule, component spec and copy rule in one file.

Isotype
Logotype
Profile pictures
Favicons
LinkedIn covers
Imagery
Illustrations
Made by