# Abstract Illustration Feature

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

## Builder's note

What makes it work:
- The two-column split gives the illustration and the text equal weight, and the text block is vertically centred against an image box of similar height, so the layout feels calm and balanced.
- A large black heading with a muted two-tone treatment on the first two words sets a clear hierarchy over the restrained paragraph and the text link.
- The glowing dotted object inside a rounded blue gradient box is the one focal point, and it matches the card-platform copy beside it.

What a screenshot can't show:
- The recording shows only the page scrolling past the video slider into this section, from about 9s to 12s. No illustration animation, glow pulse or text entrance is visible.
- No font sizes or spacing values were measured.

Borrow: Pair one soft, self-contained illustration in a rounded colour box with a short heading, paragraph and link, and leave generous whitespace around them.
Leave alone: Don't copy the blue gradient box, the glowing dotted rounded-square object or the warm muted heading tint; use your own illustration and palette.

## Classification

- Type: features
- Layout: Two-column split with an image box on the left and vertical text stack on the right.
- Styles: minimal, illustrative
- Confidence: 95%

## Purpose and structure

A side-by-side feature layout with a stylized, glowing abstract 3D illustration on the left and descriptive text on the right.

Visual signature: The soft glowing dots on a rounded square object floating in a blue gradient box.

## Components

- rounded image container
- 3d abstract illustration
- heading
- paragraph
- text link

## 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

- 9.0–12.0s — The page scrolls past the video slider to reveal this side-by-side feature section. (90% confidence)

## Section quality

Overall: 61.06/100 (Good)
Scored coverage: 85%

- Typography: 62 — Clean use of large heading with a subtle two-tone treatment on 'Imprint Core' (muted warm/cool gradient-like coloring on first two words) against black for the rest, creating a clear hierarchy. Body copy is restrained and legible. Nothing unusual beyond careful weight/size pairing. Next tier: No distinctive type craft (custom ligatures, kerning nuance, expressive scale shifts) beyond standard heading/body pairing.
- Composition: 64 — Simple, well-balanced two-column split with generous whitespace and vertical centering of text block against the image. The image box height roughly matches the text block, giving a calm, even composition. Next tier: Layout is a standard side-by-side split with no distinctive asymmetry, layering, or spatial tension that would elevate it beyond a familiar pattern.
- Motion: inconclusive — Gemini only notes a scroll-past reveal with no specific timestamped visible change within the section itself (e.g. illustration animation, glow pulsing, text entrance). Next tier: Need specific timestamped evidence of in-section motion (illustration rotation, glow animation, text reveal timing) to assess.
- Content: 60 — Text and illustration are topically connected (abstract card-like object paired with credit-card platform messaging) and the copy is concise and purposeful. Next tier: The illustration is generic and abstract rather than directly illustrating the product's unique mechanics, so the pairing feels more decorative than explanatory.
- Originality: 58 — The glowing dotted rounded-square illustration on a gradient blue backdrop is a visually pleasant but common abstract-3D-object trope seen across many SaaS/fintech sites. Next tier: Lacks a signature visual idea unique to this brand; the illustration style is interchangeable with many other product sites using similar glowing abstract renders.
- Adaptability: 60 — Structure (image box + heading + paragraph + link) is modular and clearly separable from the specific illustration asset and color treatment, making it straightforward to reskin. Next tier: Dependence on a custom-rendered 3D illustration asset limits how cleanly the skin can be swapped without losing the section's visual identity.

Strengths:
- Clear two-column hierarchy with balanced whitespace
- Restrained color accent on heading text adds subtle visual interest
- Concise, purposeful copy directly tied to product value

Weaknesses:
- Abstract illustration is a common visual trope lacking distinct brand signature
- No evidence of meaningful motion within the section itself
- Composition follows a very standard split-feature pattern without spatial tension or layering
- Illustration relates only loosely/symbolically to the actual product described

Why it does not reach the next tier: The section is competently executed with good hierarchy and whitespace, but it relies on a familiar two-column layout and a generic glowing-abstract-object illustration that doesn't carry a unique conceptual or visual signature, keeping it at a polished-but-ordinary level rather than memorable or distinctive.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the layout skeleton and spacing rhythm, but replace the illustration with any brand-appropriate visual (photo, icon, or custom graphic) sized to the same proportions; the heading color accent can be dropped or adapted to a different two-color scheme without affecting structure.

What transfers:
- Two-column split structure with image box and text stack
- Heading + paragraph + text-link content hierarchy
- Generous whitespace and vertical centering pattern

Dependencies:
- Custom 3D illustration asset with glow effect
- Specific gradient background treatment inside image box
- Two-tone heading color treatment

## 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 motion evidence available for this section's internal animation, if any exists
- Cannot verify exact illustration rendering technique or whether it animates on load/scroll

## 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: features
- Structure: two-column
- Layout: Two-column split with an image box on the left and vertical text stack on the right.
- Styles: minimal, illustrative
- Components: rounded image container, 3d abstract illustration, heading, paragraph, text link
- Purpose: A side-by-side feature layout with a stylized, glowing abstract 3D illustration on the left and descriptive text on the right.
- Visual signature: The soft glowing dots on a rounded square object floating in a blue gradient box.
- Place on the page: 5 of 7, after Testimonials (`imprint-co:gallery_partner_slider`), before Stats (`imprint-co:stats_large_typography_grid`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### 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** — The page scrolls past the video slider to reveal this side-by-side feature section. (9s–12s; 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: Two-column split structure with image box and text stack; Heading + paragraph + text-link content hierarchy; Generous whitespace and vertical centering pattern
- Dependencies: Custom 3D illustration asset with glow effect; Specific gradient background treatment inside image box; Two-tone heading color treatment
- Guidance: Reuse the layout skeleton and spacing rhythm, but replace the illustration with any brand-appropriate visual (photo, icon, or custom graphic) sized to the same proportions; the heading color accent can be dropped or adapted to a different two-color scheme without affecting structure.

### 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 “Abstract Illustration Feature”.

Purpose: A side-by-side feature layout with a stylized, glowing abstract 3D illustration on the left and descriptive text on the right.

Structure: two-column. Source layout label: Two-column split with an image box on the left and vertical text stack on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: The soft glowing dots on a rounded square object floating in a blue gradient box.

Components: rounded image container, 3d abstract illustration, heading, paragraph, text link.

Style direction: minimal, illustrative.

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: The page scrolls past the video slider to reveal this side-by-side feature section. (90% confidence)

Transfer these principles: Two-column split structure with image box and text stack; Heading + paragraph + text-link content hierarchy; Generous whitespace and vertical centering pattern.

Dependencies: Custom 3D illustration asset with glow effect; Specific gradient background treatment inside image box; Two-tone heading color treatment.

Adaptation guidance: Reuse the layout skeleton and spacing rhythm, but replace the illustration with any brand-appropriate visual (photo, icon, or custom graphic) sized to the same proportions; the heading color accent can be dropped or adapted to a different two-color scheme without affecting structure.

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