Visual identity for the course "Agentic AI Systems: From Opportunity to Production" — a standalone brand, separate from Seven Tree Media and devonajones.com, built for the course platform and its materials.
Built by Claude · Reference this page for anything extending the course brand — landing pages, ads, certificates, social assets
01
Direction
The subject drove every choice here: this is a systems-architecture and engineering-discipline course, structured as a literal staged pipeline (Pre-Course → 12 Mastery Stages → Capstone). The identity leans into that directly rather than defaulting to generic "AI product" styling — dark engineering-console palette, blueprint-grid discipline, and a navigation element that's literally a control-loop diagram of your own progress through the system.
Why not the default "AI brand" look
Deliberately avoided the two most common AI-brand tells: warm cream + terracotta, and near-black + neon accent. Instead: deep engineering-blueprint navy, warm brass/amber (drafting-instrument, not neon), and a serif body face for the genuinely long reading material — most AI-adjacent products default to sans-everywhere, which fights readability at this content volume.
02
Color
Named CSS custom properties, used consistently across the whole app. Copy these variables directly into any new page that should feel like part of the same course.
Ink
--ink · #0F151B
Page background
Surface
--surface · #161F27
Cards, sidebar
Surface Raised
--surface-raised · #1E2932
Hover states, nested panels
Line
--line · #2A3742
Borders, dividers
Paper
--paper · #EFEBE1
Reading panels (purpose blocks, answers)
Brass
--brass · #D9A45A
Primary accent — progress, CTAs, active states
Brass Dim
--brass-dim · #8B6B3A
Muted brass — borders, secondary emphasis
Text Primary
--text-primary · #EDEAE1
Headings, high-emphasis text
Text Secondary
--text-secondary · #9BA8B1
Body copy
Text Muted
--text-muted · #5E6C76
Metadata, timestamps, disabled
03
Track colors
The 5 competency tracks the 12 Mastery Stages fall into. Used sparingly — as a small dot next to a stage, never as a background fill — so they read as a coding system, not decoration.
Three roles, deliberately not the same family doing double duty.
Display — headings, UI labels, buttons
Space Grotesk
Understand the work before designing the solution
RegularMediumSemiboldBold
Body — lesson content, long-form reading
Source Serif 4
Systems thinking is the practice of understanding how multiple parts interact to produce an overall outcome. Instead of examining one task in isolation, systems thinking asks what a task is connected to, what it depends on, and how changing one part affects the rest of the system. This course runs many thousands of words per lesson — a serif body face was chosen specifically because it holds up better than sans-serif at this reading length.
Mono — eyebrows, metadata, stage numbers, code
IBM Plex Mono
Lesson 8 · Stage 1 · Systems Thinking And Workflow Discovery
05
Signature element
The one place the brand takes a real risk — everywhere else stays disciplined and quiet.
Pre-Course
Stage 1
Stage 2
Stage 3
Stage 4
The course navigation is drawn as a literal connected pipeline — a dashed vertical line running through circular stage nodes, each one filling solid brass as it's completed, with the current stage pulsing gently. This isn't decorative: the course genuinely is a sequential staged system, so the nav diagrams the same "trigger → process → state" pattern the course itself teaches. It's the one place the identity takes a real visual risk, and everything else (typography, spacing, color use) stays deliberately quiet around it.
06
Components
Core recurring UI patterns, pulled live from the course app's CSS.
Lesson 8Stage 1
Common Mistake
Starting with AI selection before understanding the workflow.
Best Practice
Map the current-state workflow before evaluating any AI opportunity.
Purpose. Reading panels (lesson purpose, revealed knowledge-check answers) sit on the warm paper tone against the dark shell — a deliberate light/dark contrast for the passages meant to be read closely.
07
Voice
Plain, direct, active voice. Names what the learner controls, never how the system is built. Matches the course's own "understand the system" ethos — the UI doesn't perform enthusiasm, it just states what's true and what to do next.
UseMark Lesson Complete / Continue where you left off — active voice, names the learner's action directly
AvoidSubmit your progress! / You're crushing it! — exclamation-driven enthusiasm, vague verbs, doesn't match the disciplined engineering register
UseThis lesson is part of the full course — states the fact plainly, no apology, no hard sell
AvoidOops! Looks like this content is locked 🔒 — apologetic tone, decorative emoji, undercuts the register
