Brand Guidelines · 2026

Yuno Agents.

AI Orchestration Platform — Visual Identity System

Color Palette — Dark Mode (Night Owl)

Colors.

The Night Owl palette is the primary brand expression. Deep navy backgrounds with vibrant accent colors convey technical depth and precision.

Backgrounds

Background#011627
Copied!
Surface / Card#0A2534
Copied!
Hover#0e2e42
Copied!
Active#12384e
Copied!

Text & Borders

Text#C0C7D1
Copied!
Text Dim#5F7D97
Copied!
Text Faint#3A4B5A
Copied!
Border#223E64
Copied!

Status Colors

Running#16a34a
Copied!
Paused#eab308
Copied!
Stopped / Error#e11d48
Copied!
Color Palette — Light Mode (Stripe.dev Day)

Light Mode.

A monochromatic, Stripe.dev-inspired day palette. All accent colors flatten to near-black for a minimal, print-like aesthetic.

Background#e8e8e8
Copied!
Surface / Card#e9e9e9
Copied!
Hover#dcdcdc
Copied!
Text / Primary#1e1e1e
Copied!
Muted Foreground#555555
Copied!

Note: All accent colors (teal, green, gold, purple, blue) map to #1e1e1e in light mode. Border uses #1e1e1e at 13% opacity.

Typography

Type System.

Two-font stack: a display face for titles, and JetBrains Mono for everything else — body, subtitles, labels, data, and UI elements.

Font Stack

Display
Sohne
Yuno Agents.
Mono / Body
JetBrains Mono
The quick brown fox jumps over the lazy dog. Archie completed Q2 roadmap prioritization.
Mono
JetBrains Mono
agents deployed: 10  ·  tasks completed: 12,450+  ·  uptime: 99.9%

Weight Ladder

400 Regular
JetBrains Mono Regular — Body text, descriptions
500 Medium
JetBrains Mono Medium — Agent names, event titles
600 Semi
JetBrains Mono Semibold — Section headings, subtitles

Type Scale In Use

Page Title
Sohne 300
clamp(44–72px)
Yuno Agents.
Stat Value
Sohne 300
28px
147
Body / Name
JetBrains Mono 500
13px
Archie completed Q2 roadmap prioritization
Label
JetBrains Mono
11px uppercase
/ Overview
Micro Label
JetBrains Mono
10px uppercase
Agents Active  ·  of 10 deployed  ·  2026.3.16
Tag
JetBrains Mono
10px uppercase
Product   +23.5%
Spacing & Shape

Spacing & Borders.

Spacing Scale (4px base)

4px
0.25rem — micro gap
8px
0.5rem — tight
12px
0.75rem — default gap
16px
1rem — card padding
20px
1.25rem — stat card px
28px
1.75rem — section px
48px
3rem — column gap

Border Radius

4px
sm
6px
md
8px
lg
12px
xl

Border Conventions

• 1px solid var(--border) — section dividers
• Horizontal: border-bottom on sections, table rows
• Vertical: border-right on grid cells
• No box-shadow — intentionally flat
• No border-radius on cards (square edges)
Components

UI Elements.

Tags

Default (Role)
Product Security Deploy QA
Counter (Metric)
+23.5% -0.3s Live 10

Status Indicators

Running
Paused
Stopped
Error (blinking)

Section Header

/ Agent Fleet
8
1
1

Stat Card

Agents Active +2
8
of 10 deployed
Tasks Today +23.5%
147
vs yesterday

Quick Action Button

Iconography

Agent Icon.

A pixel-art robot rendered as SVG rects in a 24×24 grid. The icon adapts to agent status with eye variations and color overrides.

Running
Paused
Stopped
Error

Decorative: "+" Icon

Used as decorative divider elements between sections (8×8 SVG, 40% opacity, text-faint color)
Brand Voice

Voice & Tone.

Principles

Technical — Precise, metrics-first language
Terse — Minimal words, maximum clarity
Data-driven — Numbers speak, not adjectives
Imperative — Action-oriented button copy

Conventions

• "/" prefix on section headers: /Overview, /Agent Fleet
• Uppercase monospace for all labels and metadata
• Dot-terminated brand name: Yuno Agents.
• Date format: 2026.3.16 (dot-separated)
• Metric + unit: 24 tasks, 1.2s, 99.9%

Do

"Deploy agent"
"8 of 10 deployed"
"Archie completed Q2 roadmap prioritization"
"Error Rate: 0.12% — last 24h"
"View all"

Don't

"Click here to deploy a new agent!"
"You have 8 amazing agents running"
"Our awesome AI Archie just finished the roadmap"
"Errors are really low right now"
"See more activity..."

Agent Names

Archie — Product
Devin — Development
Quinn — QA
Sentinel — Security
Shipper — Deploy
DocBot — Documentation
Watcher — Monitor
Reviewer — Code Review
DataPipe — Data
Scribe — Documentation