# Large Typography Introduction

Schema: Design Details SECTION.md v3.2
Website: Imprint
Source: https://imprint.co/
Source section IDs: gap-365078f7-960-1710
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A 76px black headline with tight -3px letter-spacing sits against 18px body text, so the hierarchy reads at a glance.
- The left-aligned block keeps a readable measure and generous margins on a stark white field, with one text link as the only action.
- Black text, muted gray supporting copy and plain white surface keep colour roles simple and the message direct.

What a screenshot can't show:
- The recording shows only that the block scrolls into view after the hero, with no timed reveal or stagger.
- Measured spacing and section padding were not captured, so exact vertical rhythm is unknown.

Borrow: Let one oversized, tightly tracked headline carry the section, and support it with a small muted paragraph and a single link.
Leave alone: Don't copy Imprint's exact black-on-white palette, the muted brown-gray body tone or the floating nav pill; choose your own type and colour voice.

## Classification

- Type: editorial
- Layout: Left-aligned text block constrained to a readable width on a solid background.
- Styles: minimal, typographic
- Confidence: 100%

## Purpose and structure

A clean, minimal white section featuring a large bold headline introducing the core product offerings.

Visual signature: High-contrast, large-scale black typography on a stark white background.

## Components

- large headline
- subheading
- text link
- sticky navigation pill

## Typography

- Display: UniversalSans-500 Regular — 125px 504
- Heading: UniversalSans-500 Regular — 76px 400
- Body: UniversalSans-500 Regular — 18px 400

## Functional palette

- Canvas: canvas #EFEFEF
- Text: text #000000
- Surface: surface #FFFFFF
- Muted-Text: muted text #887C71

## Motion evidence

- 0.0–6.0s — Scroll down reveals this text block immediately after the hero. (95% confidence)

## Section quality

Overall: 58.35/100 (Competent)
Scored coverage: 85%

- Typography: 62 — Large 76px headline with tight -3px letter-spacing shows clear hierarchy and confident scale against 18px body text, but the left-aligned two-line setup is a familiar editorial pattern without distinctive type treatment beyond scale. Next tier: No unexpected type pairing, scale contrast beyond one tier, or typographic detail (e.g. mixed weights, unusual line breaks) that would differentiate this from countless large-headline intros.
- Composition: 60 — Simple left-aligned text block with generous margins and a floating sticky pill nav gives breathing room and clear reading order, but the layout is a single text column with no secondary visual tension, asymmetry, or interplay with other elements. Next tier: Needs a compositional device beyond plain left-aligned stacking—e.g. asymmetric balance, secondary element, or grid tension—to move past competent minimalism.
- Motion: inconclusive — Gemini only notes the section appears on scroll after the hero; no specific timestamped in-section motion (e.g. headline reveal animation, stagger) is described. Next tier: Need timestamped evidence of distinct visible motion (text reveal, stagger, parallax) within this section to score.
- Content: 58 — Headline and subheading clearly state the product offering with a direct text link, integration is functional and legible but entirely conventional in structure. Next tier: Content presentation lacks any integration technique (inline emphasis, visual anchor, numeric callout) that elevates it beyond plain heading-paragraph-link convention.
- Originality: 48 — This is a very common SaaS/fintech pattern: big black headline, gray paragraph, underlined text link, white canvas. Nothing here signals a distinctive point of view. Next tier: Requires a distinguishing idea—unusual type scale relationship, unexpected color/motion accent, or layout quirk—that isn't just scaled-up boilerplate.
- Adaptability: 62 — Clear componentized structure (headline, subhead, link, nav pill) with deterministic tokens (colors, radius, spacing) makes the skin separable from structure fairly easily. Next tier: Lack of distinctive behavior or styling nuance limits how much adaptation value the component itself provides beyond basic restyling.

Strengths:
- Clean high-contrast black-on-white hierarchy with legible scale jump between headline and body
- Generous whitespace and left alignment support fast scanning
- Sticky navigation pill overlay adds a small layered interest in an otherwise flat layout

Weaknesses:
- Layout is a single conventional left-aligned text block with no secondary visual element
- No distinguishing typographic or compositional device beyond large scale
- Content structure (headline/subhead/link) is generic boilerplate
- No confirmed in-section motion beyond scroll-triggered appearance

Why it does not reach the next tier: The section executes a familiar large-type intro cleanly but introduces no distinguishing structural, typographic, or interactive idea; it reads as competent minimal boilerplate rather than a memorable design choice.

## Adaptation guidance

- Effort: Low
- Guidance: Swap font family and copy length while preserving the headline-to-subhead-to-link vertical rhythm and pill nav overlay; adjust max-width of text column to fit new copy length.

What transfers:
- Left-aligned headline/subhead/link text block structure
- Sticky pill navigation overlay pattern
- Generous margin and vertical rhythm approach

Dependencies:
- Custom UniversalSans font availability
- Specific black/white/gray palette tokens

## 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 timestamped in-section motion details provided, so motion axis could not be scored
- Section crop alone, judged independent of surrounding sections

