DESIGN.md

The design language of a site, on its own.

DESIGN.md describes a site's design language and nothing else. It holds no content and no assets from the source, which makes it the right file for borrowing the look of a site you don't own.

Every capture includes it. Export it on its own from the Export menu, or find it inside the Rebuild Package as a supporting reference.

What's inside

  1. Visual Theme & Atmosphere. The design's identity and signature visual moments.
  2. Color Palette & Roles. Every color with its value and role.
  3. Typography Rules. Families, the type hierarchy, and the system behind it.
  4. Component Stylings. Buttons, inputs, cards and navigation, with their states.
  5. Visual Composition & Assets. How the page is composed: layers, gradients and decorative treatment.
  6. Interaction & Motion. Transitions, easing, hover states and scroll behavior.
  7. Layout Principles. Grids, containers and spacing rhythm.
  8. Depth & Elevation. Shadows, radius and layering.
  9. Do's and Don'ts. Concrete rules that reference the captured values.
  10. Responsive Behavior. How layout, type and components adapt across screen sizes.

When to use it

  • You don't own the site. Use DESIGN.md to build something original in the same design language.
  • You already have a product. Drop DESIGN.md into your repo so your coding agent follows one design system instead of its own defaults.
  • You're rebuilding a site you own. Use the Rebuild Package. DESIGN.md comes along inside it as a supporting reference.

Sharing

Share on a capture copies a public read-only link that shows its DESIGN.md and screenshot. See Your captures.