---
version: alpha
name: Fider — free-and-Pro pricing page
colors:
  primary: rgb(247, 203, 69)
  text: rgb(43, 43, 43)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Unigeo 32", Arial, sans-serif'
    fontSize: 64px
    fontWeight: 700
    lineHeight: 67.2px
  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 compact pricing page with a playful free-plan hero, two outlined plan cards, a seven-question accordion and a reassuring closing CTA.

Captured from https://www.fider.io/pricing at 2026-10-13T06:04:47.355285+00:00. This reference contains the complete desktop page.

## Colors

Primary/accent: `rgb(247, 203, 69)`. 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.

- `h1` “Fider is Free”: 64px, weight 700, line-height 67.2px, color `rgb(43, 43, 43)`.
- `h2` “It’s Free!”: 38px, weight 900, line-height 45.6px, color `rgb(43, 43, 43)`.
- `h2` “25$ USD/month”: 38px, weight 900, line-height 45.6px, color `rgb(43, 43, 43)`.
- `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)`.
- `h2` “Take the next step”: 48px, weight 600, line-height 57.6px, color `rgb(43, 43, 43)`.

Matching mobile text is 48px with 50.4px leading.

## Layout

Put the free-plan proposition on a pale illustrated hero. Use a cream free card alongside a white paid card, each with a yellow action. Place a centered FAQ heading over a single bordered accordion, followed by the CTA and structured footer. Source prices are captured evidence, not a recommendation or guaranteed current offer.

Desktop region: 1440.00 × 3226.00px at a 1440px viewport. Mobile region/page: 390.00 × 3860.00px at a 390px viewport. The primary image is full-page; the standard mobile image covers the opening viewport, with additional audit views only where noted.

At 390px the menu collapses, the hero title wraps into two lines and the pricing cards stack. The introductory text becomes a narrow centered column. Decorative doodles sit near the text, as on the source; do not add additional overlap.

## Elevation & Depth

Flat card surfaces and thin black borders carry the hierarchy, with a hard offset shadow on yellow buttons.

## Shapes

Use generously rounded pricing-card corners, a continuous FAQ enclosure and organic edge decoration.

## Components

Put the free-plan proposition on a pale illustrated hero. Use a cream free card alongside a white paid card, each with a yellow action. Place a centered FAQ heading over a single bordered accordion, followed by the CTA and structured footer. Source prices are captured evidence, not a recommendation or guaranteed current offer.

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.