ronnieops

RonnieOps — Visual Identity Design Brief

This document describes the visual identity system for RonnieOps, an IT operations / infrastructure / DevOps blog. Use these specifications to generate production-ready assets with an AI image generator (Midjourney, DALL-E, Flux, etc.).

---

Brand Overview

Field	Value
Name	RonnieOps
Domain	ronnieops.dev
Tagline	IT operations · Infrastructure · DevOps
Niche	Technical blog for AI/ML, research, automation, IT ops, and SaaS practitioners
Vibe	Dark cyber meets modern cloud. Clean, dark, professional layout with purple accent gradients, terminal-inspired elements, and Inter typography.

---

Color Palette

Role	Hex	Usage
Background	#0a0a0f	Main dark canvas — near-black with a faint blue-gray undertone (--brand-cyber-bg in custom.scss)
Accent (dark mode)	#a78bfa	--brand-purple-400 — links, highlights, interactive elements
Accent (light mode)	#7c3aed	--brand-purple-600 — links, highlights, interactive elements
Accent (gradient end)	#7C3AED	--brand-purple-600 — used in gradients alongside primary
Text	#FFFFFF	Body text on dark backgrounds
Text (muted)	#FFFFFF at 40–50% opacity	Taglines, metadata, secondary labels
Border / divider	#FFFFFF at 10% opacity	Subtle lines between posts, card edges
Terminal red dot	#EF4444	Window close button in terminal chrome
Terminal yellow dot	#EAB308	Window minimize button
Terminal green dot	#22C55E	Window maximize button

Gradient definition (used everywhere):

• Linear gradient, top-left → bottom-right
• #a78bfa (0%) → #7C3AED (100%)

---

Typography

• Primary font: Inter (sans-serif, self-hosted WOFF2 at /fonts/inter-*.woff2)
• Fallback stack: -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif
• Weight: 300–700 variable (body 400, headings/logo/badges 700)
• Letter spacing: -0.02em body, 0.04em for the logo

Code blocks use the system monospace stack. The site uses Inter exclusively — no Google Fonts CDN.

---

Core Visual Motifs

These elements repeat across all assets to create a cohesive system:

1. Terminal Window Chrome

A rectangular window with rounded corners (border-radius ~16–20px at logo scale) styled like a macOS/iTerm terminal:

• Border: 1.5–4px stroke in the purple gradient (no fill — transparent interior)
• Title bar: Three small circles in the top-left — red, yellow, green — horizontally spaced. These are small (radius ~8px at logo scale).
• Title bar separator: A thin horizontal line (1px, purple at 20–30% opacity) running the full width just below the dots.

The terminal window is never filled/solid. It is always just an outline — the dark background shows through.

2. The Prompt >_

A >_ symbol (greater-than followed by underscore) placed inside the terminal, below the title bar. This represents a shell prompt:

• Color: Purple #a78bfa
• Opacity: ~60% (it’s a background element, not the hero)
• Font: Bold monospace
• Purpose: Immediately signals “this is a terminal” without reading any text

3. The R Badge

The primary brand mark — a rounded-square tile containing the letter R:

