Design
llms.txt digitalcrew.tech

Motion

SignatureGradient

The signature Digital Crew gradient — indigo → pink → amber (dc-andre, dc-camille, dc-amber) — in its four forms.

Crew OSMotionShowcase page
SignatureGradient · liveOpen

Guidelines#

  • .dc-gradient-border: a 300%-wide gradient moving on a 5s ease loop behind 2px of padding, around the Digital Worker onboarding card; still under reduced motion.
  • .dc-gradient-border-idle: the same stops at 55%, static.
  • .dc-gradient-text: one gradient word in an onboarding heading ("Let's build your Digital Crew").
  • .dc-gradient-border-sober + .dc-gradient-sober: the calm report panel — a 135° border at 28–45% and a 160° wash at 4–10% (16% in dark).

Use it only for the onboarding and its report. It is the crew's colours broken out of the ink; don't use it for buttons, backgrounds or body text, and don't invent new gradients.

Facts#

GroupMotion
ProductCrew OS
KindShowcase page (tokens and patterns, not a single export)
Sourcedigitalcrew-orchestrator: app/globals.css

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid grid-cols-2 gap-5" },
    h("div", { className: "grid gap-2" },
      h("span", { className: "text-xs text-muted-foreground" }, ".dc-gradient-border — 300% gradient moving on a 5s loop (still under reduced motion)"),
      h("div", { className: "dc-gradient-border rounded-2xl p-[2px]" },
        h("div", { className: "rounded-[14px] bg-card p-5" },
          h("p", { className: "text-lg font-semibold" }, "Let's build your ", h("span", { className: "dc-gradient-text" }, "Digital Crew")),
          h("p", { className: "mt-1 text-sm text-muted-foreground" }, "A great team starts with knowing you.")))),
    h("div", { className: "grid gap-2" },
      h("span", { className: "text-xs text-muted-foreground" }, ".dc-gradient-border-idle — the same stops at 55%, static"),
      h("div", { className: "dc-gradient-border-idle rounded-2xl p-[2px]" },
        h("div", { className: "rounded-[14px] bg-card p-5" },
          h("p", { className: "text-lg font-semibold" }, "Personal"),
          h("p", { className: "mt-1 text-sm text-muted-foreground" }, "For your own projects, side hustles and daily life.")))),
    h("div", { className: "grid gap-2" },
      h("span", { className: "text-xs text-muted-foreground" }, ".dc-gradient-border-sober + .dc-gradient-sober — the report panel"),
      h("div", { className: "dc-gradient-border-sober rounded-2xl p-px" },
        h("div", { className: "dc-gradient-sober rounded-2xl bg-card p-5" },
          h("p", { className: "text-sm font-semibold" }, "Your crew report"),
          h("p", { className: "mt-1 text-sm text-muted-foreground" }, "3 Digital Workers matched to your goals · ready in 2 min")))),
    h("div", { className: "grid content-start gap-2" },
      h("span", { className: "text-xs text-muted-foreground" }, "The stops as tokens"),
      h("div", { className: "flex h-10 overflow-hidden rounded-lg" },
        h("div", { className: "flex-1", style: { background: "var(--dc-andre)" } }),
        h("div", { className: "flex-1", style: { background: "var(--dc-camille)" } }),
        h("div", { className: "flex-1", style: { background: "var(--dc-amber)" } })),
      h("code", { className: "font-mono text-xs text-muted-foreground" }, "dc-andre #6366f1 · dc-camille #ec4899 · dc-amber #f59e0b")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
ActionFocusSessionCardResizeChapterScrubberContainerScrollFeatureSlideshowFirstBentoAnimationFourthBentoAnimationHyperTextInfiniteSliderJoyfulTaskCheckboxLottieMarqueeMotionScaleNumberFlowCounterOrbitingCirclesShimmerTextSkeletonRevealStreamingTextThirdBentoAnimationUniboxMotion