---
version: alpha
name: Fider — colorful feedback-product homepage
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 playful feedback-tool homepage with converging pastel rays, bold geometric type, yellow offset-shadow actions, a large product preview and alternating illustrated process sections.

Captured from https://www.fider.io/ at 2026-10-13T06:06:25.427112+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` “Wanna Manage All Those Feature Requests Properly?”: 64px, weight 700, line-height 67.2px, color `rgb(43, 43, 43)`.
- `h2` “All Your Product Feedback In One Place”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h2` “Create your Fider board, give it a title and a welcome message.”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h2` “Kick things off by adding a few ideas to your Fider board.”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h2` “Now you've got a public list of ideas, let the voting commence.”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h2` “Now you can sit back, and see which features and ideas your customers really want”: 54px, weight 600, line-height 56.7px, color `rgb(43, 43, 43)`.
- `h2` “Don't take our word for it, here's what others say about Fider...”: 40px, weight 600, line-height 52px, color `rgb(43, 43, 43)`.
- `h2` “Don't take our word for it, here's what others say about Fider...”: 40px, weight 600, line-height 52px, color `rgb(43, 43, 43)`.
- `h2` “Don't take our word for it, here's what others say about Fider...”: 40px, weight 600, line-height 52px, color `rgb(43, 43, 43)`.
- `h2` “Take the next step”: 48px, weight 600, line-height 57.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

Matching mobile text is 48px with 50.4px leading.

## Layout

Center the badge and headline over converging yellow, pink and blue rays. Place the main action before a black-framed product preview. Continue through problem framing, customer proof, alternating setup steps, testimonials, a rounded CTA panel, FAQs and a gridded footer.

Desktop region: 1440.00 × 8509.00px at a 1440px viewport. Mobile region/page: 390.00 × 8538.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 navigation becomes a hamburger and the headline wraps into six short lines. The supporting paragraph is a narrow centered column, and the yellow CTA grows to a comfortable tap target. The hero image starts below the first mobile viewport. Lower mobile sections are only asserted where separately captured.

## Elevation & Depth

Use flat pastel decoration and hard black action shadows; keep the product frame heavier than the supporting cards.

## Shapes

Combine organic doodles, rounded rectangles and a strong black product-preview frame.

## Components

Center the badge and headline over converging yellow, pink and blue rays. Place the main action before a black-framed product preview. Continue through problem framing, customer proof, alternating setup steps, testimonials, a rounded CTA panel, FAQs and a gridded footer.

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.