01 · Clarity over cleverness
Show structure. Hide ornament.
Hairlines, generous whitespace, strong type hierarchy. No drop shadows for decoration, no gradient blobs. If a pixel doesn’t earn its place, cut it.
v1.0 · DESIGN SYSTEM
Resources·Brand
The Pattern Automation Design System
One vocabulary across marketing and product. Direct. Confident. Never decorative. The PA monogram, the blue accent, and the operator-first interface language — documented here for press, partners, and the team.
01 · Foundations
Editorial gravity. Industrial precision.
Pattern Automation builds software for people who run companies with AI agents. The brand and the product share one design system: serious software for serious work — direct, confident, never decorative.
Principles
FOUR RULES
02 · One vocabulary, two surfaces
The brand and the product are the same system.
Same tokens, same type ramp, same motion language. Marketing feels like a continuation of Neuro OS — differences are density and content, not vocabulary.
03 · The mark with meaning
The monogram is the company; the capsule is the agent.
The PA stroke mark is reserved for Pattern Automation. Agent representation in product UI uses capsule / status language — not the company monogram. That’s why both stay meaningful.
04 · The human is in charge
Every surface telegraphs control.
Pause, resume, override, reassign, terminate. Buttons read like commands. Status reads like telemetry. The interface never pretends the agent is choosing — the operator is.
Surfaces
WHERE THE SYSTEM APPLIES
SURFACE
Marketing
Editorial, persuasion-first. Static site on Vercel. Vendors product neutrals and brand blue; keeps spotlight CTAs and hero motion as documented brand exceptions.
SURFACE
Product · Neuro OS
Grid-disciplined, scanning-first. Light + dark. Org chart, heartbeats, governance, budgets, tasks. Defines the operational status language operators live in.
02 · Logo
A stroke. A monogram. PA.
The Pattern Automation mark is a minimalist line drawing of P and A. Functional. Recognizable at any size. Always rendered as a stroke — never filled, never decorated.
Primary marks
FOUR USES
Clear space & sizing
CONSTRUCTION
Minimum clear space = icon width on every side. Below 16px, drop the wordmark and use the icon only.
SIZE RAMP
- 12pxfavicon minimum
- 16pxUI tab bar
- 22pxheader default
- 32pxmarketing hero
- 48px+spec, marketing display
Stroke thickness scales with the SVG viewBox — never redraw the mark by hand.
Usage
DO & DON’T
Do
Use the stroke SVG. Pure stroke adapts to dark and light surfaces.
Don’t
Never fill the monogram. The line is the brand.
Don’t
No gradients. No drop shadows. No glow effects on the mark.
Don’t
Never rotate, skew, or stretch the mark.
03 · Typography
Two stacks. Each with one job.
Sans carries display, body, and UI. Mono carries engineering credibility — telemetry, code, timestamps, agent IDs. Nothing else.
DISPLAY · BODY · UI
Sans
The workhorse. Headings, body, labels, navigation, buttons, the wordmark. System UI stack with clean fallbacks.
font-family: var(--sans)
Less routine, more freedom.
MONO · TELEMETRY
Mono
Timestamps, hex codes, agent names, tool calls, terminal, status chips. Always on for engineering layers.
font-family: var(--mono)
$ neuro-os status --agent atlas ▸ alive budget 64% 4h 32m
Type ramp
ROLES — USE THE ROLE, NOT THE SIZE
| Role | Sample | Spec |
|---|---|---|
| display-1 | Headline. | clamp(42–80) · 650 · −0.04em |
| display-2 | Section heading | clamp(28–44) · 650 · −0.03em |
| lede | Subhead / hero lede | 20 / 1.45 · 400 |
| body | Running text, paragraphs, default UI | 16 / 1.6 · 400 |
| body-sm | Secondary text, table cells | 14 / 1.5 · 400 |
| caption | Eyebrows · labels | 11 · 650 · +0.08em · UPPER |
| mono | $ neuro-os status — 1042 events | 13 / 1.4 · mono |
Type do & don’t
Do
Set the goal. Approve the work.
Sentence-case. Tight tracking on display. The spacing does the editorial work.
Don’t
SET THE GOAL. APPROVE THE WORK.
No all-caps display. Caps are reserved for the caption role.
Do
12:48:02 · Atlas · run_tests() passed
Mono for timestamps, IDs, tool calls, agent names.
Don’t
12:48:02 — Atlas — run_tests() passed
Don’t dress system telemetry in editorial type.
04 · Color
A palette with purpose.
A neutral spine, brand blue where action lives, and status color only where color carries meaning. Saturation in chrome dilutes the signal — keep it scarce.
Brand accent
PATTERN AUTOMATION BLUE
Sky#38BDF8--pa-brand-sky
Brand#2563EB--pa-brand
Deep#1D4ED8--pa-brand-deep
Indigo#1E40AF--pa-brand-indigo
Light#60A5FA--pa-brand-light
Cyan#0EA5E9--pa-brand-cyan
Neutral ramp
MARKETING · DARK-FIRST
Ink#09090B--bg
Raised#18181Bpanels
Linergba white 8%--line
Muted#A1A1AA--muted
Snow#FAFAFA--fg
Bond#FFFFFFday theme
Status colors
SEMANTIC · PRODUCT
RestingGray · inert
#A1A1AARunningBlue · live
#2563EBBlockedAmber · paused
#F59E0BDoneGreen · success
#22C55EIn reviewViolet · review
#7C3AEDErrorRed · failed
#DC2626Color usage
Do
Approve
Override
Neutrals for chrome. Brand blue for primary actions. Green only when state truly is “succeeded.”
Don’t
Approve
Override
No rainbow gradient buttons. No agent-palette saturation on product chrome.
05 · Spacing & radius
8-point base. Fluid where it scales.
Marketing rhythm sits on an 8px base with fluid top end via clamp(). Corners follow one anchor so the whole ladder retunes from a single variable.
SPACING
- 8pxxs · inline gaps, chips
- 16pxsm · tight card padding
- 24pxmd · default card / control gap
- fluidlg–3xl · section rhythm
RADIUS LADDER
sm
md · anchor
lg
xl
pill
Pill = badges & marketing CTA. Rounded rect = cards & product buttons. Capsule shape reserved for agent representation in Neuro OS.
06 · Voice & naming
Pattern Automation
Always title-case as two words. The monogram carries the abbreviation; formal writing spells the name out.
CORRECT
- Pattern Automation
- Neuro OS
- Less routine, more freedom.
AVOID
- PatternAutomation
- pattern automation
- PATTERN AUTOMATION
- PA alone in formal prose
Pattern Automation
Less routine, more freedom.
07 · Iconography
Functional. Not decorative.
Icons label actions, states, or functionality. Stroke only, currentColor, rounded caps. They never compete with the agent capsule motif for attention. No emoji in product UI or technical docs.
ICON GRID · 24PX · 1.75PX STROKE
SIZING
- 12pxinline with caption
- 16pxUI default
- 20pxbutton
- 32pxfeature / empty state
DO & DON’T
- Do — stroke only, currentColor, rounded caps
- Don’t — filled glyphs in chrome
- Don’t — emoji in product UI or docs
08 · Imagery & motifs
The capsule is the agent.
Every agent is a capsule. Every capsule is an agent. Company mark stays the PA stroke; agent identity lives in capsule / avatar / status language — never mix the two.
APPLICATIONS
ORG / AVATAR
At
Cx
Ve
Sa
+3
One initial on the agent gradient until a photo is uploaded. Same DNA as capsules.
HEARTBEAT ROW
Atlasalive
Codexwaiting
Verablocked
Sableasleep
09 · Tone of voice
Direct. Confident. Never decorative.
Pattern Automation speaks with authority about complex systems but never obscures meaning. Short sentences. Active verbs. Technical when needed, never when not.
Clarity
One idea per sentence.
“Neuro OS orchestrates agents into a company — with org charts, budgets, goals, governance, and accountability.”
Control
The human is always in charge.
“Pause. Resume. Override. Reassign. Terminate. You have full control over every agent in the org.”
Honesty
Say what it is — and isn’t.
“Not a chatbot. Not an agent framework. Not a workflow builder.”
Credibility
Observable. Traceable. Logged.
“Every task traced. Every decision explained. Every tool call logged.”
In practice
Before
“A revolutionary, AI-powered next-gen platform that empowers teams to leverage their agentic workforce!”
After
“Neuro OS orchestrates a team of AI agents. Org charts, budgets, goals. You hire. You approve. You ship.”
10 · Motion
Purposeful. Never showy.
Animation signals life and state. Entrance reveals stagger. Active elements pulse. Transitions ease at ~250ms. Nothing bounces unless it has a reason — and almost nothing does. Always honor prefers-reduced-motion.
| Token | Value | Where |
|---|---|---|
| --ease-enter | cubic-bezier(.2,.8,.2,1) | Entrance, hover lifts |
| --ease-exit | cubic-bezier(.4,0,1,.6) | Exit, dismissal |
| --t-micro | 150ms | Hover color, focus rings |
| --t-short | 250ms | Default UI transitions |
| --t-medium | 400ms | Theme swap, panel slide |
11 · Components
Living elements. Tested states.
One component per job. Everything renders in light and dark; every interactive control has explicit default, hover, focus, active, and disabled states. Marketing chrome (pill CTAs, hero flourishes) is a documented brand exception layered on the same tokens.
SHARED PRIMITIVES · Neuro OS UI
alert-dialog · avatar · badge · breadcrumb · button · card · checkbox · command · dialog · dropdown · input · label · popover · radio-card · select · separator · sheet · skeleton · tabs · textarea · toggle · tooltip. One of each — variants are props, not new components.
Buttons
6 VARIANTS · SEMANTIC · 5 STATES
Product buttons are rounded-md. Approve is green — approval only. Terminate is destructive red. Marketing primary CTA may be a fully-rounded pill — website exception only. Green is never the neutral accent.
PRODUCT VARIANTS
Default
Secondary
Outline
Ghost
Destructive
Link
SEMANTIC & MARKETING
Approve
Marketing pill
STATE EXPLORER
default
SIZES
Form controls
INPUT · TEXTAREA · SELECT · CHECKBOX · RADIO-CARD · TOGGLE
Radios ship as radio-cards. There is no slider primitive — a numeric budget is a plain input.
Cards
ONE PRIMITIVE · COMPOSED
Schedule.
Agents wake on schedule or on demand. Every action logged.
You’re in control.
Same card pattern, dark surface. Used in marketing callouts and product modals.
Codex
codex · Engineer
Menus & navigation
OPEN PATTERNS
TABS — UNDERLINE
CEO → CTO → engineers. Capsule nodes, hairline connectors.
BREADCRUMBS
COMMAND PALETTE · ⌘K
Overlays
DIALOG · ALERT-DIALOG · POPOVER · SHEET · TOOLTIP
Progress & loaders
DETERMINATE + INDETERMINATE
Budget — Atlas$186 / $300
Budget — Codex$184 / $250 · 74%
Budget — Scribe$100 / $100 · 100%
Spinner
Dots
Indeterminate
Skeleton
Terminal & code
ENGINEERING TONE
neuro-os — bash
$ npx neuro-os onboard --yes
✓ Embedded postgres started
✓ Company created: ops-stack
✓ CTO Atlas online (claude)
✓ Dashboard at http://localhost:3100
$ ▍neuro-os.config.ts
export default {
company: 'ops-stack',
db: 'postgres://localhost',
heartbeat: 4, // hours
budgets: { atlas: 300 },
}12 · Data & viz
Telemetry, not decoration.
Charts read like instruments. Ink lines on hairline grids. Mono labels. No gradients in chart fills — saturation stays in agent capsules where it carries meaning.
COST PANEL · PER-AGENT
| Agent | Budget used | Cost |
|---|---|---|
| Atlas · CTO | $186 / $300 | |
| Codex · Eng | $184 / $250 | |
| Vera · QA | $57 / $150 | |
| Scribe · Content | $91 / $100 |
CONVERSATION TRACE
Goal set: “Deploy to prod after tests pass”You · GOAL SET
Budget set: $50 hard limitYou · BUDGET SET
run_tests() — 142 passed, 0 failedCodex · PASSED
deploy_to_staging() — succeeded in 28sCodex · DEPLOYED
smoke_test() — 1 timeout, retryingCodex · RETRYING
13 · States & status
Color is meaning. Shape is meaning.
Status chips are a closed vocabulary. Same colors in tasks, agents, projects, and heartbeats — so operators learn the language once.
TASK STATES
Todo
In progress
Blocked
In review
Done
Failed
AGENT STATUSES
Alive
Idle
Paused
Awaiting approval
Errored
Budget capped
Copy-paste tokens
--status-todo: #a1a1aa;
--status-run: #2563eb;
--status-block: #f59e0b;
--status-review: #7c3aed;
--status-done: #22c55e;
--status-error: #dc2626;14 · Design tokens
One canonical source.
Marketing vendors the same neutrals and brand blue defined for Neuro OS. Theme swaps light/dark; vocabulary doesn’t.
| Token | Dark | Light | Usage |
|---|---|---|---|
| --bg | #09090B | #FFFFFF | Page background |
| --fg | #FAFAFA | #09090B | Primary text |
| --muted | #A1A1AA | #52525B | Secondary text |
| --line | white / 8% | black / 8% | Hairlines |
| --pa-brand | #2563EB | #2563EB | Primary action |
| --pa-brand-sky | #38BDF8 | #38BDF8 | Accent highlight |
| --radius | 0.5rem | 0.5rem | Anchor ladder |
| --t-short | 250ms | 250ms | Default transition |
15 · Downloads
Take the files.
SVG marks for dark and light surfaces. Need a co-brand lockup, press kit, or high-res export — write us.
