# Evolution Graphic and Text

Schema: Design Details SECTION.md v3.2
Website: Biotic
Source: https://biotic.org/
Source section IDs: gap-9558a4bc-3311-5020
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- One dense black circular illustration anchors a stark white canvas, so the eye lands on it before anything else.
- The centered stack reads in a clear order: graphic, short paragraph, call-to-action link, dotted divider, then a closing statement.
- Black text on white with a single lime accent and grey muted text keeps the hierarchy clear and leaves generous whitespace around the focal graphic.

What a screenshot can't show:
- The recording shows only the section scrolling into view, with no specific animation, easing or timing to report.
- No font sizes, line heights or spacing values were measured, so the exact type scale and gaps are unknown.

Borrow: Let one strong, thematically tied graphic carry a minimal centered layout, and keep the text quiet around it.
Leave alone: Don't copy the circular maze or fingerprint illustration, or the black, white and lime palette; draw your own motif that fits your subject.

## Classification

- Type: editorial
- Layout: Centered vertical stack
- Styles: minimal, illustrative
- Confidence: 98%

## Purpose and structure

A centered layout featuring a circular maze-like graphic above explanatory text.

Visual signature: A stark white section dominated by a black circular fingerprint or maze-like abstract pattern in the center.

## Components

- Section heading
- Circular abstract illustration
- Centered paragraph
- Call to action link
- Dotted horizontal divider
- Footer paragraph

## Typography

- Display: Roobert Medium — 156.4px 500
- Heading: Roobert Medium — 51.2px 500
- Body: Roobert Medium — 14px 500

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #000000
- Accent: accent #B6E400
- Muted-Text: muted text #808080

## Motion evidence

- 12.0–18.0s — Scrolling reveals the evolution of biology section with its central graphic. (96% confidence)

## Section quality

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

- Typography: 62 — Clean hierarchy between heading, body paragraph, and lower statement text with consistent sans-serif usage. Sizing contrast is modest and legible, but nothing beyond competent weight/size pairing is evident in this crop. Next tier: Needs more deliberate scale contrast or expressive type treatment to move past a polished-default feel.
- Composition: 68 — Centered symmetrical stack with a strong circular illustration as focal anchor, generous whitespace, and a clear dotted divider separating content blocks. The balance between graphic and text is well controlled and the radial motif gives the layout a distinct identity. Next tier: Layout is a single centered column with no secondary compositional tension (asymmetry, layering, scale variation) that would push it into strong/memorable territory.
- Motion: inconclusive — Only a generic scroll-reveal timestamp is supplied with no specific visible animation detail (easing, stagger, transform) to assess. Next tier: Requires timestamped description of actual motion behavior (e.g., how the graphic or text animates in) to be scored.
- Content: 60 — Text and graphic are thematically connected (biology/maze pattern suggesting organic complexity) and placed in logical reading order with a CTA, but the graphic is decorative/abstract rather than tied to specific data or content. Next tier: Would need tighter integration where the graphic visually encodes or echoes the specific claims in the text, not just abstract mood-setting.
- Originality: 65 — The dense circular maze/fingerprint illustration is a distinctive, non-generic visual device that stands out from typical stock photography or icon usage, giving the section a specific identity. Next tier: The surrounding layout (centered heading, paragraph, CTA, divider) is a standard pattern; without the graphic, the structure itself is unremarkable, capping overall originality.
- Adaptability: 58 — Structure (heading, centered graphic, paragraph, CTA, divider) is simple and separable from skin (black/white palette, lime accent, specific maze pattern), making reuse straightforward, but the custom illustration is a bespoke asset dependency. Next tier: Full separation would require documenting how the generative pattern is produced/parameterized rather than treating it as a static image.

Strengths:
- Strong centered focal graphic that anchors the section visually
- Clear content hierarchy with generous whitespace
- Thematically fitting abstract illustration reinforcing the biology subject
- Dotted divider provides clean section transition without heavy visual weight

Weaknesses:
- Typography lacks strong scale or weight contrast beyond standard heading/body pairing
- Layout is a conventional centered single-column stack with no secondary structural interest
- Motion evidence is too generic to assess any animation quality
- CTA treatment (small icon button + text) is minimal and could be overlooked

Why it does not reach the next tier: The section relies on one standout element—the circular illustration—while the rest of the composition (centered stack, standard CTA, basic divider) follows a conventional editorial template; to reach strong/memorable it would need either more compositional tension or type treatment that distinguishes it beyond the single graphic.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the centered stack and divider pattern with any heading/body copy; recreating the circular graphic requires either a licensed illustration or a generative pattern script, which is the main dependency to source or rebuild.

What transfers:
- Centered heading + graphic + paragraph + CTA structure
- Dotted divider as section separator
- Low-density whitespace rhythm

Dependencies:
- Custom maze/fingerprint illustration asset or generative pattern logic
- Specific lime-green accent for CTA and icon
- Roobert typeface family

