Fider — outlined FAQ accordion

---
version: alpha
name: Fider — outlined FAQ accordion
colors:
  primary: rgb(43, 43, 43)
  text: rgb(43, 43, 43)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Unigeo 32", Arial, sans-serif'
    fontSize: 54px
    fontWeight: 600
    lineHeight: 56.7px
  supporting:
    fontFamily: Poppins, Arial, sans-serif
    fontSize: 19.2px
    fontWeight: 400
    lineHeight: 28.8px
omitted:
- section: spacing
  reason: Measured capture geometry is recorded in Layout; no unobserved global spacing
    scale is inferred.
- section: rounded
  reason: Observed silhouettes are described in Shapes rather than inventing a global
    radius scale.
- section: components
  reason: This reference uses composition guidance in prose, not an inferred component-token
    API.
---

## Overview

A standalone FAQ section with a centered geometric heading and seven closed questions inside one thin outlined enclosure.

Captured from https://www.fider.io/ at 2026-10-13T06:07:23.416442+00:00. This reference isolates `section.section_faq`.

## Colors

Primary/accent: `rgb(43, 43, 43)`. Measured heading/form text: `rgb(43, 43, 43)`. White is an observed light surface. These are reference tokens, not a complete brand palette; artwork and secondary panels introduce additional colors.

## Typography

The principal measured family is `"Unigeo 32", Arial, sans-serif`. Supporting sample uses `Poppins, Arial, sans-serif`. Preserve the contrast between text roles rather than treating every sample as the body default.

- `h2` “Frequently Asked Questions”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h3` “Who does Fider work best for?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “How easy is it to set up Fider?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “Can I see an example Fider board?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “Can I use Fider for my team internally?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “How much does Fider cost?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “I could just use a spreadsheet right?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.
- `h3` “Is there a long term commitment?”: 30px, weight 600, line-height 30px, color `rgb(0, 0, 0)`.

Matching mobile text is 32px with 33.6px leading.

## Layout

Center a two-line desktop heading and short supporting sentence above the accordion. Give each question a large left-aligned label and a small right-hand curved chevron. Share borders between rows rather than spacing each question as a card. All seven rows are captured closed.

Desktop region: 1440.00 × 1154.97px at a 1440px viewport. Mobile region/page: 390.00 × 1084.78px at a 390px viewport. Each component has a separately measured full element crop at both widths.

At 390px the heading wraps into three lines and the accordion is a narrow 230px column with large 80px side gutters. Questions wrap into several lines and rows grow vertically. This is observed source behavior, not a recommended universal mobile gutter. No expand/collapse action was tested.

## Elevation & Depth

Keep depth flat and communicate grouping with the continuous thin black outline and horizontal dividers.

## Shapes

Round only the outer enclosure corners; internal row dividers stay straight.

## Components

Center a two-line desktop heading and short supporting sentence above the accordion. Give each question a large left-aligned label and a small right-hand curved chevron. Share borders between rows rather than spacing each question as a card. All seven rows are captured closed.

This is one observed static state. Menus, filtering, accordions, billing changes and animation outcomes are not claimed as tested unless explicitly stated above.

## Do's and Don'ts

- Do retain the measured hierarchy, alignment and responsive changes described above.
- Do keep labels, legal choices and navigation text readable when adapting the design.
- Do replace source-specific copy, prices and customer proof with your own verified content.
- Don't infer hidden validation, focus states, motion timing or accessibility conformance from this screenshot.
- Don't copy decorative detail at the expense of the content structure.