# Project D UI Presets & Design System Welcome to the branded UI Presets library for Project D. This folder acts as the single source of truth for keeping all pages consistent, modern, and aligned with our **Liquid Glass** aesthetic. --- ## 🚀 How to Use in a Page To implement Project D branding on any new or existing HTML page, import the compiled presets in the `` tag: ```html ``` --- ## 🎨 Brand Component Presets & Nomenclature When pair-programming, you can quickly ask me to implement or build using the following preset names: ### 1. `PD Conic Pill Teal Button` (Primary Action) * **Description**: A pill-shaped button with the spinning white-and-teal conic border glow on hover. * **Code Snippet**: ```html ``` ### 2. `PD Conic Pill Orange Button` (Primary Highlight) * **Description**: A pill button utilizing the secondary warm orange spinning gradient border on hover. * **Code Snippet**: ```html ``` ### 3. `PD Conic Pill Glass Button` (Secondary Action) * **Description**: A glass-frosted pill button that displays the multicolor brand border rotation on hover. * **Code Snippet**: ```html ``` ### 4. `PD Conic Circle Icon Button` (Compact Control) * **Description**: Circular layout for theme toggles, close buttons, and mini triggers. Includes conic spin hover. * **Code Snippet**: ```html ``` ### 5. `PD Classic Glass Button` (Default Action) * **Description**: A standard rounded-full frosted glass button with a subtle horizontal shimmer sweep on hover. * **Code Snippet**: ```html ``` ### 6. `PD Specular Card` (Standard Card) * **Description**: The classic Liquid Glass dashboard block. Features top specular edge highlights and scale-up hover feedback. * **Code Snippet**: ```html

Card Title

Card content description goes here.

``` ### 7. `PD Glass Panel` (Structural Container) * **Description**: Highly frosted glass sheet suitable for sidebars, navigation panels, and table backdrops. * **Code Snippet**: ```html
``` ### 8. `PD Dynamic Island Navigation` (Header Pill) * **Description**: The floating navigation island from the Home Page. Centered, highly blurred, with theme toggle support. * **Code Snippet**: ```html ``` ### 9. `PD Ambient Background` (Visual Core) * **Description**: Spawns the rotating soft neon gradient beams in the background. Needs to be placed right after the `` opening tag. * **Code Snippet**: ```html
``` ### 10. `PD Agent Glow Badge` (Status Element) * **Description**: A status pill featuring an active glow ring and capacity pulse animations, matching the AMP Center workforce nodes. * **Code Snippet**: ```html
SEO Agent
Active
``` ### 11. `PD Conic Agent Avatar` (Visual Element) * **Description**: Frosted circular avatar with a continuous spinning multicolor conic gradient border sweep. * **Code Snippet**: ```html
``` ### 12. `PD Active Workforce Tree` (Structural Connection) * **Description**: Structural connection grid elements representing agent hierarchy using `.tree-line-v` and `.tree-line-h` classes. * **Code Snippet**: ```html
CEO Agent
Active
CMO Agent
Marketing
``` ### 13. `PD Kingdom Onboarding Card` (Onboarding Component) * **Description**: Dual-gradient border wrap card containing form elements and circular conic-glow hover arrow triggers. * **Code Snippet**: ```html

Describe your digital kingdom...

``` ### 14. `PD Settings Config Panel` (Control Node) * **Description**: Config interface element utilizing `.pd-switch` styled checkbox toggles and input fields. * **Code Snippet**: ```html
Outreach
``` ### 15. `PD Neural Chat Interface` (Conversation Panel) * **Description**: Double-glow AI avatar dialog bubble, user bubble and typing indicators (`.typing-dot` animation). * **Code Snippet**: ```html
You

Launch the design system.

CEO Agent

How should we proceed?

``` --- ## 🛠️ Helper Utilities * **Liquid Click Ripples**: Automatically active upon page load once `presets.js` is loaded. It triggers a glass overlay ripple centered on any mouse click coordinates. * **Scroll Reveal Animations**: Initialize by calling `PDPresets.initScrollReveal('.reveal-target')` in your script. * **Theme Switching**: Call `PDPresets.toggleTheme()` to toggle between light and dark modes. It handles document class manipulation and local storage saving.