OpsArena Brand Kit

Logo

Primary mark: icon + wordmark. Use on dark backgrounds (default). On the main site, right-click the header logo for copy SVG / brand kit / download.

OpsArena

Primary on dark (lockup)

Icon only (brandmark)

Logo gradient: teal #3de8c8 → #1f8a7a → #1a4060 (right); #28b8a0 → #186858 → #122840 (left). Center diamond white; inner dot #2dd4bf.

Colors

Single palette for landing and trainer. CSS variables in :root (landing.css / style.css).

Base & surfaces

Background #111114

Elevated #19191d

Card #1f1f24

Card hover #262630

Surface #27272d

Border #2a2a30

Border hover #3a3a42

Text

Text #fafafa

Text secondary #a1a1aa

Text muted #9ca3af

Text dim #71717a

Brand & accent

Brand #2dd4bf

Accent #e4e4e7

Trainer semantic (success, error, warning, terminal)

Success #22c55e

Danger / Error #ef4444

Warning #ca8a04

Blue (info) #60a5fa

Terminal bg #0c0c0f

Terminal text #a3e635

Typography

Inter for UI and body (400–700); JetBrains Mono for code, terminal, and stat badges. Self-hosted woff2 (latin, cyrillic, latin-ext).

Inter 700 · Hero / H1 Hands-on platform for DevOps & SRE

Inter 600 · Section title / H2 Why OpsArena

Inter 400 · Body Interactive trainers with a real terminal, structured theory, and practice exercises.

JetBrains Mono 400 · Code / terminal ops@arena:~$ ls -la

Scale: section label ~0.75rem, nav/buttons 0.8125–0.875rem, body 0.9375–1rem, titles 1.25–2.25rem. Letter-spacing: -0.04em (hero), -0.02em (titles, logo).

Radius & spacing

Border radius and key spacing used across landing and trainer.

Border radius

--radius-xs 6px

--radius-sm 10px

--radius 16px

Spacing

--radius-xs 6px — inputs, small buttons, pills (lang toggle), context menu
--radius-sm 10px — cards (trainer), primary/ghost buttons
--radius 16px — feature cards, modals, terminal block, CTA box
Container padding: 24px (16px mobile). Max-width: 1120px (landing), 1040px (trainer), 900px (brand kit)
Header height: 60px (landing), 56px (trainer)

Components

Buttons and controls used on the landing and in the trainer.

Landing

Primary (white)

Ghost (border)

Brand (teal)

Lang toggle (pill)

Trainer

Primary

Ghost

Danger

Stat badge (XP / streak) 0 XP 0 d

Feature card (landing)

Interactive Terminal

A real command line right in your browser.

Lesson card states (trainer)

1 Current lesson

2 Completed

3 Locked

Modal (Request Access)

Waitlist modal: teal top bar, logo + title, email input, brand primary submit. Backdrop blur; focus ring brand.

Motion & elevation

Transitions and shadows used across the product.

--ease-out cubic-bezier(0.16, 1, 0.3, 1) — modals, hero animations, scroll reveals
Buttons / links: 0.2s ease (color, background, border)
Header (landing): liquid glass — backdrop-filter saturate(180%) blur(32px); scrolled state blur(40px)
Modal: 4px teal gradient bar; border rgba(45,212,191,0.22); shadow 0 24px 48px rgba(0,0,0,0.4)
Context menu: 0 12px 40px rgba(0,0,0,0.4)

Back to main site