# Value proposition features with isometric graphics

Schema: Design Details SECTION.md v3.2
Website: Tennr
Source: https://www.tennr.com/
Source section IDs: gap-64eec2c3-1074-2873
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The colour break between terracotta and beige falls through the middle of the large serif statement, so the two halves read as one idea.
- A light serif headline over small tracked uppercase eyebrow labels gives a clear, editorial hierarchy, with plain small body copy staying out of the way.
- The top block pairs a graphic on the left with text on the right, then a symmetrical three-column grid of icon, heading and text repeats below with generous negative space.

What a screenshot can't show:
- Shapes and headline text animate into place at about 3–6s, then the three benefit blocks and their icons fade in at about 7–10s.
- No type sizes or spacing were measured, so only the 48px, weight 300 display heading is known.

Borrow: Let a single large headline cross a background colour change to bind two sections into one continuous message.
Leave alone: Don't copy Tennr's terracotta and beige palette, its translucent isometric square illustrations, or its light serif display face; use your own motif and a free serif such as Cormorant or Newsreader.

## Classification

- Type: features
- Layout: Split-color background with left-right graphic and a bottom three-column grid.
- Styles: geometric, illustrative, soft
- Confidence: 95%

## Purpose and structure

A two-part value proposition section. The top half is red with an isometric graphic and descriptive text. The bottom half is beige with a three-column layout featuring isometric icons.

Visual signature: Floating translucent isometric squares paired with serif typography.

## Components

- heading
- text block
- icon
- button

## Typography

- Display: featureDisplay — 64px 300
- Heading: featureDisplay — 48px 300
- Body: abcMarfa — 18px 300

## Functional palette

- Canvas: canvas #72554D
- Surface: surface #EEDFD1
- Text: text #5F4037
- Surface: surface #FBFBF9

## Motion evidence

- 3.0–6.0s — Abstract graphical shapes and text for 'With Tennr, patients flow' animate into place. (95% confidence)
- 7.0–10.0s — Three sections describing benefits fade in along with abstract icons. (95% confidence)

## Section quality

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

- Typography: 66 — Serif display headings (featureDisplay, 300 weight, 48px) paired with small tracked uppercase eyebrow labels create a clear, confident hierarchy. The serif choice gives the copy an editorial tone distinct from typical SaaS sans-only treatments, and line-wrap of the three-line statement ('No delays. Fewer denials. Optimal patient journeys.') is used compositionally. Body copy is plain and smaller, functional only. Next tier: Type pairing is handled competently but doesn't introduce any unusual scale jumps, optical kerning, or treatment beyond a serif/sans pairing with tracked labels to earn a strong rating.
- Composition: 68 — Two-register split-color layout (terracotta top, beige bottom) with the color break falling mid-sentence across the big serif statement is a deliberate, well-executed compositional move that ties the two halves together. Left graphic/right text in the top block and a symmetrical three-column grid below show clear structural intent and generous negative space per the density token. Next tier: The underlying structure (hero statement + 3-column icon grid + CTA) is a common features-section template; only the color-split transition elevates it. Without a more distinctive grid relationship or asymmetry it stays in the 'good' band rather than reaching distinctive/memorable territory.
- Motion: 58 — Gemini specifies two timestamped moments: shapes/text animating into place (3-6s) and three benefit blocks fading in with icons (7-10s). This is a standard staggered fade/slide-in reveal pattern. Next tier: Only generic fade/animate-in behavior is confirmed; no distinctive choreography, parallax, or sequencing nuance is described that would differentiate it from typical scroll-reveal patterns.
- Content: 65 — Isometric translucent shape icons are custom-illustrated and directly tied to the abstract concept of patient flow/care coordination, giving the graphics a bespoke feel rather than generic stock icon usage. Text and icon pairing is well matched to subject matter (flow, denials, coordination). Next tier: The icons, while custom, are simple flat geometric shapes repeated across both halves without variation in treatment, limiting the sense of a fully bespoke illustration system.
- Originality: 64 — The split red/beige background with a serif line physically crossing the color boundary is a genuinely distinctive layout choice not typically seen in standard feature sections, and the translucent isometric motif gives a recognizable visual identity. Next tier: Beyond the color-split transition, the rest of the section (icon + heading + paragraph in three columns, CTA button) follows a conventional template, which caps overall novelty below the 'strong/memorable' threshold.
- Adaptability: 60 — Structure is cleanly separable: color-block background, headline/subcopy text block, repeatable icon+heading+text column component, and CTA button are all modular and documented via deterministic tokens (colors, radius, spacing). Next tier: Dependency on the custom isometric graphic assets and the specific color-split transition timing limits how cleanly the skin can be swapped without redesigning the illustration system.

