---
name: "Pixloop"
description: "A sleek dark-mode creative operating system interface featuring deep zinc canvases, glowing blue primary accents, ambient glassmorphism cards, and high-contrast typography."
version: "1.0"
colors:
  canvas: "#09090B"
  surface-soft: "#111113"
  surface-muted: "rgba(28, 28, 28, 0.55)"
  surface-card: "rgba(255, 255, 255, 0.04)"
  ink: "#FFFFFF"
  ink-strong: "#F5F5F5"
  body: "#A1A1A6"
  neutral-strong: "#71717A"
  primary: "#3B82F6"
  primary-strong: "#2563EB"
  on-primary: "#FFFFFF"
  hairline: "rgba(255, 255, 255, 0.13)"
  hairline-soft: "rgba(255, 255, 255, 0.08)"
  overlay: "rgba(18, 18, 21, 0.95)"
  accent-blue-soft: "rgba(59, 130, 246, 0.12)"
  accent-blue-glow: "rgba(59, 130, 246, 0.3)"
  accent-cyan: "#22D3EE"
  accent-lime: "#D6FF4F"
  accent-purple: "#A855F7"
  accent-purple-soft: "rgba(168, 85, 247, 0.12)"
  success: "#22C55E"
  warning: "#F59E0B"
  destructive: "#EF4444"
typography:
  heading-xl:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "64px"
    fontWeight: "500"
    lineHeight: "64px"
    letterSpacing: "-0.04em"
  heading-lg:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "40px"
    letterSpacing: "-0.02em"
  heading-md:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "normal"
  body-lg:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "18px"
    fontWeight: "500"
    lineHeight: "24.75px"
    letterSpacing: "normal"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    letterSpacing: "normal"
  body-sm:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
    letterSpacing: "normal"
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "16px"
    letterSpacing: "normal"
  badge:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "11px"
    fontWeight: "500"
    lineHeight: "16.5px"
    letterSpacing: "0.05em"
rounded:
  pill: "9999px"
  card: "16px"
  modal: "24px"
  button: "8px"
  input: "12px"
  sm: "6px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  section: "96px"
  section-lg: "144px"
  container: "1280px"
components:
  navigation-bar:
    background: "transparent"
    height: "64px"
    maxWidth: "{spacing.container}"
    borderBottom: "0px solid transparent"
  primary-button:
    background: "{colors.primary}"
    color: "{colors.ink}"
    borderRadius: "10px"
    padding: "12px 32px"
    boxShadow: "0px 4px 24px rgba(59, 130, 246, 0.3)"
  secondary-button:
    background: "{colors.ink-strong}"
    color: "{colors.canvas}"
    borderRadius: "{rounded.button}"
    padding: "8px 16px"
  icon-button:
    background: "transparent"
    color: "{colors.body}"
    border: "1px solid {colors.hairline-soft}"
    borderRadius: "{rounded.pill}"
    width: "32px"
    height: "32px"
  prompt-bar:
    background: "{colors.surface-muted}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.md}"
  feature-card:
    background: "{colors.surface-muted}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.card}"
    boxShadow: "0px 4px 30px rgba(0, 0, 0, 0.12)"
  pricing-card:
    background: "{colors.surface-card}"
    border: "1px solid rgba(255, 255, 255, 0.25)"
    borderRadius: "{rounded.card}"
    padding: "20px"
  category-pill:
    background: "rgba(255, 255, 255, 0.05)"
    border: "1px solid rgba(255, 255, 255, 0.1)"
    borderRadius: "{rounded.pill}"
    padding: "4px 12px"
    color: "{colors.body}"
  footer-link:
    color: "{colors.neutral-strong}"
    fontSize: "{typography.caption.fontSize}"
    hoverColor: "{colors.ink-strong}"
source: "https://pixloop.ai/"
captured: "2026-10-04T04:11:10.795Z"
---

# DESIGN.md: Pixloop

## Source

- URL: https://pixloop.ai/
- Captured: 2026-10-04T04:11:10.795Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Pixloop](./screenshot.png)

## Design Summary

Pixloop presents a high-density, dark creative-OS canvas defined by rich dark backgrounds (#09090B), radiant electric-blue branding (#3B82F6), subtle radial gradient glows, glassmorphism cards with translucent borders, and clean Inter sans-serif typography.

## Visual Language

- Deep pitch-black canvas (#09090B) combined with translucent glass card panels (rgba(28, 28, 28, 0.55))
- Refined border highlights using ultra-subtle white alpha overlays (rgba(255, 255, 255, 0.08) to 0.13)
- Vibrant blue action highlights with ambient blurred drop shadows for primary CTAs
- Gradients spanning cyan, blue, lime, and purple for text accents and creative model badges
- Pill-shaped category tags and pill controls paired with 16px rounded rectangular cards

## Design Tokens

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

## Spacing And Layout

- Top-sticky transparent header with full-width responsive container and hover-triggered glass dropdown menus
- Hero prompt bar section anchored by category selector tabs and circular action triggers
- Bento-box feature section featuring asymmetric multi-column grid layouts with translucent cards
- Interactive pricing tier grid with monthly/annual pill toggle and highlighted popular card
- Structured multi-column dark footer grid categorized by capability, solution, and explore sub-trees

## Components

- Use Inter font with tight negative letter-spacing for large hero headers
- Ensure input components use translucent surfaces over raw opaque dark fills
- Primary buttons should render in solid #3B82F6 blue with subtle cyan text/gradient accents on badges
- Hover states on cards should increase border opacity from 0.08 to 0.20 or 0.25
- Category selectors and small controls should adopt full rounded-pill geometry (9999px)

## Content Style

- Tone is high-energy, modern, professional, and targeted at creative professionals and digital brands
- Headings emphasize workflow automation, generative capability, and brand consistency
- CTAs use crisp action-oriented verbs like 'Start creating', 'Explore Workflows', and 'Choose Starter'

## Agent Build Instructions

- Set page background to #09090B with selection highlight background set to #3B82F6
- Implement backdrop-filter blur (backdrop-blur-xl) on header popovers and elevated surfaces
- Configure CSS variables for border alpha steps: white/5, white/8, white/10, white/13, and white/25
- Use Tailwind CSS grid and flex layout structures for bento-card arrangements
- Include subtle ambient top-center radial gradient: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.05), transparent 50%)

## Evidence And Confidence

- Observed: Measured document background #09090B and primary blue #3B82F6 from computed CSS variables.
- Observed: Inter font stack used across all computed text elements with font sizes ranging from 11px to 64px.
- Observed: Border-radius values dominated by 9999px (pill), 16px (card), 12px (input/small card), and 8px (button).
- Inferred: Interactive focus ring color inferred as rgba(59, 130, 246, 0.5) based on Tailwind ring variable definitions.

## Rerun Inputs

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

---

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