 █████   █████   █████████   ███████████  ███████████  █████ █████
░░███   ░░███   ███░░░░░███ ░░███░░░░░███░░███░░░░░███░░███ ░░███
 ░███    ░███  ░███    ░███  ░███    ░███ ░███    ░███ ░░███ ███
 ░███████████  ░███████████  ░██████████  ░██████████   ░░█████
 ░███░░░░░███  ░███░░░░░███  ░███░░░░░░   ░███░░░░░░     ░░███
 ░███    ░███  ░███    ░███  ░███         ░███            ░███
 █████   █████ █████   █████ █████        █████           █████
░░░░░   ░░░░░ ░░░░░   ░░░░░ ░░░░░        ░░░░░           ░░░░░

    ███████    ███████████  ██████████ ███████████     █████████   ███████████    ███████    ███████████    █████████
  ███░░░░░███ ░░███░░░░░███░░███░░░░░█░░███░░░░░███   ███░░░░░███ ░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███  ███░░░░░███
 ███     ░░███ ░███    ░███ ░███  █ ░  ░███    ░███  ░███    ░███ ░   ░███  ░  ███     ░░███ ░███    ░███ ░███    ░░░
░███      ░███ ░██████████  ░██████    ░██████████   ░███████████     ░███    ░███      ░███ ░██████████  ░░█████████
░███      ░███ ░███░░░░░░   ░███░░█    ░███░░░░░███  ░███░░░░░███     ░███    ░░███     ███  ░███░░░░░███  ░░░░░░░░███
░░███     ███  ░███         ░███ ░   █ ░███    ░███  ░███    ░███     ░███    ░░███     ███  ░███    ░███  ███    ░███
 ░░░███████░   █████        ██████████ █████   █████ █████   █████    █████    ░░░███████░   █████   █████░░█████████
   ░░░░░░░    ░░░░░        ░░░░░░░░░░ ░░░░░   ░░░░░ ░░░░░   ░░░░░    ░░░░░       ░░░░░░░    ░░░░░   ░░░░░  ░░░░░░░░░

Brand Guidelines

Everything you need to represent Happy Operators consistently. Click any value to copy it to your clipboard.

Explore the system

Color Palette

A restrained palette with a hot orange accent. The orange does the heavy lifting — teal signals operational health. Click any swatch to copy the hex value.

Primary

Secondary

Neutrals

Semantic

Typography

Space Grotesk for everything human-readable. JetBrains Mono for everything operational. Two fonts, one voice.

Space Grotesk

Display, headings, body, UI labels

Aa Bb Cc

The quick brown fox jumps over the lazy dog

Save 10 hours per week, or you get your money back. We partner with leaders to design tailored AI strategies and unlock sustainable growth.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

JetBrains Mono

Code, data, tables, monospace accents

01 02 03

const savings = hours * 10;

STATUS: OPERATIONAL | UPTIME: 99.97% | LATENCY: 42ms | AUTOMATIONS: 847

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 {} [] () => !== <=>

Type Scale

Happy Operators

Spacing & Layout

8px base unit, comfortable density. Clean grid discipline with generous section padding.

Spacing Scale

2xs

2xl

3xl

4xl

Border Radius

full

Containers

Wide

Narrow

Padding

Brand Signatures

The visual elements that make Happy Operators unmistakable. These are the risks that give the brand its own face.

ASCII Block Art

The signature brand mark. Use on dark backgrounds, loading states, and as a decorative header element. Always render in JetBrains Mono with the primary orange color.

 █████   █████   █████████   ███████████  ███████████  █████ █████
░░███   ░░███   ███░░░░░███ ░░███░░░░░███░░███░░░░░███░░███ ░░███
 ░███    ░███  ░███    ░███  ░███    ░███ ░███    ░███ ░░███ ███
 ░███████████  ░███████████  ░██████████  ░██████████   ░░█████
 ░███░░░░░███  ░███░░░░░███  ░███░░░░░░   ░███░░░░░░     ░░███
 ░███    ░███  ░███    ░███  ░███         ░███            ░███
 █████   █████ █████   █████ █████        █████           █████
░░░░░   ░░░░░ ░░░░░   ░░░░░ ░░░░░        ░░░░░           ░░░░░

    ███████    ███████████  ██████████ ███████████     █████████   ███████████    ███████    ███████████    █████████
  ███░░░░░███ ░░███░░░░░███░░███░░░░░█░░███░░░░░███   ███░░░░░███ ░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███  ███░░░░░███
 ███     ░░███ ░███    ░███ ░███  █ ░  ░███    ░███  ░███    ░███ ░   ░███  ░  ███     ░░███ ░███    ░███ ░███    ░░░
░███      ░███ ░██████████  ░██████    ░██████████   ░███████████     ░███    ░███      ░███ ░██████████  ░░█████████
░███      ░███ ░███░░░░░░   ░███░░█    ░███░░░░░███  ░███░░░░░███     ░███    ░░███     ███  ░███░░░░░███  ░░░░░░░░███
░░███     ███  ░███         ░███ ░   █ ░███    ░███  ░███    ░███     ░███    ░░███     ███  ░███    ░███  ███    ░███
 ░░░███████░   █████        ██████████ █████   █████ █████   █████    █████    ░░░███████░   █████   █████░░█████████
   ░░░░░░░    ░░░░░        ░░░░░░░░░░ ░░░░░   ░░░░░ ░░░░░   ░░░░░    ░░░░░       ░░░░░░░    ░░░░░   ░░░░░  ░░░░░░░░░

CRT Scanline Effect

Subtle horizontal lines overlaid on dark sections and ASCII art. Gives a retro-tech feel. Applied via CSS repeating gradient.

Without scanlines

Standard dark panel

With scanlines

Retro-tech texture

Monospace Accents

Use JetBrains Mono for labels, tags, status indicators, and anything that should feel “operational.”

STATUS: ACTIVEv2.4.1UPTIME 99.97%AI-POWERED10h SAVED/WEEKSLOTS: 1 REMAINING

Motion

Intentional animation that aids comprehension. Framer Motion for scroll-triggered entrances, CSS for micro-interactions.

Easing

Enter

Exit

Move

Duration

Micro

Short

Medium

Patterns

Scroll-triggered fade-in-up

Staggered children (+100ms)

Hover: translateY(-4px) + shadow

CRT flicker on ASCII art

Quick Reference

Copy-paste the most common values.

CSS Custom Properties

--color-primary:

--color-primary-dark:

--color-primary-light:

--color-background:

--color-foreground:

--color-muted:

--color-border:

--color-card:

Tailwind Classes

Primary text

Primary bg

Muted text

Card bg

Border

Wide container

Narrow container

Section padding