# Hyperoru brand guidelines

## Core idea

Hyperoru turns fragmented technical evidence into architectural truth that a team can inspect, challenge, and act on. The brand should feel like a careful reviewer: calm, exact, human, and always ready to show its sources.

Tagline: **See the system. Prove it.**

Supporting line: **Every important relationship should be able to explain itself.**

## Identity

- Use the primary lockup for product, press, partnership, and editorial contexts.
- Use the `H/` monogram for compact application surfaces, avatars, and favicons.
- Keep clear space equal to the height of the slash around every side of the mark.
- Never stretch, rotate, outline, recolour, or place the mark over noisy imagery.
- On light surfaces use near black. On dark surfaces use bone. Signal yellow is an accent, not the default logo colour.

## Colour

| Token | Value | Purpose |
| --- | --- | --- |
| Paper | `#F4F1E9` | Primary editorial background |
| Paper raised | `#FFFDF8` | Cards and foreground surfaces |
| Ink | `#0B0B0C` | Text and architecture canvases |
| Signal yellow | `#FACC15` | Action, active state, and provenance |
| Evidence green | `#1F785B` | Verified and reconciled evidence; chosen to preserve AA contrast on paper |
| Agent violet | `#6857D7` | Bounded model or specialist work |
| Risk coral | `#D96A3D` | Structural consequence and warning |

Use neutrals first. A surface should normally carry one semantic colour. Never use green to imply proof when the supporting evidence is missing.

## Typography

- **Editorial serif:** thesis, consequence, and large hierarchy.
- **Humanist sans:** interfaces, controls, explanations, and body text.
- **Monospace:** evidence identifiers, provenance, timestamps, confidence, cost, and system labels.

Headlines may be provocative. Supporting copy must make the scope and limitation precise.

## Iconography

- Use Lucide outline icons at 16–20px and inherit `currentColor`.
- Pair semibold interface labels with a 2px stroke; quieter metadata may use 1.5px.
- Keep icons inside 40–44px neutral or signal surfaces when they identify a card type.
- Do not use an icon as the only label when its meaning could be ambiguous.

## Card system

Every card answers one useful question. Use a raised paper surface, neutral shadow ring, 20px outer radius, and 12px inner radius when the inset is 8px. Borders remain for structure; shadows create depth.

Card types:

1. **Evidence:** what was observed, where, and when?
2. **Context:** which entity, relationship, owner, or boundary does it affect?
3. **Decision:** what changes, who approves, and what remains unknown?

Do not put multiple primary actions inside one card. Do not animate every card simultaneously.

## Motion

| State | Contract | Use |
| --- | --- | --- |
| Press | `150ms`, `scale(0.96)` | Deliberate interactive controls |
| Hover or selection | `≤150ms`, ease-out | Immediate interruptible feedback |
| Enter | `300ms`, `y: 12`, `blur: 4px` | A new story or infrequent staged hierarchy |
| Exit | `150ms`, `y: -12`, `blur: 4px` | Softer departure |

Motion is never the only signal. Every state also changes a label, icon, colour, or content value. Respect reduced-motion preferences.

## Voice

1. **Specific before impressive.** Name source, scope, confidence, and limitation.
2. **Consequence before volume.** Explain what the evidence changes for a system or decision.
3. **Human without being casual.** Prefer direct language and short sentences to corporate theatre.
4. **Invitation before assertion.** Let readers inspect, challenge, and understand what remains unknown.

Prefer: “Three sources support this relationship; cloud runtime evidence is not yet available.”

Avoid: “Our AI knows your architecture with complete accuracy.”

## Content pillars

- **Architectural truth — 30%:** evidence graphs, architecture drift, current-system understanding, and decision memory.
- **Security consequence — 30%:** reachability, blast radius, scanner context, trust boundaries, and remediation priority.
- **Governed AI — 25%:** bounded agents, MCP, model routing, cost, replayability, and human authority.
- **Building in public — 15%:** research methods, release gates, failure lessons, roadmap decisions, and craft.

Every published piece must be searchable, shareable, or both. Each piece should naturally lead to a product question, benchmark, guided demo, or relevant trust control.

## Social system

- LinkedIn: three to five evidence-rich posts per week; personal or contrarian hooks, then a concrete framework.
- X: short observations, technical threads, and live build notes; one useful idea per post.
- Carousels: one claim per frame, clear progression, and a final inspection or discussion prompt.
- Promotional content should remain below 10% of output. Product updates should explain the user problem and the release gate, not only the feature.

## Accessibility and imagery

- Maintain WCAG AA contrast for body text and controls.
- Keep keyboard focus visible and hit areas at least 44px.
- Give meaningful images useful alternative text; mark decorative fields as empty alt text.
- AVIF grain fields represent incomplete, layered evidence. They must never be used as proof by themselves.
- Use a pure black 10% inner outline on light images and pure white 10% on dark images.

## Implementation tokens

The canonical implementation lives in `frontend/brand/hyperoru-tokens.css`.
The public web application, private operator console, and documentation all
import that file and map their component-library semantics to it. Update the
shared contract first; do not fork brand primitives inside an application.

```css
:root {
  --paper: #f4f1e9;
  --paper-raised: #fffdf8;
  --ink: #0b0b0c;
  --signal: #facc15;
  --evidence: #1f785b;
  --agent: #6857d7;
  --risk: #d96a3d;
  --radius-card: 1.25rem;
  --radius-card-inner: 0.75rem;
}
```

Use `.brand-card`, `.brand-card-interactive`, `.brand-card-inner`, and `.brand-eyebrow` rather than recreating surface behavior per page. Semantic tokens may evolve; their meaning must remain stable.

### Product mapping

- Web and workspace: paper canvas, raised paper cards, ink outcome surfaces.
- Operator console: the same tokens with denser information hierarchy; visual presets may not replace brand primitives.
- Documentation: Fumadocs roles map to paper, ink, signal, and evidence tokens; diagrams use the same system language.
- Signal yellow means action, selection, or provenance. Evidence green means verified or reconciled. Agent violet means bounded model work. Risk coral means consequence.

## Asset files

- `/brand/hyperoru-lockup.svg`
- `/brand/hyperoru-wordmark.svg`
- `/brand/hyperoru-monogram.svg`

Last updated: 3 September 2026.