Fider — outlined FAQ accordion
Other · product-feedback
Auth form · product-feedback
A restrained registration screen combining provider choices and name/email inputs with a second numbered block for the feedback-board name and subdomain.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Fider — identity and feedback-board registration
colors:
primary: rgb(45, 87, 237)
text: rgb(78, 71, 75)
surface: '#FFFFFF'
typography:
heading:
fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
fontSize: 32px
fontWeight: 800
lineHeight: 51.2px
supporting:
fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
fontSize: 16px
fontWeight: 400
lineHeight: 25.6px
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 restrained registration screen combining provider choices and name/email inputs with a second numbered block for the feedback-board name and subdomain.
Captured from https://login.fider.io/signup at 2026-10-13T06:04:52.720482+00:00. This reference contains the complete desktop page.
## Colors
Primary/accent: `rgb(45, 87, 237)`. Measured heading/form text: `rgb(78, 71, 75)`. 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 `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`. Supporting sample uses `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`. Preserve the contrast between text roles rather than treating every sample as the body default.
- `h3` “1. Who are you?”: 32px, weight 800, line-height 51.2px, color `rgb(78, 71, 75)`.
- `h3` “2. What is this Feedback Forum for?”: 32px, weight 800, line-height 51.2px, color `rgb(78, 71, 75)`.
Matching mobile text is 32px with 51.2px leading.
## Layout
Use a centered 480px desktop form column with the multicolor mark above the first numbered heading. Put three provider options before an OR divider, then Name and Email. Follow with the board title, subdomain suffix field, legal agreement and blue Confirm action. Provider pages were not opened.
Desktop region: 1440.00 × 1036.00px at a 1440px viewport. Mobile region/page: 390.00 × 1084.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 column expands to 370px inside 10px gutters. Numbered headings wrap and the page scrolls vertically. A separate bottom-viewport check confirmed the board fields, legal agreement and Confirm action are reachable. The nested-scroll flag is body overflow:auto, not missing desktop content.
## Elevation & Depth
Keep the page almost flat: pale background, white fields and fine gray outlines. Blue is reserved for the final confirmation control and linked terms.
## Shapes
Provider options and fields have restrained rounded corners; attach the .fider.io suffix to the domain field as a contiguous gray segment.
## Components
Use a centered 480px desktop form column with the multicolor mark above the first numbered heading. Put three provider options before an OR divider, then Name and Email. Follow with the board title, subdomain suffix field, legal agreement and blue Confirm action. Provider pages were not opened.
Account controls are shown in their logged-out idle state. No credentials, account creation, provider login, trial, form submission or purchase was attempted.
## 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.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.