# Sticky typography section

Schema: Design Details SECTION.md v3.2
Website: Pash
Source: https://www.pash.website/
Source section IDs: gap-5dc75a4c-17337-18337
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- One giant condensed word in saturated blue on pitch black fills the viewport, so the figure-ground contrast is instant and the hierarchy is unmistakable.
- A thin horizontal rule carrying five small uppercase category labels crosses the word, adding a quiet second type layer against the huge display letters.
- The restraint helps: one word, one line and no clutter, so the sticky overlap is the only gesture the eye follows.

What a screenshot can't show:
- In the recording (about 51–56s), the word stays fixed at the viewport centre while the category line scrolls vertically over it; no easing or duration was measured.
- Exact font sizes, letter spacing and spacing values were not captured, though the display word appears to be around 360px.

Borrow: Pin one oversized element as a backdrop and let a small, fine-lined layer scroll across it, so scale contrast and movement carry the section.
Leave alone: Don't copy the Pash wordmark, the electric blue on black pairing or the stock condensed sans; choose your own word, palette and a distinctive free condensed face.

## Classification

- Type: other
- Layout: A full-viewport focal point using sticky positioning and overlapping scroll elements.
- Styles: brutalist, typographic, bold
- Confidence: 95%

## Purpose and structure

An interactive section where the massive word 'PASH' acts as a sticky background while a horizontal line with text elements scrolls over it.

Visual signature: Giant bright blue letters on pitch black, intersected by a thin horizontal line.

## Components

- large text background
- horizontal line
- scrolling text categories

## Typography

- Display: Base Neue Trial SuperCn — 360px 600
- Heading: Base Neue Trial SuperCn — 100px 600
- Body: Base Neue Trial — 16px 500

## Functional palette

- Primary-Action: primary action #004CFF
- Canvas: canvas #E3E4D8
- Text: text #000000
- Border: border #222222

## Motion evidence

- 51.0–56.0s — The large blue word 'PASH' remains fixed in the center of the viewport while a horizontal line containing small categorized text scrolls vertically over it. (90% confidence)

## Section quality

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

- Typography: 68 — Giant 360px condensed display type fills the viewport with strong uppercase brutalist weight, creating clear hierarchy and impact. The overlapping small-caps category line is a secondary typographic layer with good contrast scale. However, letter overlap/stretching appears to be a default sizing artifact rather than a deliberate crafted detail, and the type choice itself is a stock condensed sans without distinctive refinement. Next tier: Needs evidence of deliberate custom kerning, optical adjustments, or a more unusual typographic treatment beyond simple oversized scaling to justify strong/memorable tier.
- Composition: 66 — Bold centered single-word composition with a horizontal scrolling rule bisecting it creates a clear focal intersection and strong figure-ground contrast (blue on black). The idea of a sticky giant word pierced by a moving line is a clean, confident layout decision with real restraint (no clutter). Next tier: Composition relies on a single strong gesture; lacks additional layered compositional complexity or asymmetry that would push it to exceptional territory.
- Motion: 62 — Gemini confirms a specific timestamped behavior: the word stays fixed while the category line scrolls vertically over it, a legible and purposeful sticky-scroll mechanic. Next tier: Only one motion beat is documented; no easing, speed variation, or secondary motion details are given to support a higher score.
- Content: 55 — Content is minimal—one word and five category labels—functioning more as a transitional/navigational device than substantive content, which is appropriate for the structure but limits integration depth. Next tier: Would need richer content integration (e.g., links, imagery, or contextual copy) tied to the categories to demonstrate deeper content-design integration.
- Originality: 65 — Sticky giant word intersected by a moving horizontal category line is a distinctive mechanic not commonly seen, giving it a memorable identity beyond generic scroll reveals. Next tier: The core trope of giant sticky text is an established pattern in editorial sites; needs a more novel twist or additional layered effect to be landmark-level original.
- Adaptability: 60 — The sticky-word + scrolling-line structure is clearly separable from skin (color, font) and could be reskinned with different words/categories relatively easily given the deterministic token data. Next tier: Lacks detailed responsive/breakpoint behavior data to confirm how the mechanic adapts across viewport sizes.

Strengths:
- Bold, high-contrast giant typographic focal point
- Clear sticky-word plus scrolling-line interaction mechanic
- Clean, legible structure with strong restraint and no clutter

Weaknesses:
- Content is extremely sparse, functioning mainly as a transition device
- Single motion beat with no documented secondary animation detail
- Typographic treatment relies on default oversized scaling rather than crafted refinement

Why it does not reach the next tier: The section's single bold gesture is confident but lacks the layered complexity, documented motion nuance, and content depth needed to reach strong/memorable territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Swap the word and category list while preserving the sticky-fixed-word/scroll-over-rule mechanic and the high-contrast color scheme; font and precise scroll physics would need re-tuning for other codebases.

What transfers:
- Sticky giant word centered, pierced by scrolling category rule
- High-contrast blue-on-black palette treatment
- Square-bracket-free minimal text labeling

Dependencies:
- Specific condensed display font variant
- Exact scroll-trigger sticky implementation
- Category label content

