---
name: "Docs"
description: "Modern dark-themed developer documentation design system tailored for motion design engines and code-driven video tools."
version: "1.0"
colors:
  canvas: "#0d0e11"
  surface-soft: "#16181d"
  surface-muted: "#1f222a"
  ink: "#f3f4f6"
  ink-strong: "#ffffff"
  body: "#9ca3af"
  primary: "#6366f1"
  primary-strong: "#4f46e5"
  on-primary: "#ffffff"
  hairline: "#2e323b"
  hairline-soft: "#1f222a"
  overlay: "rgba(0, 0, 0, 0.75)"
  accent-violet: "#8b5cf6"
  accent-magenta: "#ec4899"
  accent-cyan: "#06b6d4"
  success: "#10b981"
  warning: "#f59e0b"
  destructive: "#ef4444"
typography:
  heading-xl:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "36px"
    fontWeight: "700"
    lineHeight: "1.2"
    letterSpacing: "-0.025em"
  heading-lg:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "1.3"
    letterSpacing: "-0.02em"
  heading-md:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "18px"
    fontWeight: "600"
    lineHeight: "1.4"
    letterSpacing: "-0.01em"
  body:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "1.6"
    letterSpacing: "0em"
  code:
    fontFamily: "Fira Code, JetBrains Mono, monospace"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "0em"
rounded:
  card: "12px"
  button: "8px"
  badge: "999px"
  input: "8px"
spacing:
  section: "64px"
  container: "1280px"
  grid-gap: "20px"
  padding-sm: "8px"
  padding-md: "16px"
  padding-lg: "24px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button}"
    padding: "8px 16px"
    fontWeight: "500"
    border: "none"
  secondary-button:
    background: "{colors.surface-muted}"
    color: "{colors.ink-strong}"
    borderRadius: "{rounded.button}"
    padding: "8px 16px"
    fontWeight: "500"
    border: "1px solid {colors.hairline}"
  search-bar:
    background: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.input}"
    color: "{colors.body}"
    padding: "10px 14px"
  sidebar-nav:
    background: "{colors.canvas}"
    borderRight: "1px solid {colors.hairline-soft}"
    itemActiveColor: "{colors.primary}"
    itemColor: "{colors.body}"
    width: "260px"
  content-card:
    background: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.padding-lg}"
  code-block:
    background: "#050608"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.button}"
    padding: "{spacing.padding-md}"
    color: "{colors.ink}"
  badge:
    background: "rgba(99, 102, 241, 0.15)"
    color: "{colors.accent-violet}"
    borderRadius: "{rounded.badge}"
    padding: "2px 10px"
    fontSize: "12px"
  footer:
    borderTop: "1px solid {colors.hairline-soft}"
    background: "{colors.canvas}"
    color: "{colors.body}"
    padding: "{spacing.section} 0px"
source: "https://docs.pixloop.ai/"
captured: "2026-09-26T02:27:00.638Z"
---

# DESIGN.md: Docs

## Source

- URL: https://docs.pixloop.ai/
- Captured: 2026-09-26T02:27:00.638Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot


## Design Summary

A high-density dark mode documentation interface optimized for code snippets, frame-accurate motion design tutorials, and technical reference guides.

## Visual Language

- Dark theme first layout with crisp slate borders and high-contrast typography
- Subtle purple and indigo accent triggers for action elements and highlighted code
- Monospace block callouts for command line utilities, React/Remotion props, and JSON payloads
- Clean structural grids using standard rounded surfaces and refined dividers

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Three-column documentation layout: Left global navigation, center main markdown render, right page TOC
- Header sticky toolbar with fuzzy search input, theme toggle, and repository link icons
- Responsive collapse of sidebars into off-canvas drawer models on smaller viewport dimensions

## Components

- Sidebar navigation uses active left borders and subtle high-light surfaces for selected routes
- Code snippets include top-bar filename pill and copy-to-clipboard icon button
- Callout containers use semantic border accents: primary indigo for note, cyan for tip, yellow for warning

## Content Style

- Technical and concise tone focused on API references, React props, and motion composition code
- Direct action CTAs such as 'Get Started', 'View Source', and 'Quickstart'

## Agent Build Instructions

- Use standard modern CSS variables for color tokens to support effortless theme updates
- Ensure syntax highlighters fit within the dark canvas color system seamlessly
- Keep typography scale accessible with tight line heights on headers and generous line spacing on long-form body text

## Evidence And Confidence

- Inferred: Full site HTML and computed CSS were unavailable due to missing scrape payload.
- Inferred: Core branding default chosen based on standard modern developer documentation patterns for motion design engines (Pixloop/Remotion ecosystem).
- Observed: Domain target context indicates developer documentation platform for AI/motion engines.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://docs.pixloop.ai/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.