A researched catalog of 22 popular AI apps and agentic tools, mapping their light/dark palettes, typography choices, and the design thesis each system appears to be communicating.
Hex values marked as official, mixed, or inferredFont samples render exact public fonts or close fallbacksHeader palette maps mirror the light/dark swatches below
1Agentic AI2Agentic automation7Agentic dev tool1Agentic infrastructure4Consumer AI1Consumer and enterprise AI2Creative AI1Creative and agentic AI1Creative and productivity AI1Foundation AI1Productivity AI
01 · Foundation AI assistant
OpenAI / ChatGPT
Palette map
Light
Dark
Consumer AIOfficial type, mixed color
Official public brand guidance emphasizes typography and restraint; the green accent is treated as product/legacy brand inference.
Light palette
Dark palette
Fonts / closest match
OpenAI Sans. Closest public fallback: Inter or a humanist-geometric sans such as Avenir Next / SF Pro.
Rendered sample · OpenAI Sans unavailable, Inter fallback
OpenAI / ChatGPT
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
The system says: precision without theatre. Black, white, neutral space, and a custom sans with rounded humanist pressure make the product feel sober, capable, and less like a toy robot. The old green accent remains useful as a trust cue, but the newer brand center of gravity is monochrome, legible, and institutional.
Design signals and sources
Low-chroma palette lets text, reasoning, and product affordances carry the experience.
Rounded but technical letterforms communicate warmth without cuteness.
The marketing posture is ‘advanced capability under control,’ not spectacle.
Palette and type are drawn from Anthropic’s published brand-skill guidance.
Light palette
Dark palette
Fonts / closest match
Poppins for headings and Lora for body in the published guidance. Closest thesis match: a soft geometric sans paired with an editorial serif.
Rendered sample · public Poppins + Lora
Anthropic / Claude
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Claude is styled like a calm reading room rather than a command center. Warm paper, off-black, serif body text, and muted earth accents imply deliberation, safety, and long-form thought. The brand is trying to make advanced AI feel literate, careful, and almost bookish.
Design signals and sources
Serif body text makes Claude feel more essayist than dashboard.
Earthy orange and moss accents reduce cold machine energy.
Off-white backgrounds frame AI as thoughtful conversation.
Google’s design library explains the Gemini gradient language; hexes combine Google core colors with current Gemini blue inference.
Light palette
Dark palette
Fonts / closest match
Google Sans / Google Sans Text. Closest fallback: Product Sans style, Inter, or SF Pro.
Rendered sample · Google Sans-style fallback
Google Gemini
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Gemini turns the familiar Google color system into a moving gradient organism. Circles, dots, spatial softness, and directional color shifts are meant to suggest synthesis, energy transfer, and friendly magic while preserving Google’s everyday utility.
Design signals and sources
The gradient is not decoration; it visualizes thinking, motion, and combination.
Rounded containers and circles avoid intimidating AI iconography.
The core Google colors keep the new AI layer inside a trusted ecosystem.
Brand directory and standards sources converge on teal, parchment, graphite, and near-black tones; mark as mixed because public docs vary by product surface.
Light palette
Dark palette
Fonts / closest match
Perplexity Sans / FK Grotesk Neue appears in brand references. Closest fallback: FK Grotesk, Inter, or Noto Sans for broad language coverage.
Rendered sample · Space Grotesk / Inter fallback
Perplexity
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Perplexity wants to feel like a search engine crossed with a reference library. Teal signals credibility and freshness; parchment keeps it from feeling like a sterile index. The type-led system makes the core product promise clear: answers, citations, and reading, not chatbot theatrics.
Design signals and sources
Teal functions as a trust and source-navigation accent.
Warm off-white supports long reading sessions.
Brand restraint gives citations and snippets visual authority.
Consumer and enterprise AIOfficial design thesis, inferred hexes
Copilot’s exact brand tokens are not all public in one canonical spec; this palette approximates the prismatic Fluent gradient language seen across Copilot/M365 materials.
Light palette
Dark palette
Fonts / closest match
Segoe UI / Microsoft Fluent typography. Closest fallback: Segoe UI, Aptos, or system UI.
Rendered sample · Segoe/Aptos/system stack
Microsoft Copilot
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Copilot uses a prismatic, fluid ribbon to say that AI is not a single product, but a connective layer through the Microsoft stack. Rounded gradients soften enterprise software while the Fluent typography keeps it familiar to Office, Windows, and Teams users.
Midjourney has historically published less conventional brand guidance; this entry is inferred from current marketing/product presentation and research-lab positioning.
Light palette
Dark palette
Fonts / closest match
Clean grotesk, likely custom or system. Closest fallback: Inter, Söhne, Helvetica Neue, or SF Pro.
Rendered sample · clean grotesk fallback
Midjourney
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Midjourney’s brand mostly gets out of the way. Sparse monochrome, gallery spacing, and research-lab language let generated images become the identity. The message is: the frontier is visual imagination, and the interface is only the aperture.
Design signals and sources
Minimal brand color keeps attention on user-created images.
Research-lab framing adds mystique without heavy enterprise polish.
Neutral type makes the community gallery feel like the main character.
Creative AIOfficial logo rules, inferred palette/type
Official guidelines emphasize black/white logo use; gray/blue values are inferred from interface and brand-index references.
Light palette
Dark palette
Fonts / closest match
Custom wordmark. Closest marketing/UI fallback: Suisse International, Neue Haas Grotesk, or Inter.
Rendered sample · Neue Haas/Suisse-style fallback
Runway
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Runway behaves like production software for cinematic work. Black/white framing, full-bleed visuals, and sparse UI chrome communicate studio seriousness. The palette says less ‘AI toy’ and more ‘post-production room with a very strange engine inside.’
Design signals and sources
Monochrome gives video and imagery the spotlight.
Cool grays make the tool feel production-grade.
Custom wordmark separates brand from generic SaaS.
Creative and agentic AIOfficial brand thesis, mixed type/color
Official guidance describes product-family palette behavior; some exact hexes are taken from brand-index observations and current materials.
Light palette
Dark palette
Fonts / closest match
Waldenburg 300 appears in brand-index references; closest fallback: a compressed grotesk plus Inter / Helvetica for UI.
Rendered sample · compressed grotesk fallback
ElevenLabs
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
ElevenLabs treats sound as something physical. Chladni-like patterns, kinetic typography, and analog textures make synthetic voice feel tactile rather than disembodied. Blue, orange, and monochrome split product families while preserving a single audio-technology core.
Design signals and sources
Wave and vibration motifs make invisible audio visible.
Analog texture humanizes digital precision.
Product-family color coding helps the platform feel modular.
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Cursor rejects neon hacker clichés. Warm cream, deep charcoal, and a disciplined orange accent make AI coding feel like a composed writing environment. The mono type keeps it technical; the editorial warmth makes it feel less like a terminal bunker.
Design signals and sources
Cream and charcoal create calm focus for long coding sessions.
Orange acts as a precise action marker, not a decorative flood.
Agentic dev toolOfficial brand story, mixed palette
Replit’s brand story is official; orange and dark IDE tones are supported by brand-index/product observation.
Light palette
Dark palette
Fonts / closest match
A custom hand-drawn pixel/display face appears in the brand story, supported by pragmatic UI sans/mono choices. Closest fallback: pixel display plus Inter and JetBrains Mono.
Rendered sample · pixel-display proxy + Inter
Replit
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Replit’s identity is a construction kit. Pixels, characters, orange energy, and approachable motion say that programming is something you can pick up and build with immediately. The thesis is not ‘elite developer tooling,’ it is ‘software creation for everyone.’
Design signals and sources
Pixel forms tie the brand to code at the smallest visible unit.
Orange creates momentum and maker energy.
The brand story explicitly centers the human behind the machine.
Copilot palette values are from GitHub’s official Copilot brand-identity guidance.
Light palette
Dark palette
Fonts / closest match
Mona Sans / Hubot Sans / GitHub Primer typography. Closest fallback: system UI or Inter.
Rendered sample · Mona/Hubot fallback stack
GitHub Copilot
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
GitHub Copilot has to feel magical without leaving GitHub’s developer trust layer. Purple and orange mark the AI capability; dark Primer surfaces keep the product anchored in code, issues, pull requests, and the daily workbench.
Design signals and sources
Purple is a reserved AI highlight rather than a whole new universe.
Mascot use is intentionally sparse to avoid gimmick fatigue.
The palette connects Copilot to GitHub while giving it a distinct signal.
Geist color and type foundations are official; v0 inherits much of Vercel’s high-contrast visual discipline.
Light palette
Dark palette
Fonts / closest match
Geist Sans and Geist Mono. Closest fallback: Inter plus a neutral code mono.
Rendered sample · Geist public font
Vercel / v0
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Vercel’s design thesis is compiled minimalism. Almost-black, almost-white, exact spacing, and Geist type make the product feel fast, deployable, and technically inevitable. v0 adds generative creation, but the brand keeps the AI inside a disciplined front-end engineering frame.
Design signals and sources
Black/white contrast makes every interface decision feel intentional.
Geist Mono keeps the developer substrate visible.
The triangle/logo geometry suggests infrastructure reduced to a clean primitive.
Notion’s core public surfaces are famously neutral; exact palette values are supported by community/system documentation and product observation.
Light palette
Dark palette
Fonts / closest match
Inter across core UI, plus optional serif and mono page styles. Closest fallback: system UI.
Rendered sample · Inter public font
Notion AI
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Notion AI inherits the thesis of Notion itself: software should feel like a blank document that grew superpowers. Neutral grays, Inter, and muted semantic colors avoid competing with notes, databases, and wikis. The AI is framed as a workspace capability, not a neon sidekick.
Design signals and sources
The palette is designed for content hierarchy more than brand spectacle.
Muted colors keep databases and pages legible at scale.
Palette and typography are from Mistral’s official brand page.
Light palette
Dark palette
Fonts / closest match
Arial, selected in the official guidance for universal appeal, simplicity, clarity, and accessibility.
Rendered sample · Arial/system font
Mistral / Le Chat
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Mistral’s identity is refreshingly utilitarian. Arial, beige, black, and a blazing warm pixel-rainbow communicate accessible European engineering rather than luxury AI mysticism. It feels open, direct, and production-minded.
Design signals and sources
Arial lowers barriers and avoids bespoke-brand preciousness.
Warm colors give the technical identity heat and recognizability.
Pixel/rainbow blocks nod to computational primitives.
Colors are approximate from the agency case study, which describes the palette direction more than publishing a token table.
Light palette
Dark palette
Fonts / closest match
Lausanne by Weltkern with custom glyphs in the rebrand. Closest fallback: Suisse/Helvetica-style grotesk plus Inter.
Rendered sample · Lausanne-style fallback
LangChain
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
LangChain makes agentic infrastructure feel like flight. The bird mark, sky-to-dusk blues, node networks, and custom glyphs convert a highly technical framework into a navigable ecosystem. It is still developer-first, but less grim than typical infrastructure branding.
Core colors are from n8n’s official brand guidelines; font is inferred from wordmark/product observation.
Light palette
Dark palette
Fonts / closest match
Custom rounded lowercase wordmark. Closest fallback: Inter Rounded, Nunito Sans, or a soft geometric sans.
Rendered sample · rounded sans fallback
n8n
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
n8n’s pink-on-black/white identity turns automation into a visible circuit trace. The brand needs to feel technical enough for workflows and APIs, but friendly enough for low-code builders. The result is utilitarian, punchy, and not afraid of one loud accent.
Design signals and sources
Single hot-pink accent makes nodes, triggers, and actions easy to brand.
Lowercase mark keeps automation approachable.
High contrast supports developer documentation and product UI.
Devin color values are from Cognition’s official brand page; type is inferred from site/font analysis.
Light palette
Dark palette
Fonts / closest match
IBM Plex Sans Condensed appears in site font detection. Closest fallback: IBM Plex Sans Condensed plus IBM Plex Mono / JetBrains Mono.
Rendered sample · IBM Plex public family
Devin / Cognition
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Devin is designed as a competent operator. Blue, green, and purple-blue feel like task states, progress, and engineering telemetry. The compact typography and restrained palette tell users this agent is supposed to do work, not merely chat about it.
Design signals and sources
Blue/green accents mirror status, execution, and completion.
The palette is vivid but not playful.
Condensed type gives the brand a technical instrument-panel feel.
Colors and typography come from Manus’s official brand page.
Light palette
Dark palette
Fonts / closest match
Libre Baskerville for serif expression, DM Sans for sans, and Noto families for Asian scripts.
Rendered sample · Libre Baskerville + DM Sans
Manus
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Manus makes autonomy feel quiet and editorial. A near-monochrome palette, a literary serif, and clean sans typography support the stated idea of ‘less structure, more intelligence.’ It sells the agent as a refined generalist rather than a dashboard full of knobs.
Design signals and sources
Grayscale restraint suggests confidence and premium calm.
Serif/sans pairing gives the agent a thoughtful voice.
Minimal structure implies the system will adapt around the user.
Agentic dev toolOfficial assets, inferred colors/type
Official page defines logo usage and flow-state positioning; nature/sport palette is inferred from brand coverage and current materials.
Light palette
Dark palette
Fonts / closest match
Inferred athletic/geometric sans. Closest fallback: ABC Diatype, Suisse, Inter, or a clean sportswear-adjacent grotesk.
Rendered sample · athletic geometric fallback
Windsurf
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Windsurf recasts coding as flow-state sport. The surf/nature palette, black-and-white mark, and movement language pull the IDE away from basement-terminal aesthetics. It wants to feel fast, ambient, and kinetic.
Design signals and sources
Coastal colors give coding an outdoor, embodied metaphor.
Sport-like energy distinguishes it from classical devtools.
Flow-state language makes the agent feel like a collaborator that removes friction.
Agentic dev toolOfficial assets, third-party color/type analysis
Official asset page exists; palette/type details are supported by brand-analysis references.
Light palette
Dark palette
Fonts / closest match
Camera Plain in brand-analysis references. Closest fallback: a friendly neo-grotesk with rounded warmth, plus Inter for UI.
Rendered sample · friendly rounded fallback
Lovable
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Lovable sells software creation as approachable and emotionally rewarding. Cream, orange, saturated blue, and candy-bright gradients make app building feel less like engineering bureaucracy and more like assembling something alive with a small spark of taste.
Design signals and sources
Warm cream avoids sterile white-screen syndrome.
Orange provides an action/creation pulse.
Gradient brights signal accessibility and optimism.
Palette/type are drawn from published brand-guideline deck analyses and current brand observation.
Light palette
Dark palette
Fonts / closest match
Degular Display for hero/display and Inter for body/UI in brand-guideline analyses.
Rendered sample · Degular-style fallback + Inter
Zapier
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Zapier’s design turns automation into warm commercial momentum. Orange CTAs, cream backgrounds, coffee ink, and rounded interface forms position workflows as approachable business leverage rather than brittle scripting.
Design signals and sources
Orange is both brand recognition and action grammar.
Creative and productivity AIOfficial type/thesis, mixed palette
Figma’s typography and brand refresh are official; icon/brand color hexes are drawn from brand color references and common Figma mark usage.
Light palette
Dark palette
Fonts / closest match
Figma Sans and Figma Mono, designed with Grilli Type. Closest fallback: a crisp grotesk plus a utilitarian mono.
Rendered sample · Figma Sans unavailable, Inter fallback
Figma AI / Figma Make
Aa Bb Cc Dd Ee Ff · 0123456789 · agentic workflow
Sample sentence: complex work should feel legible, capable, and under control.
mono sample: tokens / tools / traces / 0xA11Y
Design thesis
Figma’s AI layer rides on a brand that already says collaboration and product building. The multi-color system, playful primitives, and custom type communicate shared creation. AI here is framed as an extension of the design surface rather than a separate alien assistant.
Design signals and sources
The five-color mark is modular, like interface components.
Custom type supports a more mature but still playful visual language.