Strengths:
- Deliberate two-color split with serif heading crossing the boundary, unifying the two content blocks
- Custom translucent isometric illustration motif reused consistently across hero graphic and column icons
- Clear typographic hierarchy using tracked uppercase eyebrow labels against large serif display type
- Generous negative space and consistent three-column grid with balanced centered CTA

Weaknesses:
- Three-column icon+text pattern is a common features-section template without structural distinction
- Icons are simple flat isometric shapes with limited variation in form or detail
- Motion confirmed only as generic staggered fade/slide-in, no distinctive choreography
- Body copy typography is purely functional with no notable treatment

Why it does not reach the next tier: The color-split transition and serif/isometric visual identity are well-executed but the section's skeleton (hero statement + 3-col benefit grid + CTA) remains a conventional template; neither the motion nor the icon system introduces anything hard to substitute, keeping it in the good/polished range rather than strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the color-split hero-to-grid transition and three-column grid skeleton directly; icons and illustrations will need to be redrawn or substituted with a brand's own abstract motif, and the color palette must be chosen so the split-background transition retains visual logic.

What transfers:
- Split-background two-register layout concept
- Three-column benefit grid with icon/heading/text structure
- Eyebrow label + serif heading + paragraph pairing pattern

Dependencies:
- Custom isometric translucent shape illustration assets
- Specific terracotta/beige palette for color-split effect to read correctly
- Serif display font family for the intended editorial tone

## 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 scoring relies solely on Gemini's two generic timestamped descriptions, not direct video review
- Exact animation easing, duration, and stagger timing are unknown
- Precise color values of the isometric icons' translucency and blending are not verifiable from static crop alone

## 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: Split-color background with left-right graphic and a bottom three-column grid.
- Styles: geometric, illustrative, soft
- Components: heading, text block, icon, button
- Purpose: A two-part value proposition section. The top half is red with an isometric graphic and descriptive text. The bottom half is beige with a three-column layout featuring isometric icons.
- Visual signature: Floating translucent isometric squares paired with serif typography.
- Place on the page: 4 of 12, after Feature collection (`4b48e75c-dea8-435c-80a6-390cef36ede1`), before Logo strip (`tennr-com:C05`)

