# O'Neil Companies — Brand Guidelines (Machine-Readable Spec)

Source of truth: https://oneil.brandhub.design
Purpose of this file: give an AI/code agent everything needed to build on-brand O'Neil
interfaces (e.g. an O'Neil Printing dashboard) without rendering the site.
Machine-readable tokens: https://oneil.brandhub.design/brand-tokens.json

---

## 0. Quick Build Rules (read this first)

1. Fonts: **Figtree** (headings + body), **Roboto Mono** (labels, data, UI micro-copy).
2. Primary interactive color in UI: **ADA Blue `#1179C5`** — not `#489FDF`. Brand Blue
   `#489FDF` is for large graphics/fills, never for small text on white.
3. Background `#F2F7FB` (app canvas) / `#FFFFFF` (surfaces). Text `#232323`.
4. Letter-spacing `-0.01em` on nearly all text. Body line-height `1.4`.
5. Corner radii: 8px (cards/inputs), 12px (tiles), 16px (hero/banners), full (buttons/pills).
6. Every text/background pair must pass WCAG AA (4.5:1 body, 3:1 large text).
7. Use sentence case for most headings; Title Case for section H2s.
8. Never recolor, rotate, distort, outline, or gradient the logo.

---

## 1. Brand Platform

O'Neil is a unified platform connecting strategy, creative, production, logistics, and
national execution.

- **O'Neil Tagline:** Made to Impress — our standard. Every piece reflects pride,
  discipline, and ownership. We do not cut corners.
- **Platform Tagline:** Messaging that Matters — our purpose. We help brands deliver
  messages that guide, reassure, inspire, teach, and move people to act.
- **Positioning:** O'Neil delivers a full marketing supply chain that powers every
  message. We listen. We solve. We simplify. We stay with you through every step.

### What makes O'Neil unique
- A century of craft and trust
- Employee owners who take pride in the details
- A values-led culture that guides how we work
- A multi-brand platform that removes friction
- Integrated creative and production under one roof
- National reach through the 9Fold Collective
- A leadership philosophy aligned through ON Purpose

### Platform selling
- We introduce the full O'Neil ecosystem
- We look for cross-functional solutions
- We speak with one unified voice
- We use one shared process
- We scale clients across print, creative, signage, portals, and national programs

Clients should always feel the platform, not the silos.

### Multi-brand architecture (client at the center)
| Brand | Role |
|---|---|
| Rule29 | Creative and strategic engine: brand, storytelling, campaigns, digital, AI-driven creative |
| O'Neil Printing | Core of the platform: print, packaging, signage, direct mail, portals, fulfillment, logistics |
| Printing Solutions | Fast turnaround, wide format, packaging, labeling, retail environments |
| YB2 | Story-based long-form print for education, communities, organizations |
| 9Fold Collective | National scale partner; North American network for multi-location consistency |

---

## 2. Who We Are

- **Purpose:** Messaging that Matters. Messages shape decisions, relationships, and impact.
- **Vision:** To be the partner brands trust when clarity, quality, and consistency matter most.
- **Mission:** To bring strategy, craft, and technology together through one platform,
  helping brands move from idea to execution with confidence.
- **Core belief:** Aligned, intentional communication creates better outcomes.

### Values (7)
Take Ownership · Grow or Die · Entrepreneurial Spirit · Committed to Each Other ·
Strength in Kindness · Do What You Say · Enjoy the Ride

### Brand voice and tone
- We listen before we speak.
- We focus on what matters.
- We keep things simple.
- We use plain, honest language.
- We build trust through clarity and consistency.

Applies to: proposals, emails, sales and onboarding, social, web content, internal comms.

**UI copy implications:** short sentences, no jargon, no hype adjectives, no exclamation
marks. Empty states and errors explain what happened and the next step plainly.

---

## 3. Logo System

### Lockup variants and when to use them
| Variant | Use on |
|---|---|
| Full Color | White or very light backgrounds (primary lockup) |
| Half-Reverse | Navy or Black backgrounds |
| Full-Reverse (white) | O'Neil Blue, Steel, Green, Red, Violet backgrounds and dark photography |
| Black (1-color) | White, Silver, Yellow, Orange backgrounds; single-color/low-fidelity print |

Families available: primary O'Neil logo, logomark, avatar (with background), O'Neil Direct,
O'Neil University, O'Neil Companies lockup.

### File formats
| Format | Use |
|---|---|
| SVG | Web and digital; scales infinitely (use this in the dashboard) |
| PNG | Slides, docs, email |
| EPS (RGB) | Print/vector |
| CMYK EPS | Process 4-color print |
| PMS EPS | Spot/Pantone print |

Download URL pattern (all live under `https://oneil.brandhub.design/logos/`):

```
/logos/<family>/<base>-<variant>-rgb.svg
/logos/<family>/<base>-<variant>-rgb.png
/logos/<family>/<base>-<variant>-rgb.eps
/logos/<family>/<base>-<variant>-cmyk[-c].eps
/logos/<family>/<base>-<variant>-pms-c.eps
variant ∈ fullcolor | halfreverse | white | black | blue
```

### Rules
- Clearspace on all sides equals the height of the logotype (x).
- Minimum size: 1 inch wide for print, 72px wide for digital.
- Never rotate, recolor, distort, outline, add gradients or effects.
- Choose the lockup with the strongest contrast against its background.
- Always send vector (SVG/EPS/PDF) to print vendors.

### O'Neil Companies lockup
Use when referencing the platform as a whole (enterprise storytelling, recruiting,
platform education).
- Never rearrange the order of the brands.
- Never alter brand proportions.
- Use approved colors only.
- Maintain equal spacing and use the crosshair as a divider between each company logo.

### Sonic logo
Use in video intros/outros, motion graphics, brand films, culture videos, website
interactions where sound is appropriate, major campaigns. Never alter pitch, tempo, or
effects; keep it short and intentional; avoid overuse.

---

## 4. Color Palette

### Primary
| Name | HEX | RGB | CMYK | Pantone | ADA-adjusted |
|---|---|---|---|---|---|
| Blue | #489FDF | 72, 159, 223 | 67, 21, 0, 0 | 2171 | #1179C5 |
| Black | #000000 | 0, 0, 0 | 0, 0, 0, 100 | — | — |
| White | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 | — | — |

### Secondary
| Name | HEX | RGB | CMYK | Pantone | ADA-adjusted |
|---|---|---|---|---|---|
| Navy | #141B4D | 20, 27, 77 | 100, 87, 0, 58 | 2766 | — |
| Steel | #647692 | 100, 118, 146 | 62, 42, 17, 12 | 2138 | — |
| Silver | #C8D8EB | 200, 216, 235 | 19, 7, 0, 0 | 657 | — |
| Violet | #C964CF | 201, 100, 207 | 26, 67, 0, 0 | 252 | — |
| Red | #F4364C | 244, 54, 76 | 0, 89, 66, 0 | 1787 | #DF2D42 |
| Orange | #FF8F1C | 255, 143, 28 | 0, 49, 96, 0 | 1495 | — |
| Yellow | #F0B323 | 240, 179, 35 | 0, 27, 92, 0 | 7409 | — |
| Green | #00B373 | 0, 179, 115 | 78, 0, 73, 0 | 2250 | #11865C |

### Accessibility rule
Where a color is used behind or as small text, use the **ADA-adjusted** value:
Blue → `#1179C5`, Red → `#DF2D42`, Green → `#11865C`.
White text is required on Navy, Steel, ADA Blue, ADA Red, ADA Green, Violet.
Dark text (`#232323`) is required on White, Silver, Yellow, Orange.

### Semantic mapping for a dashboard
```
--background        #F2F7FB
--surface           #FFFFFF
--foreground        #232323
--muted-foreground  #647692   /* Steel */
--border            #E1E4E9
--primary           #1179C5   /* ADA Blue */
--primary-foreground #FFFFFF
--accent            #489FDF   /* large fills, charts, illustration only */
--navy              #141B4D   /* headers, dark surfaces, banners */
--success           #11865C
--warning           #FF8F1C
--destructive       #DF2D42
--info              #489FDF
```

Chart series order: Blue #489FDF, Navy #141B4D, Green #00B373, Orange #FF8F1C,
Violet #C964CF, Yellow #F0B323, Steel #647692, Red #F4364C.

### Approved gradients (linear, two-stop)
Blue→Green, Blue→Violet, Blue→Red, Blue→Steel, Blue→Navy, Green→Yellow, Yellow→Violet,
Yellow→Red, Orange→Violet, Orange→Red, Violet→Red, Silver→Blue.
Do not invent new color pairs. Gradients are decorative; never put small text on them.

---

## 5. Typography

- **Primary typeface:** Figtree (Google Fonts) — headlines, body, UI. Weights 300–900.
- **Secondary typeface:** Roboto Mono (Google Fonts) — labels, data, UI accents, motion frames.
  Use at small sizes only.

```html
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&family=Roboto+Mono:wght@300..700&display=swap" rel="stylesheet">
```

### Type scale (as implemented)
| Role | Family | Size | Line height | Weight | Tracking |
|---|---|---|---|---|---|
| Display / H1 | Figtree | 54px (40px mobile) | 1.1 | 400 | -0.01em |
| Section number | Figtree | same as H1, color #1179C5 | 1.1 | 400 | -0.01em |
| H2 | Figtree | 24px | 29px | 500 | -0.01em |
| H3 / card title | Figtree | 16–18px | 1.4 | 600 | -0.01em |
| Body large | Figtree | 18px | 1.4 | 400 | -0.01em |
| Body | Figtree | 16px | 1.4 | 400 | -0.01em |
| Caption | Figtree | 13px | 1.4 | 400 | -0.01em |
| Label / eyebrow | Roboto Mono | 10–12px, uppercase | 1.2 | 400–500 | 0.12em (uppercase) / -0.01em |
| Data / metric value | Figtree | 32–44px | 1.1 | 600 | -0.01em |

### Principles
- Keep hierarchy clear.
- Use generous spacing.
- Avoid cluttered layouts.
- Use sentence case for most headings.
- Maintain accessibility contrast.
- Typography should support the message, not compete with it.

---

## 6. Photography

**Show:** teams collaborating and solving problems; press checks and production moments;
owners at work living out our ESOP culture; packaging, signage, and installations in real
environments; details of texture, color, and craftsmanship; ON Purpose in action.
Style: clean, honest, natural, nothing staged.

**Avoid:** overly polished stock photography, heavy filters, cluttered or misleading scenes.

Image treatment: 4:3 for editorial/photo grids, 4:5 for social tiles, 8px radius,
`object-fit: cover`. Navy→Blue gradient overlay (105deg, navy 92% → navy 72% → blue 86%)
when text sits on a photo.

---

## 7. Graphic Styles

- Organic gradient mesh backgrounds derived from the approved gradient pairs.
- Crosshair mark used as a divider (notably between company logos).
- Iconography: single unified line-icon set in three groups — **Industry**, **Service**,
  **Miscellaneous** — each in four colorways: Blue `#489FDF`, ADA Blue `#1179C5`,
  White, Black. SVG only.
  Icon URL pattern: `/figma-assets/icons/<blue|ada|white|black>/icon-<name>-<suffix>.svg`.
  Sizing: icon glyph ≈ 37.5% of its tile; keep padding light and generous around it.
  In UI, use ADA Blue icons on white, White icons on Navy/Blue, and Blue icons on a
  20%-opacity Silver background for previews.

---

## 8. Collateral

Print collateral: display banners and business cards (4:3 presentation ratio).
Social media: 4:5 portrait tiles. Presentation decks: 0.5px Silver `#C8D8EB` border on
slide thumbnails. Sub-brand systems: O'Neil Direct, O'Neil University (incl. merch).

---

## 9. Dashboard Implementation Cheat Sheet

```css
:root {
  --font-heading: 'Figtree', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --oneil-blue: #489FDF;
  --oneil-blue-ada: #1179C5;
  --oneil-navy: #141B4D;
  --oneil-steel: #647692;
  --oneil-silver: #C8D8EB;
  --oneil-violet: #C964CF;
  --oneil-red: #F4364C;
  --oneil-red-ada: #DF2D42;
  --oneil-orange: #FF8F1C;
  --oneil-yellow: #F0B323;
  --oneil-green: #00B373;
  --oneil-green-ada: #11865C;

  --background: #F2F7FB;
  --surface: #FFFFFF;
  --foreground: #232323;
  --muted-foreground: #647692;
  --border: #E1E4E9;

  --radius-card: 8px;
  --radius-tile: 12px;
  --radius-hero: 16px;
  --radius-pill: 9999px;
}
body { font-family: var(--font-body); color: var(--foreground);
       background: var(--background); letter-spacing: -0.01em; line-height: 1.4; }
```

Component conventions:
- **Buttons:** fully rounded pills, 12–24px horizontal padding, 14px medium text.
  Primary = ADA Blue fill + white text. Secondary = 1px `--border`, white fill,
  hover fills ADA Blue.
- **Cards:** white surface, 1px `--border`, 8px radius, 24–32px padding, no drop shadow
  by default; on hover lift subtly.
- **Tables/data:** Roboto Mono for numeric columns and column labels (uppercase, 11px,
  0.12em tracking, Steel).
- **Sidebar nav:** fixed 240px, Navy or white surface; active item in ADA Blue with a
  Roboto Mono two-digit index.
- **Focus states:** 2px ADA Blue focus ring, never remove outlines.
- **Motion:** 0.3–0.4s ease fade-and-slide entrances; keep motion subtle and purposeful.

### Do / Don't for a dashboard
| Do | Don't |
|---|---|
| Use ADA Blue for links, buttons, active states | Use #489FDF for small text on white |
| Use Navy for dark headers and banners | Use black as a large background |
| Use Roboto Mono for labels and figures | Set body copy in Roboto Mono |
| Use approved gradient pairs | Invent new color combinations |
| Use SVG logos with clearspace = logotype height | Crop, recolor, or place the logo on busy imagery |
| Write plain, short, honest copy | Use hype, jargon, or exclamation marks |

---

Last updated: 2026-08-14. Regenerate from https://oneil.brandhub.design when the guide changes.