## 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: editorial
- Source type: editorial
- Structure: Left-aligned text block constrained to a readable width on a solid background.
- Layout: Left-aligned text block constrained to a readable width on a solid background.
- Styles: minimal, typographic
- Components: large headline, subheading, text link, sticky navigation pill
- Purpose: A clean, minimal white section featuring a large bold headline introducing the core product offerings.
- Visual signature: High-contrast, large-scale black typography on a stark white background.
- Place on the page: 3 of 7, after Hero (`imprint-co:hero_3d_exploded`), before Testimonials (`imprint-co:gallery_partner_slider`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### 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": "125px",
      "family": "UniversalSans-500 Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "504",
      "evidence": "font-10: computed CSS at 1440×1000; AI role: 125px UniversalSans used for massive statistical numbers.",
      "sampleId": "font-10",
      "confidence": 0.95,
      "lineHeight": "normal",
      "letterSpacing": "-2px"
    },
    {
      "role": "heading",
      "size": "76px",
      "family": "UniversalSans-500 Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 76px UniversalSans used for the primary page heading.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "76px",
      "letterSpacing": "-3px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "UniversalSans-500 Regular",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 18px UniversalSans used for standard paragraph text and descriptions.",
      "sampleId": "font-5",
      "confidence": 0.9,
      "lineHeight": "21.6px",
      "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": "#EFEFEF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(239, 239, 239); AI role: #EFEFEF provides the main background color for the page.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 0, 0); AI role: Solid black (#000000) used for primary headings and body copy.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used for cards, the navigation pill, and stat block backgrounds.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#887C71",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-5: computed rgb(136, 124, 113); AI role: #887C71 used for secondary labels and overlines like 'SHELL'.",
      "sampleId": "color-5",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium radiuses (approx 16-24px) on large cards and images; full capsule radius on navigation and tabs.",
  "density": "Low density; highly breathable layout prioritizing focus on single elements or short bursts of text at a time.",
  "evidence": "Visual inspection of the layout reveals wide margins around the text, rounded corners on the partner carousel images, and the stark contrast of white surface cards against the light gray body background.",
  "borderStyle": "Mostly borderless. Surfaces are defined by contrast against the canvas or soft shadows. Thin solid lines separate items in the stat block.",
  "buttonStyle": "Pill-shaped with solid backgrounds (like the nav items) or simple text links.",
  "cornerStyle": "Consistent use of rounded corners across UI elements, from subtle curves on images to fully rounded pills.",
  "contentWidth": "Content is constrained to a central column, leaving significant margins on desktop viewports.",
  "spacingRhythm": "Generous vertical spacing, creating distinct sections separated by large areas of empty canvas."
}
```

### 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. **scroll** — Scroll down reveals this text block immediately after the hero. (0s–6s; 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: low
- What transfers: Left-aligned headline/subhead/link text block structure; Sticky pill navigation overlay pattern; Generous margin and vertical rhythm approach
- Dependencies: Custom UniversalSans font availability; Specific black/white/gray palette tokens
- Guidance: Swap font family and copy length while preserving the headline-to-subhead-to-link vertical rhythm and pill nav overlay; adjust max-width of text column to fit new copy length.

### 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 editorial section inspired by the design evidence titled “Large Typography Introduction”.

Purpose: A clean, minimal white section featuring a large bold headline introducing the core product offerings.

Structure: Left-aligned text block constrained to a readable width on a solid background.. Source layout label: Left-aligned text block constrained to a readable width on a solid background.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: High-contrast, large-scale black typography on a stark white background.

Components: large headline, subheading, text link, sticky navigation pill.

Style direction: minimal, typographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"125px","family":"UniversalSans-500 Regular","source":"computed","traits":"Regular","weight":"504","evidence":"font-10: computed CSS at 1440×1000; AI role: 125px UniversalSans used for massive statistical numbers.","sampleId":"font-10","confidence":0.95,"lineHeight":"normal","letterSpacing":"-2px"} {"role":"heading","size":"76px","family":"UniversalSans-500 Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 76px UniversalSans used for the primary page heading.","sampleId":"font-2","confidence":0.95,"lineHeight":"76px","letterSpacing":"-3px"} {"role":"body","size":"18px","family":"UniversalSans-500 Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 18px UniversalSans used for standard paragraph text and descriptions.","sampleId":"font-5","confidence":0.9,"lineHeight":"21.6px","letterSpacing":"normal"}

Color evidence: {"hex":"#EFEFEF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(239, 239, 239); AI role: #EFEFEF provides the main background color for the page.","sampleId":"color-1","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(0, 0, 0); AI role: Solid black (#000000) used for primary headings and body copy.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used for cards, the navigation pill, and stat block backgrounds.","sampleId":"color-4","confidence":0.9} {"hex":"#887C71","name":"muted text","role":"muted-text","source":"computed","evidence":"color-5: computed rgb(136, 124, 113); AI role: #887C71 used for secondary labels and overlines like 'SHELL'.","sampleId":"color-5","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: scroll: Scroll down reveals this text block immediately after the hero. (95% confidence)

Transfer these principles: Left-aligned headline/subhead/link text block structure; Sticky pill navigation overlay pattern; Generous margin and vertical rhythm approach.

Dependencies: Custom UniversalSans font availability; Specific black/white/gray palette tokens.

Adaptation guidance: Swap font family and copy length while preserving the headline-to-subhead-to-link vertical rhythm and pill nav overlay; adjust max-width of text column to fit new copy length.

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