---
name: "snapcn"
description: "A developer-focused registry design system for Remotion motion video components featuring clean warm off-white canvas backgrounds, pill-shaped UI controls, high-contrast dark typography, and crisp code-first visual blocks."
version: "1.0"
colors:
  canvas: "#FAF9F6"
  ink: "#141414"
  ink-strong: "#000000"
  body: "#525252"
  primary: "#3072DB"
  primary-strong: "#1D58B5"
  on-primary: "#FFFFFF"
  surface-soft: "#EAE9E8"
  surface-muted: "#F2F1ED"
  hairline: "#D9D9D9"
  hairline-soft: "#E5E5E5"
  accent-sky: "#0369A1"
  accent-sky-foreground: "#FFFFFF"
  overlay: "rgba(0, 0, 0, 0.4)"
typography:
  heading-xl:
    fontFamily: "saans, sans-serif"
    fontSize: "88px"
    fontWeight: "400"
    lineHeight: "1.05"
    letterSpacing: "-0.03em"
  heading-lg:
    fontFamily: "saans, sans-serif"
    fontSize: "56px"
    fontWeight: "600"
    lineHeight: "1.1"
    letterSpacing: "-0.02em"
  body:
    fontFamily: "saans, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "0"
  code:
    fontFamily: "Geist Mono, monospace"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "1.4"
    letterSpacing: "0"
rounded:
  pill: "999px"
  button: "11.65px"
  card: "16px"
  input: "9.86px"
  badge: "999px"
spacing:
  section: "80px"
  container: "1200px"
  grid-gap: "24px"
  header-height: "56px"
  space-xs: "6px"
  space-sm: "12px"
  space-md: "24px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.pill}"
    padding: "0 24px"
    height: "44px"
  secondary-button:
    background: "{colors.canvas}"
    color: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.pill}"
    padding: "0 24px"
    height: "44px"
  header-nav:
    height: "56px"
    background: "transparent"
    borderBottom: "none"
  search-bar:
    background: "{colors.canvas}"
    border: "1px solid {colors.hairline}"
    borderRadius: "{rounded.pill}"
    color: "{colors.body}"
    height: "36px"
  badge:
    background: "{colors.accent-sky}"
    color: "{colors.accent-sky-foreground}"
    borderRadius: "{rounded.badge}"
    padding: "2px 6px"
    fontSize: "11px"
  video-card:
    background: "{colors.surface-muted}"
    borderRadius: "{rounded.card}"
    aspectRatio: "16/9"
  code-block:
    background: "{colors.ink}"
    color: "{colors.canvas}"
    borderRadius: "{rounded.card}"
    padding: "16px"
  text-input:
    background: "{colors.surface-soft}"
    color: "{colors.ink}"
    borderRadius: "{rounded.input}"
    padding: "10px 14px"
source: "https://snapcn.dev/"
captured: "2026-09-04T17:50:17.418Z"
---

# DESIGN.md: snapcn

## Source

- URL: https://snapcn.dev/
- Captured: 2026-09-04T17:50:17.418Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

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

## Design Summary

A modern, developer-centric aesthetic combining off-white canvas backgrounds (#FAF9F6), royal blue interactive callouts (#3072DB), ultra-rounded pill elements, and sleek video preview cards showcasing motion React components.

## Visual Language

- Warm off-white base canvas (#FAF9F6) contrasted against crisp dark text (#141414).
- Pill-shaped CTA buttons and navigation triggers using border radius 999px.
- Royal blue accent (#3072DB) reserved for primary actions, links, and main interactive highlights.
- Soft surface cards with subtle muted gray borders and smooth video embeds.

## Design Tokens

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

## Spacing And Layout

- Centered hero section with massive headline typography and dual pill-button CTA actions.
- Sticky top navigation bar with a fixed height of 56px containing search trigger, star count, and dark mode toggles.
- Responsive video component grid layout displaying 16:9 interactive video cards.

## Components

- Primary buttons use vibrant blue fill (#3072DB) with white text and pill shape.
- Secondary buttons use canvas background with subtle hairline border (#D9D9D9).
- Badges use small uppercase text inside rounded pills with high contrast background accents.

## Content Style

- Direct, concise technical terminology targeting React and motion design developers.
- Code snippet previews formatted in clean dark syntax boxes with line numbers.
- Action-oriented CTA copy like 'Make a video', 'Browse components', and CLI commands.

## Agent Build Instructions

- Use Tailwind CSS with custom font families 'saans' and 'Geist Mono'.
- Implement light theme with background #FAF9F6 as default background color.
- Create flexible pill button primitives with rounded-full utilities.
- Ensure code blocks render in dark neutral styling regardless of global theme mode.

## Evidence And Confidence

- Observed: Brand font 'saans' and background color #FAF9F6 extracted from DOM class annotations and branding data.
- Observed: Primary CTA color #3072DB captured from branding button styles.
- Observed: Button radii 11.648px and input radius 9.856px explicitly defined in component styling properties.
- Inferred: Header height fixed at 56px based on CSS Tailwind h-14 utilities in navigation HTML structure.

## Rerun Inputs

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

---

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