Presets & Design System Hub
Button Primary

PD Conic Pill Teal Button

The flagship primary action button used across the website. Features a white-and-teal spinning border highlight and floating micro-animations on hover.

teal-button.html 
<button class="conic-btn primary dramatic-hover">
  <div class="conic-spin-bg"></div>
  <div class="conic-btn-mask"></div>
  <span class="relative z-10 flex items-center gap-1.5">
    <iconify-icon icon="solar:add-circle-linear" width="16"></iconify-icon>
    <span>Add New User</span>
  </span>
</button>
Button Highlight

PD Conic Pill Orange Button

Branded call-to-action button utilizing the signature orange accent color. Highlights high-priority tasks and executive decisions.

orange-button.html 
<button class="conic-btn orange dramatic-hover">
  <div class="conic-spin-bg"></div>
  <div class="conic-btn-mask"></div>
  <span class="relative z-10 flex items-center gap-1.5">
    <iconify-icon icon="solar:fire-bold" width="16"></iconify-icon>
    <span>Maximize Velocity</span>
  </span>
</button>
Button Glass/Frosted

PD Conic Pill Glass Button

Frosted glass pill button with low opacity mask background, revealing the underlying orange-white-teal spin gradient on hover.

glass-conic-btn.html 
<button class="conic-btn dramatic-hover">
  <div class="conic-spin-bg"></div>
  <div class="conic-btn-mask"></div>
  <span class="relative z-10 flex items-center gap-1.5">
    <iconify-icon icon="solar:settings-linear" width="16"></iconify-icon>
    <span>Configure Settings</span>
  </span>
</button>
Button Circle

PD Conic Circle Icon Button

Equal width and height variant for compact actions. Frequently used for triggers, toggles, controls, and icon-only floating anchors.

circle-button.html 
<!-- Conic Circle Button (Glass Variant) -->
<button class="conic-btn circle dramatic-hover">
  <div class="conic-spin-bg"></div>
  <div class="conic-btn-mask"></div>
  <span class="relative z-10 flex items-center justify-center">
    <iconify-icon icon="solar:settings-bold" width="18"></iconify-icon>
  </span>
</button>
Button Classic

PD Classic Glass Button

The standard secondary action button from the AMP Center design specs. Contains an elegant sliding horizontal shimmer sweep animation on hover.

classic-button.html 
<button class="amp-button">
  <iconify-icon icon="solar:import-linear" width="15"></iconify-icon>
  <span>Import CSV File</span>
</button>
Container Glass

PD Specular Card

Specially crafted glassmorphic container displaying a bright top specular line, 24px rounded corners, and a slight lift + teal glow on hover.

Analytics

Conversion Optimization

Liquid glass card component reacts smoothly to mouse positions and handles dark/light shifts.

specular-card.html 
<div class="amp-card p-6">
  <h4 class="font-bold text-base mb-1">Card Title</h4>
  <p class="text-xs text-slate-500 dark:text-slate-400">Card content goes here.</p>
</div>
Container Panel

PD Glass Panel

A structural backdrop designed for heavy layout elements such as sidebars, overlay drawers, and main frames. Utilizes a high blur threshold.

Panel Content
glass-panel.html 
<div class="glass-panel p-5 rounded-2xl">
  <!-- Structural elements inside sidebar/backdrop -->
</div>
Navigation Header

PD Dynamic Island Navigation

The floating capsule-shaped header nav bar from Project D Home Page. Uses glass blur backdrop, dark mode quick button, and scales up on hover.

Home AMP Center
nav-island.html 
<nav class="dynamic-island">
  <div class="dynamic-island-content">
    <a href="#" class="flex items-center">
      <img src="logo.png" style="width:24px; height:24px;" />
    </a>
    <div class="flex gap-4 px-2">
      <a href="#" class="text-xs font-semibold">Home</a>
      <a href="#" class="text-xs text-slate-400">AMP Center</a>
    </div>
    <div class="w-px h-4 bg-slate-300 mx-1"></div>
    <button onclick="PDPresets.toggleTheme()" class="btn-theme-toggle">
      <iconify-icon icon="solar:sun-2-bold-duotone" class="sun-icon"></iconify-icon>
      <iconify-icon icon="solar:moon-stars-bold-duotone" class="moon-icon"></iconify-icon>
    </button>
  </div>