### 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": "64px",
      "family": "featureDisplay",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Used for main hero heading (`h1`), size 64px, `featureDisplay` serif font.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "70.4px",
      "letterSpacing": "1%"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "featureDisplay",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Used for major section headings (`h2`), size 48px, `featureDisplay` serif font.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "52.8px",
      "letterSpacing": "1%"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "abcMarfa",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: Used for main paragraph text, size 18px, `abcMarfa` sans-serif font.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "24.3px",
      "letterSpacing": "-3%"
    }
  ]
}
```

### 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": "#72554D",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-5: computed rgb(114, 85, 77); AI role: Dominant background color for the hero, footer, and other major sections. `#72554D` (terracotta/brown).",
      "sampleId": "color-5",
      "confidence": 0.9
    },
    {
      "hex": "#EEDFD1",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(238, 223, 209); AI role: Used as a secondary background color for lighter sections and standard buttons. `#EEDFD1` (beige).",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#5F4037",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-8: computed rgb(95, 64, 55); AI role: Used for text on light backgrounds. `#5F4037` (dark brown).",
      "sampleId": "color-8",
      "confidence": 0.9
    },
    {
      "hex": "#FBFBF9",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-6: computed rgb(251, 251, 249); AI role: Used for the background of testimonial cards and case study cards. `#FBFBF9` (off-white).",
      "sampleId": "color-6",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "0px",
  "density": "Low density, relying on negative space and typography scale to guide the eye rather than cramming information.",
  "evidence": "Visual inspection of component crops reveals sharp corners on buttons ('BOOK A DEMO', 'LEARN MORE') and cards (Testimonials). Spacing is evident in the large gaps between headings and body text.",
  "borderStyle": "Borders are generally avoided in favor of background color blocking and subtle drop shadows (e.g., on testimonial cards) to define boundaries.",
  "buttonStyle": "Solid fill rectangles with sharp corners and centered uppercase text with tracking (`font-11`, letter-spacing 1.8px). No borders.",
  "cornerStyle": "Sharp, square corners (0px border-radius) are consistently used for buttons, cards, and image containers.",
  "contentWidth": "Maximum content width appears constrained centrally, aligning elements cleanly into a structured grid (likely around 1200px max-width).",
  "spacingRhythm": "Generous vertical spacing between major sections (e.g., margins often exceed 100px), with comfortable padding within components to maintain a clean, airy feel."
}
```

### 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** — Abstract graphical shapes and text for 'With Tennr, patients flow' animate into place. (3s–6s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.
2. **observed sequence** — Three sections describing benefits fade in along with abstract icons. (7s–10s; 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: Split-background two-register layout concept; Three-column benefit grid with icon/heading/text structure; Eyebrow label + serif heading + paragraph pairing pattern
- Dependencies: Custom isometric translucent shape illustration assets; Specific terracotta/beige palette for color-split effect to read correctly; Serif display font family for the intended editorial tone
- Guidance: Reuse the color-split hero-to-grid transition and three-column grid skeleton directly; icons and illustrations will need to be redrawn or substituted with a brand's own abstract motif, and the color palette must be chosen so the split-background transition retains visual logic.

### 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 “Value proposition features with isometric graphics”.

Purpose: A two-part value proposition section. The top half is red with an isometric graphic and descriptive text. The bottom half is beige with a three-column layout featuring isometric icons.

Structure: two-column. Source layout label: Split-color background with left-right graphic and a bottom three-column grid.. 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: Floating translucent isometric squares paired with serif typography.

Components: heading, text block, icon, button.

Style direction: geometric, illustrative, soft.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"64px","family":"featureDisplay","source":"computed","traits":"Regular","weight":"300","evidence":"font-4: computed CSS at 1440×1000; AI role: Used for main hero heading (`h1`), size 64px, `featureDisplay` serif font.","sampleId":"font-4","confidence":0.95,"lineHeight":"70.4px","letterSpacing":"1%"} {"role":"heading","size":"48px","family":"featureDisplay","source":"computed","traits":"Regular","weight":"300","evidence":"font-2: computed CSS at 1440×1000; AI role: Used for major section headings (`h2`), size 48px, `featureDisplay` serif font.","sampleId":"font-2","confidence":0.95,"lineHeight":"52.8px","letterSpacing":"1%"} {"role":"body","size":"18px","family":"abcMarfa","source":"computed","traits":"Regular","weight":"300","evidence":"font-5: computed CSS at 1440×1000; AI role: Used for main paragraph text, size 18px, `abcMarfa` sans-serif font.","sampleId":"font-5","confidence":0.95,"lineHeight":"24.3px","letterSpacing":"-3%"}

Color evidence: {"hex":"#72554D","name":"canvas","role":"canvas","source":"computed","evidence":"color-5: computed rgb(114, 85, 77); AI role: Dominant background color for the hero, footer, and other major sections. `#72554D` (terracotta/brown).","sampleId":"color-5","confidence":0.9} {"hex":"#EEDFD1","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(238, 223, 209); AI role: Used as a secondary background color for lighter sections and standard buttons. `#EEDFD1` (beige).","sampleId":"color-3","confidence":0.9} {"hex":"#5F4037","name":"text","role":"text","source":"computed","evidence":"color-8: computed rgb(95, 64, 55); AI role: Used for text on light backgrounds. `#5F4037` (dark brown).","sampleId":"color-8","confidence":0.9} {"hex":"#FBFBF9","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(251, 251, 249); AI role: Used for the background of testimonial cards and case study cards. `#FBFBF9` (off-white).","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: observed sequence: Abstract graphical shapes and text for 'With Tennr, patients flow' animate into place. (95% confidence) observed sequence: Three sections describing benefits fade in along with abstract icons. (95% confidence)

Transfer these principles: Split-background two-register layout concept; Three-column benefit grid with icon/heading/text structure; Eyebrow label + serif heading + paragraph pairing pattern.

Dependencies: Custom isometric translucent shape illustration assets; Specific terracotta/beige palette for color-split effect to read correctly; Serif display font family for the intended editorial tone.

Adaptation guidance: Reuse the color-split hero-to-grid transition and three-column grid skeleton directly; icons and illustrations will need to be redrawn or substituted with a brand's own abstract motif, and the color palette must be chosen so the split-background transition retains visual logic.

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