Design system v0.2

DFV Styleguide

Single source of truth for the v3 rebuild design. Every page in the new theme is built from these primitives. Review on mobile and desktop — anything that needs changing should be changed here first, then it cascades everywhere.

Status: draft for review · Work Sans only · softened nav/footer dividers.

01

Colors

Brand orange is set to #CC4400 per the v3 plan. Neutrals shifted from cool grey to warm off-whites and warm dark text — gives a less sterile, more editorial feel.

#CC4400
Orange (primary) var(--dfv-orange)
#A83800
Orange dark (hover) var(--dfv-orange-dark)
#FEF0E6
Peach (tint) var(--dfv-peach)
#333C4E
Slate (dark surface) var(--dfv-slate)
#1C1A19
Text var(--dfv-text)
#5C5450
Text light var(--dfv-text-light)
#FFFFFF
Background var(--dfv-bg)
#F3F2EF
Background alt var(--dfv-bg-alt)
#1F1B17
Background deep var(--dfv-bg-deep)
#E8E2D9
Border var(--dfv-border)
#0056A7
Blue (links / info) var(--dfv-blue)
02

Typography

Single family — Work Sans for everything. Headings use heavier weight (700 for H1, 600 for H2/H3) and tightened letter-spacing to differentiate from body text. Cleaner and less editorial-magazine, more like a calm modern utility.

Eyebrow label

Reisekostenzuschuss berechnen

Work Sans · weight 700 · clamp(2rem → 3rem) · line-height 1.1 · tracking -0.03em

Familienerholung in Berlin

Work Sans · weight 600 · clamp(1.5rem → 2rem) · line-height 1.2

Schuldnerberatung an vier Standorten

Work Sans · weight 600 · 1.25rem · line-height 1.3

H4 — utility heading (Work Sans)

Work Sans · weight 600 · 1.05rem — used for sidebar / footer / form section headings

Lead paragraph — used for page intros under the H1. Slightly larger and lighter than body text, capped at ~60 characters per line for readability.

Work Sans · 1.15rem · line-height 1.55 · max-width 60ch

Fließtext — Der Deutsche Familienverband Landesverband Berlin e. V. bietet Beratung und Unterstützung für Familien in Berlin. Hier sehen Sie, wie ein normaler Absatz im neuen Design aussieht. Inline-Link sieht so aus.

Work Sans · 1rem · line-height 1.6

03

Spacing scale

More generous than before — large gaps (lg / xl / xxl) give pages room to breathe, which is half of what makes a layout feel high-end.

--spacing-xs 0.5rem
--spacing-sm 1rem
--spacing-md 1.5rem
--spacing-lg 2.5rem
--spacing-xl 4rem
--spacing-xxl 6rem
04

Buttons

Four variants. Primary for the main action; ghost (orange outline) for a less-loud secondary; outline for use on dark imagery; text-link with arrow for tertiary navigation.

Antrag stellen Mehr erfahren Zur Übersicht
Outline (auf dunklem Hintergrund) Primary auf dunkel
05

Form fields

06

Notices / Alerts

For inline messages — calculator warnings, server feedback, info banners. Soft tinted backgrounds with a colored left rail.

Hinweis

Allgemeine Informationen zum Antrag finden Sie in der FAQ.

Antrag erfolgreich abgeschickt

Sie erhalten in Kürze eine Bestätigungs-E-Mail.

Buchungsbestätigung erforderlich

Ohne Buchungsbestätigung kann Ihr Antrag nicht bearbeitet werden.

Fehler beim Hochladen

Die Datei ist zu groß (max. 5 MB) oder hat ein nicht unterstütztes Format.

07

Cards

Borderless, with a soft shadow that intensifies on hover. Card titles use Work Sans 600 with tight tracking.

28. April 2026

Neue Beratungstermine

Ab Mai bieten wir zusätzliche Beratungstermine in der Schuldnerberatung Mitte an.

08

Layout containers

Standard container is 1180px. Wide is 1400px (used for the calculator and full-width pages).

.container · 1180px max
.container--wide · 1400px max
09

Footer

Scroll to the bottom of this page to see the footer in context. Currently warm cream, asymmetric 4-column layout (brand block + sitemap + service + contact), restrained 36px social icons in outlined circles. Background color is still TBD — needs more contrast.

10

Open design questions for Tom

  1. Brand orange — does #CC4400 feel right, or pull warmer/cooler?
  2. Heading font — Work Sans for everything (current). If we want a quiet display accent later we could revisit.
  3. Header — sticky on scroll (current) vs static at top of page only?
  4. Footer mood — warm cream (this version) vs deep warm dark (chocolate / espresso) vs all-white minimal?
  5. Cards — borderless with shadow on hover (this version) feels modern. Want a "with-image" variant only, or also a no-image text variant for FAQ etc?
  6. Buttons — 6px corner radius (this version) vs sharper (2px) vs softer (12px) vs full pill?
  7. Slider — keep auto-rotating slider on homepage, or replace with a single static editorial hero?
  8. Eyebrow labels — small uppercase tags above headings (you can see them on this page) — keep or drop?