Pueo brand guidelines & build kit.

The cyber guardian of the nation's most classified missions.

Pueo Business Solutions is a National Security cyber company that inspects and protects the nation's most classified missions. Not a multi-service government contractor — a proven, focused National Security cyber company. The site should behave like a piece of command-and-control software — not a brochure. We synthesize the strongest plays from defense-industry leaders (BlueHalo, Kratos, Aechelon) and beat them on a bolder red/black palette, a true C2 feel, and performance-first fidelity.

Personality

Watchful · ready · operator-grade · precise · confident · restrained. Not loud, not playful, not "SaaS-y." Think Call of Duty UI energy with executive restraint. The single most important quality: Pueo reads as a mature company — "fun but serious, still business." Maturity is the ceiling and the floor.

Heritage — handled at 2/10

"Pueo" is the Hawaiian owl — a guardian (aumakua). Native Hawaiian-founded, but not presented as a native company. Use heritage only as abstracted geometry; never literal Hawaiian, tribal, canoe, or navigation imagery. The owl going large and expansive is the visual hero — always the real logo owl or its geometric form, never clip-art.

Direct. Operator-minded. No hedging.

Lead with the operational reality after Pueo has integrated — concrete outcomes, not capability lists ("Stand up Tuesday. Operate Wednesday.").

Dark base. Red is signal, not decoration.

A near-black surface stack, white and grey text, and a tight red family that carries all the energy. Red appears only as live state, action, or critical signal. If it isn't live, clickable, or critical — it isn't red.

Core palette

The signal palette — reserved

Four reserved accents for category-coding and state only. Never primary buttons or body text.

Translucent surface tokens

Two families. No serifs. No italics.

Space Grotesk carries everything human-readable; IBM Plex Mono is the system voice. Hierarchy is built from weight contrast — display headlines are weight 400 (never bold); body is light (320–400); 540 is reserved for card titles and emphasized words.

A 1340px rail and a 4px rhythm.

Patterns: full-bleed dark sections with internal padding; two-column splits (text + HUD/visual) collapsing to one column at ~880px; card grids 4-up → 2-up (~980px) → 1-up (~560px); stat strips split by 1px hairlines. Natural breakpoints: 980 / 880 / 820 / 760 / 720 / 560.

The chamfer is a signature.

Cards use an 8px radius; HUD/glass panels 10–14px; status dots and pills are fully round. Buttons are neither pills nor plain rectangles — they have two opposite corners cut.

The building blocks, live.

Buttons — three variants

IBM Plex Mono · 500 · 12px · +0.10em · UPPERCASE · padding 13px 26px · 1px border · chamfered · 6px leading status dot · hover lifts −1px. Primary: red fill, white pulsing dot, red glow on hover. Invert: white fill for red/dark imagery. Ghost: translucent glass, 1px white border.

Eyebrow / kicker

Cards — standard & lead

Standard: rgba(255,255,255,0.03) fill, 1px hairline, 8px radius, 24px padding, red status dot top-right, hover lifts −3px and borders red. The lead variant uses a red-tinted fill, red border, a yellow dot, and a "MISSION CRITICAL" tag.

HUD / Liquid Glass panel

Translucent blurred panel, 10–14px radius, a mono header row with a live status pill, and a body of readouts. The hero card adds the spectral sheen + animated brand strip. HUD panels reinforce the language with red L-shaped corner brackets.

Nav (glass), divider & stat strip

Sticky glass nav: rgba(10,10,10,0.6) + blur, 1px bottom hairline, geometric owl mark + "PUEO" wordmark, a mono "SYSTEM ACTIVE" status with pulsing dot, and a small primary button. Tactical divider: a full-bleed strip with red gradient ticks flanking a centered mono label. Stat strip: equal cells split by hairlines, big Space Grotesk numbers with red accent sub-glyphs. (All shown in the homepage mockups.)

The interface is instrumentation.

All CSS-driven — heavy look, light payload, fast on restricted networks. Motion is executive: subtle ambient loops or fire-once-on-scroll. Always honor prefers-reduced-motion.

One owl. The real one.

The canonical mark is the flying owl + the chamfered “PUEO” wordmark, struck in metallic silver and red foil on the business cards. On live surfaces the only owl is this real mark or its low-poly / etched-glass form, scaled up — never a front-facing cartoon owl or a redrawn stand-in.

The mark

Metallic foil finish. Chrome silver + cyber red on black, reflective. The brand's premium, tactile register.

Low-poly owl. The official triangulated owl — the approved expansive, digital expression for hero backgrounds.

Rules

Real environment, treated darkly.

Environment photography (the Pueo HQ) is treated darkly — a red→black gradient overlay, a mono corner tag, full-bleed, radius 0. Heritage motifs become abstracted geometry and texture (line patterns, concentric forms, node grids), never literal decorative imagery on live surfaces. Backgrounds on the live site are tactical-generated only: radar sweep, dot grid, topographic rings, coordinate stamps. Material textures (volcanic, basalt) come later, once curated photography is in hand.

