Foundations, brand assets, 118 UI components and product kits for Alfred — the decision intelligence platform for marketing leaders.
Alfred App
Login → briefing, Seek Alfred, KPI cockpit, spend, alerts, creative, AI visibility, integrations & settings
The same 22-screen workspace under [data-theme=app-dark] — warm ink surfaces, Clash Display kept
Connect your stack → calibrate → first brief (first-run flow)
Website
Components
Logo lockups and tintable brand glyphs
Buttons, inputs, toggles, tabs, badges & avatars
KpiCard, DecisionAlert and ProgressBar
SignalCard, StepFlow, StatBand, AgentStatus & FaqItem (dark)
Form & input controls beyond the core set
On-brand gradient data viz
Plot frames with axes, gridlines & legends for decision intelligence
The no-black-box primitives: traceable, confident, approvable
The product's connective tissue, as reusable components
Table, empty/loading, breadcrumb, pagination, stepper, banner, toast, menu
The conversational surface: composer, suggestions, turns and agentic reasoning
Decision-intelligence primitives: simulate, pace, gate and flag
The form primitives beyond Input: multi-line, search and uploads
Chronological activity and Alfred's notification inbox rows
Disclosure, autocomplete, multi-value and numeric input
Inline insight, loading and circular progress
EyebrowBadge, PriceCard, OfferSwitch, Countdown, AvatarStack, integrations & module roadmap (dark)
DotMatrix, CapabilityTicker, AnimatedCounter, DashboardMock & JobListingRow (dark)
ProvenancePanel, InsightFeedback, MemoryCard & ReasoningState
Connection health, sync, usage, billing, team, notifications, audit trail & empty state
Colors
Marketing surfaces — [data-theme=dark]
Product workspace surfaces — [data-theme=app-dark], Clash Display kept
The periwinkle→orange signature and ambient page glow
Text, surfaces and hairlines
Core brand orange and its tints
The cool counterpoint to brand orange
Success · Warning · Danger · Info
--chart-1 … --chart-8 — categorical series order
Type
Editorial accent for marketing surfaces
The UI & body workhorse
Headlines, covers and big moments
Display → caption, in use
Spacing
From inputs to large surfaces
Soft, diffuse, low-contrast
4px base rhythm
Brand
Custom CMO-intelligence glyph set — tintable
Full lockup, mark & wordmark — color and white
Templates
Transactional email: Alfred’s morning briefing
Open-graph / share image
A4 one-pager classes — stats, battle grid, checklist, callout, CTA
Your analyst forgets; Alfred compounds — the delegated-synthesis card
Decisions vs dashboards: the Looker / Tableau / Power BI category card
A chatbot answers; Alfred decides with sources — the ChatGPT / Copilot class card
Reusable 1-page competitive battle card format for sales enablement
2-page A4: situation → decision → outcome, sourced-metric slots + Northwind worked example
2-page demo recap: Daily Brief → alert detail → approval, Northwind numbers, pilot next steps
The flagship leave-behind: positioning, why teams switch, Northwind demo, sourced stats, CTA
2-page A4: week-by-week plan, quantified success criteria, roles, exit criteria
Tiers with INR + USD, quotas, launch offer, Enterprise band and fine print
Interactive dark screen tool: editable assumptions → hours saved, waste recovered, payback
3-page A4: posture, data flow, access controls, subprocessors, FAQ
On-brand 16:9 presentation deck — cover, index, gradient section divider and content slides.
A catalog of reusable, on-brand marketing section templates — logo cloud, bento grid, feature split, comparison, pricing, testimonial, integrations & waitlist CTA. Lift any one into a page.
Pages
On-brand not-found page — one viewport tall
Mission, founding story, team, values and careers
Memory-layer explainer — why it exists, what it does, the four pillars
Editorial template — prose measure, pull-quote, cited stat, callout and author box
Decisions, not dashboards — filterable post grid with newsletter capture
Talk-to-sales page — short hero, contact split, sales FAQ and closing band
Documentation shell — sidebar nav, four-stage model, getting started, TOC rail
Thirteen integrations across six categories — directory with live/planned statuses
Document template for privacy, terms and cookie policies
Honest waitlist page for Alfred for Sales — fixes the live 404 pattern
Full pricing page — module & currency toggles, launch offer, three tiers, Enterprise band and pricing FAQ
Live module page — six agents on one memory, read less know more
Early-access capture — countdown hero, module roadmap, sourced stats + confirmation state
Inspiration
55 patterns, 95 variants, distilled from 107 B2B SaaS sites — browse, preview both themes, copy HTML
Homepage-grade: glow hero, logo cloud, bento, splits, proof, FAQ, closing band
Deep-dive: numbered chapters, splits, live Alfred demo mid-page, icon grid
Tiers, comparison anchor, enterprise band, price/security FAQ
The brief hub: featured lead, filter chips, latest grid, newsletter, pagination
Sticky TOC essay, inline CTA, newsletter, article footer, related posts
Alfred vs the usual stack: matrix, before/after, proof, switching FAQ
41-resource library: hub hero with search, chips, cards, webinar, pagination
Slim nav, capture hero with form card, proof strips, objection FAQ, legal footer
The Helena pattern translated: story, capabilities, team, proof, trial FAQ
Decks
All marketing, sales & operations decks in one place
The core outbound pitch: problem → Alfred → product → proof → pricing → close
The AI memory powering every decision across your organisation
Read less, know more — Alfred for Marketing in depth
The end of the dashboard era
Decision intelligence vs business intelligence
Positioning, voice and the one-line story
The board-ready ROI case for Alfred
How Alfred differs from BI, generic AI and analytics
A guided walkthrough of Alfred for Marketing
Your data is yours, full stop
Pick the tier that matches your stack
From signup to first brief in under a week
A quarterly business review you can fill in
North-star, metrics and roadmap
Connecting the stack: a data-operations runbook
Driving adoption, retention and expansion
Slides
Headline, supporting points and a metric callout
Title cover with orange headline & logo
Two-column numbered contents
Full-bleed brand gradient with diamond motif
Docs & tokens
Voice, visual foundations, iconography and the full file index.
What changed and when — the system's release history.
How to add a component, run the verifiers and re-sync.
Structured token export + Tailwind preset + Framer styles.
The palette