# Feature Card 03 - Snapshot

Schema: Design Details SECTION.md v3.2
Website: LocalCan
Source: https://www.localcan.com/
Source section IDs: gap-cc2bb480-3066-4004
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A step number, bold heading and muted subheading sit above a centered browser mockup, so the reading order is clear and the product shot gets the focus.
- The mockup's access-control panel, status and policy fields match the copy about sharing and locking links, so the visual proves the claim.
- A restrained warm-grey canvas with dark text, a muted subheading and a single green accent keeps the section calm and lets the interface carry the colour.

What a screenshot can't show:
- Between about 12 and 14 seconds a cursor moves to the right panel and clicks 'Choose Folder...', a single small demo action.
- Font sizes, letter spacing and spacing values were not measured, so the type scale and padding can't be read from this.

Borrow: Put a short numbered header above a product mockup whose content illustrates the headline, then add one small cursor action to show the feature in use.
Leave alone: Don't copy the vertical-line toolbar strip with floating pills overlapping the mockup, or the LocalCan green-on-stone palette and Inter with Cascadia Mono pairing; use your own overlay idea and a neutral free sans.

## Classification

- Type: feature-card
- Layout: Header text above a centered browser mockup with a specialized overlay UI component.
- Styles: minimal, soft
- Confidence: 95%

## Purpose and structure

Third feature showcase presenting a web browser and application interface mockup partially covered by a stylized toolbar block.

Visual signature: Browser window mockup intersected by an abstract toolbar strip with vertical lines and floating pill buttons.

## Components

- step number
- heading
- subheading
- browser mockup
- floating toolbar overlay

## Typography

- Display: cascadiaMono — 50px 350
- Heading: inter — 52px 600
- Body: inter — 16px 400
- Mono: cascadiaMono — 14px 350

## Functional palette

- Text: text #1C1917
- Canvas: canvas #F5F5F4
- Surface: surface #0B1D0B
- Muted-Text: muted text #57534D
- Border: border #E7E5E4
- Accent: accent #00A63E

## Motion evidence

- 12.0–14.0s — A third mockup shows an interface. A cursor moves to the right panel and clicks on 'Choose Folder...'. (95% confidence)

## Section quality

Overall: 61.70/100 (Good)
Scored coverage: 100%

- Typography: 62 — Clear hierarchy with step number, bold heading, and muted subheading using the documented Inter/Cascadia Mono system; legible contrast but nothing beyond a standard feature-header pattern. Next tier: Typography alone repeats the site's generic heading/body pairing without any distinctive treatment specific to this section.
- Composition: 68 — Centered browser mockup with a nested panel for access-control UI is well organized, but the overlapping toolbar strip with vertical lines cutting across the mockup and CTA buttons feels like an unresolved collage rather than an intentional layered composition. Next tier: The abstract toolbar overlay intersects the mockup and buttons in a way that reads as an unfinished transition state rather than a deliberate compositional device, undermining clarity.
- Motion: 58 — Gemini confirms a cursor moving to a right panel and clicking 'Choose Folder...' between 12–14s, a small functional micro-interaction demonstrating the UI, but it's a single modest action without more elaborate choreography described. Next tier: Only one brief, functional click interaction is evidenced; no additional timestamped transitions (e.g., panel reveal, toolbar animation) are supplied to show a richer motion sequence.
- Content: 60 — The mockup content (access control panel, status, policy) directly supports the copy about sharing/locking links, giving decent narrative-to-visual alignment. Next tier: The content integration is competent but generic SaaS dashboard mockup; nothing in the visible UI elevates it past a standard illustrative screenshot.
- Originality: 55 — The vertical-line toolbar overlay is a mildly distinctive visual device, but overall the section follows a familiar 'numbered step + browser mockup' template common across SaaS marketing sites. Next tier: The toolbar overlay needs clearer purpose and refined execution to read as a genuinely novel device rather than a stylistic flourish layered on a conventional mockup.
- Adaptability: 65 — Structure (step number, heading, subheading, mockup) is clearly separable from the specific UI skin and copy, and the mockup/toolbar overlay could be swapped for other feature demonstrations with the same framework. Next tier: The floating toolbar overlay seems tied to a specific asset/graphic, reducing clarity on how it generalizes to other content without more deterministic detail on its behavior.

Strengths:
- Clear step-numbered heading hierarchy consistent with the site's type system
- Mockup content directly illustrates the described feature (access control, sharing)
- Nested panel UI adds a believable layer of product realism

Weaknesses:
- Toolbar overlay with vertical lines visually collides with the mockup and CTA buttons, creating a messy, unresolved overlap
- Overall template (step number + heading + browser mockup) is generic and widely used
- Only one small motion moment is evidenced, limiting judgment of overall animation quality
- Typography treatment does not differentiate this section stylistically

