Brand Book
Everything you need to represent Agentik {OS} correctly — colors, typography, logo usage, voice, and visual language.
Logo
The Agentik {OS} logo is a geometric mark derived from the letter A. It communicates precision, clarity, and technical authority.
Logo Sizes
32px
Favicon / Icon
48px
Navbar
80px
Hero / Feature
128px
Print / Large format
Name Formatting
Correct
Agentik {OS}
“Agentik” in GT Planar bold. “{OS}” in GT America Mono, primary amber color.
Incorrect
AgentikOS / Agentik OS / agentik os
Never drop the curly braces, lowercase the brand, or remove the space before {OS}.
Clear Space Rule
Minimum padding around the logo equals the logo height (1x)
Color System
The Caffeine theme — warm amber on neutral darks. Technical and refined, never flashy.
Core Palette (Dark Mode)
Primary
#e0b860
oklch(0.9247 0.0524 66.1732)
Warm amber — main accent, CTAs, highlights
Background
#111111
oklch(0.1776 0 0)
Near-black — page backgrounds
Card
#191919
oklch(0.2134 0 0)
Dark gray — card and panel backgrounds
Foreground
#eeeeee
oklch(0.9491 0 0)
Near-white — primary text
Muted
#b4b4b4
oklch(0.7699 0 0)
Medium gray — secondary text, labels
Border
#201e18
oklch(0.2351 0.0115 91.75)
Subtle warm border — dividers, card edges
Department Accent Colors
Each of the 6 agent departments has a distinct accent color for visual categorization in dashboards, agent cards, and status indicators.
Development
#22d3ee
Technical builds, code, engineering
Quality
#34d399
QA, testing, reliability
Marketing
#a78bfa
Growth, content, campaigns
Security
#f87171
Security, compliance, audits
Strategy
#fbbf24
Planning, roadmaps, leadership
Creative
#f472b6
Design, visual identity, assets
Colors to Never Use as Primary
Type System
Two typefaces. Two purposes. GT Planar for human readability. GT America Mono for terminal precision.
GT Planar
Headings, body text, UI labels
Regular body text at 16px/1.6 line height. Used for paragraphs, descriptions, and all human-readable content throughout the site. GT Planar reads cleanly at small and large sizes.
GT America Mono
Code, terminal UI, {OS} branding token
Used exclusively for: code blocks, terminal output, the {OS} token in Agentik {OS}, system status indicators, and any content with a machine/technical feel.
Type Scale Reference
Copy Guidelines
We write like a senior engineer explaining to a founder — clear, direct, and results-focused. No fluff, no corporate speak.
We use precise technical language when it adds value, but we never write to impress. Every sentence earns its place by informing or persuading.
Example
198 specialized AI agents across 6 departments handle execution — code, content, testing, and deployment.
We state facts and results. We don't claim we're 'the best' — we show proof. Numbers and deliverables speak louder than adjectives.
Example
Ship in 3-6 weeks. Not months. Backed by 6 production deployments.
Commands, progress indicators, and system metaphors feel natural in our interface. We borrow the precision of CLI without making it inaccessible.
Example
> Initializing project scaffold... Done in 3.2s
We use Lucide icons for visual communication, never emojis. This preserves the technical aesthetic and ensures rendering consistency across platforms.
Example
Use: ArrowRight, CheckCircle, Zap — never emojis inline with text
Visual System
Every visual decision reinforces the same idea: AI precision meets human craft. Dark, structured, and purposeful.
Dot Grid Backgrounds
Radial gradient dots at 32px spacing. Primary color at 15% opacity on near-black. Never use linear grid lines.
Scanline Overlay
Used on terminal-style UI blocks and hero accents. Adds depth and reinforces the system/machine aesthetic.
Section Rhythm
Motion Principles
Entry animation
FadeIn (opacity 0→1, y 20→0, 0.5s ease-out)
List stagger
Stagger + StaggerItem (0.08s delay each)
Trigger
Scroll-triggered with viewport margin -100px
Repeat
once: true (no replay on scroll back)
Hover
opacity 0.8 transition (150ms)
Usage Rules
Quick reference for applying the brand correctly across any context.
Do
Use the primary amber (#e0b860) for key accents and interactive elements
Maintain dot grid (32px) on dark backgrounds for texture
Use GT Planar for headings and body text
Use GT America Mono for code, terminal UI, and the {OS} token
Write in English — technical but accessible, confident without arrogance
Use Framer Motion scroll-triggered animations for section entrances
Keep section padding at py-20 sm:py-28 for consistent rhythm
Apply scanline overlays on terminal-style elements for depth
Don't
Use blue, violet, or purple as primary accents — those are not our colors
Use emojis in content — use Lucide icons instead
Use linear grid lines — always use dot grid patterns
Add saturated or neon colors — the palette is intentionally muted
Mix GT Planar and GT America Mono in the same word without intent
Apply double padding to shadcn Card components (they already include py-6)
Use terracotta or warm orange tones — that is a different brand
Place the logo on backgrounds that reduce legibility
Questions
For brand usage questions, partnership assets, or press kit requests — reach out at hello@agentik-os.com