# Founder letter and stats

Schema: Design Details SECTION.md v3.2
Website: Twohands
Source: https://www.twohands.studio/
Source section IDs: gap-8fe933d0-11429-12676
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The envelope is the one heavy black shape on a pale dotted-grid page, so the eye lands there first and the page needs no other decoration.
- The letter slides out of the envelope, so the founder's message reads as a real letter and the idea is understood without explanation.
- Large bold stat numbers sit over small gray labels in three even columns beneath the letter, giving quick proof and a clear next step into the two buttons.

What a screenshot can't show:
- The letter slides up out of the envelope over about 2 seconds (36–38s in the recording), which a still image cannot show.
- No font sizes, spacing or easing were measured, so those values are unknown.

Borrow: Turn the section's central idea into one literal object that animates once, then put plain proof points directly beneath it.
Leave alone: Do not copy the black envelope and letter illustration or the dotted-grid backdrop; draw your own metaphor object and use a different surface pattern.

## Classification

- Type: founder
- Layout: Centered illustration over a three-column statistics row
- Styles: minimal, illustrative
- Confidence: 95%

## Purpose and structure

A minimal, light-themed section featuring a stylized black envelope. On scroll, a letter slides out of the envelope. Below are three large statistics.

Visual signature: A stark contrast between the large black envelope graphic and the very clean, white, grid-patterned background, anchored by large numbers.

## Components

- envelope illustration
- letter graphic
- statistics
- buttons

## Typography

- Display: Geist — 64px 500
- Heading: Geist — 48px 500
- Body: Geist — 18px 500

## Functional palette

- Canvas: canvas #131314
- Text: text #FFFFFF
- Surface: surface #1E1E1F

## Motion evidence

- 36.0–38.0s — A letter containing text slides vertically upwards out of a black envelope graphic. (95% confidence)

## Section quality

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

- Typography: 58 — Simple, legible hierarchy: bold 'Dear Founders' salutation, body copy in a readable sans, and large bold stat numbers over small gray labels. Clean but conventional; no distinctive type pairing or treatment beyond scale contrast. Next tier: Needs more distinctive type choices or expressive scale/weight variation beyond generic display-over-label pattern to move past competent.
- Composition: 66 — Centered envelope illustration anchors the page with a clear vertical flow into a three-column stat row and dual CTAs below; the dotted grid background and symmetrical layout give the section a controlled, intentional feel. Generous whitespace reinforces focus on the envelope/letter conceit. Next tier: Layout is a fairly standard centered-stack pattern (illustration, stats, buttons); lacks an unexpected spatial relationship or asymmetry that would push it into strong/memorable territory.
- Motion: 62 — Gemini confirms a specific timestamped motion: a letter slides vertically out of the envelope (36.0–38.0s), a clear literal-metaphor animation tied directly to the envelope illustration's narrative conceit. Next tier: Single straightforward slide-out motion; no supporting details (easing, staggered reveal of stats/text, secondary motion) that would elevate it to a more crafted, multi-layered sequence.
- Content: 60 — Letter text and stats are integrated into the envelope conceit coherently—founder voice framed literally as a letter, with stats placed logically beneath as supporting proof points. Next tier: Content is template-like (standard founder letter + stats trio); no unique content treatment like handwritten styling, signature, or custom typographic texture that would deepen the metaphor.
- Originality: 68 — The literal envelope-and-sliding-letter metaphor for a founder statement is a distinctive, purpose-built idea rather than a generic card or quote block, giving the section a memorable conceptual hook. Next tier: The idea itself is strong but execution stays flat/illustrative without added surprise (e.g., unique fold details, wax seal, handwriting texture, more elaborate reveal) needed for exceptional/wow territory.
- Adaptability: 55 — Structure (illustration + text + stats + buttons) is modular and could be reskinned, but the entire concept depends on the custom envelope/letter SVG illustration, which is a bespoke asset not easily replaced without losing the section's identity. Next tier: Heavy reliance on a single bespoke illustration asset limits separability of structure from skin; no evidence of alternate layout states or responsive behavior supplied.

Strengths:
- Literal envelope/letter metaphor gives the founder message a distinctive conceptual anchor
- Clear, calm hierarchy from illustration to stats to CTA
- Confirmed, purposeful motion (letter sliding out) tied directly to the section's narrative

Weaknesses:
- Typography is generic in treatment despite good hierarchy
- Overall layout is a standard centered-stack composition
- Content presentation (letter + stats trio) follows a familiar founder-section template
- Heavy dependence on one bespoke illustration asset limits reusability
- Only one motion moment is documented; no secondary animation detail

Why it does not reach the next tier: The concept (letter emerging from envelope) is distinctive, but its execution relies on a single conventional animation and standard stat/CTA layout without additional crafted details, varied typographic treatment, or layered motion that would push it from good to strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the structural skeleton (central illustration, stat row, dual CTA) and the slide-out reveal interaction pattern, but replace the envelope asset with a different bespoke illustration suited to the new brand; animation logic and stat styling can carry over with new typography and color tokens.

What transfers:
- Centered illustration-above-content layout
- Three-column stat row with label-under-number pattern
- Letter-slide-out reveal concept as a motion pattern

Dependencies:
- Custom envelope/letter SVG illustration
- Specific scroll-triggered animation implementation
- Geist font and grid-dot background styling

