# Testimonial with 3D spikes

Schema: Design Details SECTION.md v3.2
Website: Bloom
Source: https://bloom.security/
Source section IDs: gap-0c191011-10179-11048
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The semi-circle of colorful spikes anchored to the left edge gives the section a memorable focal point and leaves the right side open for a calm, centered quote.
- An italic serif quote sits above plain sans-serif attribution, so the reading order is clear: statement first, then name and title.
- The soft, muted canvas and dark text keep the page quiet, so the saturated spikes are the only strong colour, and the avatar and arrows keep the testimonial usable.

What a screenshot can't show:
- The recording shows the quote revealing as you scroll, about 29 to 38 seconds in, but gives no timing or easing, and no spike motion.
- Measured font sizes, line height and spacing weren't captured, so match the scale by eye.

Borrow: Pair one bold, edge-anchored decorative graphic with a quiet, centered text block so the graphic gives identity and the content stays easy to read.
Leave alone: Don't copy the pencil-like 3D spike fan or its exact colours; make your own graphic tied to your subject, and use any free italic serif instead of matching the original typeface.

## Classification

- Type: testimonial-card
- Layout: Asymmetrical layout with an edge-aligned decorative graphic on the left and a centered testimonial quote block on the right.
- Styles: illustrative, soft, minimal
- Confidence: 96%

## Purpose and structure

A testimonial block featuring a quote, author details, and a headshot, accompanied on the left edge by a semi-circular arrangement of colorful 3D spikes.

Visual signature: The semi-circle of pointed, colored 3D pencil-like spikes radiating from the left edge.

## Components

- Blockquote
- Author Avatar
- Author Details
- 3D Graphic Decoration
- Navigation Arrows

## Typography

- Display: Libre Baskerville — 50px 500
- Heading: Libre Baskerville — 40px 400
- Body: DM Sans — 18px 400

## Functional palette

- Canvas: canvas #F0E9ED
- Text: text #261116
- Surface: surface #DECCD1

## Motion evidence

- 29.0–38.0s — Scrolling reveals a quote from a CISO alongside the spike graphic. (85% confidence)

## Section quality

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

- Typography: 58 — Italic serif blockquote with clear hierarchy against plain sans-serif attribution text; competent but conventional pairing with no distinctive type treatment beyond italics. Next tier: Lacks a distinguishing typographic choice (scale contrast, unusual cut, custom treatment) that would make this feel designed rather than default testimonial styling.
- Composition: 66 — Asymmetrical balance between the radiating spike graphic and the right-aligned text block is confident, with the avatar bridging the two zones and clear pagination/arrow controls establishing a sequence. Next tier: The spike graphic bleeds off the left edge in a static, somewhat arbitrary arrangement and the right-side content block feels like a generic centered quote card; nothing in the spatial relationship between graphic and text builds additional meaning.
- Motion: inconclusive — Gemini only notes a generic scroll reveal of the quote with no specific transform, timing, or motion behavior described for the spikes, avatar, or arrows. Next tier: Needs timestamped evidence of how elements animate (e.g., spike rotation, staggered reveal, arrow interaction) to assess motion quality.
- Content: 55 — Quote, headshot, name, and title are integrated in a standard testimonial pattern; the decorative graphic sits adjacent but unconnected thematically to the content (security/software testimonial paired with generic pencil-like shapes). Next tier: The decorative element does not visibly reinforce or echo the testimonial's subject matter, so content and decoration feel juxtaposed rather than unified.
- Originality: 62 — The radiating fan of colorful 3D spikes is a distinctive visual signature that departs from typical testimonial card backgrounds, giving the section a recognizable identity. Next tier: The graphic alone, without a conceptual tie to brand or content, reads as decorative flourish rather than an idea-driven motif; the rest of the layout (card, avatar, arrows) is generic testimonial slider convention.
- Adaptability: 60 — The slider mechanics, quote block, and avatar are clearly separable from the decorative spike graphic, which could be swapped or removed without breaking the core testimonial structure. Next tier: Reliance on a custom 3D illustration asset for the section's signature identity means the visual impact is not purely structural and depends on bespoke artwork.

Strengths:
- Distinctive radiating 3D spike graphic gives the testimonial a memorable visual identity beyond a plain card
- Clear asymmetrical composition separates decorative and informational zones
- Visible navigation controls (arrows, dot pagination) indicate a considered slider pattern

Weaknesses:
- Decorative spike graphic has no apparent thematic connection to the testimonial content
- Typography is conventional italic-serif quote styling without distinguishing treatment
- Motion behavior cannot be verified from the evidence provided
- Right-side testimonial card itself is a fairly generic layout (avatar + quote + name/title)

Why it does not reach the next tier: The section relies on one striking decorative asset to carry its originality and composition, while the typography and card structure around it remain conventional; without more conceptual integration between the graphic and the testimonial content, or more distinctive typographic treatment, it stays in the good/polished range rather than reaching strong/memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Retain the asymmetrical structure and slider mechanics; the decorative graphic can be swapped for any bespoke illustrative motif as long as it maintains the radiating/edge-bleed composition to preserve the asymmetry.

What transfers:
- Asymmetrical layout pairing a decorative edge graphic with a content block
- Slider pattern with pagination dots and up/down arrows
- Quote + avatar + name/title testimonial structure

Dependencies:
- Custom 3D spike illustration asset
- Specific color palette applied to the spike graphic

## 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 not scored due to lack of specific timestamped behavioral detail
- Exact font rendering and spike material/lighting details inferred visually, not confirmed by deterministic data

