# FAQ accordion and terminal CTA

Schema: Design Details SECTION.md v3.2
Website: Linearity
Source: https://www.linearity.io/
Source section IDs: gap-12a63c6c-26803-28336
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The shift from small, dense accordion rows to one oversized centered headline gives the page a clear closing beat.
- The orange glow in the corner on a black canvas adds warmth and focus without competing with white text.
- The prompt input sits directly under the headline, so the invitation to try the product is the obvious next step.

What a screenshot can't show:
- The recording showed no specific motion, so accordion open timing and any glow animation are unknown.
- Measured spacing and type were not captured; the review estimates about 13.7px for FAQ labels and 75.4px for the headline with tight letter-spacing.

Borrow: End a dense list with a sudden jump in scale and an action field, so the layout itself signals the move from reading to doing.
Leave alone: Don't copy the black, white and #FF4800 orange glow palette, the 'Prove us wrong' line, or the pill-shaped prompt input; use your own colours, voice and control shape.

## Classification

- Type: faq
- Layout: Right-aligned accordion list transitioning into a center-aligned large typographic CTA.
- Styles: minimal, gradient, typographic
- Confidence: 90%

## Purpose and structure

An accordion-style FAQ list flowing directly into a final call-to-action block with a prompt input.

Visual signature: Dark background with a soft orange glow, transitioning from subtle FAQ rows to a large CTA.

## Components

- accordion-list
- heading
- text-input
- submit-button

## Typography

- Display: AcidGrotesk — 75.4px 400
- Heading: AcidGrotesk — 34.3px 500
- Body: Inter — 13.7px 400
- Mono: Inter — 10.3px 500

## Functional palette

- Canvas: canvas #000000
- Text: text #FFFFFF
- Primary-Action: primary action #FF4800

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 62 — Clear type hierarchy: small accordion labels (body/13.7px-ish), large display statement at 75.4px with tight letter-spacing creates a strong closing beat. Contrast between dense FAQ list and oversized CTA headline is well-handled, but the FAQ text itself is plain and unremarkable. Next tier: Needs more distinctive type treatment within the FAQ rows themselves, not just the closing headline, to earn strong/memorable.
- Composition: 64 — Right-aligned accordion against a glowing gradient corner, transitioning into a centered CTA, creates a considered compositional shift from list density to open space. The placement of the input field beneath the headline is clean and the whole section reads as a unified descent toward resolution. Next tier: Composition relies on conventional accordion-to-CTA stacking seen widely in SaaS pages; nothing in the spatial arrangement is distinctive enough to push past polished/good into memorable territory.
- Motion: not_assessed — No motion_moments or timestamped visible changes were supplied, only an empty motion_moments array, so motion cannot be scored. Next tier: Needs timestamped evidence of accordion expand/collapse transitions or CTA entrance animation to assess.
- Content: 55 — FAQ content is directly relevant (product-specific questions about editability, teams, exports) and the CTA copy is confident and on-brand ('Don't take our word for it. Prove us wrong.'). Content integration is functional but the questions are generic SaaS FAQ fare. Next tier: Content needs sharper, more surprising copy or a unique presentation device to be considered memorable.
- Originality: 52 — Standard accordion FAQ pattern with a familiar dark-gradient-glow background; the terminal CTA with placeholder prompt text is a recognizable 'AI-tool' convention at this point, not a novel structural idea. Next tier: Lacks a distinguishing structural or interactive twist beyond the now-common gradient-glow dark SaaS template.
- Adaptability: 58 — Accordion list and CTA block are structurally separable components (list + heading + input + button) with clear deterministic token hooks (colors, radius, pill buttons) that could be reskinned. Next tier: No component-level spacing/sizing tokens supplied for the accordion rows themselves, limiting confidence in exact structural extraction.

Strengths:
- Clean descent from dense FAQ list to spacious single-statement CTA creates good pacing
- Large display typography at the close gives a strong visual full stop
- Gradient glow accents add warmth without overwhelming the dark canvas
- Pill-shaped submit button and translucent input field are consistent with the rest of the design system

Weaknesses:
- FAQ questions and copy are generic SaaS boilerplate
- Accordion visual treatment itself is unremarkable, relying entirely on the closing headline for impact
- Overall pattern (FAQ into CTA with prompt input) is a common template structure, not distinctive
- No motion evidence provided despite an accordion being an inherently interactive component

Why it does not reach the next tier: The section is well-executed and polished but depends on a widely-used FAQ-to-CTA template structure with ordinary typographic treatment in the list itself; nothing here is hard to substitute from a competing SaaS site.

## Adaptation guidance

- Effort: Low
- Guidance: Swap FAQ copy, headline text, and brand colors; the accordion and CTA input components are generic enough to reskin without structural changes.

What transfers:
- Accordion list structure with expand icon
- Large centered closing headline pattern
- Prompt input with inline tag inside CTA field

Dependencies:
- Gradient glow background effect
- AcidGrotesk display font at scale
- Brand-specific CTA 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%)
- Motion not assessable due to lack of timestamped evidence
- No deterministic spacing/sizing data for individual accordion rows

## 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: Right-aligned accordion list transitioning into a center-aligned large typographic CTA.
- Styles: minimal, gradient, typographic
- Components: accordion-list, heading, text-input, submit-button
- Purpose: An accordion-style FAQ list flowing directly into a final call-to-action block with a prompt input.
- Visual signature: Dark background with a soft orange glow, transitioning from subtle FAQ rows to a large CTA.
- Place on the page: 9 of 11, after Pricing (`linearity-io:pricing_table_dark`), before Call to action (`ff205d07-7e43-4986-95be-84aa3ab7ee5b`)

### 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": "75.4px",
      "family": "AcidGrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-22: computed CSS at 1440×1000; AI role: AcidGrotesk at 75.4px with tight letter-spacing (-0.8px) for major impactful statements.",
      "sampleId": "font-22",
      "confidence": 1,
      "lineHeight": "75.4px",
      "letterSpacing": "-0.8px"
    },
    {
      "role": "heading",
      "size": "34.3px",
      "family": "AcidGrotesk",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: AcidGrotesk at 34.3px used for section headers and the hero text cycle.",
      "sampleId": "font-19",
      "confidence": 0.95,
      "lineHeight": "39.8px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "body",
      "size": "13.7px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Inter at 13.7px used for standard descriptive paragraphs.",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "20.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "10.3px",
      "family": "Inter",
      "source": "computed",
      "traits": "uppercase",
      "weight": "500",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: Inter at 10.3px, uppercase with 2.3px letter-spacing, functioning as eyebrows and small labels.",
      "sampleId": "font-8",
      "confidence": 0.85,
      "lineHeight": "14.4px",
      "letterSpacing": "2.3px"
    }
  ]
}
```

### 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": "#000000",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(0, 0, 0); AI role: Pure black #000000 used as the primary background color for the page body.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 255, 255); AI role: Solid white #FFFFFF used for primary headings and body copy.",
      "sampleId": "color-2",
      "confidence": 1
    },
    {
      "hex": "#FF4800",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-17: computed rgb(255, 72, 0); AI role: #FF4800 used for prominent 'Contact sales' buttons and active states.",
      "sampleId": "color-17",
      "confidence": 0.95
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons and badges use max radius (border-radius: 9999px equivalents), while product UI mockups use consistent, large, smooth radii.",
  "density": "Loose and airy, prioritizing visual impact and large typography over high information density.",
  "evidence": "Observed via DOM structures for buttons (.pill-shape), computed styles for background colors, and padding/margin layout patterns across sections.",
  "borderStyle": "Hairline (1px), translucent white borders on dark elements to create depth without solid lines.",
  "buttonStyle": "Pill-shaped, either solid high-contrast (orange) or glassmorphic (dark translucent with white text/border).",
  "cornerStyle": "Distinctively dual-natured: fully rounded (pill-shaped) for interactive elements like buttons and tags, and heavily rounded rectangles (e.g., 16-24px) for cards and UI mockups.",
  "contentWidth": "Content is typically centered in a max-width container, though background effects and parallax grids bleed to the edges.",
  "spacingRhythm": "Generous vertical rhythm with large gaps between sections to allow background gradients to show. Content blocks are padded with ample negative space."
}
```

### 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: Accordion list structure with expand icon; Large centered closing headline pattern; Prompt input with inline tag inside CTA field
- Dependencies: Gradient glow background effect; AcidGrotesk display font at scale; Brand-specific CTA copy
- Guidance: Swap FAQ copy, headline text, and brand colors; the accordion and CTA input components are generic enough to reskin without structural changes.

### 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 “FAQ accordion and terminal CTA”.

Purpose: An accordion-style FAQ list flowing directly into a final call-to-action block with a prompt input.

Structure: centered single-column. Source layout label: Right-aligned accordion list transitioning into a center-aligned large typographic CTA.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Dark background with a soft orange glow, transitioning from subtle FAQ rows to a large CTA.

Components: accordion-list, heading, text-input, submit-button.

Style direction: minimal, gradient, typographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"75.4px","family":"AcidGrotesk","source":"computed","traits":"Regular","weight":"400","evidence":"font-22: computed CSS at 1440×1000; AI role: AcidGrotesk at 75.4px with tight letter-spacing (-0.8px) for major impactful statements.","sampleId":"font-22","confidence":1,"lineHeight":"75.4px","letterSpacing":"-0.8px"} {"role":"heading","size":"34.3px","family":"AcidGrotesk","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: AcidGrotesk at 34.3px used for section headers and the hero text cycle.","sampleId":"font-19","confidence":0.95,"lineHeight":"39.8px","letterSpacing":"-0.3px"} {"role":"body","size":"13.7px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Inter at 13.7px used for standard descriptive paragraphs.","sampleId":"font-6","confidence":1,"lineHeight":"20.6px","letterSpacing":"normal"} {"role":"mono","size":"10.3px","family":"Inter","source":"computed","traits":"uppercase","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: Inter at 10.3px, uppercase with 2.3px letter-spacing, functioning as eyebrows and small labels.","sampleId":"font-8","confidence":0.85,"lineHeight":"14.4px","letterSpacing":"2.3px"}

Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black #000000 used as the primary background color for the page body.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 255, 255); AI role: Solid white #FFFFFF used for primary headings and body copy.","sampleId":"color-2","confidence":1} {"hex":"#FF4800","name":"primary action","role":"primary-action","source":"computed","evidence":"color-17: computed rgb(255, 72, 0); AI role: #FF4800 used for prominent 'Contact sales' buttons and active states.","sampleId":"color-17","confidence":0.95}

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: Accordion list structure with expand icon; Large centered closing headline pattern; Prompt input with inline tag inside CTA field.

Dependencies: Gradient glow background effect; AcidGrotesk display font at scale; Brand-specific CTA copy.

Adaptation guidance: Swap FAQ copy, headline text, and brand colors; the accordion and CTA input components are generic enough to reskin without structural changes.

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