## 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%)
- Motion scored only from Gemini's single timestamped description, not direct video observation
- Exact animation easing, duration, and any secondary motion are unknown
- Illustration style/asset originality can't be fully verified as unique versus a common stock-style envelope graphic

## 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: founder
- Source type: founder
- Structure: centered single-column
- Layout: Centered illustration over a three-column statistics row
- Styles: minimal, illustrative
- Components: envelope illustration, letter graphic, statistics, buttons
- Purpose: A minimal, light-themed section featuring a stylized black envelope. On scroll, a letter slides out of the envelope. Below are three large statistics.
- Visual signature: A stark contrast between the large black envelope graphic and the very clean, white, grid-patterned background, anchored by large numbers.
- Place on the page: 11 of 15, after Pricing (`twohands-studio:pricing_single_c04`), before Testimonials (`twohands-studio:testimonials_grid_c05`)

### 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": "64px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 64px size used for primary hero headline and major section headers.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "76.8px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 48px size used for secondary section headers like 'Every website is built around six principles.'",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "57.6px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "Geist",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 18px size used for standard body copy throughout the page.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "27px",
      "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": "#131314",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(19, 19, 20); AI role: Predominant background color across most of the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: Primary text color and solid button background.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#1E1E1F",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-8: computed rgb(30, 30, 31); AI role: Used as a slightly lighter background for specific cards/sections (e.g., FAQ expanded).",
      "sampleId": "color-8",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons utilize maximum border-radius (pill shape), while feature cards and images have smaller, subtle border radii (e.g., 8px-16px).",
  "density": "Moderate density. Generous whitespace is used around major typography and between sections, while complex UI mockups contain higher information density.",
  "evidence": "Observed via the structured grid lines in the background, pill-shaped buttons ('Get started', 'Book a call'), and consistent padding within feature cards.",
  "borderStyle": "Extensive use of 1px solid borders with low opacity (color-14, color-23) to delineate structural grids and card boundaries.",
  "buttonStyle": "Pill-shaped, usually solid white (color-2) for primary actions or outlined/translucent for secondary actions, often featuring a distinct hover state or icon.",
  "cornerStyle": "Primary interactive elements (buttons, search-like inputs) use fully rounded pill shapes, contrasting with the mostly sharp or slightly rounded corners of layout containers.",
  "contentWidth": "Content is generally constrained within a wide max-width container, centered on the page, with elements adhering to internal grid columns.",
  "spacingRhythm": "Content is structured using a prominent baseline or vertical grid, visibly marked by subtle horizontal and vertical lines defining sections and cards."
}
```

### 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. **observed sequence** — A letter containing text slides vertically upwards out of a black envelope graphic. (36s–38s; 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: Centered illustration-above-content layout; Three-column stat row with label-under-number pattern; Letter-slide-out reveal concept as a motion pattern
- Dependencies: Custom envelope/letter SVG illustration; Specific scroll-triggered animation implementation; Geist font and grid-dot background styling
- Guidance: Reuse the structural skeleton (central illustration, stat row, dual CTA) and the slide-out reveal interaction pattern, but replace the envelope asset with a different bespoke illustration suited to the new brand; animation logic and stat styling can carry over with new typography and color tokens.

### 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 founder section inspired by the design evidence titled “Founder letter and stats”.

Purpose: A minimal, light-themed section featuring a stylized black envelope. On scroll, a letter slides out of the envelope. Below are three large statistics.

Structure: centered single-column. Source layout label: Centered illustration over a three-column statistics row. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A stark contrast between the large black envelope graphic and the very clean, white, grid-patterned background, anchored by large numbers.

Components: envelope illustration, letter graphic, statistics, buttons.

Style direction: minimal, illustrative.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"64px","family":"Geist","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: 64px size used for primary hero headline and major section headers.","sampleId":"font-4","confidence":0.95,"lineHeight":"76.8px","letterSpacing":"-0.5px"} {"role":"heading","size":"48px","family":"Geist","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: 48px size used for secondary section headers like 'Every website is built around six principles.'","sampleId":"font-3","confidence":0.9,"lineHeight":"57.6px","letterSpacing":"-0.5px"} {"role":"body","size":"18px","family":"Geist","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: 18px size used for standard body copy throughout the page.","sampleId":"font-2","confidence":0.9,"lineHeight":"27px","letterSpacing":"normal"}

Color evidence: {"hex":"#131314","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(19, 19, 20); AI role: Predominant background color across most of the page.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: Primary text color and solid button background.","sampleId":"color-2","confidence":0.95} {"hex":"#1E1E1F","name":"surface","role":"surface","source":"computed","evidence":"color-8: computed rgb(30, 30, 31); AI role: Used as a slightly lighter background for specific cards/sections (e.g., FAQ expanded).","sampleId":"color-8","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: observed sequence: A letter containing text slides vertically upwards out of a black envelope graphic. (95% confidence)

Transfer these principles: Centered illustration-above-content layout; Three-column stat row with label-under-number pattern; Letter-slide-out reveal concept as a motion pattern.

Dependencies: Custom envelope/letter SVG illustration; Specific scroll-triggered animation implementation; Geist font and grid-dot background styling.

Adaptation guidance: Reuse the structural skeleton (central illustration, stat row, dual CTA) and the slide-out reveal interaction pattern, but replace the envelope asset with a different bespoke illustration suited to the new brand; animation logic and stat styling can carry over with new typography and color tokens.

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