• Shape: Square with rounded corners (radius ~15–20% of side length)
• Fill: Solid purple gradient (#a78bfa → #7C3AED)
• Letter: Capital R in bold monospace, colored #0a0a0f (the background color — so it’s a dark R on a purple tile)
• The R is centered within the tile, both horizontally and vertically
• Size relationship: The badge is the single most prominent element in any asset. In the logo it’s the focal point; in the favicon it’s essentially the entire image.

4. Blinking Cursor Block

A small solid purple rectangle representing a terminal text cursor:

• Color: #a78bfa at 80–90% opacity
• Shape: Tall narrow rectangle (roughly 1:2.5 width:height ratio) with very slight rounding
• Position: Always placed to the right of text content, as if the cursor is waiting for input
• Purpose: Reinforces the “live terminal” feel and implies the blog is actively maintained

5. Dotted Separator

A horizontal dashed/dotted line:

• Color: Purple at ~40% opacity
• Style: Dashed line (alternating 8px dash, 4px gap at logo scale)
• Usage: Separates the title area from the tagline within the terminal window

6. Grid Pattern (banner only)

A subtle grid of thin lines covering the full background:

• Color: Purple at ~8% opacity
• Spacing: ~40px between lines
• Purpose: Adds depth and a “digital blueprint” / “wireframe” feel without competing with foreground elements

7. Scanline Overlay (banner only)

Very faint horizontal lines across the entire image, mimicking CRT scan lines:

• Color: Black at ~3% opacity
• Spacing: ~4px apart
• Purpose: Subtle retro-CRT texture — barely visible, adds atmosphere

---

Asset Specifications

Asset 1: Favicon

Property	Value
Output format	PNG (32×32 and 180×180) or SVG
Canvas	Square, transparent or dark background

Composition:

A rounded-square dark canvas (#0a0a0f). The current implementation uses an inline SVG circle with the letter “R” in Inter bold, colored white on a purple fill (var(--accent-color)). See layouts/_partials/sidebar/left.html for the actual SVG markup.

The >_ prompt may be omitted at this size if it crowds the composition. The R badge is the hero — it should be large and centered vertically.

---

Asset 2: Apple Touch Icon

Property	Value
Output format	PNG 180×180
Canvas	Rounded square (iOS applies its own mask, but design on a square canvas)

Composition: Same as the favicon, but at larger scale with more breathing room. Include the >_ prompt above the R badge (faded to ~60% opacity). Include the cursor block to the right of the badge. The terminal window border should have clearly visible rounded corners.

---

Asset 3: Full Logo

Property	Value
Output format	PNG 512×512 (transparent or dark background) or SVG
Canvas	Rounded square (corner radius ~96px at 512px size)

Composition (top to bottom within the terminal window):

1. Background: Rounded square filled with #0a0a0f
2. Terminal window: Outlined rectangle centered inside the canvas, with purple gradient border, three traffic-light dots, and title bar separator line
3. Prompt: >_ in purple at ~60% opacity, positioned below the title bar, left-aligned
4. R badge + wordmark row: A purple R badge (rounded square with dark R) followed immediately to its right by the word onnie in purple and Ops in white, all in bold monospace, on a single line. The R badge and wordmark should be vertically centered with each other (baseline-aligned).
5. Dotted separator: A dashed purple line spanning the terminal width
6. Tagline: infra · devops · cloud in white at ~50% opacity, small size, left-aligned below the separator
7. Cursor: A purple rectangle below the tagline, left-aligned, representing a blinking cursor waiting for input

Spacing / hierarchy: The R badge + wordmark row is the visual center of gravity. The prompt above and tagline below should feel secondary. The cursor is a small accent detail at the bottom.

---

Asset 4: Social / OG Banner

Property	Value
Output format	PNG 1200×630 (opaque)
Canvas	Landscape, filled dark

Composition:

1. Background: Solid #0a0a0f with the grid pattern overlay (thin purple grid lines at 8% opacity covering the entire canvas) and optional CRT scanline overlay
2. Subtle glow: A large, soft, faint purple ellipse behind the center of the image (like ambient light bleeding from the terminal)
3. Terminal window: Centered in the canvas, outlined only (no fill), with purple gradient border, three traffic-light dots, and title bar line. The window should be roughly 440px wide × 320px tall at 1200×630 scale — not full-width, leaving dark space on both sides.
4. Prompt: >_ inside the terminal, upper area, faded purple
5. R badge + wordmark: Same layout as the full logo — R badge followed by “onnie” (purple) and “Ops” (white), all bold monospace, centered within the terminal. This is the hero — large and readable even at small thumbnail sizes.
6. Cursor: Purple block to the right of the wordmark or on the next line
7. Dotted separator: Below the wordmark, spanning the terminal width
8. Tagline: IT operations · Infrastructure · DevOps in white at ~45% opacity
9. Bottom accent bar: A 10px tall strip across the very bottom of the entire 1200×630 canvas, filled with the purple gradient. This anchors the composition.
10. Corner text (optional): ronnieops.dev in bottom-left and v1.0.0 in bottom-right, in white at ~20% opacity, small monospace — like terminal status bar info

---

Prompt Templates for AI Image Generators

Favicon (simplified for AI)

A minimalist app icon on a dark background (#0a0a0f). A rounded-square canvas containing a terminal window outline with a purple (#a78bfa) border. Inside the window: three small dots in the title bar (red, yellow, green). Below: a bold purple rounded-square badge containing a dark capital letter “R” in monospace. To the right of the badge, a small purple rectangular cursor block. Flat design, no shadows, no gradients except the purple elements. Vector style, crisp edges.

Full Logo

A 512×512 app icon. Dark background (#0a0a0f) with large rounded corners. Inside: a terminal window outline with a vivid purple (#a78bfa) gradient border. The title bar has three small dots: red, yellow, green. Below the title bar separator: the text “>_” in faded purple (ghost prompt). On the next line: a purple rounded-square badge containing a dark “R” in bold monospace, immediately followed by the text “onnie” in purple and “Ops” in white — all bold monospace, forming “RonnieOps”. Below a dashed purple separator line: the tagline “infra · devops · cloud” in faded white. At the bottom, a small purple rectangle representing a blinking terminal cursor. Clean flat design, no 3D effects, no shadows. Monospace font throughout.

Social Banner

A 1200×630 social media card. Dark background (#0a0a0f) with a faint purple grid pattern overlay. In the center: a terminal window outline with purple (#a78bfa) gradient border, three title-bar dots (red, yellow, green), and a title bar line. Inside the terminal: the text “>_” in faded purple (top area), then a large purple rounded-square badge with a dark “R” followed by “onnieOps” in bold monospace (“onnie” in purple, “Ops” in white). A dashed purple line below, then “IT operations · Infrastructure · DevOps” in faded white text. A small purple cursor block. A 10px purple gradient strip across the very bottom of the image. Subtle purple glow behind the terminal. Faint CRT scanline texture. Monospace font throughout. Clean, flat, technical aesthetic.

---

File Delivery Checklist

Generate these files and place them in static/img/:

File	Format	Size	Replaces
favicon.png	PNG	32×32	favicon.svg
apple-touch-icon.png	PNG	180×180	apple-touch-icon.svg
logo.png	PNG (transparent)	512×512	logo.svg
banner.png	PNG	1200×630	banner.svg

After generating, update layouts/_partials/head/custom.html and hugo.toml to reference the .png files instead of .svg.

Current status: PNG files already exist in static/img/ and hugo.toml references /img/favicon.png and /img/logo.png. The SVG originals are retained in the same directory.