## 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 cannot be scored due to lack of specific timestamped animation detail
- Exact font rendering and illustration generation method are not verifiable from the 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: editorial
- Source type: editorial
- Structure: centered single-column
- Layout: Centered vertical stack
- Styles: minimal, illustrative
- Components: Section heading, Circular abstract illustration, Centered paragraph, Call to action link, Dotted horizontal divider, Footer paragraph
- Purpose: A centered layout featuring a circular maze-like graphic above explanatory text.
- Visual signature: A stark white section dominated by a black circular fingerprint or maze-like abstract pattern in the center.
- Place on the page: 6 of 10, after Feature collection (`biotic-org:about_features_list`), before Feature collection (`biotic-org:imagine_feature_list`)

### 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": "156.4px",
      "family": "Roobert Medium",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: 156.4px Roobert Medium used for the main hero text 'Out of one, many.'",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "156.4px",
      "letterSpacing": "-6.3px"
    },
    {
      "role": "heading",
      "size": "51.2px",
      "family": "Roobert Medium",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: 51.2px Roobert Medium used for primary section introductions and large body copy blocks.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "56.3px",
      "letterSpacing": "-2px"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Roobert Medium",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 14px Roobert Medium used for navigation links and smaller secondary text.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "normal",
      "letterSpacing": "-0.1px"
    }
  ]
}
```

### 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": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background used extensively in the upper and middle sections of the page.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Black text used for primary content on white canvas backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#B6E400",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-4: computed rgb(182, 228, 0); AI role: Lime green (#B6E400) used for icons, graphic circles, and primary buttons.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#808080",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-6: computed rgb(128, 128, 128); AI role: Grey text (#808080) used for secondary information like dates and specific descriptions.",
      "sampleId": "color-6",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Pill-shaped radii for form fields and primary action buttons.",
  "density": "Low density; the design leverages substantial whitespace to emphasize typography and large generative graphics.",
  "evidence": "Visible in component layout, button shapes, and the strict adherence to dotted line separators across distinct background colors.",
  "borderStyle": "Distinctive use of fine dotted horizontal lines (1px) as dividers between content rows.",
  "buttonStyle": "Solid fill pill buttons, often utilizing the bright accent color for high visibility.",
  "cornerStyle": "Combination of fully rounded pill shapes for buttons and inputs, alongside sharp rectangular boundaries for large layout sections.",
  "contentWidth": "Centered content with wide max-width, allowing generous margins on standard desktop displays.",
  "spacingRhythm": "Generous vertical spacing between distinct sections, with tighter, uniform padding inside tabular lists."
}
```

### 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 the evolution of biology section with its central graphic. (12s–18s; 96% 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: Centered heading + graphic + paragraph + CTA structure; Dotted divider as section separator; Low-density whitespace rhythm
- Dependencies: Custom maze/fingerprint illustration asset or generative pattern logic; Specific lime-green accent for CTA and icon; Roobert typeface family
- Guidance: Reuse the centered stack and divider pattern with any heading/body copy; recreating the circular graphic requires either a licensed illustration or a generative pattern script, which is the main dependency to source or rebuild.

### 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 “Evolution Graphic and Text”.

Purpose: A centered layout featuring a circular maze-like graphic above explanatory text.

Structure: centered single-column. Source layout label: Centered vertical stack. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A stark white section dominated by a black circular fingerprint or maze-like abstract pattern in the center.

Components: Section heading, Circular abstract illustration, Centered paragraph, Call to action link, Dotted horizontal divider, Footer paragraph.

Style direction: minimal, illustrative.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"156.4px","family":"Roobert Medium","source":"computed","traits":"Regular","weight":"500","evidence":"font-6: computed CSS at 1440×1000; AI role: 156.4px Roobert Medium used for the main hero text 'Out of one, many.'","sampleId":"font-6","confidence":0.95,"lineHeight":"156.4px","letterSpacing":"-6.3px"} {"role":"heading","size":"51.2px","family":"Roobert Medium","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 51.2px Roobert Medium used for primary section introductions and large body copy blocks.","sampleId":"font-1","confidence":0.9,"lineHeight":"56.3px","letterSpacing":"-2px"} {"role":"body","size":"14px","family":"Roobert Medium","source":"computed","traits":"Regular","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: 14px Roobert Medium used for navigation links and smaller secondary text.","sampleId":"font-3","confidence":0.9,"lineHeight":"normal","letterSpacing":"-0.1px"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background used extensively in the upper and middle sections of the page.","sampleId":"color-3","confidence":0.95} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Black text used for primary content on white canvas backgrounds.","sampleId":"color-1","confidence":0.95} {"hex":"#B6E400","name":"accent","role":"accent","source":"computed","evidence":"color-4: computed rgb(182, 228, 0); AI role: Lime green (#B6E400) used for icons, graphic circles, and primary buttons.","sampleId":"color-4","confidence":0.9} {"hex":"#808080","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(128, 128, 128); AI role: Grey text (#808080) used for secondary information like dates and specific descriptions.","sampleId":"color-6","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 the evolution of biology section with its central graphic. (96% confidence)

Transfer these principles: Centered heading + graphic + paragraph + CTA structure; Dotted divider as section separator; Low-density whitespace rhythm.

Dependencies: Custom maze/fingerprint illustration asset or generative pattern logic; Specific lime-green accent for CTA and icon; Roobert typeface family.

Adaptation guidance: Reuse the centered stack and divider pattern with any heading/body copy; recreating the circular graphic requires either a licensed illustration or a generative pattern script, which is the main dependency to source or rebuild.

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