## 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%)
- Single crop view limits assessment of full scroll sequence
- No easing or speed data for the motion beat
- No responsive/mobile behavior evidence supplied

## 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: other
- Source type: other
- Structure: full-bleed
- Layout: A full-viewport focal point using sticky positioning and overlapping scroll elements.
- Styles: brutalist, typographic, bold
- Components: large text background, horizontal line, scrolling text categories
- Purpose: An interactive section where the massive word 'PASH' acts as a sticky background while a horizontal line with text elements scrolls over it.
- Visual signature: Giant bright blue letters on pitch black, intersected by a thin horizontal line.
- Place on the page: 12 of 14, after Other (`pash-website:S05-validation-stats`), before Logo strip (`pash-website:S09-logo-cloud`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### 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": "360px",
      "family": "Base Neue Trial SuperCn",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "306px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "100px",
      "family": "Base Neue Trial SuperCn",
      "source": "computed",
      "traits": "uppercase",
      "weight": "600",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "80px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Base Neue Trial",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.",
      "sampleId": "font-9",
      "confidence": 0.9,
      "lineHeight": "20.8px",
      "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": "#004CFF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#E3E4D8",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#222222",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.",
      "sampleId": "color-6",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px",
  "density": "Very low density. The layout is expansive, giving the oversized typography and imagery room to breathe.",
  "evidence": "Observed via DOM/CSS facts for typography sizing (360px, 160px), flat color usage, and visual inspection of sharp image crops and bracketed button text.",
  "borderStyle": "Thin, solid 1px borders used sparingly as horizontal rules to divide content sections.",
  "buttonStyle": "Raw text links enclosed in square brackets (e.g., [ VIEW CASESTUDY ]), heavily relying on typographic indication rather than contained shapes.",
  "cornerStyle": "Sharp, 90-degree straight edges throughout; no rounded corners are visible on images or UI elements.",
  "contentWidth": "Edge-to-edge typography that utilizes the full viewport width, interspersed with centered, constrained text blocks.",
  "spacingRhythm": "Generous vertical spacing between massive typographic blocks, creating a distinct pacing as users scroll."
}
```

### 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** — The large blue word 'PASH' remains fixed in the center of the viewport while a horizontal line containing small categorized text scrolls vertically over it. (51s–56s; 90% 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: Sticky giant word centered, pierced by scrolling category rule; High-contrast blue-on-black palette treatment; Square-bracket-free minimal text labeling
- Dependencies: Specific condensed display font variant; Exact scroll-trigger sticky implementation; Category label content
- Guidance: Swap the word and category list while preserving the sticky-fixed-word/scroll-over-rule mechanic and the high-contrast color scheme; font and precise scroll physics would need re-tuning for other codebases.

### 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 other section inspired by the design evidence titled “Sticky typography section”.

Purpose: An interactive section where the massive word 'PASH' acts as a sticky background while a horizontal line with text elements scrolls over it.

Structure: full-bleed. Source layout label: A full-viewport focal point using sticky positioning and overlapping scroll elements.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: Giant bright blue letters on pitch black, intersected by a thin horizontal line.

Components: large text background, horizontal line, scrolling text categories.

Style direction: brutalist, typographic, bold.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"360px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-4: computed CSS at 1440×1000; AI role: 360px 'Base Neue Trial SuperCn' used for massive, screen-filling text.","sampleId":"font-4","confidence":0.95,"lineHeight":"306px","letterSpacing":"normal"} {"role":"heading","size":"100px","family":"Base Neue Trial SuperCn","source":"computed","traits":"uppercase","weight":"600","evidence":"font-3: computed CSS at 1440×1000; AI role: 100px 'Base Neue Trial SuperCn' used for primary section headings.","sampleId":"font-3","confidence":0.9,"lineHeight":"80px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Base Neue Trial","source":"computed","traits":"Regular","weight":"500","evidence":"font-9: computed CSS at 1440×1000; AI role: 16px 'Base Neue Trial' used for standard paragraph reading text.","sampleId":"font-9","confidence":0.9,"lineHeight":"20.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#004CFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(0, 76, 255); AI role: #004CFF (electric blue) used extensively for primary text, links, and active elements.","sampleId":"color-2","confidence":0.95} {"hex":"#E3E4D8","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(227, 228, 216); AI role: #E3E4D8 used as the primary light background color for main sections.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: #000000 used for text on light backgrounds and as a dark canvas in inverted sections.","sampleId":"color-1","confidence":0.85} {"hex":"#222222","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(34, 34, 34); AI role: #222222 used for section borders and subtle dividers.","sampleId":"color-6","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: The large blue word 'PASH' remains fixed in the center of the viewport while a horizontal line containing small categorized text scrolls vertically over it. (90% confidence)

Transfer these principles: Sticky giant word centered, pierced by scrolling category rule; High-contrast blue-on-black palette treatment; Square-bracket-free minimal text labeling.

Dependencies: Specific condensed display font variant; Exact scroll-trigger sticky implementation; Category label content.

Adaptation guidance: Swap the word and category list while preserving the sticky-fixed-word/scroll-over-rule mechanic and the high-contrast color scheme; font and precise scroll physics would need re-tuning for other codebases.

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