VideoDB — Atomic Design System

The canonical source of truth for VideoDB's brand, UI components, and design decisions. Feed design.md and index.html to any agent building, reviewing, or extending VideoDB's marketing surfaces.

How to use this repo

design.md is the agent-feed spec — paste it into context alongside your task. It covers the full component anatomy, page recipes, brand tokens, and voice principles in one file.

index.html is the live implementation. Open it in a browser to see component previews and copy shipping HTML. Where design.md and index.html conflict, trust index.html.

python3 -m http.server 8080
# → http://localhost:8080/

No build step. Three.js (Particle dome), Iconify, and Google Fonts (Geist + JetBrains Mono) load from CDN.

What's in this repo

├── design.md                        # Agent-feed spec — single source of truth
├── index.html                       # Live docs page (hash-routed component previews)
├── vercel.json                      # Clean URLs, no trailing slash
├── assets/
│   ├── logos/                       # icon, wordmark-dark/light, square-dark/light
│   ├── customer-logos/              # 12 customer logos
│   ├── partner-logos/               # Anthropic, OpenAI, Gemini, TwelveLabs, n8n, Zapier
│   ├── compliance-logos/            # GDPR, HIPAA, ISO, SOC2 (dark + light variants)
│   ├── illustrations/sources/       # Source PNGs for the ASCII illustration component
│   └── motion/                      # ingestion-pipeline.mp4
└── scripts/
    ├── ds/                          # Interaction utilities (see below)
    └── ui-review-flow/              # Point-and-click feedback harness

What's in the design system

Foundation (11 pages) — color, typography, spacing, layout, motion, iconography, logos, radius, shadow, system rules, brand voice

Atoms (18) — bracket-header, button, checkbox, eyebrow, field-label, helper-text, input, loaders, menu-toggle, mono-badge, pill, radio, select, skip-link, status-pill, tag-chip, textarea, vbar-bullet

Molecules (21) — bracket-head-tag, careers-list, code-tab-pills, copy-snippet, cta-pair, digest-form, feature-list, form-field, iframe-wrap, kv-list, mode-grid, mode-toggle, recap-grid, recap-report, section-heading, section-heading-split, stat-block, subscribe-band, surface-toggle, tag-list, trust-band

Organisms (42) — announcement-bar, article-hero, article-toc, build-card, carousel, code-annotation, code-block, community-ticker, compare-table, content-card, customer-wall, dispatch-card, editorial-primitives, entry-row, faq-row, feature-card, footer, highlight, investor-card, logo-card, metrics-ticker, mobile-drawer, mobile-drawer-top-down, modal, nav-dropdown, partner-card, playlist-card, pricing-card, project-tile, quickstart-tabs, repo-card, research-card, showcase-card, site-header, social-card, tabs, tabs-nested-pill, tabs-scroll, testimonial-card, testimonials-ticker, tier-finder, tooltip, video-embed

Motion (7) — particle-dome, motion-clip, timeline-scrubber, ingestion-pipeline, live-illustrations-guide, hyperframes-guide, motion atoms vocabulary

Data viz (7) — architecture-flow, bar-chart, callout-metric, column-chart, comparison, stats, trend-line

Illustration (1) — ASCII pixel-to-binary morph (scroll-triggered, vanilla canvas, honours prefers-reduced-motion)

Templates (18) — article-shell, closing-particle-field, diagrams, feature-grid, hero, hero-split, hero-with-dome, industries-grid, onboarding, pre-footer-ascii, pre-footer-socials, problem-solution, recap-band, roadmap-timeline, section-structure, showcase-3up, sticky-scroll, sync-compare

DS interaction scripts (scripts/ds/)

Drop-in utilities — self-contained, no dependencies:

File	What it does
ds-form-submit.js	In-page Formspark state machine — form gives feedback in place, no redirect
ds-marquee.js	Smooth pause/resume on hover instead of hard animation-play-state snap
ds-proximity-hover.js	Dock-style proximity scaling — siblings scale by cursor distance
ds-snippet-copy.js	Delegated copy handler for every .ds-snippet on the page
ds-spotlight.js	Scroll-driven spotlight — marks the row nearest the viewport midpoint
ds-sticky-wipe.js	Drives --ds-wipe-p (0→1) from scroll position for the sticky-wipe template
verify-widows.mjs	CLI/CI widow + orphan linter for built HTML

Review mode

Point-and-click commenting overlay for design feedback. Only activates on ?review=1 — production pages pay 0 KB.

Full reference in scripts/ui-review-flow/README.md.

Conventions

• Single-file portability — CSS + JS inlined per page. No module resolution.
• CDN — Iconify, Three.js (particle dome only), Google Fonts (Geist 300/400/500/600 + JetBrains Mono 500/600).
• Dark + light surfaces — components ship --dark / --light (or --on-dark / --on-light) modifiers.
• Scroll reveal — .ds-section-heading and .ds-hero auto-fade on viewport entry. Honours prefers-reduced-motion.
• Hash routing — all DS pages live inside index.html via URL hash (e.g. #atoms/button, #templates/hero).

Brand

VideoDB. Data infrastructure for video, built for machines and agents. Cyber-minimalist, pure black + orange (--orange-500: #F24E1E), Geist + JetBrains Mono.

— Maintained by Design Team.