</nav>
Effect Global JS

PD Liquid Click Ripple FX

Click anywhere on this document! A dynamic, glassmorphic water-like ripple spans, blur-zooms, and overlays on click coordinates. Pre-registered globally via `presets.js`.

🔥 Try Clicking Anywhere!
Ripples expand automatically under the mouse cursor.
ripple-trigger.js 
// JS ripple spawner (from presets.js)
document.addEventListener('click', function (e) {
  const ripple = document.createElement('div');
  ripple.className = 'liquid-click-effect';
  ripple.style.left = e.clientX + 'px';
  ripple.style.top = e.clientY + 'px';
  document.body.appendChild(ripple);
  ripple.addEventListener('animationend', () => ripple.remove());
});
Effect Background

PD Ambient Background Beams

Soft diagonal flowing brand gradients paired with a tech dot grid backplane to establish depth and futuristic premium aesthetics on any portal page.

Live preview simulation
ambient-bg.html 
<!-- Place directly under <body> tag -->
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden bg-gray-50 dark:bg-[#070c18]">
  <div class="neon-beam-glow"></div>
  <div class="fixed inset-0 dot-grid-bg opacity-30"></div>
</div>
Effect Interactive

PD Dynamic Cursor Trail

Dynamic "Liquid Glass" cursor trail tracking mouse coordinate interpolation. Generates glowing physics-bound pointer effects, automatically resizing, changing colors, and glowing upon hovering interactive targets.

Interactive Sandbox Area Hover here to scale & glow the cursor!
global-cursor.html 
<!-- 1. Include presets.js script in your head -->
<script src="pd-design-system/presets.js"></script>

<!-- 2. The script auto-initializes and binds to canvas -->
<!-- It handles hover scales, light/dark themes and disables on mobile -->
Dashboard Widget

PD Dashboard Stats Card

Specially styled stat module with micro flex layouts, clean typography hierarchy, accent badges, and glass specular containers matching the AMP Center operations hub.

Marketing LTV
$48,290
+18.4% this month
stat-card.html 
<div class="amp-card p-5 max-w-[240px] w-full">
  <div class="flex items-center justify-between mb-3">
    <span class="text-xs font-bold text-slate-500">Marketing LTV</span>
    <div class="w-8 h-8 rounded-full bg-pd-orange/10 flex items-center justify-center text-pd-orange">
      <iconify-icon icon="solar:round-transfer-horizontal-bold" width="16"></iconify-icon>
    </div>
  </div>
  <div class="text-2xl font-extrabold mb-1">$48,290</div>
  <div class="flex items-center gap-1 text-[10px] text-emerald-500 font-bold">
    <iconify-icon icon="solar:arrow-right-up-bold"></iconify-icon>
    <span>+18.4% this month</span>
  </div>
</div>
Dashboard Agent Node

PD Agent Glow Badge

Specially animated active workforce avatar badge. Uses a double-glow container with `agent-active-glow` pulse animation matching the AMP Center agent tree nodes.

Copywriter Agent
Delegated
agent-glow.html 
<div class="flex items-center gap-3 p-3 bg-white/40 dark:bg-black/20 rounded-2xl border border-black/5 dark:border-white/5">
  <div class="relative w-10 h-10 rounded-full border border-pd-teal agent-active-glow flex-shrink-0" style="color: #46d4c6;">
    <img src="logo.png" class="w-full h-full rounded-full" />
  </div>
  <div>
    <div class="text-xs font-bold">Copywriter Agent</div>
    <div class="text-[9px] font-bold text-emerald-500 uppercase mt-1">Delegated</div>
  </div>
</div>
Visual FX Avatar

PD Conic Agent Avatar

Frosted circular avatar with a continuous rotating conic gradient border sweep, establishing a futuristic AI personality highlight.

conic-avatar.html 
<div class="relative w-14 h-14 rounded-full border border-transparent flex items-center justify-center overflow-hidden">
  <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ff9146_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-60 animate-[spin_2.5s_linear_infinite] pointer-events-none"></div>
  <div class="absolute inset-[2.5px] rounded-full bg-white dark:bg-gray-800"></div>
  <iconify-icon icon="solar:crown-minimalistic-bold" class="relative z-10 text-pd-orange text-2xl"></iconify-icon>
</div>
Dashboard Hierarchy

PD Active Workforce Tree

Hierarchical workforce link layouts mapping the executive tree flow from CEO down to specialized sub-agents with connector lines.

CEO Agent
Active
CMO Agent
Lead Gen & Marketing
Driver Acquisition Specialist
Recruits and onboards new drivers to expand the dispatch fleet.
Route Optimization Strategist
Develops and implements strategies to maximize delivery efficiency and profitability.
CTO Agent
Systems & Code
Real-time Fleet Monitor
Oversees the live status and location of all dispatch vehicles and drivers.
Logistics Data Analyst
Analyzes operational data to identify trends, inefficiencies, and areas for improvement.
Creative Agent
Content & Assets
Driver Experience Designer
Creates engaging content and communication strategies to foster a positive driver community.
Compliance & Brand Manager
Ensures all dispatch operations and communications adhere to Amazon's standards and regulations.
workforce-tree.html 
<div class="flex flex-col items-center w-full relative">
  <!-- CEO Node -->
  <div class="amp-card p-3 flex items-center gap-3 w-48 justify-center z-10 bg-white/80 dark:bg-[#0b0f19]">
    <div class="w-8 h-8 rounded-full relative overflow-hidden isolate bg-white/60 dark:bg-gray-800/60 flex items-center justify-center flex-shrink-0">
      <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ff9146_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-50 animate-[spin_2s_linear_infinite]"></div>
      <div class="absolute inset-[2px] rounded-full bg-white/90 dark:bg-gray-800/90"></div>
      <iconify-icon icon="solar:crown-minimalistic-linear" width="14" class="text-pd-orange relative z-10"></iconify-icon>
    </div>
    <div>
      <div class="text-[11px] font-semibold">CEO Agent</div>
      <div class="text-[8px] text-emerald-500 font-bold">Active</div>
    </div>
  </div>

  <!-- Connector Lines -->
  <div class="tree-line-v h-6 bg-gray-200 dark:bg-white/10 w-[1px]"></div>
  <div class="tree-line-h w-full max-w-[420px] relative">
    <div class="absolute top-0 left-0 w-[1px] h-6 tree-line-v bg-gray-200 dark:bg-white/10"></div>
    <div class="absolute top-0 right-0 w-[1px] h-6 tree-line-v bg-gray-200 dark:bg-white/10"></div>
    <div class="absolute top-0 left-1/2 w-[1px] h-6 tree-line-v bg-gray-200 dark:bg-white/10 -ml-[0.5px]"></div>
    <div class="h-[1px] w-full bg-gray-200 dark:bg-white/10"></div>
  </div>
  <div class="h-6"></div>

  <!-- Sub-Agent Columns -->
  <div class="flex flex-row justify-between w-full max-w-[560px] gap-4 relative z-10">
    
    <!-- CMO Branch -->
    <div class="flex flex-col items-center gap-0 w-[180px]">
      <div class="amp-card rounded-2xl p-3 flex flex-col items-center gap-2 w-full text-center border-pd-teal/20 bg-white/80 dark:bg-[#0b0f19]">
        <div class="w-8 h-8 rounded-full relative overflow-hidden isolate bg-white/60 dark:bg-gray-800/60 flex items-center justify-center shadow-sm">
          <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#46d4c6_30%,#ffffff_50%,#ff9146_70%,transparent_100%)] opacity-40 animate-[spin_3s_linear_infinite]"></div>
          <div class="absolute inset-[2px] rounded-full bg-white/90 dark:bg-gray-800/90"></div>
          <iconify-icon icon="solar:global-linear" width="14" class="relative z-10 text-pd-teal"></iconify-icon>
        </div>
        <div>
          <div class="text-[11px] font-semibold text-gray-900 dark:text-white">CMO Agent</div>
          <div class="text-[8px] text-gray-500">Lead Gen & Marketing</div>
        </div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-pd-teal/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-pd-teal"><iconify-icon icon="solar:user-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Driver Acquisition Specialist</div>
        <div class="text-[8px] text-gray-500 leading-tight">Recruits and onboards new drivers to expand the dispatch fleet.</div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-pd-teal/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-pd-teal"><iconify-icon icon="solar:map-point-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Route Optimization Strategist</div>
        <div class="text-[8px] text-gray-500 leading-tight">Develops and implements strategies to maximize delivery efficiency and profitability.</div>
      </div>
    </div>

    <!-- CTO Branch -->
    <div class="flex flex-col items-center gap-0 w-[180px]">
      <div class="amp-card rounded-2xl p-3 flex flex-col items-center gap-2 w-full text-center border-pd-orange/20 bg-white/80 dark:bg-[#0b0f19]">
        <div class="w-8 h-8 rounded-full relative overflow-hidden isolate bg-white/60 dark:bg-gray-800/60 flex items-center justify-center shadow-sm">
          <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ff9146_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-40 animate-[spin_3s_linear_infinite]"></div>
          <div class="absolute inset-[2px] rounded-full bg-white/90 dark:bg-gray-800/90"></div>
          <iconify-icon icon="solar:settings-linear" width="14" class="relative z-10 text-pd-orange"></iconify-icon>
        </div>
        <div>
          <div class="text-[11px] font-semibold text-gray-900 dark:text-white">CTO Agent</div>
          <div class="text-[8px] text-gray-500">Systems & Code</div>
        </div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-pd-orange/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-pd-orange"><iconify-icon icon="solar:monitor-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Real-time Fleet Monitor</div>
        <div class="text-[8px] text-gray-500 leading-tight">Oversees the live status and location of all dispatch vehicles and drivers.</div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-pd-orange/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-pd-orange"><iconify-icon icon="solar:graph-up-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Logistics Data Analyst</div>
        <div class="text-[8px] text-gray-500 leading-tight">Analyzes operational data to identify trends, inefficiencies, and areas for improvement.</div>
      </div>
    </div>

    <!-- Creative Branch -->
    <div class="flex flex-col items-center gap-0 w-[180px]">
      <div class="amp-card rounded-2xl p-3 flex flex-col items-center gap-2 w-full text-center border-purple-500/20 bg-white/80 dark:bg-[#0b0f19]">
        <div class="w-8 h-8 rounded-full relative overflow-hidden isolate bg-white/60 dark:bg-gray-800/60 flex items-center justify-center shadow-sm">
          <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#a855f7_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-40 animate-[spin_3s_linear_infinite]"></div>
          <div class="absolute inset-[2px] rounded-full bg-white/90 dark:bg-gray-800/90"></div>
          <iconify-icon icon="solar:document-linear" width="14" class="relative z-10 text-purple-500"></iconify-icon>
        </div>
        <div>
          <div class="text-[11px] font-semibold text-gray-900 dark:text-white">Creative Agent</div>
          <div class="text-[8px] text-gray-500">Content & Assets</div>
        </div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-purple-500/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-purple-500"><iconify-icon icon="solar:chat-square-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Driver Experience Designer</div>
        <div class="text-[8px] text-gray-500 leading-tight">Creates engaging content and communication strategies to foster a positive driver community.</div>
      </div>

      <div class="tree-line-v h-4 bg-gray-200 dark:bg-white/10 w-[1px]"></div>

      <div class="amp-card rounded-xl p-2.5 flex flex-col items-center gap-1 w-full text-center opacity-90 border border-purple-500/20 bg-white/60 dark:bg-pd-glass shadow-sm">
        <div class="text-purple-500"><iconify-icon icon="solar:shield-check-linear" width="14"></iconify-icon></div>
        <div class="text-[10px] font-semibold leading-tight mt-0.5 text-gray-900 dark:text-white">Compliance & Brand Manager</div>
        <div class="text-[8px] text-gray-500 leading-tight">Ensures all dispatch operations and communications adhere to Amazon's standards and regulations.</div>
      </div>
    </div>

  </div>
</div>
Container Onboarding

PD Kingdom Onboarding Card

Frosted card with dual-gradient boundary wrapper and rounded input textfield paired with a circular conic-glow hover arrow submit trigger.

Describe your digital kingdom...

Tell the Agent what business you have

kingdom-onboarding.html 
<div class="relative rounded-[2rem] p-[1px] bg-gradient-to-b from-gray-200 dark:from-gray-700 via-transparent to-transparent w-full overflow-hidden shadow-xl">
  <div class="absolute inset-[1px] bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-[calc(2rem-1px)]"></div>
  <div class="relative z-10 p-6 flex flex-col items-center">
    <h4 class="text-sm font-bold text-gray-900 dark:text-white">Describe your digital kingdom...</h4>
    <div class="w-full flex gap-2 items-center mt-4">
      <input type="text" class="w-full bg-white/60 dark:bg-black/40 border border-gray-200 dark:border-white/10 rounded-full px-4 py-2 text-xs" placeholder="e.g. A marketing agency..." />
      <button class="group w-8 h-8 rounded-full relative overflow-hidden isolate dramatic-hover flex items-center justify-center bg-white/60 dark:bg-gray-800/60 shadow-sm">
        <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ff9146_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-0 group-hover:opacity-100 animate-[spin_1.5s_linear_infinite] z-0"></div>
        <div class="absolute inset-[2px] rounded-full bg-white/90 dark:bg-gray-800/90 group-hover:bg-[#ff9146]"></div>
        <iconify-icon icon="solar:arrow-right-linear" width="14" class="relative z-10 text-gray-900 dark:text-white group-hover:text-white"></iconify-icon>
      </button>
    </div>
  </div>
</div>
Dashboard Settings

PD Settings Config Panel

Settings panel modules containing brand fields, company input cards, and standard customized toggle switches.

Profile Info Active
Outreach
settings-panel.html 
<!-- Settings Panel -->
<div class="bg-white/40 dark:bg-pd-glass backdrop-blur-2xl border border-gray-200 dark:border-pd-glassBorder rounded-2xl p-5 shadow-md">
  <div class="space-y-3">
    <div>
      <label class="block text-[9px] font-medium text-gray-400 mb-1">Company</label>
      <input type="text" class="w-full bg-white/60 dark:bg-black/40 border border-gray-200 dark:border-white/10 rounded-full px-3 py-1.5 text-[11px]" value="Acme Corp" />
    </div>
    <div class="flex items-center justify-between p-2 bg-white/60 dark:bg-black/40 rounded-xl">
      <span class="text-[10px]">Outreach</span>
      <label class="pd-switch">
        <input type="checkbox" checked />
        <div class="pd-switch-slider"></div>
      </label>
    </div>
  </div>
</div>
Dashboard Chat

PD Neural Chat Interface

Conversational user and AI message bubble containers featuring active avatar glow border frames and a bouncing typing dot indicator.

CEO Agent

How should we proceed?

You

Launch the design system.

neural-chat.html 
<!-- User Message Bubble -->
<div class="self-end max-w-[85%] bg-pd-teal/20 border border-pd-teal/40 rounded-2xl rounded-tr-sm p-3 text-xs">
  <span class="font-bold text-pd-teal text-[9px] uppercase tracking-wider">You</span>
  <p>Launch the design system.</p>
</div>

<!-- AI CEO Message Bubble -->
<div class="self-start max-w-[85%] bg-white/80 dark:bg-pd-glass border border-gray-200 dark:border-pd-glassBorder rounded-2xl rounded-tl-sm p-3 pl-8 text-xs relative">
  <div class="absolute -left-2 -top-2 w-6 h-6 rounded-full overflow-hidden flex items-center justify-center bg-white dark:bg-gray-800 shadow-sm">
    <div class="absolute inset-[-200%] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ff9146_30%,#ffffff_50%,#46d4c6_70%,transparent_100%)] opacity-50 animate-[spin_2.5s_linear_infinite]"></div>
    <div class="absolute inset-[1.5px] rounded-full bg-white dark:bg-gray-800"></div>
    <iconify-icon icon="solar:crown-minimalistic-bold" width="10" class="text-pd-orange relative z-10"></iconify-icon>
  </div>
  <span class="font-bold text-pd-orange text-[9px] uppercase tracking-wider">CEO Agent</span>
  <p>How should we proceed?</p>
</div>

<!-- Typing Dot indicator -->
<div class="flex gap-1 items-center px-3 py-2 bg-white/60 dark:bg-pd-glass border border-gray-200 dark:border-pd-glassBorder rounded-2xl w-max">
  <span class="w-1 h-1 rounded-full bg-pd-orange typing-dot"></span>
  <span class="w-1 h-1 rounded-full bg-pd-orange typing-dot" style="animation-delay: 0.15s"></span>
  <span class="w-1 h-1 rounded-full bg-pd-orange typing-dot" style="animation-delay: 0.3s"></span>
</div>