After Effects Hub Design System
A code-truthful spec for a 10-module AI extension panel. The art direction is native AE — dark charcoal, tight spacing, a single purple/blue accent family. The panel should feel like it was built by Adobe, not bolted on. Every token here maps to a real CSS variable in the panel's stylesheet; when code and this doc disagree, code wins.
Disappear into AE. Then do something it can't.
A panel built inside After Effects' own UI language. Three principles define where the design lives and where it departs.
Dark charcoal, one accent, status signals.
The palette is built for dark surfaces at all times. No light mode. Background tokens run deep charcoal to near-black; text inverts to near-white; and the purple/blue accent is the only saturated hue in the interactive layer.
Backgrounds — dark panel surfaces
Text — near-white scale
The accent family — purple to blue
Status signals
Gradients
Inter body, JetBrains Mono for system labels.
Inter is the workhorse — legible, technical, and the same family used across modern creative tooling. JetBrains Mono appears only on labels that need to read as system output: eyebrows, status strings, the spec labels in this doc.
A base-4 scale, tighter than a consumer app.
Eight steps. Panel UIs need tighter rhythm than marketing sites — the scale runs compact so the panel can surface information without feeling sparse.
Tight radii — this is a professional tool.
AE's own panels use minimal border-radius. The Hub matches that: 6px for chips, 10px for buttons, 14px for cards. Rounded enough to avoid harshness, sharp enough to read as tooling rather than consumer software.
Shadows are dark, not grey. Glows are purple.
On dark surfaces, drop shadows use near-black alpha. Glows use the primary purple — so interactive elements pulse in the brand colour, not a generic white haze.
Layered dark glass — no light bleed.
The panel uses three surface tiers: the page background, the card surface, and the elevated card for hover/active states. All three are dark. There is no glass-blur light treatment — the panel blends with AE's own UI.
Built from the same dark token set.
Key components rendered on the AE panel stage:
Buttons
Status pills
Module tiles
Feedback, not animation.
Short, purposeful, and never distracting from the timeline. With prefers-reduced-motion on, every transition collapses to a plain opacity fade.
Terse, direct, never chatty.
The panel talks like a professional tool, not a consumer app. Status strings are short. Error messages tell you what to do. Copy matches the density of the AE UI it lives inside.
"Background removed. New layer added."
"Select a footage layer to continue."
"Upscale complete — 4× ready."
"Wow! Amazing result! Here's your file!"
"Hmm, something went wrong. Try again!"
"Our AI is working its magic for you…"
Four ways to break the feel.
If a new module or screen does any of these, it doesn't belong in the panel.
- Don't use a light background. There is no light mode. Every surface is dark charcoal. A light card would read as broken, not designed.
- Don't put saturated colour in the chrome. The purple/blue accent belongs to interactive elements only. Module icons use it, status uses status colours. Decorative saturation dilutes the signal.
- Don't open a dialog for a result. Results are layers, not notifications. If the outcome is a file, it goes to the comp. If it's a message, it goes to the panel status bar.
- Don't break the raw token contract. A new screen must use
var(--brand-primary)etc, never raw hex. The whole system re-themes by swapping the:rootblock.
Where every token actually lives.
This page documents the system; the code defines it. When they disagree, the code wins.