AI Agents Prompt
Brand Identity
AI Agents Prompt is a deep-technical blog and project hub covering AI agents, agentic workflows, memory systems, and real engineering projects. Written by a builder, for builders.
Brand Personality
The Midnight Engineer — Like talking to a senior developer deep in a codebase at 2am, lit only by terminal glow. Sharp, focused, generous with knowledge, zero tolerance for hand-waving.
Content Pillars
| Pillar | Description |
|---|---|
| AI Agents | Architecture, frameworks, multi-agent systems |
| Agentic Workflows | Orchestration, task decomposition, tool use |
| Agent Memory | ALMA, Veritas, persistent intelligence, learning loops |
| Own Projects | ALMA-memory, xSquadShield, open-source builds |
| Broader AI | LLMs, prompting, fine-tuning, industry trends |
Visual Identity
Deep-space terminal — Abyss black canvas with emerald signal green accents. Warm charcoal borders. Code as hero content. The blog should feel like opening a premium IDE, not a marketing site.
Design Principles
Five rules that govern every visual decision.
1. Content is the entire product
No decorative illustrations, no hero gradients. Article text, code blocks, and diagrams ARE the interface. Every pixel that isn't content or navigation must justify its existence.
2. Dark-first, light-tolerated
Abyss Black (#050507) is the native canvas. The design was born in darkness. Light mode, if ever added, is a courtesy — not the primary experience.
3. Code blocks are first-class citizens
On an AI blog, code and prompt examples are as important as prose. They get distinct surfaces, syntax highlighting tuned to the brand palette, and a copy button on every block.
4. The 70/20/8/2 dominance ratio
70% dark void, 20% content, 8% structure (borders, meta), 2% accent. The emerald never exceeds 2% of viewport. When everything glows, nothing glows.
5. Warm in the darkness
Charcoal borders (#3d3a39) are warm, not cold. Text is Snow White (#f2f2f2), not pure white. The warmth prevents the terminal aesthetic from becoming sterile or hostile.
Color Palette
Every color in the system, organized by role.
Surfaces
Brand Accent
Text Hierarchy
Semantic
Typography
Three font families, three voices: headings for authority, body for precision, code for credibility.
Display / Hero
Section Heading (H1)
Sub-heading (H2)
Overline / Tag
Body (Blog Reading)
Code
from alma import ALMA
# Initialize with SQLite backend
alma = ALMA(storage="sqlite")
alma.store_heuristic(strategy="chain-of-thought")Caption / Metadata
Spacing Scale
8px base unit with fine-grained sub-8px increments.
Border Radius
| Token | Value | Use |
|---|---|---|
--radius-sharp | 4px | Code spans, inline elements |
--radius-subtle | 6px | Buttons, interactive elements |
--radius-code | 6.4px | Code blocks (micro-distinction) |
--radius-standard | 8px | Cards, containers |
--radius-pill | 9999px | Tags, badges only |
Shadows & Depth
Depth is communicated primarily through border weight and color, not shadows. Shadows are reserved for Level 4-5 only.
Flat
Contained
Emphasized
Accent
Ambient
Dramatic
Atoms
The indivisible building blocks.
scope_filter to limit scope
Molecules
Atoms combined into functional groups. Each molecule is a reusable pattern.
Blog Card
from alma import ALMA
alma = ALMA("sqlite")
alma.store_heuristic(...)Author Block
Search Bar
Tag List
Table of Contents
- Introduction
- The Memory Problem
- Architecture Overview
- Implementation
- Results
- What's Next
Newsletter CTA
Social Share Bar
Organisms
Complex UI sections composed from molecules and atoms.
Navigation Bar
Hero Section
The Engineering Behind
Intelligent AI Agents
Deep dives into AI agents, memory systems, and real projects.
Blog Grid
Footer
Page Templates
Wireframes showing how organisms compose into complete pages.
Blog Index (Homepage)
60px heading + CTA buttons
Featured + compact cards
Blog Post
18px Inter, 1.75 lh, code blocks, callouts
Projects Showcase
Install command + stats + links
About
Long-form story
Responsive Behavior
How the system adapts from mobile to ultra-wide.
| Breakpoint | Width | Columns | Hero Text | Spacing |
|---|---|---|---|---|
| Small Mobile | <420px | 1 | 28px | 48px sections |
| Mobile | 420-767px | 1 | 36px | 48px sections |
| Tablet | 768-1024px | 2 | 42px | 64px sections |
| Desktop | 1025-1440px | 3 | 60px | 96px sections |
| Large | >1440px | 3 | 60px | 96px sections |
Collapsing Rules
| Element | Desktop | Mobile |
|---|---|---|
| Nav | Full horizontal links | Hamburger → overlay |
| Blog Grid | 3 columns, featured spans 2 | 1 column, all full-width |
| Post Layout | Content (720px) + TOC sidebar | Content full-width, TOC hidden |
| Footer | 4-column grid | Stacked single column |
| Code Blocks | Full-width in content | Horizontal scroll, never wrap |
Touch Targets
| Element | Min Size | Padding |
|---|---|---|
| Buttons | 44×44px | 12px 16px |
| Nav links | 44px height | 12px vertical |
| Cards | Full-width | Entire surface tappable |
| Tags | 32px height | 4px 12px |
Motion & Animation
All motion is slow and purposeful. Fast animation contradicts the engineering-precision atmosphere.
Timing Scale
| Token | Duration | Use |
|---|---|---|
--motion-fast | 150ms ease | Color changes, opacity, border |
--motion-medium | 300ms ease | Layout shifts, reveals |
--motion-slow | 500ms ease | Section transitions |
--motion-glow | 2s alternate | Emerald pulse on logo |
Interactive Demos
Hover over each box to see the transition speed.
Emerald Signal Glow
The signature animation. The bolt icon pulses with drop-shadow cycling between 2px and 8px blur in Signal Green. Used on the logo and optionally on highlighted interactive elements.
/* Emerald pulse keyframes */
@keyframes pulseGlow {
from { filter: drop-shadow(0 0 2px #00d992); }
to { filter: drop-shadow(0 0 8px #00d992); }
}
.bolt-icon {
animation: pulseGlow 2s ease-in-out infinite alternate;
}Motion Principles
- Use ease curves, never linear for UI transitions
- 150ms for immediate feedback (hover, focus)
- 300ms for layout changes
- Respect
prefers-reduced-motion
- Don't animate faster than 100ms (feels janky)
- Don't use bouncing or elastic easing
- Don't auto-play video or complex animations
- Don't animate text opacity below 0.5
Do's & Don'ts
Colors
- Use Abyss (#050507) as page bg, Carbon (#101010) for cards
- Reserve emerald (#00d992) for 2% of viewport
- Use Snow White (#f2f2f2) as default text
- Use warm charcoal borders on all cards
- Don't use pure black #000000 as background
- Don't use pure white #ffffff as body text
- Don't use emerald as a background fill
- Don't use warm colors (orange/red) as decoration
Typography
- system-ui for headings, Inter for body, SFMono for code
- Compressed line-heights (1.0-1.11) for headings
- 18px / 1.75 line-height for blog body text
- Uppercase only with 0.45-2.52px letter-spacing
- Don't mix serif or decorative fonts
- Don't increase heading line-height beyond 1.33
- Don't use weights heavier than 700
- Don't apply uppercase to headings
Components
- Use border weight (1→2→3px) for depth hierarchy
- Present code as primary hero content
- Animate slowly and subtly (150ms-500ms)
- Show code before explaining it
- Don't use heavy shadows — depth = borders
- Don't use radius > 8px on cards (pill = tags only)
- Don't skip the charcoal border on cards
- Don't use stock photos of robots
Voice & Tone
| Axis | Position |
|---|---|
| Formality | Casual-professional (not stiff, not slangy) |
| Energy | Focused calm (not hype, not sleepy) |
| Humor | Dry engineering wit (not jokes, not humorless) |
| Position | Opinionated (not neutral, not preachy) |
| Technical depth | Deep (not surface-level, not academic) |
Example Phrasings
- "Here's how the retrieval pipeline scores memories."
- "I hit this bug at 2am. Here's the fix."
- "This approach is 3x faster. Here's why."
- "R@5 = 0.964. Not a typo."
- "Revolutionizing AI with cutting-edge memory!"
- "In this exciting tutorial, we'll explore..."
- "AI is changing the world as we know it."
- "Click here to unlock the secrets of AI agents!"
AI Agents Prompt Brand Book v2.0
Design: VoltAgent-derived · April 2026
Atomic Design methodology (Brad Frost)
⚡ Built with the Design Squad