Befynd Website Front

Style Guide & Components

Living reference for all UI patterns used across the theme. Documentation: STYLE-GUIDE.md, TEMPLATES.md, WORKFLOW.md (repo root).

Typography

Headings use newsreader (serif). Body uses Inter.

Display 5 – Page title

Heading 3

Heading 4

Heading 5

Heading 6

Utility sizes

display-9

text-xs – captions, chat sender

text-sm – secondary text

text-base – default body

text-md – emphasized body

text-lg – lead text

ff-news – Newsreader font family

Colors

primary
#F97316
secondary
#FFF7ED
suggestions
#FFEDD5
success
#2AF262
green-600
#62B149
warning
#FB923C
gray-100
#F4F4F5
gray-200
#E4E4E7
gray-900
#18181B
gray-101
page bg

Text utilities: text-primary, text-green-600, text-gray-600, text-gray-900

Buttons

Primary actions use btn-primary. Secondary / cancel use btn-white or btn-outline-primary.

Badges & Alerts

Open In progress Completed Closed Tag / highlight
Info alert – offer accepted, appointment confirmed, etc.
Neutral alert – request closed without assignment.

Forms

Checkboxes

Search pill (header pattern)

Cards & Surfaces

Standard card

Used on dashboards, request lists, profile forms.

Request card
  • 4 windows
  • First floor

Pattern from handwerker-anfrage-karte

10 Credits

Starter package

2,40 € per offer

Lists

list-grey-dots

  • Item one
  • Item two

list-grey-dots-vertical

  • Customer receives confirmation in chat
  • Code sent 24h before appointment
  • Free cancellation until 24h before

checklist primary-filled

  • Verified email and phone
  • Profile complete

Chat

Component: .chat-window – see chat.html / chat-pure.html

Delta Tech

Online

Delta Tech

Incoming message from provider.

11:44

Outgoing message from current user.

11:45

Befynd System

Appointment confirmation

Your appointment on 08.06.2026 at 10:00 is confirmed.

Domain-specific Components

Compliance status (Handwerker)

Status: Green

No active violations

Reliability badge

Zuverlässig

Stacked applicant avatars

Notification dropdown item

New message

Delta Tech sent an offer

2

Multistep Request Form

From handwerker-anfragen-multistep.html · SCSS: multistep-form-request.scss · JS: files/forms/forms.js

Sidebar progress

Request33%
Experts(1920)

Fensterreinigung

Where should cleaning take place?

Fensterreinigung

When should the job be done?
Wo soll die Arbeit ausgeführt werden?

Fensterreinigung

Add photos

Click the button or drag photos – up to 10 images (PNG, JPEG).

Preview
The request is almost created

Review summary

Apartment

6

Berlin (Mitte)

04 January 2024 – 24 January 2024

Component reference

  • .multi-step-form + [data-step] + [data-next] / [data-previous]
  • .card-multistep-request – step container with slide animation
  • .radio-multistep-rich – icon radio cards (2-col mobile, 4-col desktop)
  • .form-check.other + .other-input-field – “Other” with inline text input
  • .multistep-button-anfrage – step footer (Back + Continue)
  • .custom-dropdown – styled multi-select (replaces native select UI)
  • .custom-input-label + .custom-file-input + .uploadImagesSwiper – photo upload
  • Review step – label/value rows with map-pin and calendar icons

Utilities

  • rounded-3 – default border radius for cards, modals, chat bubbles
  • shadow-sm – inputs, cards, dropdowns
  • bg-gray-101 – page background (chat, dashboards)
  • border-gray-200 – dividers and card borders
  • hover-primary – footer / link hover color
  • before-point – bullet title with primary dot
  • container-xxl – main content width

Icons

Feather Icons – data-feather="name" + feather.replace() in footer scripts.

chevron-left chevron-right check image map-pin more-vertical

Social icons – font icons: