# Accordion FAQ list

Schema: Design Details SECTION.md v3.2
Website: Hyperiux Vault
Source: https://vault.hyperiux.com/
Source section IDs: gap-00271143-20168-21696
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A centered one-word heading in the orange accent sits above a single-column list, so the eye lands on the payoff and then moves straight to the questions.
- Thin #272727 dividers and even row gaps keep the dark list tidy, and white question text on near-black reads clearly.
- Questions are specific to the product (Vault, GSAP, Three.js), so the list feels like real content rather than filler.

What a screenshot can't show:
- The recording showed no specific motion, so the open and close timing and the chevron behavior are unknown.
- No font sizes, line heights or spacing were measured, so the type scale and row padding can't be confirmed.

Borrow: Pair one bold accent-colored word with a quiet, divider-based list so the heading carries the personality and the rows stay easy to scan.
Leave alone: Don't copy the orange #FF5F00 on near-black palette, the 'Answered.' headline, or the Vault-specific questions; use your own accent, wording and a free geometric sans.

## Classification

- Type: faq
- Layout: Centered heading above a single-column vertical expanding list.
- Styles: minimal
- Confidence: 96%

## Purpose and structure

A dark-themed frequently asked questions section using an expanding accordion list format.

Visual signature: Clean dark list of questions with expanding accordion rows.

## Components

- heading
- accordion
- text-block

## Typography

- Display: neueHaasUnica — 72px 400
- Heading: neueHaasUnica — 46.1px 400
- Body: neueHaasUnica — 16.6px 400
- Mono: None — 13.7px 400

## Functional palette

- Canvas: canvas #050505
- Text: text #FFFFFF
- Primary-Action: primary action #FF5F00
- Border: border #272727
- Muted-Text: muted text #939393

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 55.94/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Simple hierarchy: oversized orange display word 'Answered.' contrasts with white list rows on a dark/light split background. Clean, legible, but a single-weight, single-family system with no other typographic devices beyond size and color contrast. Next tier: Needs more deliberate type pairing, scale variation within the question rows, or a secondary supporting label to lift beyond a familiar accordion label treatment.
- Composition: 56 — Centered heading above a bordered vertical list; a stark white-to-black canvas transition cuts across the section, which reads as an unusual compositional choice but may be an artifact of the crop rather than intended layering. Rows are evenly gapped with thin dividers and chevrons, functional but conventional. Next tier: The composition would need a clearer intentional relationship between the heading block and the list panel (alignment, shared framing, or visual bridge) rather than the abrupt color-block seam visible here.
- Motion: not_assessed — No timestamped motion evidence supplied; motion_moments is empty. Next tier: Provide timestamped before/after frames of an accordion row expanding/collapsing to assess easing, stagger, or reveal choreography.
- Content: 55 — Questions are specific to the product (Vault, GSAP, Three.js) giving genuine content grounding rather than generic placeholder FAQ, but the answers are collapsed/unreadable in the crop and the heading 'Answered.' is a thin single-word payoff. Next tier: Would need visible answer copy and a stronger integration between heading statement and list content to be more than a conventional FAQ pattern.
- Originality: 48 — This is a very standard accordion FAQ pattern (chevron, bordered rows, dark theme) with only a color-accented one-word heading as a distinguishing flourish. Next tier: Lacks a structural or interaction idea beyond the default accordion; would need an unconventional list treatment, numbering system, or layout twist to be distinctive.
- Adaptability: 62 — Structure (heading + vertical list of rows with icon/question/divider) is clearly separable from the dark skin, orange accent, and specific copy; straightforward to reskin. Next tier: n/a

Strengths:
- Product-specific question copy gives the FAQ real content grounding
- Clear row separation via thin borders and consistent spacing
- Simple, legible chevron + question row structure is easy to scan

Weaknesses:
- No visible motion evidence for the accordion expand/collapse interaction
- Single-word heading payoff with no supporting subcopy
- Very conventional accordion pattern with minimal distinguishing visual idea
- Abrupt white-to-black seam across the crop reads as a layout/background inconsistency

Why it does not reach the next tier: The section executes a thoroughly standard accordion pattern competently but offers no distinctive compositional, typographic, or interaction idea that would make it memorable beyond its category; the visible color discontinuity across the crop also raises clarity doubts.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the row/divider/chevron skeleton and heading placement; swap palette, copy, and heading treatment freely since the pattern itself carries no unique visual signature.

What transfers:
- Vertical list-row accordion structure with icon, label, and divider
- Heading-above-list layout rhythm

Dependencies:
- Dark canvas and orange accent color
- Specific question/answer copy

## 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 provided, so accordion expand/collapse behavior could not be assessed
- Answer content inside rows is not visible in the crop
- Abrupt background color split may be a cropping artifact rather than true design intent

## 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: faq
- Source type: faq
- Structure: centered single-column
- Layout: Centered heading above a single-column vertical expanding list.
- Styles: minimal
- Components: heading, accordion, text-block
- Purpose: A dark-themed frequently asked questions section using an expanding accordion list format.
- Visual signature: Clean dark list of questions with expanding accordion rows.
- Place on the page: 16 of 18, after Pricing (`0a0dc8a4-90a8-4e83-a719-16c9a40e60e8`), before Call to action (`vault-hyperiux-com:hyperiux-cta-linear-pattern`)

### 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": "72px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Neue Haas Unica at 72px, used for the main hero headline 'The Interaction Layer Your Website is Missing.'",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "87.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "46.1px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Neue Haas Unica at 46.1px, used for secondary section headings.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "55.3px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16.6px",
      "family": "neueHaasUnica",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: Neue Haas Unica at 16.6px, used for descriptive paragraphs and body copy.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "24.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "13.7px",
      "family": null,
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Monospace font at 13.7px, used extensively in code snippet blocks and file paths.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "20.5px",
      "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": "#050505",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(5, 5, 5); AI role: Deep black (#050505) applied to the body and main containers.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary headings and body text to ensure high contrast against the dark canvas.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FF5F00",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-6: computed rgb(255, 95, 0); AI role: Vibrant orange (#FF5F00) used for primary buttons ('Sign In', 'Browse All Effects') and accented text.",
      "sampleId": "color-6",
      "confidence": 0.95
    },
    {
      "hex": "#272727",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-5: computed rgb(39, 39, 39); AI role: Dark gray (#272727) used for structural borders around cards and sections.",
      "sampleId": "color-5",
      "confidence": 0.85
    },
    {
      "hex": "#939393",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-7: computed rgb(147, 147, 147); AI role: Gray (#939393) used for secondary text, labels, and less prominent information.",
      "sampleId": "color-7",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Minimal to zero border-radius is observed on core components like feature cards and buttons.",
  "density": "Low density overall. The design relies on significant negative space (macro white space) to draw focus to typography and key interactions, though code blocks and feature grids present localized areas of moderate density.",
  "evidence": "Visual inspection of the overall layout, the sharp corners on the 'Read Docs' and 'Browse All Effects' buttons, the thin grid lines in the 'Preview. Install. Tune. Ship.' section, and the structured spacing in the footer and pricing sections.",
  "borderStyle": "Thin, solid 1px borders in dark grays (e.g., #272727) are used extensively to define grids, separate sections, and outline buttons, creating a wireframe-like structure.",
  "buttonStyle": "Buttons are blocky and rectangular. Primary buttons are solid vibrant orange with dark text, while secondary buttons use outlines with transparent or dark backgrounds.",
  "cornerStyle": "Sharp, 90-degree corners are predominant across cards, buttons, and structural borders, reinforcing a technical and precise aesthetic.",
  "contentWidth": "Content is generally center-aligned within a max-width container, with some grid layouts extending wider but maintaining significant left/right margins.",
  "spacingRhythm": "Generous vertical spacing between sections, employing large margins and padding to create a rhythmic, uncrowded scrolling experience. Components within sections (like grids and tables) use tighter, structured gaps."
}
```

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

No timestamped authored motion is attached. Use only restrained baseline transitions.

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: low
- What transfers: Vertical list-row accordion structure with icon, label, and divider; Heading-above-list layout rhythm
- Dependencies: Dark canvas and orange accent color; Specific question/answer copy
- Guidance: Reuse the row/divider/chevron skeleton and heading placement; swap palette, copy, and heading treatment freely since the pattern itself carries no unique visual signature.

### 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; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original faq section inspired by the design evidence titled “Accordion FAQ list”.

Purpose: A dark-themed frequently asked questions section using an expanding accordion list format.

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

Visual signature to preserve at the pattern level: Clean dark list of questions with expanding accordion rows.

Components: heading, accordion, text-block.

Style direction: minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"72px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Neue Haas Unica at 72px, used for the main hero headline 'The Interaction Layer Your Website is Missing.'","sampleId":"font-1","confidence":0.95,"lineHeight":"87.8px","letterSpacing":"normal"} {"role":"heading","size":"46.1px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Neue Haas Unica at 46.1px, used for secondary section headings.","sampleId":"font-2","confidence":0.9,"lineHeight":"55.3px","letterSpacing":"normal"} {"role":"body","size":"16.6px","family":"neueHaasUnica","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Neue Haas Unica at 16.6px, used for descriptive paragraphs and body copy.","sampleId":"font-7","confidence":0.9,"lineHeight":"24.8px","letterSpacing":"normal"} {"role":"mono","size":"13.7px","family":null,"source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Monospace font at 13.7px, used extensively in code snippet blocks and file paths.","sampleId":"font-6","confidence":0.95,"lineHeight":"20.5px","letterSpacing":"normal"}

Color evidence: {"hex":"#050505","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(5, 5, 5); AI role: Deep black (#050505) applied to the body and main containers.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for primary headings and body text to ensure high contrast against the dark canvas.","sampleId":"color-2","confidence":0.95} {"hex":"#FF5F00","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(255, 95, 0); AI role: Vibrant orange (#FF5F00) used for primary buttons ('Sign In', 'Browse All Effects') and accented text.","sampleId":"color-6","confidence":0.95} {"hex":"#272727","name":"border","role":"border","source":"computed","evidence":"color-5: computed rgb(39, 39, 39); AI role: Dark gray (#272727) used for structural borders around cards and sections.","sampleId":"color-5","confidence":0.85} {"hex":"#939393","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed rgb(147, 147, 147); AI role: Gray (#939393) used for secondary text, labels, and less prominent information.","sampleId":"color-7","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.

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Vertical list-row accordion structure with icon, label, and divider; Heading-above-list layout rhythm.

Dependencies: Dark canvas and orange accent color; Specific question/answer copy.

Adaptation guidance: Reuse the row/divider/chevron skeleton and heading placement; swap palette, copy, and heading treatment freely since the pattern itself carries no unique visual signature.

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