## 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: testimonial-card
- Source type: testimonial-card
- Structure: centered single-column
- Layout: Asymmetrical layout with an edge-aligned decorative graphic on the left and a centered testimonial quote block on the right.
- Styles: illustrative, soft, minimal
- Components: Blockquote, Author Avatar, Author Details, 3D Graphic Decoration, Navigation Arrows
- Purpose: A testimonial block featuring a quote, author details, and a headshot, accompanied on the left edge by a semi-circular arrangement of colorful 3D spikes.
- Visual signature: The semi-circle of pointed, colored 3D pencil-like spikes radiating from the left edge.
- Place on the page: 9 of 11, after Feature collection (`bloom-security:3d-objects-feature-grid`), before Call to action (`bloom-security:centered-floral-cta`)

### 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": "50px",
      "family": "Libre Baskerville",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 50px Libre Baskerville used for the primary Hero H1.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "55px",
      "letterSpacing": "-2.5px"
    },
    {
      "role": "heading",
      "size": "40px",
      "family": "Libre Baskerville",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 40px Libre Baskerville used for major section headings.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "48px",
      "letterSpacing": "-1.2px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "DM Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-15: computed CSS at 1440×1000; AI role: 18px DM Sans used for body copy in the hero section.",
      "sampleId": "font-15",
      "confidence": 0.9,
      "lineHeight": "28.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": "#F0E9ED",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(240, 233, 237); AI role: Pale pink background (#F0E9ED) applied to the document body.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#261116",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(38, 17, 22); AI role: Deep burgundy (#261116) used for primary text and headings.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#DECCD1",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-3: computed rgb(222, 204, 209); AI role: Muted pink (#DECCD1) used for background blocks and surfaces.",
      "sampleId": "color-3",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium radius (approx 8-16px) on product UI mockups and feature cards; fully rounded (pill) on buttons.",
  "density": "Low density, characterized by significant whitespace and large typography.",
  "evidence": "Visual observation of the hero button (pill, outline), floating UI mockups (rounded corners, soft shadows), and the ample space between the 'Challenge' and 'Capabilities' sections.",
  "borderStyle": "Mostly borderless relying on soft background contrasts, with thin (1px) solid borders on outline buttons and some UI elements.",
  "buttonStyle": "Pill-shaped with either a solid dark fill or an outline with a transparent fill, often accompanied by an arrow icon.",
  "cornerStyle": "Predominantly rounded, from soft rounded corners on UI cards to fully rounded, pill-shaped buttons.",
  "contentWidth": "Standard max-width container (around 1200px), often utilizing a 50/50 split for text and imagery.",
  "spacingRhythm": "Generous and airy, with large vertical padding (often 100px+) separating distinct content sections."
}
```

### 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** — Scrolling reveals a quote from a CISO alongside the spike graphic. (29s–38s; 85% 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: Asymmetrical layout pairing a decorative edge graphic with a content block; Slider pattern with pagination dots and up/down arrows; Quote + avatar + name/title testimonial structure
- Dependencies: Custom 3D spike illustration asset; Specific color palette applied to the spike graphic
- Guidance: Retain the asymmetrical structure and slider mechanics; the decorative graphic can be swapped for any bespoke illustrative motif as long as it maintains the radiating/edge-bleed composition to preserve the asymmetry.

### 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 testimonial-card section inspired by the design evidence titled “Testimonial with 3D spikes”.

Purpose: A testimonial block featuring a quote, author details, and a headshot, accompanied on the left edge by a semi-circular arrangement of colorful 3D spikes.

Structure: centered single-column. Source layout label: Asymmetrical layout with an edge-aligned decorative graphic on the left and a centered testimonial quote block on the right.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: The semi-circle of pointed, colored 3D pencil-like spikes radiating from the left edge.

Components: Blockquote, Author Avatar, Author Details, 3D Graphic Decoration, Navigation Arrows.

Style direction: illustrative, soft, minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"50px","family":"Libre Baskerville","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: 50px Libre Baskerville used for the primary Hero H1.","sampleId":"font-6","confidence":0.95,"lineHeight":"55px","letterSpacing":"-2.5px"} {"role":"heading","size":"40px","family":"Libre Baskerville","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 40px Libre Baskerville used for major section headings.","sampleId":"font-2","confidence":0.95,"lineHeight":"48px","letterSpacing":"-1.2px"} {"role":"body","size":"18px","family":"DM Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-15: computed CSS at 1440×1000; AI role: 18px DM Sans used for body copy in the hero section.","sampleId":"font-15","confidence":0.9,"lineHeight":"28.8px","letterSpacing":"normal"}

Color evidence: {"hex":"#F0E9ED","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(240, 233, 237); AI role: Pale pink background (#F0E9ED) applied to the document body.","sampleId":"color-1","confidence":0.95} {"hex":"#261116","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(38, 17, 22); AI role: Deep burgundy (#261116) used for primary text and headings.","sampleId":"color-2","confidence":0.95} {"hex":"#DECCD1","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(222, 204, 209); AI role: Muted pink (#DECCD1) used for background blocks and surfaces.","sampleId":"color-3","confidence":0.85}

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: Scrolling reveals a quote from a CISO alongside the spike graphic. (85% confidence)

Transfer these principles: Asymmetrical layout pairing a decorative edge graphic with a content block; Slider pattern with pagination dots and up/down arrows; Quote + avatar + name/title testimonial structure.

Dependencies: Custom 3D spike illustration asset; Specific color palette applied to the spike graphic.

Adaptation guidance: Retain the asymmetrical structure and slider mechanics; the decorative graphic can be swapped for any bespoke illustrative motif as long as it maintains the radiating/edge-bleed composition to preserve the asymmetry.

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