# How to Extract Design DNA from a Screenshot Using Hallmark > Easily extract design DNA from screenshots with Hallmark. Get structured reports on color, typography, and motion. Learn how to run the hallmark study command now. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-07-16 --- **Run `hallmark study` followed by a screenshot path or public URL to generate a structured design DNA report that captures macro-structure, color palette, typography roles, and motion cues without copying pixel-exact content.** Extracting **design DNA** from existing interfaces is a core capability of the Hallmark skill in the Nutlope/hallmark repository. The `hallmark study` command acts as a diagnostic verb that analyzes visual references and distills them into reusable architectural patterns. This structured extraction enables developers to understand and replicate the *essence* of a design while maintaining strict boundaries against copying protected assets. ## The Five-Step Extraction Protocol The `hallmark study` command follows a rigorous protocol defined in [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md). This process decomposes any screenshot or webpage into actionable design tokens through five distinct phases. ### 1. Source Mode Detection The system first determines how to ingest the reference material. According to the implementation in [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md) (lines 11-14), inputs beginning with `http://` or `https://` trigger **URL mode**, while any other path is treated as an attached image in **image mode**. This bifurcation determines which extraction pipelines activate downstream. ### 2. Surface Extraction In this phase, the tool identifies **colour bands**, **hue distributions**, **accent footprints**, and distinctive visual treatments. For uploaded screenshots, this occurs via a vision pass that infers values directly from pixels. In URL mode, the system reads CSS `:root` custom properties when available, extracting the exact token definitions used by the original implementation (lines 14-21). ### 3. Type Extraction Typography analysis assigns **roles** (display, body, label) to text elements detected in the reference. When operating in URL mode, the system pulls exact font names from `@font-face` declarations, Google Fonts links, or hard-coded `font-family` CSS properties. Image mode relies on visual similarity to infer type classifications without accessing underlying font files (lines 22-44). ### 4. Structure Extraction The page architecture is matched against one of **21 named macro-structures** documented in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md). Each visible region receives an **archetype** classification plus its specific "knob" variations—parameterized adjustments that define spacing, alignment, and container behavior. This mapping occurs in lines 45-58 of the study reference file. ### 5. Motion and Rhythm Capture The final phase inspects motion libraries (`framer-motion`, `gsap`, etc.) and reveal patterns from scripts and CSS. Notably, **rhythm** remains a blind spot in URL mode because timing functions and animation curves cannot be reliably inferred from static analysis; the final report explicitly notes this limitation (lines 60-78). ## Output Generation and Schema All extracted values populate a strict **JSON schema** defined at the bottom of [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md). The system then renders this data into a concise, human-readable **diagnosis report** using either the image-mode or URL-mode template (lines 68-98). The report contains no pixel-exact content—only the distilled architectural DNA: - Colour tokens and accent relationships - Typography scale and role assignments - Macro-structure archetype with knob variations - Motion library detection and timing notes ## Locking DNA to a Portable Specification Once the diagnosis displays, you can persist the extracted DNA by responding "lock the DNA" when prompted. This action writes a [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file following the format specified in [`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md). The locked file contains: - Exact design tokens and font specifications - Provenance information linking back to the original reference - Reusable component archetypes Subsequent builds can reference this portable specification using the default Hallmark verb, enabling recreation of the same macro-structure and style with fresh content. ## Content Safety and Refusal Rules Before any extraction begins, Hallmark evaluates a set of **refusal rules** defined in [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md) (lines 75-88). The system automatically declines to process: - Paid template marketplaces - Signature designer work - Copyrighted imagery This ensures the tool extracts only architectural patterns and publicly observable design principles, never copying protected creative assets. ## Practical Usage Examples Extract DNA from a local screenshot: ```bash hallmark study ./screenshots/hero-mybrand.png ``` Extract DNA from a public URL to access the full URL-mode pipeline: ```bash hallmark study https://www.usehallmark.com/examples/tally/ ``` Lock the generated DNA to a portable spec after the diagnosis appears: ```bash # Respond "lock the DNA" when prompted # File written to ./design.md ``` Use the locked specification in a subsequent build: ```bash hallmark default --design-md ./design.md ``` ## Summary - **`hallmark study`** is the diagnostic verb that extracts design DNA from screenshots or URLs without copying pixels. - The five-step protocol (source detection, surface, type, structure, motion) is implemented in [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md). - **URL mode** provides deeper extraction (exact fonts, CSS tokens) compared to **image mode** (visual inference only). - The 21 macro-structures that define page architecture are cataloged in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md). - Locking the DNA generates a [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file per the specification in [`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md). - Built-in refusal rules prevent extraction from copyrighted or restricted sources. ## Frequently Asked Questions ### What is the difference between image mode and URL mode when extracting design DNA? **Image mode** processes uploaded screenshots through visual inference, detecting colors, layouts, and typography appearances without accessing underlying code. **URL mode** analyzes the live site's CSS and HTML, extracting exact values from `:root` custom properties, `@font-face` declarations, and linked font services. URL mode provides more precise token extraction but requires a publicly accessible webpage. ### How does Hallmark prevent copying protected assets during extraction? The system implements refusal rules evaluated before processing begins, as defined in [`skills/hallmark/references/study.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md) (lines 75-88). These rules automatically block paid template marketplaces, signature designer portfolios, and copyrighted imagery. The extraction captures only architectural patterns—the "grammar" of the design—never pixel-exact copies or proprietary creative assets. ### What file format stores the locked design DNA for portable reuse? When you respond "lock the DNA" after a study completes, Hallmark writes a [`design.md`](https://github.com/Nutlope/hallmark/blob/main/design.md) file following the schema defined in [`skills/hallmark/references/design-md.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/design-md.md). This portable specification contains the exact tokens, font names, macro-structure archetype, and provenance information, allowing the design DNA to be reused across different projects via the `hallmark default --design-md` command. ### Where are the 21 macro-structure definitions documented in the Hallmark repository? The complete catalog of macro-structures that `hallmark study` uses to classify page layouts resides in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md). This file defines the architectural patterns (such as "Bento Grid," "Editorial," or "Dashboard") that the study verb matches against during the structure extraction phase of the protocol.