Skip to main content

Design Patterns & Brand Guidelines — Overview

Design Philosophy​

Opshell.dev follows a terminal-first design philosophy. Every visual and interaction decision is rooted in the command-line experience — the site should feel like a powerful CLI tool, not a brochure.

Core Beliefs​

BeliefApplication
The terminal is the interfaceAll components reference CLI metaphors: $ prompts, command-style actions (--flag syntax), monospace typography, green-on-dark color schemes
Content is king, chrome is noiseNo hero sliders, no carousels, no decorative illustrations. Every pixel serves the content or the conversion goal
Dark mode is the only modeThe site has no light mode. The dark theme is not an option — it is the identity. It reduces eye strain for technical readers who spend hours in terminals and code editors
Speed is a featureMinimal CSS, no JavaScript frameworks, no font icons. Performance is part of the design
Builders talking to buildersThe tone is direct, technical, and jargon-aware. No marketing fluff, no stock photos, no "empower your journey" language

Target Audience Mindset​

The typical opshell.dev visitor:

  • Spends most of their day in a terminal emulator
  • Uses Neovim, tmux, and a tiling window manager
  • Prefers man pages over tutorial blogs
  • Judges a site by its typography and color contrast
  • Will notice (and appreciate) a well-placed $ prompt

CSS Variable System​

All visual tokens are defined as CSS custom properties on :root. Never use raw hex values — always use the variable.

Colors​

:root {
  /* Backgrounds */
  --ops-bg: #0d1117;            /* Page background */
  --ops-surface: #161b22;       /* Cards, panels, sidebars, widgets */
  --ops-surface-hover: #1c2333;  /* Card hover state */
  --ops-header-bg: #0d1117;     /* Navigation bar */
  --ops-footer-bg: #0d1117;     /* Footer */

  /* Borders */
  --ops-border: #30363d;        /* All borders, dividers, rules */

  /* Text */
  --ops-text: #c9d1d9;           /* Body text, headings */
  --ops-text-secondary: #8b949e; /* Labels, descriptions, meta */

  /* Accent */
  --ops-accent-green: #3fb950;  /* Links, prompts, active states, CTAs */
  --accent: var(--ops-accent-green);

  /* Semantic */
  --ops-danger: #f85149;        /* Errors, destructive actions */
  --ops-warning: #d29922;       /* Warnings, cautions */
}

Typography​

:root {
  --ops-font-mono: "JetBrains Mono", "Ubuntu Mono", monospace;
  --ops-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
TokenUsageSize
--ops-font-monoCode blocks, prompts, terminal commands, technical labels, form inputs0.88rem–0.95rem
--ops-font-bodyBody text, headings, navigation, buttons1rem–6.6rem (headings use clamp)

Spacing & Layout​

:root {
  --ops-container-width: 1200px;  /* Max content width */
  --ops-card-radius: 8px;         /* Border radius for cards, panels, inputs */
  --ops-transition: 0.15s ease;   /* Default transition timing */
}
TokenValueUsage
--ops-container-width1200px.inside-header, .opshell-landing, .opshell-element-wrap max-width
--ops-card-radius8pxCards, terminal panels, form inputs, buttons
--ops-transition0.15s easeHover/focus transitions on interactive elements

Design Tokens Quick Reference​

/* DO: */
.element {
  background: var(--ops-surface);
  color: var(--ops-text);
  border: 1px solid var(--ops-border);
  font-family: var(--ops-font-mono);
}

/* DON'T: */
.element {
  background: #161b22;
  color: #c9d1d9;
  border: 1px solid #30363d;
  font-family: "JetBrains Mono", monospace;
}

Tone & Voice in UI​

ElementToneExample
PromptsDirect command$ opshell --mission
HeadingsBold, benefit-driven"Build, automate, and operate from the terminal."
DescriptionsTechnical, specific"Practical Linux, CLI, automation, DevOps, AI, and code workflows"
Form labelsMinimal, functional"Your name", not "Please enter your full name"
Success messagesConfirmational"You are in. Check your inbox." (not "Thank you for subscribing!")
Error messagesInformational, not apologetic"Please use a valid, deliverable email address."

Interaction Patterns​

PatternBehavior
HoverElements lift slightly (translateY(-1px)) with green border highlight
FocusGreen outline ring (2px solid var(--ops-accent-green), 3px offset)
SelectionGreen-tinted background (rgba(63,185,80,0.28))
TransitionsSubtle (0.15s ease) — fast enough to feel responsive, slow enough to be noticeable
Blink animationOnly used for cursor effect on terminal prompts (ops-blink keyframe)
@keyframes ops-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

Components Documented​