---
version: alpha
name: Fider — reassuring next-step CTA
colors:
  primary: rgb(247, 203, 69)
  text: rgb(43, 43, 43)
  surface: '#FFFFFF'
typography:
  heading:
    fontFamily: '"Unigeo 32", Arial, sans-serif'
    fontSize: 48px
    fontWeight: 600
    lineHeight: 57.6px
  supporting:
    fontFamily: Poppins, Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
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 cream CTA panel with a short centered invitation, yellow offset-shadow action, three reassurance items and blue/pink corner doodles.

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

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

- `h2` “Take the next step”: 48px, weight 600, line-height 57.6px, color `rgb(43, 43, 43)`.

Matching mobile text is 32px with 38.4px leading.

## Layout

Use a wide rounded inset panel. Center the heading and supporting copy above the yellow action, then a three-item reassurance row. Place decorative blobs in opposite corners without obscuring the text.

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

At 390px the panel becomes full-width, the title wraps into two lines, copy becomes a narrow column and the three reassurance items stack beneath the button. The decorative blue and pink corners shift to upper-right and lower-left in the observed mobile state.

## Elevation & Depth

Use a flat cream panel and a crisp black offset under the yellow button; no floating card stack is needed.

## Shapes

Rounded panel corners and organic striped blobs soften the otherwise geometric centered layout.

## Components

Use a wide rounded inset panel. Center the heading and supporting copy above the yellow action, then a three-item reassurance row. Place decorative blobs in opposite corners without obscuring the text.

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.