# Swash — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://swashmotion.com/
Captured: 2026-10-23
CSS measured: 2026-10-23T18:02:21.373Z at 1440×1000 — https://swashmotion.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Swash presents a stark, highly dynamic landing page centered around kinetic typography and browser-based motion design. The canvas is predominantly pure black (color-1), allowing the vibrant neon green primary action color (color-9) and complex, scroll-triggered animations to dominate the visual hierarchy. The design relies heavily on its custom 'Stack Sans Headline' font for a technical, modern feel, complemented by 'Instrument Serif' italics for editorial flair. The page eschews traditional layout structures for a continuous, immersive scroll experience characterized by rotating 3D cylinders, horizontal image crawls, and a culminating animated ASCII-style dot matrix logo.

## Classification

- Industry: creative
- Site type: Landing
- Business model: Not identified
- Styles: minimal, bold, typographic, dark-mode-default, kinetic-motion-first
- Platform: Custom code
- Technology: Not identified

## Typography

- Display: Stack Sans Headline — weight 600; size 84px; line-height 84px; tracking -1px; Regular (90% role confidence, computed values)
- Heading: Stack Sans Headline — weight 700; size 32px; line-height 49.6px; tracking 0.2px; Regular (90% role confidence, computed values)
- Body: Stack Sans Headline — weight 400; size 16px; line-height 27.2px; tracking 0.2px; Regular (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #000000: color-1: computed rgb(0, 0, 0); AI role: Pure black rgb(0, 0, 0) used as the primary background for the body. (95% role confidence, computed values)
- Primary Action — primary action #24FF84: color-9: computed rgb(36, 255, 132); AI role: Vibrant neon green rgb(36, 255, 132) used for primary CTA buttons ('Try it free'). (95% role confidence, computed values)
- Text — text #E6E6E9: color-3: computed rgb(230, 230, 233); AI role: Light grey rgb(230, 230, 233) used for primary headings and important text. (90% role confidence, computed values)
- Muted Text — muted text #9A9AA3: color-4: computed rgb(154, 154, 163); AI role: Mid-grey rgb(154, 154, 163) with a high count (402), used for navigation links and secondary text. (90% role confidence, computed values)
- Surface — surface #0D0D10: color-25: computed rgb(13, 13, 16); AI role: Very dark grey rgb(13, 13, 16) used for backgrounds of some embedded UI components or cards. (75% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "27.4px",
    "lineHeight": "34.2px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h3",
        "text": "Your layout is already done. Don’t rebuild it",
        "top": 3182,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Your layout is already done.",
        "top": 3181,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Type stays type. Not layers, not pixels",
        "top": 3182,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "21.6px",
    "lineHeight": "33.5px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h3",
        "text": "Free",
        "top": 8334,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Pro",
        "top": 8334,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "700",
    "size": "32px",
    "lineHeight": "49.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Type that moves — motion graphics and animated text in your browser",
        "top": 500,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 38,
    "contexts": [
      {
        "tag": "a",
        "text": "Templates",
        "top": 19,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Sound",
        "top": 19,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Typefaces",
        "top": 19,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "66.2px",
    "lineHeight": "66.2px",
    "letterSpacing": "-1.3px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "$0",
        "top": 8382,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "$12 / month",
        "top": 8382,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "15px",
    "lineHeight": "23.3px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Get the Figma plugin",
        "top": 3327,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Tip Run it through a shader — Dither, Halftone or Gradient map make it your own.",
        "top": 6424,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "31px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Make kinetic typography in minutes, not hours",
        "top": 563,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "27.2px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 357,
    "contexts": [
      {
        "tag": "span",
        "text": "Swash",
        "top": 9205,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "is",
        "top": 9205,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "a",
        "top": 9205,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "50.4px",
    "lineHeight": "61.5px",
    "letterSpacing": "-0.8px",
    "traits": "Regular",
    "count": 146,
    "contexts": [
      {
        "tag": "span",
        "text": "S",
        "top": 2118,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "w",
        "top": 2118,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "a",
        "top": 2118,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Instrument Serif",
    "fontStack": "\"Instrument Serif\", Georgia, serif",
    "weight": "400",
    "size": "53.4px",
    "lineHeight": "65.2px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "a",
        "top": 2301,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "l",
        "top": 2301,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "r",
        "top": 2301,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "500",
    "size": "22px",
    "lineHeight": "28.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "span",
        "text": "What is Swash?",
        "top": 9124,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "How fast can I make something?",
        "top": 9197,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "What can I make besides animated text?",
        "top": 9270,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "84px",
    "lineHeight": "84px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "span",
        "text": "Made of type,",
        "top": 2893,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "not pixels",
        "top": 2993,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Every move",
        "top": 4069,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Instrument Serif",
    "fontStack": "\"Instrument Serif\", Georgia, serif",
    "weight": "400",
    "size": "89px",
    "lineHeight": "89px",
    "letterSpacing": "normal",
    "traits": "italic",
    "count": 6,
    "contexts": [
      {
        "tag": "em",
        "text": "type,",
        "top": 2879,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "sound",
        "top": 4151,
        "property": "font"
      },
      {
        "tag": "em",
        "text": "frame",
        "top": 5547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Try it free",
        "top": 20,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Try it free",
        "top": 462,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Try it free",
        "top": 8707,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "Galleries.",
        "top": 6339,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Widgets.",
        "top": 6339,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Backgrounds.",
        "top": 6339,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "25.2px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Try it free",
        "top": 644,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Sign in",
        "top": 626,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "24.8px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Product",
        "top": 10150,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Legal",
        "top": 10150,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Instrument Sans Variable",
    "fontStack": "\"Instrument Sans Variable\", system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Move",
        "top": 4994,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sound",
        "top": 5022,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "18.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Terminal + Pills",
        "top": 6285,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Northern Lights",
        "top": 6285,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "103.7px",
    "lineHeight": "98.5px",
    "letterSpacing": "-1.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Type that",
        "top": 312,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "/ month",
        "top": 8422,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Sound off",
        "top": 4891,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "18.6px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Tip",
        "top": 6425,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Stack Sans Headline",
    "fontStack": "\"Stack Sans Headline\", \"Helvetica Neue\", Arial, system-ui, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "21.7px",
    "letterSpacing": "0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "a",
        "text": "Privacy",
        "top": 927,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Terms",
        "top": 927,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 12,
    "contexts": [
      {
        "tag": "body",
        "text": "Templates Sound Typefaces Pricing Changelog Sign in Try it freeOpen app Templates Sound Typefaces Pr",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "svg",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 18,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#090909",
    "alpha": 1,
    "cssValue": "rgb(9, 9, 9)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Sound offSound on Move Sound",
        "top": 4401,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#E6E6E9",
    "alpha": 1,
    "cssValue": "rgb(230, 230, 233)",
    "count": 70,
    "contexts": [
      {
        "tag": "h1",
        "text": "Type that moves — motion graphics and animated text in your browser",
        "top": 500,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Type that",
        "top": 312,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Make kinetic typography in minutes, not hours",
        "top": 563,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#9A9AA3",
    "alpha": 1,
    "cssValue": "rgb(154, 154, 163)",
    "count": 402,
    "contexts": [
      {
        "tag": "a",
        "text": "Templates",
        "top": 19,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Templates",
        "top": 19,
        "property": "::after-background"
      },
      {
        "tag": "h3",
        "text": "Your layout is already done. Don’t rebuild it",
        "top": 3182,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#08080A",
    "alpha": 1,
    "cssValue": "rgb(8, 8, 10)",
    "count": 1,
    "contexts": [
      {
        "tag": "aside",
        "text": "Templates Sound Typefaces Pricing Changelog Try it freeOpen app Sign in Privacy · Terms",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F6F6FA",
    "alpha": 0.2196078431372549,
    "cssValue": "rgba(248, 248, 249, 0.22)",
    "count": 158,
    "contexts": [
      {
        "tag": "span",
        "text": "S",
        "top": 2118,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "header",
        "text": "Templates Sound Typefaces Pricing Changelog Sign in Try it freeOpen app",
        "top": -3,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#1A1A1A",
    "alpha": 1,
    "cssValue": "rgb(26, 26, 26)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Move Sound",
        "top": 4980,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#24FF84",
    "alpha": 1,
    "cssValue": "rgb(36, 255, 132)",
    "count": 36,
    "contexts": [
      {
        "tag": "a",
        "text": "Try it freeOpen app",
        "top": 11,
        "property": "control-background"
      },
      {
        "tag": "a",
        "text": "Try it freeOpen app",
        "top": 11,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "moves",
        "top": 419,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#232323",
    "alpha": 1,
    "cssValue": "rgb(35, 35, 35)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4992,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#041209",
    "alpha": 1,
    "cssValue": "rgb(4, 18, 9)",
    "count": 5,
    "contexts": [
      {
        "tag": "span",
        "text": "Try it free",
        "top": 20,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Go Pro",
        "top": 8689,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 49,
    "contexts": [
      {
        "tag": "header",
        "text": "Templates Sound Typefaces Pricing Changelog Sign in Try it freeOpen app",
        "top": -3,
        "property": "border"
      },
      {
        "tag": "nav",
        "text": "Templates Sound Typefaces Pricing Changelog",
        "top": 11,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Sign in Try it freeOpen app",
        "top": 11,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#2CE380",
    "alpha": 0.1803921568627451,
    "cssValue": "rgba(46, 226, 126, 0.18)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4995,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#FFB454",
    "alpha": 0.8,
    "cssValue": "rgba(255, 180, 84, 0.8)",
    "count": 3,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5023,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Terminal + Pills",
        "top": 6285,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#000000",
    "alpha": 0.5490196078431373,
    "cssValue": "rgba(0, 0, 0, 0.55)",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "Terminal + Pills",
        "top": 6285,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#141415",
    "alpha": 0.7019607843137254,
    "cssValue": "rgba(20, 20, 22, 0.7)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Sound offSound on",
        "top": 4882,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#FFB454",
    "alpha": 1,
    "cssValue": "rgb(255, 180, 84)",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "Sound",
        "top": 5022,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "",
        "top": 5023,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#2EE17E",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(46, 226, 126, 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4995,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#FFB453",
    "alpha": 0.2784313725490196,
    "cssValue": "rgba(255, 180, 84, 0.28)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 5023,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#24FF84",
    "alpha": 0.8,
    "cssValue": "rgba(36, 255, 132, 0.8)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "Pro $12 / month For the weeks when type is the whole job. Everything in Free The premium template an",
        "top": 8301,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#99999D",
    "alpha": 1,
    "cssValue": "rgb(153, 153, 157)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "Move",
        "top": 4994,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#FFFFFF",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(255, 255, 255, 0.12)",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Try it freeOpen app",
        "top": 8689,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#FFFFFF",
    "alpha": 0.1411764705882353,
    "cssValue": "rgba(255, 255, 255, 0.14)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "Sound offSound on",
        "top": 4882,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#0D0D10",
    "alpha": 1,
    "cssValue": "rgb(13, 13, 16)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 416,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#2EE27E",
    "alpha": 1,
    "cssValue": "rgb(46, 226, 126)",
    "count": 1,
    "contexts": [
      {
        "tag": "span",
        "text": "",
        "top": 4988,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Relies heavily on large, open vertical spacing between major animated sections to allow transitions to breathe. Internal component spacing is more structured, likely using an 8px/16px baseline given the font sizes.
- Corner style: Combination of sharp corners on the main canvas and rounded corners on product UI mockups and inner cards.
- Radius: Visible border-radius on elements like the 'Try it free' pill buttons and the embedded UI panels (e.g., the terminal widget and pricing cards).
- Borders: Primarily borderless layout, utilizing subtle translucent white borders (rgba(255, 255, 255, 0.1)) for structural division like the header and FAQ items.
- Buttons: Primary CTAs are fully rounded 'pill' shapes with solid neon green fills. Secondary controls in UI mockups appear as translucent dark overlays.
- Content width: Centralized, relatively narrow main text column for readability, while animated visual elements (like the image cylinder and galleries) bleed to the edges or occupy a wider viewport.
- Density: Low density in terms of static text, high density in terms of visual motion and overlapping graphic elements.
- Evidence: Observed from the full-page layout, the contrast between the narrow text blocks and the wide, immersive image galleries, and the consistent use of pill-shaped green buttons.

## Sections

Gallery section count: 9. Each entry corresponds to one gallery capture.

1. **Features — Swash Features** (Home)
   Reusable feature composition from Home, organized around “Swash Features”.
   Capture: 1440×773px; page bounds 2000–2773px of 11199px; source section ID: `4583a73f-696a-43c5-a908-0beddcee8427`; image: https://media.designdetails.io/library/b79c1faa83fb2a50e30714ecff416bd7705305019295a22b97384873ea6013bc/section_crop-4583a73f-2026-10-23T18-02-31-830Z.webp
   SECTION.md v3.2: `4583a73f-696a-43c5-a908-0beddcee8427` (deterministic evidence; editorial review pending)
2. **Footer — Swash Footer** (Home)
   Closing footer and call-to-action from Home, organized around “Swash Footer”.
   Capture: 1440×498px; page bounds 10157–10655px of 11199px; source section ID: `9c66cac4-c639-4729-997f-7c682dff41cb`; image: https://media.designdetails.io/library/a743c2bf7b95a96369f5c419012852e481bf282b4d2aa09183a848cd6c05c41b/section_crop-9c66cac4-2026-10-23T18-02-39-317Z.webp
   SECTION.md v3.2: `9c66cac4-c639-4729-997f-7c682dff41cb` (deterministic evidence; editorial review pending)
3. **Hero — Type that moves hero** (Home)
   AI suggestion (93% confidence): Complete, substantial opening hero with a bold kinetic-type headline, concise product promise, primary and secondary actions, and a distinctive field of animated-design examples. The following text-led section begins around 720 and is cut off.
   Capture: 1440×846px; page bounds 72–918px of 11199px; source section ID: `8e257c1f-9a35-4460-86e9-5fd184f4c9b5`; image: https://media.designdetails.io/library/640905474b762962530c1b2020cfcf394f283e02756778ce44540257abc0d48e/section-manual-8e257c1f-9a35-4460-86e9-5fd184f4c9b5-1792829088720.webp
   SECTION.md v3.2: `8e257c1f-9a35-4460-86e9-5fd184f4c9b5` (deterministic evidence; editorial review pending)
4. **Feature Grid — Made of type, not pixels** (Home)
   AI suggestion (98% confidence): Complete three-card feature grid with a strong typographic heading and distinct visuals demonstrating layout import, vector type, and 3D text.
   Capture: 1440×792px; page bounds 2981–3773px of 11199px; source section ID: `c1122372-56ee-40a4-b3d7-170feba1cd2f`; image: https://media.designdetails.io/library/59c897f2261acc57a9b30cf4ffab5c4b168761f4caa87b798e1ce96ae0ce63bc/c1122372-56ee-40a4-b3d7-170feba1cd2f.webp
   SECTION.md v3.2: `c1122372-56ee-40a4-b3d7-170feba1cd2f` (deterministic evidence; editorial review pending)
5. **Product Demo — Every move makes a sound** (Home)
   AI suggestion (97% confidence): Self-contained product demonstration with headline, explanatory copy, and a substantial editor interface showing synchronized text animation and sound controls.
   Capture: 1440×1122px; page bounds 4110–5232px of 11199px; source section ID: `b609b120-0594-4440-9512-11b1a2d8af9f`; image: https://media.designdetails.io/library/59413ed7e9a749848bde24600c0fcc0760476701e26fe5000f55335115094a0a/section-manual-b609b120-0594-4440-9512-11b1a2d8af9f-1792829097905.webp
   SECTION.md v3.2: `b609b120-0594-4440-9512-11b1a2d8af9f` (deterministic evidence; editorial review pending)
6. **Feature Grid — Build the whole frame** (Home)
   AI suggestion (98% confidence): Complete three-column feature grid with a distinctive mixed-type headline, supporting copy, large visual demonstrations, captions, and a practical tip.
   Capture: 1440×1093px; page bounds 5496–6589px of 11199px; source section ID: `c72f2681-9aa1-41de-acc2-667889d5946c`; image: https://media.designdetails.io/library/4abe32d68eecf81c3236d5cb31e68ef4e6c3bfb0a5dbcac90174704a86071737/section-manual-c72f2681-9aa1-41de-acc2-667889d5946c-1792829104051.webp
   SECTION.md v3.2: `c72f2681-9aa1-41de-acc2-667889d5946c` (deterministic evidence; editorial review pending)
7. **Gallery — Learn it by taking one apart** (Home)
   AI suggestion (90% confidence): Self-contained template-browsing section with headline, explanatory copy, link, and a visually varied horizontal gallery of example projects.
   Capture: 1440×892px; page bounds 6906–7798px of 11199px; source section ID: `17e46a28-8f8a-4868-8ba3-ad1c946c9c27`; image: https://media.designdetails.io/library/ac0e92af351fb94c32effeb0a9acd79016c909a95232fe291218ffed8599b962/section-manual-17e46a28-8f8a-4868-8ba3-ad1c946c9c27-1792829109975.webp
   SECTION.md v3.2: `17e46a28-8f8a-4868-8ba3-ad1c946c9c27` (deterministic evidence; editorial review pending)
8. **Pricing — Free and Pro Pricing** (Home)
   AI suggestion (99% confidence): Complete pricing block with a clear headline, supporting copy, two plan cards, feature lists, prices, and conversion buttons.
   Capture: 1440×880px; page bounds 8071–8951px of 11199px; source section ID: `b298b733-78cf-4397-9f18-83e680b246f5`; image: https://media.designdetails.io/library/1d49fb52d836a54bc7d98a7c4c60fd1a0034fdfa7a63044854679d8a75a54154/section-manual-b298b733-78cf-4397-9f18-83e680b246f5-1792829127958.webp
   SECTION.md v3.2: `b298b733-78cf-4397-9f18-83e680b246f5` (deterministic evidence; editorial review pending)
9. **FAQ — Product FAQ Accordion** (Home)
   AI suggestion (96% confidence): Complete, self-contained accordion containing nine product, compatibility, account, and export questions with consistent expandable controls.
   Capture: 1440×675px; page bounds 9177–9852px of 11199px; source section ID: `d89a3c14-b931-4a65-9e22-abc33fface86`; image: https://media.designdetails.io/library/7ce762ccf0f62eea7c9655947d3cd78d2234fa41facb5bd4a917c1381498f739/d89a3c14-b931-4a65-9e22-abc33fface86.webp
   SECTION.md v3.2: `d89a3c14-b931-4a65-9e22-abc33fface86` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f02177d54cbf576e4eece74cb5f209efa2775e7254ea6a0e96fe70e56b1dc6c3/desktop_full-e92c59cc-2026-10-23T18-02-21-386Z.webp
- Mobile screenshot: https://media.designdetails.io/library/db4c257898d88333a02aa63de0a3448ac07595c4a048cc58778e3c933015e8fa/mobile_full-e92c59cc-2026-10-23T18-03-07-578Z.webp
- Open Graph image: https://media.designdetails.io/library/817c89e991df45798ee6dcdd253e18a0948f3c339beaa3ef0d4e187b17f075ed/og_image-e92c59cc-2026-10-23T18-02-29-476Z.webp
- Full-page video: https://media.designdetails.io/library/2d21f2c350acaebf43016c4ea2bc397d624a30c5764744fb3eadbb3418f1df13/motion-1792780846163.mp4
- Video poster: https://media.designdetails.io/library/99573225c8e2046805d1a084bbd0ffd282bb840097e224a446ea584a9651557a/motion-poster-1792780846163.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Feature Card
- Product UI
- Gallery
- Pricing Table
- FAQ Accordion
- Footer
- Primary Button
- Interactive Scroll Cylinder
- ASCII/Dot Matrix Logo Animation

## Quality rubric

Overall: 63.8/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Swash commits fully to demonstrating a kinetic-typography product through its own motion — a rotating image cylinder, morphing glyphs, a text-wrapped sphere, and an animated dot-matrix wordmark finale — and backs these claims with real product UI (Figma plugin panel, animator timeline) rather than stock visuals. That self-referential demonstration strategy and the semantic green/amber color-coding in the animator mockup are the site's genuine design ideas. But the surrounding scaffolding (pill buttons, marquee gallery, FAQ accordion, pricing cards) is conventional SaaS vocabulary, the display type sizes don't resolve into a visible scale, and the color system beyond black/grey/green is thin. The result is a good, motion-forward execution of its chosen idiom rather than a fully systemic, hard-to-substitute landmark.

- Typography (15%): 60 — A deliberate two-voice system (grotesque 'Stack Sans Headline' for structure, italic 'Instrument Serif' for editorial emphasis) is applied consistently across hero, feature cards, pricing and FAQ, giving clear role separation between display, heading, body and caption text. However the measured font sizes are highly ad-hoc rather than a disciplined scale: 21.6px, 22px, 27.4px, 32px, 50.4px, 53.4px, 66.2px, 84px, 89px and 103.7px all appear with very low counts (1-9 occurrences), suggesting each section was tuned individually rather than drawn from a shared type ramp. This produces visual variety but undercuts systemic rigor.
- Color (10%): 65 — The palette is tightly restricted to a pure-black canvas with light-grey text hierarchy and a single neon-green primary action color, which is then reused meaningfully as a semantic marker (green ties to 'Move' animator state, matching the brand mark), with a secondary amber used specifically for 'Sound' state. This functional color-coding is a legitimate system rather than decoration. The palette is otherwise very narrow and low-risk for a motion-heavy product, and the amber/green pairing in the animator UI is the only real chromatic event on an otherwise monochrome page.
- Layout (20%): 64 — The page alternates a narrow centered text column with full-bleed immersive visual zones (the rotating image cylinder, horizontal galleries), and this contrast is used consistently: feature triptych cards, two-tier pricing cards, and an accordion FAQ all share consistent spacing and corner treatment. The structure supports the motion-first narrative reasonably well, but the overall rhythm is dictated by whatever each animated set-piece needs rather than a visible grid, and some sections (e.g., the sound/animator mockup versus the gallery triptych) sit at very different widths and alignments without a unifying module.
- Motion (20%): 72 — Motion is the clear spine of the site and is used to self-demonstrate the product: a scroll-tied 3D image cylinder in the hero, a morphing letterform demo ('aaa/eee'), a continuously rotating text-wrapped sphere, an interactive animator/timeline UI mockup with scrubbers, a continuous horizontal gallery crawl, and a culminating animated ASCII/dot-matrix logo, with the hero cylinder shown reversing on scroll-up. This is a genuinely broad, multi-section motion system rather than a single hero effect, which is rare. However, several individual techniques (horizontal marquee crawl, fade/highlight text reveals, accordion disclosure) are standard web patterns, and smoothness/performance cannot be verified from the evidence, so the system reads as ambitious and extensive rather than technically landmark.
- Originality (25%): 58 — The strongest original idea is structural: the landing page demonstrates a kinetic-typography tool by animating its own copy (morphing glyphs, a text-wrapped rotating sphere, a scroll-synced image cylinder, and a dot-matrix logo payoff), which is a legitimate 'show don't tell' strategy tied to the product's actual value proposition. But most of the surrounding scaffolding — pill CTA buttons, dark-mode SaaS palette, horizontal marquee galleries, FAQ accordion, two-tier pricing cards — is standard contemporary product-marketing vocabulary seen across many motion/design-tool sites. The site is original in degree of motion commitment, not in the individual component ideas.
- Content (10%): 66 — Content integration is handled well in that the marketing narrative is substantiated with actual product artifacts — a Figma plugin panel screenshot, an animator/timeline control panel, and template thumbnails — rather than purely decorative imagery, which lets the copy's claims ('Your layout is already done', 'Every move makes a sound') be checked against a believable UI. The FAQ and pricing content is plainly structured and legible. The galleries/widgets/backgrounds section pairs explanatory copy directly with representative visual swatches for each category.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A black canvas lets a tilted 3D wall of colourful posters and clips float behind huge white type, showing the range of output at a glance before you touch the tool. Further down, plain black cards with short two line headings pace out each feature so a long product page still reads in quick, even bites.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.