AI Features

The AI layer in ONCE uses dedicated color and motion patterns so agent states are instantly recognizable while staying aligned with the core brand palette.

Thinking Gradient

These four stops define the AI “thinking” palette used across loaders, halos, and active-processing accents. The first stop repeats at the end so the gradient loops seamlessly.

Orchid Brain#E879F9

Warm start tone — visual energy.

AI Indigo#A5B4FC

Mid-tone transition between warm and cool.

Sky Smarts#7DD3FC

Cool clarity tone.

Intellimint#6EE7B7

Completion-forward tone before the loop restarts.

Agent State Gradients

Each agent state has its own two-stop (or four-stop) gradient used for the shell ring, glow, and accent bar.

Thinking#E879F9 → #A5B4FC → #7DD3FC → #6EE7B7

Active reasoning and loading state.

Idle#6B7A99 → #3A455C

Neutral agent shell at rest.

Needs Action#fbbf24 → #f97316

Waiting for user input.

Applied#34d399 → #14b8a6

Successful completion.

Error#fb7185 → #ef4444

Error or blocked state.

Shared Thinking Loader Animation

This is the exact animation used in both the Publishing Agent and Edit Agent thinking loaders. The ring rotates continuously while a gradient halo pulses behind it.

agent-thinking-loader

CSS

.agent-thinking-loader-halo {
  background: linear-gradient(135deg, #E879F9, #A5B4FC, #7DD3FC, #6EE7B7, #E879F9);
  background-size: 300% 300%;
  animation: agent-loader-gradient 2.2s ease-in-out infinite;
}
 
.agent-thinking-loader-ring {
  background: linear-gradient(90deg, #E879F9, #A5B4FC, #7DD3FC, #6EE7B7, #E879F9);
  background-size: 300% 100%;
  animation:
    agent-loader-spin 1.4s linear infinite,
    agent-loader-gradient 1.8s ease-in-out infinite;
}
 
@keyframes agent-loader-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
 
@keyframes agent-loader-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

Markup

<div className="relative h-12 w-12">
  <div className="absolute -inset-1 rounded-full blur-[8px] opacity-60 agent-thinking-loader-halo" />
  <div className="absolute inset-0 rounded-full p-[2px] agent-thinking-loader-ring">
    <div className="h-full w-full rounded-full bg-white/85 dark:bg-slate-950/90" />
  </div>
</div>

Face Fade (Edit Agent)

For agents that display a face, the face cross-fades out when thinking begins and the loader ring stays visible behind it:

<motion.g
  initial={false}
  animate={{ opacity: showFace ? 1 : 0 }}
  transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
>
  {/* eyes + mouth */}
</motion.g>

We occasionally include a friendly face in our AI thinking processes, but this is experimental and not viewed as a hard rule (yet!).

Colors Typography