---
name: "Animatiq"
description: "Dark-mode technical design system tailored for motion design catalog platforms, video component libraries, and Remotion/HyperFrames canvas tooling."
version: "1.0"
colors:
  canvas: "#0a0a0a"
  surface-soft: "#0d0d0d"
  surface-muted: "#1a1a1a"
  overlay: "rgba(0, 0, 0, 0.8)"
  ink: "#ffffff"
  ink-strong: "#f5f5f5"
  body: "#888888"
  hairline: "#333333"
  hairline-soft: "rgba(255, 255, 255, 0.1)"
  primary: "#ffffff"
  primary-strong: "#e5e7eb"
  on-primary: "#0a0a0a"
  accent-violet: "#ac4bff"
  accent-violet-soft: "rgba(172, 75, 255, 0.2)"
  accent-blue: "#3080ff"
  accent-blue-soft: "rgba(48, 128, 255, 0.2)"
  accent-emerald: "#00bb7f"
  accent-cyan: "#00d2ef"
  accent-amber: "#fcbb00"
  destructive: "#dc2626"
typography:
  brand-wordmark:
    fontFamily: "Poppins, ui-sans-serif, system-ui, sans-serif"
    fontSize: "30px"
    fontWeight: "800"
    lineHeight: "1.5"
    letterSpacing: "normal"
  heading-xl:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "36px"
    fontWeight: "600"
    lineHeight: "1.1"
    letterSpacing: "-0.025em"
  heading-lg:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "1.5"
    letterSpacing: "normal"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.43"
    letterSpacing: "normal"
  caption-sm:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.33"
    letterSpacing: "normal"
  label-uppercase:
    fontFamily: "ui-sans-serif, system-ui, sans-serif"
    fontSize: "11px"
    fontWeight: "600"
    lineHeight: "1.5"
    letterSpacing: "0.14em"
    textTransform: "uppercase"
rounded:
  small: "8px"
  control: "10px"
  card: "16px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "32px"
  section: "72px"
  container: "1152px"
  sidebar-width: "56px"
components:
  sidebar-navigation:
    width: "{spacing.sidebar-width}"
    background: "{colors.surface-soft}"
    borderRight: "1px solid {colors.hairline}"
    gap: "{spacing.xs}"
    padding: "{spacing.sm}"
  top-header:
    height: "40px"
    background: "transparent"
    padding: "0px {spacing.md}"
    justifyContent: "flex-end"
  category-badge:
    color: "{colors.accent-violet}"
    fontSize: "11px"
    fontWeight: "600"
    letterSpacing: "0.16em"
    textTransform: "uppercase"
  catalog-card:
    background: "rgba(255, 255, 255, 0.03)"
    border: "1px solid {colors.hairline-soft}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.md}"
    aspectRatio: "16 / 9"
  nav-item:
    borderRadius: "{rounded.small}"
    padding: "{spacing.xs} {spacing.sm}"
    fontSize: "13px"
    color: "{colors.body}"
    hoverColor: "{colors.ink}"
    hoverBackground: "rgba(255, 255, 255, 0.06)"
  action-button:
    background: "rgba(255, 255, 255, 0.05)"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline-soft}"
    borderRadius: "{rounded.small}"
    padding: "0px {spacing.md}"
    height: "28px"
    fontSize: "12px"
    fontWeight: "500"
  breadcrumb:
    fontSize: "12px"
    color: "{colors.body}"
    gap: "{spacing.xs}"
  footer:
    background: "{colors.canvas}"
    borderTop: "1px solid {colors.hairline}"
    padding: "{spacing.section} 0px"
    color: "{colors.body}"
source: "https://animatiq.ai/catalog/category/typography"
captured: "2026-09-09T18:43:48.320Z"
---

# DESIGN.md: Animatiq

## Source

- URL: https://animatiq.ai/catalog/category/typography
- Captured: 2026-09-09T18:43:48.320Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

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

## Design Summary

A high-density, dark motion-graphics catalog interface featuring ultra-clean monochromatic surfaces with subtle semi-transparent borders, vibrant kinetic accent swatches, high-contrast headline typography, and structured grid displays for code-driven animation presets.

## Visual Language

- Ultra-dark baseline background (#0a0a0a) with layered dark-surface elevation (#0d0d0d and #1a1a1a).
- Subtle glassmorphic border treatments using low-opacity white overlays (border-white/10 and border-white/5).
- Chromatic accent highlights (purple-500 #ac4bff, blue-500 #3080ff) reserved for category metadata, tags, and state highlights.
- Crisp geometric card layouts optimized for 16:9 video aspect ratio visual component previews.

## Design Tokens

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

## Spacing And Layout

- Collapsible left rail icon navigation fixed at 56px width.
- Dual-pane main catalog structure with category taxonomy sidebar (256px) and scrollable preview grid.
- Responsive multi-column card grid adjusting dynamically to desktop and tablet viewports.
- Full-width footer with structured navigation columns and social icon links.

## Components

- Cards must maintain 16px corner radius and 1px transparent white border.
- Interactive sidebar links highlight with a soft white hover backdrop (bg-white/[0.06]).
- Headings use pure white text (#ffffff) while paragraph descriptions default to neutral muted text (#888888 or zinc-400).
- Pill and status tags use uppercase 11px text with generous tracking (0.14em).

## Content Style

- Technical, developer-oriented tone focused on motion design primitives, Remotion React components, and deterministic animation.
- Concise action labels and clear component classification tags.

## Agent Build Instructions

- Configure CSS root colors with dark variables default (--background: #0a0a0a, --border: #333).
- Set font stack to ui-sans-serif and Poppins for wordmark rendering.
- Use Tailwind arbitrary opacity utilities for subtle glass edges (e.g. border-white/10, bg-white/[0.03]).
- Ensure video asset preview container enforces 16/9 aspect ratio and dark baseline canvas.

## Evidence And Confidence

- Observed: Measured viewport is 1920x993 dark theme page state.
- Observed: Exact font Poppins 800 used for AnimatiQ wordmark.
- Observed: Sidebar navigation width computed at 56px (3.5rem).
- Observed: Card components set to border-radius 16px and border rgba(255,255,255,0.1).
- Inferred: Chromatic accents mapped to stylesheet variables --color-purple-500 (#ac4bff) and --color-blue-500 (#3080ff).

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://animatiq.ai/catalog/category/typography

---

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