WCAG AA, baked in.

Do / Don't.

Set it once in Site Settings.

The entire site is rebuildable in one Elementor Pro license, no external plugins. Most of the page is native; a few signatures (chamfer, glass, animated gradients, HUD overlays) are Custom CSS one-liners in §14.

Global Colors → rename the 4 system slots

Then + Add Color for: White #FFFFFF, Surface Deep #050505, Red Hover #E51010, Blood #7A0606, Lead Yellow #FFEA4F, and the four reserved signal accents. Elementor's picker supports alpha, so the rgba() surface tokens can be stored as globals too.

Global Fonts & Typography

Map H1 = hero headline, H2 = section titles, H3–H5 = card/feature titles, and H6 = the mono eyebrow (set Text Transform: UPPERCASE, color #CC0000). Space Grotesk is variable — if the weight dropdown won't take 330/540, round to the nearest 100.

Buttons, Layout & Background

The chamfer, the leading status dot, and the hover lift aren't global-button properties — add them site-wide with the CSS in §14.

Paste into Site Settings → Custom CSS.

These are the signatures Elementor's panels can't express. Paste this block once site-wide; add the helper classes (.btn-invert, .btn-ghost, .live-dot) in a widget's Advanced → CSS Classes field.

/* Tactical button: chamfered corners + status dot + hover lift */
.elementor-button{
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px,
                     100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.elementor-button .elementor-button-text::before{
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:9999px; background:currentColor; margin-right:8px; opacity:.9;
}
.elementor-button:hover{ transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(204,0,0,.45); }

/* Secondary variants — add class in widget Advanced tab */
.btn-invert > .elementor-button{ background:#fff; color:#CC0000; border-color:#fff; }
.btn-ghost > .elementor-button{ background:rgba(255,255,255,.04); color:#fff;
  border:1px solid rgba(255,255,255,.28); }

/* Pulsing live dot — add class .live-dot to any element */
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(204,0,0,.6); }
  70%{ box-shadow:0 0 0 8px rgba(204,0,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(204,0,0,0); }
}
.live-dot::before{ content:""; display:inline-block; width:7px; height:7px;
  border-radius:9999px; background:#CC0000; margin-right:8px;
  animation: live-pulse 1.6s ease-in-out infinite; }

/* Apply to a Container/section: the premium material layer */
selector{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30),
              0 24px 60px rgba(0,0,0,.45);
}
/* spectral edge sheen */
selector::after{ content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 50%,
              rgba(255,255,255,.14));
  mix-blend-mode: overlay; pointer-events:none; }

/* 2px drifting brand strip on a panel's top edge */
selector::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(135deg,#000,#3a0808 20%,#7a0606 40%,
              #cc0000 55%,#7a0606 75%,#000);
  background-size: 200% 200%; animation: pueo-drift 22s ease-in-out infinite; }

/* full red/black tactical background (CTA blocks) */
selector{ background: linear-gradient(135deg,#000,#3a0808 25%,#7a0606 50%,
          #cc0000 62%,#7a0606 78%,#000);
  background-size: 220% 220%; animation: tac-drift 26s ease-in-out infinite; }

@keyframes pueo-drift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes tac-drift{ 0%,100%{background-position:0% 0%;} 50%{background-position:100% 100%;} }

/* red L-shaped corner brackets on a HUD panel */
selector::before{ content:""; position:absolute; inset:-1px; pointer-events:none;
  background:
   linear-gradient(to right,#cc0000 16px,transparent 16px) top left/22px 2px no-repeat,
   linear-gradient(to bottom,#cc0000 16px,transparent 16px) top left/2px 22px no-repeat,
   linear-gradient(to left,#cc0000 16px,transparent 16px) top right/22px 2px no-repeat,
   linear-gradient(to bottom,#cc0000 16px,transparent 16px) top right/2px 22px no-repeat,
   linear-gradient(to right,#cc0000 16px,transparent 16px) bottom left/22px 2px no-repeat,
   linear-gradient(to top,#cc0000 16px,transparent 16px) bottom left/2px 22px no-repeat,
   linear-gradient(to left,#cc0000 16px,transparent 16px) bottom right/22px 2px no-repeat,
   linear-gradient(to top,#cc0000 16px,transparent 16px) bottom right/2px 22px no-repeat; }

/* topographic concentric red rings (behind hero HUD) */
selector{ background-image: radial-gradient(circle at center,
   transparent 0 14%, rgba(204,0,0,.5) 14% 14.6%, transparent 14.6% 28%,
   rgba(255,255,255,.18) 28% 28.4%, transparent 28.4% 42%,
   rgba(204,0,0,.3) 42% 42.4%, transparent 42.4%); }

/* ALWAYS honor reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s!important;
    animation-iteration-count:1!important; }
}