Why it does not reach the next tier: The section is organized and functional but relies on a conventional feature-step layout; the one differentiating device (vertical-line toolbar overlay) is poorly resolved, overlapping the CTA and mockup in a way that reads as unfinished rather than intentional, preventing it from feeling memorable or masterfully composed.

## Adaptation guidance

- Effort: Medium
- Guidance: Keep the heading/subheading/step-number scaffold and mockup container, but rebuild the overlay element with clearer compositional intent (e.g., proper z-index layering, spacing) rather than reusing the exact graphic, since its overlap with the CTA currently reads as a visual error.

What transfers:
- Step number + heading + subheading header block
- Centered browser mockup container pattern
- Nested panel UI showing contextual settings

Dependencies:
- Specific mockup artwork (browser chrome, file tree, access control panel)
- Vertical-line toolbar overlay graphic and its exact positioning

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No deterministic data on overlay animation duration or easing
- Only one timestamped motion moment supplied, so overall motion richness is unknown
- Cannot confirm if the overlay-CTA overlap is an intentional transition frame or a genuine rendering issue

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: feature-card
- Structure: centered single-column
- Layout: Header text above a centered browser mockup with a specialized overlay UI component.
- Styles: minimal, soft
- Components: step number, heading, subheading, browser mockup, floating toolbar overlay
- Purpose: Third feature showcase presenting a web browser and application interface mockup partially covered by a stylized toolbar block.
- Visual signature: Browser window mockup intersected by an abstract toolbar strip with vertical lines and floating pill buttons.
- Place on the page: 6 of 16, after Feature collection (`localcan-com:C03`), before Feature collection (`localcan-com:C04`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "50px",
      "family": "cascadiaMono",
      "source": "computed",
      "traits": "Regular",
      "weight": "350",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Cascadia Mono, 50px, used for the main H1 headline in the hero section.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "50px",
      "letterSpacing": "-2.5px"
    },
    {
      "role": "heading",
      "size": "52px",
      "family": "inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "600",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Inter, 52px, weight 600, used for primary section headings like 'Not just Public URLs' and 'Frequently asked questions'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "52px",
      "letterSpacing": "-2.6px"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Inter, 16px, weight 400, used extensively for descriptive paragraphs and lists.",
      "sampleId": "font-9",
      "confidence": 0.95,
      "lineHeight": "24px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "14px",
      "family": "cascadiaMono",
      "source": "computed",
      "traits": "Regular",
      "weight": "350",
      "evidence": "font-12: computed CSS at 1440×1000; AI role: Cascadia Mono, 14px, weight 350, used for code snippets, CLI commands, and technical UI elements.",
      "sampleId": "font-12",
      "confidence": 0.95,
      "lineHeight": "20px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [],
  "functionalPalette": [
    {
      "hex": "#1C1917",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed lab(9.03835 1.15298 1.92955); AI role: Near black #1C1917 used for primary typography across light-themed sections.",
      "sampleId": "color-4",
      "confidence": 0.95
    },
    {
      "hex": "#F5F5F4",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-7: computed lab(96.5286 -0.0991821 0.364268); AI role: Off-white #F5F5F4 used as the primary background for several feature and pricing sections.",
      "sampleId": "color-7",
      "confidence": 0.9
    },
    {
      "hex": "#0B1D0B",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-6: computed rgb(11, 29, 11); AI role: Dark green #0B1D0B used as the background for the hero and the footer CTA section.",
      "sampleId": "color-6",
      "confidence": 0.85
    },
    {
      "hex": "#57534D",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-9: computed lab(35.5168 1.08604 4.07829); AI role: Grey #57534D used for secondary text, metadata, and 'Trusted by' headers.",
      "sampleId": "color-9",
      "confidence": 0.85
    },
    {
      "hex": "#E7E5E4",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-2: computed lab(91.055 0.663072 0.865579); AI role: Light grey #E7E5E4 used for structural borders, card outlines, and dividers in light sections.",
      "sampleId": "color-2",
      "confidence": 0.85
    },
    {
      "hex": "#00A63E",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-26: computed lab(59.0978 -58.6621 41.2579); AI role: Bright green #00A63E used for checkmarks and active states to draw attention.",
      "sampleId": "color-26",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Small border-radius (likely 4-8px) for buttons, inputs, and small badges. Medium to large border-radius (likely 12-24px) for cards, feature containers, and the large UI mockups.",
  "density": "Moderate density. While there is a lot of technical information, the use of structured grids, UI mockups, and sufficient whitespace prevents the page from feeling cluttered.",
  "evidence": "Observed from the padding around the main feature blocks, the rounded edges of the UI window graphics and pricing cards, and the structured outline of the hero section.",
  "borderStyle": "Thin, solid 1px borders are used heavily for outlining structural sections (like the hero grid), cards, and separating list items.",
  "buttonStyle": "Buttons are typically solid with rounded corners, often featuring a subtle outline or a contrasting background color depending on the theme. Many include an appended keyboard shortcut key.",
  "cornerStyle": "Consistent use of rounded corners across the UI.",
  "contentWidth": "A fixed max-width layout centers the content, maintaining readability on large desktop screens.",
  "spacingRhythm": "Generous vertical padding distinguishes major page sections. Content is structured within a centered max-width container, using consistent gaps between grid items and text blocks."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

1. **interaction** — A third mockup shows an interface. A cursor moves to the right panel and clicks on 'Choose Folder...'. (12s–14s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: medium
- What transfers: Step number + heading + subheading header block; Centered browser mockup container pattern; Nested panel UI showing contextual settings
- Dependencies: Specific mockup artwork (browser chrome, file tree, access control panel); Vertical-line toolbar overlay graphic and its exact positioning
- Guidance: Keep the heading/subheading/step-number scaffold and mockup container, but rebuild the overlay element with clearer compositional intent (e.g., proper z-index layering, spacing) rather than reusing the exact graphic, since its overlap with the CTA currently reads as a visual error.

### Evidence readiness

- Coverage: 4/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Feature Card 03 - Snapshot”.

Purpose: Third feature showcase presenting a web browser and application interface mockup partially covered by a stylized toolbar block.

Structure: centered single-column. Source layout label: Header text above a centered browser mockup with a specialized overlay UI component.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Browser window mockup intersected by an abstract toolbar strip with vertical lines and floating pill buttons.

Components: step number, heading, subheading, browser mockup, floating toolbar overlay.

Style direction: minimal, soft.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"50px","family":"cascadiaMono","source":"computed","traits":"Regular","weight":"350","evidence":"font-6: computed CSS at 1440×1000; AI role: Cascadia Mono, 50px, used for the main H1 headline in the hero section.","sampleId":"font-6","confidence":0.95,"lineHeight":"50px","letterSpacing":"-2.5px"} {"role":"heading","size":"52px","family":"inter","source":"computed","traits":"Regular","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: Inter, 52px, weight 600, used for primary section headings like 'Not just Public URLs' and 'Frequently asked questions'.","sampleId":"font-4","confidence":0.95,"lineHeight":"52px","letterSpacing":"-2.6px"} {"role":"body","size":"16px","family":"inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: Inter, 16px, weight 400, used extensively for descriptive paragraphs and lists.","sampleId":"font-9","confidence":0.95,"lineHeight":"24px","letterSpacing":"normal"} {"role":"mono","size":"14px","family":"cascadiaMono","source":"computed","traits":"Regular","weight":"350","evidence":"font-12: computed CSS at 1440×1000; AI role: Cascadia Mono, 14px, weight 350, used for code snippets, CLI commands, and technical UI elements.","sampleId":"font-12","confidence":0.95,"lineHeight":"20px","letterSpacing":"normal"}

Color evidence: {"hex":"#1C1917","name":"text","role":"text","source":"computed","evidence":"color-4: computed lab(9.03835 1.15298 1.92955); AI role: Near black #1C1917 used for primary typography across light-themed sections.","sampleId":"color-4","confidence":0.95} {"hex":"#F5F5F4","name":"canvas","role":"canvas","source":"computed","evidence":"color-7: computed lab(96.5286 -0.0991821 0.364268); AI role: Off-white #F5F5F4 used as the primary background for several feature and pricing sections.","sampleId":"color-7","confidence":0.9} {"hex":"#0B1D0B","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(11, 29, 11); AI role: Dark green #0B1D0B used as the background for the hero and the footer CTA section.","sampleId":"color-6","confidence":0.85} {"hex":"#57534D","name":"muted text","role":"muted-text","source":"computed","evidence":"color-9: computed lab(35.5168 1.08604 4.07829); AI role: Grey #57534D used for secondary text, metadata, and 'Trusted by' headers.","sampleId":"color-9","confidence":0.85} {"hex":"#E7E5E4","name":"border","role":"border","source":"computed","evidence":"color-2: computed lab(91.055 0.663072 0.865579); AI role: Light grey #E7E5E4 used for structural borders, card outlines, and dividers in light sections.","sampleId":"color-2","confidence":0.85} {"hex":"#00A63E","name":"accent","role":"accent","source":"computed","evidence":"color-26: computed lab(59.0978 -58.6621 41.2579); AI role: Bright green #00A63E used for checkmarks and active states to draw attention.","sampleId":"color-26","confidence":0.8}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Motion evidence: interaction: A third mockup shows an interface. A cursor moves to the right panel and clicks on 'Choose Folder...'. (95% confidence)

Transfer these principles: Step number + heading + subheading header block; Centered browser mockup container pattern; Nested panel UI showing contextual settings.

Dependencies: Specific mockup artwork (browser chrome, file tree, access control panel); Vertical-line toolbar overlay graphic and its exact positioning.

Adaptation guidance: Keep the heading/subheading/step-number scaffold and mockup container, but rebuild the overlay element with clearer compositional intent (e.g., proper z-index layering, spacing) rather than reusing the exact graphic, since its overlap with the CTA currently reads as a visual error.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.