Sovereign Intelligence Infrastructure · v2.0
PulseWise
Design Language
The master visual constitution governing all current and future PulseWise products — from the SMA Personal Intelligence System and PulseWise OS to Enterprise Portals, Mobile Applications, and Marketing Properties.
Brand Archetype System
PulseWise is a Sovereign Intelligence Infrastructure — a Cognitive Operating System that synchronizes humans, agents, knowledge, memory, automation, reasoning, and execution. Every visual decision flows from this archetype.
Core Archetype
Sovereign Intelligence Infrastructure. Calm, deliberate, precise, thoughtful, capable, reliable. The archetype is not a tool you use — it is an infrastructure you trust. Visual language communicates absolute dependability through restraint, precision, and material honesty.
Secondary Archetypes
Emotional Signature
Calm confidence. Not excitement, not urgency, not comfort. The user feels a sense of arrival — this system is in control, nothing is forgotten, everything has its place. The emotional tone is quiet competence.
Cognitive Presence
Perceives. Decodes. Aligns. Routes. Executes. Reflects. The visual language makes these cognitive operations legible without spectacle. Motion, layout, and interaction all reinforce that the system is thinking alongside the user.
Strategic Positioning
Positioned as the operating system for human-AI coordination. Not an AI tool in a crowded market — the cognitive infrastructure beneath every intelligence operation in the organization.
Trust Model
Design Doctrine
The governing philosophy and immutable laws that every PulseWise product must obey. These are not guidelines — they are design doctrine.
What PulseWise Should Feel Like
Institutional
Feels like a system that has existed for decades and will exist for decades more. No trend, no fad, no seasonal refresh. The design carries the weight of permanence.
Intelligent
The UI anticipates, surfaces relevance, and communicates understanding. Every layout decision prioritizes cognitive clarity over visual novelty.
Calm
No alerts that demand immediate action unless life-critical. No blinking, no pulsing, no urgency decoration. The system is present without demanding attention.
Precise
Every pixel, every spacing increment, every type size is intentional. Alignment is mathematical, not eyeballed. The UI rewards attention with clarity.
Trustworthy
Visual signals consistently correspond to system behavior. What looks clickable is clickable. What looks protected is protected. No deceptive affordances.
Human-centered
The system is complex; the interface is not. Every cognitive burden shifted to the machine is a win. The design prioritizes comprehension over capability demonstration.
What PulseWise Should Never Feel Like
- ✕ Cyberpunk or dystopian — no neon floods, dark-for-the-sake-of-dark, or tech-noir tropes
- ✕ Startup aesthetics — no unicorn motifs, growth-hacking visuals, or "disruptive" clichés
- ✕ Gaming aesthetics — no gradients on every surface, particle effects, or gamification chrome
- ✕ Crypto / Web3 visuals — no blockchain metaphors, interconnected nodes as decoration, or token-badge UI
- ✕ Decorative futurism — no floating holographic elements, 3D-accelerated chrome, or sci-fi glassmorphism
- ✕ AI chatbot tropes — no typing indicators, robot avatars, or "AI" badges on every feature
Immutable Design Laws
One accent, used at most twice per screen
Cyan represents intelligence. It must remain scarce and meaningful. Overuse dilutes its signal value to zero.
One primary action per surface
Every screen, modal, card, and panel must have exactly one primary action. Everything else is secondary or tertiary.
No decoration without purpose
Every line, color, icon, and animation must justify its existence by serving a communication or interaction function.
Empty states are designed, not forgotten
Every empty state, loading state, and error state must be intentional. Empty space is a deliberate design choice, not an oversight.
Same function, same appearance
No variant should exist for stylistic reasons. Component variations must correspond to functional differences only.
The system never obscures
No hidden state, no silent failures, no vanishing data. If the system is working, it shows it. If it failed, it explains why.
Visual DNA
The genetic code of every PulseWise product surface. These rules define what is always true and what is never allowed.
Always
- ✓ Editorial — content hierarchy that respects reading gravity
- ✓ Structured — clear information architecture visible at a glance
- ✓ Minimal — every element earns its place through necessity
- ✓ Purposeful — every pixel serves a function
- ✓ Human-centered — designed for human cognition, not machine capabilities
- ✓ Executive-grade — befitting enterprise and institutional decision-makers
- ✓ Institutional — timeless, never fashionable
Never
- ✕ Cyberpunk — neon floods, dark-for-the-sake-of-dark, tech-noir
- ✕ Crypto aesthetics — blockchain metaphors, token-badge UI
- ✕ Startup aesthetics — unicorn motifs, growth-hacking visuals
- ✕ Gaming aesthetics — gradients on every surface, particle effects
- ✕ Neon overload — more than one neon accent per screen
- ✕ Tech clichés — circuit traces, server racks, AI brain imagery
- ✕ Decorative futurism — holographic elements, glassmorphism for show
Design Hierarchy
Cognitive Clarity Rules
Every screen must be scannable in under 3 seconds. The primary action must be identifiable in under 500ms. Users must be able to explain "what is here and what I can do here" within 2 seconds of looking at any surface.
Color Architecture
A disciplined, hierarchical color system built from the foundational Deep Intelligence Navy. Every color has a purpose and a territory.
Foundation & Primary
Neutral System
Status Colors
CSS Custom Properties
--bg--surface--surface-raised--fg--fg-secondary--muted--border--accent-cyan--accent-blue--accent-gold--success--warning--danger--infoAccent Discipline
Interactive States
Typographic Philosophy
Authority, clarity, confidence. Montserrat for English, Cairo for Arabic. A single sans-serif family in disciplined weights and sizes — no decorative, trend, or experimental typography.
Font Family
Desktop Type Scale
| Token | Size | Weight | Line Height | Letter Spacing | Sample |
|---|---|---|---|---|---|
--fs-display |
clamp(56, 8vw, 96px) | 700 | 1.0 | -0.03em | Display |
--fs-h1 |
clamp(40, 5vw, 64px) | 600 | 1.08 | -0.02em | Heading 1 |
--fs-h2 |
clamp(28, 3.6vw, 44px) | 600 | 1.15 | -0.015em | Heading 2 |
--fs-h3 |
clamp(22, 2.4vw, 30px) | 600 | 1.25 | -0.01em | Heading 3 |
--fs-h4 |
20px | 500 | 1.35 | -0.005em | Heading 4 |
--fs-body |
16px | 400 | 1.65 | 0 | Body text sits at 16px with comfortable reading line-height. |
--fs-small |
14px | 400 | 1.55 | 0 | Small text for descriptions and secondary content. |
--fs-caption |
12px | 400 | 1.4 | 0 | Captions and timestamps |
Responsive Scale Adjustments
RTL / Arabic
Arabic text uses the Cairo font family at identical size specifications. All spacing, alignment, and hierarchy rules apply symmetrically to RTL layouts. Margins and padding values are mirrored. The reading gravity in RTL respects right-to-left scanning patterns with visual anchors on the right side of surfaces.
Cognitive Layout System
A layout system optimized for decision-making, reading, focus, and trust. Every spacing decision reduces cognitive load.
Grid Architecture
12-column flexible grid on a 1280–1920px canvas. Column width is fluid; gutters are fixed at 24px. Content containers max out at 1120px (standard) or 760px (reading/narrow).
Spacing Scale
--gap-2xs--gap-xs--gap-sm--gap-md--gap-lg--gap-xl--gap-2xlBreakpoints
Reading Width & Vertical Rhythm
Body copy max-width: 65ch (approximately 1040px at 16px). Tables and data may exceed this. Vertical rhythm operates on an 8px baseline grid — all margins, padding, and component heights should snap to increments of 8px. Between sections, use --gap-lg (40px) or --gap-xl (64px) for visual breathing room.
Layout Posture Rules
Component Language
Complete specifications for every core component. Each includes states, accessibility, usage rules, and anti-patterns.
Navigation
Buttons
Forms & Inputs
Cards
Agent Cards
Dedicated card variant for agent identity. Each agent type has a 2px accent bar at the top matching its category color. Includes agent name, role, status indicator (online/offline/busy), and capability tags. Trust indicator via an icon + text showing permission level. Memory indicator showing context retention. No avatar illustrations — use a monogram or simple glyph.
Tables
Additional Components
KPI Block
A modular metric display with value, label, optional trend indicator (up/down), and optional sparkline. Value in display typeface at large size. No decorative backgrounds.
Modal / Dialog
Bg: var(--surface) with var(--bg) overlay at 60% opacity. Max-width: 520px. Narrow: 400px. Wide: 640px. Close button (X) top-right. Title + body + footer with actions.
Notifications
Toast-style, positioned bottom-right. Icon + message + optional action. Auto-dismiss after 5s (info), persistent (warning/error). Types: info (blue), success (green), warning (amber), error (red).
Search Interface
Command+K global search. Overlay with input at top, results in sections below. Section headers in mono uppercase. Keyboard navigation: up/down arrows, enter to select, esc to close. No decorative search icon animation.
Empty State
Centered layout with a simple glyph (no illustration), title, description, and primary action. Description explains what belongs here and how to add the first item. Never shows a broken icon or sad face.
Pricing Section
Three-column grid. Center column highlighted with cyan border. Feature comparison built into each column. CTA at bottom of each. Annual/monthly toggle above the grid. No "Most Popular" badge — use cyan border and title treatment.
Motion Language
Motion communicates intelligence, confidence, and intent — never excitement. Every animation serves understanding, not spectacle.
Motion Principles
Purposeful
Every animation must serve a communication function — indicating state change, directing attention, or explaining a relationship. No purely decorative animation.
Subtle
Motion is felt, not noticed. Durations are short (150–300ms). Easing prefers deceleration over acceleration. No bounce, elastic, or spring effects.
Consistent
Same transition type always uses the same duration and easing. Micro-interactions don't surprise. Page transitions share a rhythm.
Quiet
No particles, no confetti, no parallax, no auto-scrolling carousels. The system moves because it must, not because it can.
Easing & Duration
cubic-bezier(0.25, 0.1, 0.25, 1) — standard decelerationcubic-bezier(0.05, 0.7, 0.1, 1.0) — ease-out, 200–300mscubic-bezier(0.4, 0.0, 0.6, 1.0) — ease-in, 150–200msInteraction Behaviors
Motion Precedents
Hover state (button)
50ms — immediate bg color shift to cyan tint at rgba(0,224,255,0.08)
Page transition
250ms — crossfade with 4px vertical drift. Content opacity 0→1 at 200ms
Notification entry
200ms ease-out slide from right edge. Dismiss: 150ms ease-in slide to right
Intelligence presence indicator
Subtle pulse animation on cyan dot. 2s cycle, opacity 0.5→1. Only for "active cognition" state
Agent Workforce Design
Identity systems and visual hierarchy for the PulseWise agent workforce. Every agent type has a distinct visual signature while belonging to a unified system.
Agent Role System
The Individual's Intelligence Partner
User-facing personal assistant. Cyan accent. Identity: user's initials in a circular avatar. Trust indicator: "Personal" context badge. Shows memory utilization and active tasks.
Organizational Intelligence
Enterprise-wide operations. Gold accent. Identity: organizational mark. Trust indicator: "Executive" clearance badge. Shows delegation chain and org context.
Information & Memory Specialist
Knowledge base operations, retrieval, synthesis. Blue accent. Identity: book/open-icon glyph. Shows knowledge graph connections and source confidence.
Domain Expert
Domain-specific capabilities (legal, medical, engineering, creative). Green accent. Identity: domain icon. Shows certification, confidence, and domain scope.
Workflow & Process Operator
Automated workflows, triggers, sequences. Amber accent. Identity: play/automation glyph. Shows active workflows, success rate, and next scheduled run.
Security & Compliance Guardian
Access control, policy enforcement, threat detection. Red accent. Identity: shield glyph. Shows security posture, active policies, and threat count.
Agent Identity Standards
SMA Design Standards
The SMA Personal Intelligence Experience must feel like a trusted intelligence partner — never like a chatbot. Every interface element reinforces that the user is interacting with a cognitive system, not a Q&A widget.
Conversation UI
Not a chat bubble interface. A cognitive conversation surface. Messages appear as structured cards in a vertical timeline, not speech bubbles. User messages left-aligned with a subtle surface background. Agent responses right-aligned with contextual depth — supporting text, sources, actions, and confidence levels.
Memory UI
Memory is surfaced as an accessible, searchable timeline of retained information. Grouped by topic, searchable, filterable. Each memory entry shows: content, source, timestamp, confidence level, and whether it was explicitly saved or implicitly learned.
Knowledge UI
Knowledge bases presented as navigable collections. Folder/collection navigation on left, content area on right. Search always available. Each knowledge item shows: title, summary, last accessed, source type, and relationship count.
Agent Presence
Agents are always present but never intrusive. A persistent agent strip (48px) at the top of the SMA interface shows the active agent and its status. Users can switch agents, view agent context, and access agent settings without leaving the conversation flow. The agent strip is a single cyan line when the agent is quiet, expanding to show information on hover.
Cognitive Timeline
A system-wide chronological view of all intelligence operations — conversations, decisions, knowledge retrievals, automation runs. Visualized as a vertical timeline with nodes at each operation point. Filterable by agent type, operation type, time range, and relevance. The timeline is the system's memory:
Every node shows: timestamp, agent icon, operation type, brief description, and outcome. Click to expand full detail.
Cognitive Operating System Patterns
Visual patterns for the six cognitive operations: Perceive, Decode, Align, Route, Execute, Reflect. These patterns define the visual language of intelligence in motion.
Perceive
Visual: Input nodes with ripple detection animation. A subtle expanding ring indicates the system is receiving input. Multiple input streams shown as parallel lines converging. Color: cyan detection pulse.
Decode
Visual: Input resolves into structured data. Animated transition from raw (pulsing) to structured (static grid/lines). The "understanding" moment is a brief cyan flash at the transformation point. Color: cyan to blue gradient.
Align
Visual: Decision nodes evaluating against context and memory. A branching diagram where paths align to known patterns. Confident paths glow cyan; uncertain paths pulse amber. The alignment surface shows active context items.
Route
Visual: Flow lines selecting the correct agent or system. Animated path from decision node to destination agent card. Successful routing = solid cyan line, fallback = dotted amber line. Duration matches actual routing time.
Execute
Visual: Action completion with confirmation. Executing: pulsing target icon. Complete: static checkmark in cyan. Failed: red X with error explanation. Duration indicator (progress bar or timer) for long-running operations.
Reflect
Visual: Outcome analysis and learning signal. A subtle reflection indicator: expanding concentric rings after execution. The system stores outcome in memory timeline. Reflection is shown as a brief "learned" pulse in the agent strip.
Navigation Model
The Cognitive OS uses a hub-and-spoke navigation model. The hub is the Cognitive Center — a dashboard showing active agents, recent operations, system status, and intelligence overview. Spokes are dedicated surfaces for each cognitive domain: Conversation (SMA), Knowledge, Automation, Memory, Analytics, and Settings. Users can always return to the hub with one click.
Intelligence Infrastructure Patterns
Visual patterns for infrastructure-grade intelligence systems. These interfaces must feel like infrastructure — reliable, scalable, observable — not like an application.
Knowledge Graphs
Interactive graph visualization with nodes (concepts/entities) and edges (relationships). Node size = relevance/importance. Edge weight = relationship strength. Color follows agent category system. Minimal — no 3D rotation, no particle background, no decorative node glow.
Agent Networks
Topology view showing agents, their connections, and data flow. Agents are cards (not abstract nodes). Data flow is shown as labeled directional lines between agents. Active paths highlighted in cyan, idle in muted. Error paths in red.
Intelligence Routing
Decision tree / flow visualization showing how intelligence requests are evaluated and routed. Each decision node shows: condition evaluated, match confidence, route taken. Timing information at each node. Collapsible into summary view.
Automation Flows
Sequential or conditional workflow visualization. Steps as connected cards with arrow lines. Each step shows: action, agent, status (pending/running/complete/failed), duration. Branching paths shown as split lines. Overall flow progress bar at top.
Memory Systems
Memory architecture visualization showing short-term, long-term, and working memory tiers. Data flows between tiers shown with directional arrows. Capacity indicators at each tier. Search surface for querying across all memory tiers.
Reasoning Systems
Chain-of-thought visualization showing reasoning steps. Each step is a collapsible card with: premise, operation, conclusion, confidence. Steps linked by directional arrows. Final conclusion highlighted with cyan border. Option to show/hide intermediate reasoning.
Infrastructure Visual Language
Accessibility
WCAG AA minimum, WCAG AAA target where practical. The system must be usable by everyone, in every language, on every device.
Minimum Standards
- ✓ WCAG AA compliance minimum across all surfaces
- ✓ Color contrast ≥4.5:1 for normal text, ≥3:1 for large text
- ✓ Focus indicators visible on all interactive elements
- ✓ Keyboard navigation for all functionality
- ✓ Screen reader support (ARIA labels, roles, live regions)
- ✓ Text resizing up to 200% without loss of functionality
- ✓ Motion reduction respects prefers-reduced-motion
RTL / Arabic Support
- ✓ Full RTL layout mirroring — all interfaces must work in RTL
- ✓ Arabic typography with Cairo font at equivalent sizes
- ✓ Logical properties (margin-inline, padding-inline) not directional
- ✓ Date, number, and currency formatting per locale
- ✓ Icon mirroring for directional icons in RTL
Accessibility Tokens
The dark navy background (#0A0F1A) with #E8EDF5 text achieves a contrast ratio of approximately 14.5:1 — exceeding AAA requirements. The cyan accent (#00E0FF) on dark backgrounds achieves approximately 7.2:1 for large text. For normal-sized cyan text, use a brighter variant (#33E5FF) or increase size to meet 4.5:1.
Design Governance
Quality gates, review checklists, and governance rules to ensure every PulseWise product upholds the design language.
Approved Visual Elements
- ✓ Intelligence — represented through cyan, structure, clarity, precision
- ✓ Cognition — represented through flow patterns, hierarchy, decision visualization
- ✓ Trust — represented through transparency, consistency, clear state communication
- ✓ Structure — represented through grids, containers, spacing, alignment
- ✓ Precision — represented through typography, mathematical spacing, deliberate contrast
Forbidden Visual Elements
- ✕ Robot imagery — no humanoid robots, robotic arms, or mechanical AI representations
- ✕ Brain imagery — no anatomical brains, neuron diagrams, or mind visualizations
- ✕ Circuit imagery — no circuit boards, traces, chips, or electronic hardware motifs
- ✕ Generic AI symbols — no sparkle icons, magic wands, or AI badges on features
- ✕ Sci-fi clichés — no holographic interfaces, floating UI, or transparent glass panels
- ✕ Crypto visuals — no blockchain diagrams, token icons, or Web3 motifs
Review Checklist
Quality Gates
Virality Without Hype
Strategic memorability — not social media gimmicks. PulseWise earns recognition through consistency, distinctiveness, and the quiet confidence of a system that simply works.
Memorability Through Consistency
Every PulseWise product uses the same visual language. Users who recognize one product recognize them all. Repetition builds memory without flashiness.
Distinctiveness Through Restraint
In a market of glowing, animated, over-designed AI products, restraint is the differentiator. The navy canvas + scarce cyan signal is unmistakable — because nothing else is this quiet.
Recognition Through Craft
Precise typography, perfect alignment, intentional whitespace — craft signals quality without saying a word. Users notice when something feels "right."
Shareability Through Substance
What makes PulseWise shareable is what it does, not how it looks. The design gets out of the way so the product's capabilities are the story.
Strategic Memorability Tactics
Exports — Design Tokens & Assets
Production-ready design tokens, CSS variables, Tailwind configuration, and export specifications for every PulseWise product team.
CSS Variables (Complete)
:root {
--bg: #0A0F1A;
--surface: #111827;
--surface-raised:#1A2235;
--fg: #E8EDF5;
--fg-secondary: #A7B0BC;
--muted: #6B7280;
--border: #1F2937;
--border-light: #374151;
--accent-cyan: #00E0FF;
--accent-blue: #005CFF;
--accent-gold: #D4A853;
--success: #10B981;
--warning: #F59E0B;
--danger: #EF4444;
--info: #3B82F6;
--font-display: 'Montserrat', system-ui, sans-serif;
--font-body: 'Montserrat', system-ui, sans-serif;
--font-arabic: 'Cairo', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--fs-display: clamp(56px, 8vw, 96px);
--fs-h1: clamp(40px, 5vw, 64px);
--fs-h2: clamp(28px, 3.6vw, 44px);
--fs-h3: clamp(22px, 2.4vw, 30px);
--fs-h4: 20px;
--fs-body: 16px;
--fs-small: 14px;
--fs-caption: 12px;
--fs-meta: 11px;
--gap-2xs: 4px;
--gap-xs: 8px;
--gap-sm: 16px;
--gap-md: 24px;
--gap-lg: 40px;
--gap-xl: 64px;
--gap-2xl: 104px;
--container: 1120px;
--container-narrow: 760px;
--gutter: 40px;
--radius: 8px;
--radius-lg: 12px;
}
Tailwind CSS v4 Configuration
@theme {
--color-bg: #0A0F1A;
--color-surface: #111827;
--color-surface-raised:#1A2235;
--color-fg: #E8EDF5;
--color-fg-secondary: #A7B0BC;
--color-muted: #6B7280;
--color-border: #1F2937;
--color-border-light: #374151;
--color-accent-cyan: #00E0FF;
--color-accent-blue: #005CFF;
--color-accent-gold: #D4A853;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
--color-info: #3B82F6;
--font-display: 'Montserrat', system-ui, sans-serif;
--font-body: 'Montserrat', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--text-display: clamp(56px, 8vw, 96px);
--text-h1: clamp(40px, 5vw, 64px);
--text-h2: clamp(28px, 3.6vw, 44px);
--text-h3: clamp(22px, 2.4vw, 30px);
--text-h4: 20px;
--spacing-gap-2xs: 4px;
--spacing-gap-xs: 8px;
--spacing-gap-sm: 16px;
--spacing-gap-md: 24px;
--spacing-gap-lg: 40px;
--spacing-gap-xl: 64px;
--radius-radius: 8px;
--radius-radius-lg: 12px;
--container: 1120px;
}
Figma Variables
Export the complete design token set to Figma via the Design Tokens plugin format. Token groups:
Component Specifications
Complete component specifications available as structured JSON for integration with Zeroheight, Supernova, or Storybook. Each component spec includes: states, accessibility requirements, usage rules, anti-patterns, responsive behavior, code snippets (HTML/CSS), and Figma component links.
Logo Architecture System
The PulseWise master logo, symbol architecture, avatar system, and icon framework. Every mark must be recognizable at any scale, on any surface, in any medium.
Master Logo Rules
Symbol Architecture
Intelligence Node
Primary symbol. A cyan-blue radial gradient circle with a white core. Represents the cognitive center.
Network Clusters
Secondary mark for agent networks and multi-node contexts. Three dots in cyan, blue, gold.
Container Mark
For enterprise, organizational surfaces. Rounded square containing the intelligence node.
Pathway Mark
For flows, routing, and intelligence-in-transit contexts. Nodes connected by a line.
Avatar System
User avatars are always initials-based — never photographic, never illustrated. A 32×32 or 40×40 circle with the user's first and last initial in Montserrat 600. Background derives from the user's primary agent color (default: navy surface with cyan border for PulseWise OS).
Icon System
Icons are 16×16 or 20×20. Stroke weight: 1.5px. Rounded caps and joins. Line style — never filled (exception: status indicators). Use a single consistent icon set across all products. No duotone, no multicolor icons. Icons are always var(--fg-secondary) by default, var(--accent-cyan) when active.
Clear-Space & Scaling Rules
Misuse Examples
No replacing the intelligence node with a star, sparkle, or any other shape
No gradients on the wordmark — always solid color
No badges, seals, or notification indicators attached to the logo
No changing the typeface — always Montserrat
No glow, shadow, or emboss effects on the logo
Agent Identity System
Each PulseWise agent has a distinct visual identity — role, accent hierarchy, icon language, behavioral identity, and interface presence — while belonging to a unified agent taxonomy.
Praxis
Personal Intelligence Partner
Catalyst
Organizational Intelligence Executive
Aegis
Security & Compliance Guardian
Axiom
Information & Knowledge Architect
Helius
Strategic Intelligence & Planning
Synapse
Learning & Adaptation Specialist
Vektor
Workflow & Process Automation
SMA
Sovereign Intelligence — The Primary Cognitive Interface
Unified Agent Identity Rules
Marketing & Campaign Design Language
PulseWise marketing must communicate sovereign intelligence infrastructure — never hype, never startup energy. Every campaign surface reinforces institutional-grade trust.
Landing Page Standards
Ad Creatives
Display Ads
1200×628 or 1080×1080. Navy background, single headline in white (max 8 words), one cyan accent element (line, dot, or shape). Logo in bottom-right corner in white. No more than 15 words total. One clear CTA button.
Social Content
Single-idea cards. Navy or white background. Headline in display weight. Supporting text in body weight. Cyan accent as a divider line or icon highlight. Logo always present. No more than 3 visual elements per card.
Video Campaigns
16:9 or 9:16. First 3 seconds: silence with the intelligence node appearing center-frame. Voiceover: calm, measured, deliberate pace. Motion: slow fades and slides (500ms+), no cuts faster than 2 seconds. End frame: logo + tagline held for 3 seconds minimum.
Product Launches
Teaser: intelligence node on navy, date only. Reveal: full hero page + video. Post-launch: capability deep-dives. Never use countdown timers, "coming soon" with urgency, or early-access language. Launch is an arrival, not an event.
Founder Branding
The PulseWise founder / founding team is positioned as stewards of intelligence infrastructure, not celebrity founders. Founder imagery: professional photography, dark wardrobe, minimal background, direct gaze. Founder communications use the PulseWise typography system with a personal variant — Cairo for Arabic, Montserrat for English — but always in the brand color system. No casual founder photos, no hoodies, no "disruptor" positioning.
Case Study Standards
Founder Console Standards
The Founder Console is the executive command center for PulseWise OS. It provides a panoramic view of organizational intelligence, agent operations, and system health — designed for rapid decision-making, not data browsing.
Intelligence Overview
Console Design Rules
SMA Cognitive Interface Standards
The SMA (Sovereign Intelligence Agent) cognitive interface is the primary human-AI interaction surface. It must feel like a trusted intelligence partner — not a chatbot, not a dashboard, not a search engine.
Cognitive Workspace Architecture
Presence Strip
A persistent 40px strip at the workspace top. Shows active agent name, status dot (thinking/idle/active), and a subtle cyan glow when the agent is processing. Collapsed to a 2px cyan line when idle.
Always visibleConversation Surface
A vertical timeline of structured exchanges. User inputs as compact left-aligned cards. Agent responses as rich right-aligned cards with sources, actions, and confidence indicators. Never chat bubbles — always structured cards.
Structured card formatContext Panel
Collapsible right panel showing current session context: active memories, relevant knowledge items, agent's current understanding. Opens on hover of the context indicator in the presence strip. 320px width.
Slide-in panelAction Bar
Below the input field. Shows suggested follow-up actions as pills, available agent commands, and quick actions. Context-aware — changes based on conversation state. Never more than 5 suggested actions.
Context-awareCognitive Response Design
Every SMA response has a consistent structure that communicates understanding, thoroughness, and trustworthiness:
Memory & Reflection Interfaces
Enterprise Dashboard Patterns
Patterns for enterprise-scale intelligence dashboards. These surfaces serve executives, operations teams, and analysts who need information density without cognitive overload.
Dashboard Layout Architecture
Dashboard Widget Types
Active Agents
12 onlineOperations
+12.4%Success Rate
99.7%Pending Tasks
3 overdueDashboard Design Rules
Design Token Architecture
Production-ready token architecture for every platform. Exportable to CSS, Tailwind, Figma, and React. All tokens derive from the PulseWise color, typography, spacing, and motion foundations.
Token Taxonomy
CSS Token Set (Complete)
/* PulseWise Design Tokens — CSS Custom Properties */
:root {
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ COLORS */
--pw-bg: #0A0F1A;
--pw-surface: #111827;
--pw-surface-raised:#1A2235;
--pw-fg: #E8EDF5;
--pw-fg-secondary: #A7B0BC;
--pw-muted: #6B7280;
--pw-border: #1F2937;
--pw-border-light: #374151;
--pw-accent-cyan: #00E0FF;
--pw-accent-blue: #005CFF;
--pw-accent-gold: #D4A853;
--pw-success: #10B981;
--pw-warning: #F59E0B;
--pw-danger: #EF4444;
--pw-info: #3B82F6;
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ TYPOGRAPHY */
--pw-font-display: 'Montserrat', system-ui, sans-serif;
--pw-font-body: 'Montserrat', system-ui, sans-serif;
--pw-font-arabic: 'Cairo', sans-serif;
--pw-font-mono: 'JetBrains Mono', ui-monospace, monospace;
--pw-fs-display: clamp(56px, 8vw, 96px);
--pw-fs-h1: clamp(40px, 5vw, 64px);
--pw-fs-h2: clamp(28px, 3.6vw, 44px);
--pw-fs-h3: clamp(22px, 2.4vw, 30px);
--pw-fs-h4: 20px;
--pw-fs-body: 16px;
--pw-fs-small: 14px;
--pw-fs-caption: 12px;
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ SPACING */
--pw-gap-2xs: 4px;
--pw-gap-xs: 8px;
--pw-gap-sm: 16px;
--pw-gap-md: 24px;
--pw-gap-lg: 40px;
--pw-gap-xl: 64px;
--pw-gap-2xl: 104px;
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ LAYOUT */
--pw-container: 1120px;
--pw-container-narrow: 760px;
--pw-container-wide: 1400px;
--pw-gutter: 40px;
--pw-radius: 8px;
--pw-radius-lg: 12px;
--pw-radius-full: 999px;
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ELEVATION (bg-based, no shadows) */
--pw-elevation-base: var(--pw-bg);
--pw-elevation-raised: var(--pw-surface);
--pw-elevation-overlay: var(--pw-surface-raised);
--pw-elevation-modal: var(--pw-surface-raised);
/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ MOTION */
--pw-duration-default: 200ms;
--pw-duration-enter: 250ms;
--pw-duration-exit: 150ms;
--pw-duration-hover: 50ms;
--pw-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1);
--pw-easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1.0);
--pw-easing-exit: cubic-bezier(0.4, 0.0, 0.6, 1.0);
}
React Theme Token
// PulseWise React Theme Token
export const pulseWiseTheme = {
color: {
bg: '#0A0F1A', surface: '#111827', surfaceRaised: '#1A2235',
fg: '#E8EDF5', fgSecondary: '#A7B0BC', muted: '#6B7280',
border: '#1F2937', borderLight: '#374151',
accent: { cyan: '#00E0FF', blue: '#005CFF', gold: '#D4A853' },
success: '#10B981', warning: '#F59E0B', danger: '#EF4444', info: '#3B82F6',
},
font: {
display: "'Montserrat', system-ui, sans-serif",
body: "'Montserrat', system-ui, sans-serif",
arabic: "'Cairo', sans-serif",
mono: "'JetBrains Mono', ui-monospace, monospace",
},
fontSize: {
display: 'clamp(56px, 8vw, 96px)',
h1: 'clamp(40px, 5vw, 64px)',
h2: 'clamp(28px, 3.6vw, 44px)',
h3: 'clamp(22px, 2.4vw, 30px)',
h4: '20px', body: '16px', small: '14px', caption: '12px',
},
spacing: { xs: '4px', sm: '8px', md: '16px', lg: '24px', xl: '40px', '2xl': '64px', '3xl': '104px' },
radius: { sm: '8px', lg: '12px', full: '999px' },
motion: { default: '200ms', enter: '250ms', exit: '150ms' },
} satisfies Record<string, unknown>;
Token Governance Rules
Brand Governance Framework
The PulseWise brand is governed by principles, not opinions. This framework provides decision-makers with clear, objective criteria for approving or rejecting any brand expression.
Governance Pillars
Foundation Integrity
Does this expression use the correct Deep Intelligence Navy foundation? Is cyan used as a scarce signal (≤2 times per screen)? Are the correct font families in use? Any violation requires immediate correction before further review.
Archetype Alignment
Does this expression communicate sovereign intelligence infrastructure — calm, deliberate, precise? Or does it drift toward startup energy, hype, or decorative futurism? The brand archetype is the tiebreaker for any subjective decision.
Forbidden Element Check
Are any forbidden visual elements present? Robot imagery, brain imagery, circuit traces, generic AI symbols (sparkles, magic wands), sci-fi clichés, crypto visuals. Zero tolerance. Any presence = automatic rejection.
Token Compliance
Do all colors, fonts, and spacing values come from the PulseWise design token system? Are there any hard-coded values? Token audit must pass before any brand expression ships.
Cross-Product Consistency
Does this expression look like it belongs to the PulseWise family? Would a user recognize it as PulseWise without seeing the logo? If placed next to another PulseWise product, do they share a visual language?
Accessibility & Inclusion
Does this expression meet WCAG AA minimum? Does it support both English and Arabic RTL layouts? Are touch targets ≥44px on mobile? Accessibility failures are release-blocking.
Brand Decision Framework
When facing a brand decision that is not explicitly covered by this document, use the following chain of authority:
Review & Sign-off Workflow
AI-era Virality Framework
Virality without hype. Authority without arrogance. Trust without corporate boredom. PulseWise earns recognition through strategic memorability — not through trends, gimmicks, or manufactured urgency.
Anti-Virality Rules
Future Product Expansion Rules
Rules governing how the PulseWise design language extends to new products, surfaces, and platforms. These rules ensure consistency while allowing for domain-appropriate expression.
Expansion Principles
Language First, Product Second
Every new product must first adopt the PulseWise design language before introducing product-specific variations. The language is not a starting point for customization — it is the constitution to which every product must conform.
One Accent Per Domain
Each product domain may introduce exactly one new accent color, and only if justified by a unique functional need. New accents require design lead approval and must be derived from the PulseWise color system.
Foundation Is Immutable
The Deep Intelligence Navy (#0A0F1A) foundation, the Montserrat/Cairo type system, and the cyan intelligence signal are immutable. No product may alter, replace, or override these foundational elements.
Surface Adapts, Language Doesn't
When PulseWise appears on a new surface (mobile, watch, TV, AR, print, environmental), the layout and interaction model adapt to the medium, but the visual language — colors, typography, spacing, motion — remains consistent.
Partnership & White-Label Rules
Partner integrations must use PulseWise's visual language within the PulseWise surface. When PulseWise appears inside a partner's product, the partner's visual language takes precedence, but all PulseWise-branded surfaces within must follow the design language.
Deprecation Path
If a product surface needs to deviate from the design language, the deviation must be approved, documented, and assigned a deprecation date. Deviations without expiration are not permitted.
Product Expansion Checklist
Before any new product or surface ships, verify:
Platform Adaptation Matrix
Sovereign Intelligence Infrastructure
PulseWise Design Language v2
This document is the master visual constitution for all PulseWise products. Every team, every surface, every pixel derives from these specifications.