Femme Circle
Design System · v0.1

Femme Circle Design System

Warm, ruhig und elegant — wie eine persönliche Einladung. Alles, was Website, Einladungen und Social Media brauchen, um nach Femme Circle auszusehen und zu klingen.

Grundsätze

Vier Leitlinien, aus denen sich jede Gestaltungsentscheidung ableitet.

Warm statt laut

Creme-Flächen, viel Weißraum, keine grellen Farben. Die Seite soll sich anfühlen wie ein Brief, nicht wie eine Werbeanzeige.

Roségold als Akzent

Roségold setzt Linien, Icons und Handlungsaufforderungen — nie große Flächen. Eine primäre Goldfläche pro Ansicht.

Ruhige Eleganz

Cinzel gibt Struktur, Cormorant Garamond die Stimme. Feine 1px-Linien, fast eckige Kanten, der Kreis als wiederkehrendes Motiv.

Nahbar & zugänglich

Texte erfüllen WCAG AA. Wir sprechen mit „du“, persönlich und klar — Eleganz darf nie Lesbarkeit kosten.

Farben

Roségold, Creme und Warmbraun. Kontrastwerte (heller Modus) nach WCAG 2.2 — „AA groß“ bedeutet: nur für Schrift ab 24px bzw. 19px fett und für Icons.

Creme — Flächen

Warmes Weiß
--fc-sand-50 · #FFFDF8
Karten, Formulare
Text darauf: 14.0:1 · AAA
Creme hell
--fc-sand-100 · #FCF4EA
Abwechselnde Sections
Text darauf: 13.1:1 · AAA
Creme
--fc-sand-200 · #F7E8D8
Seitenhintergrund
Text darauf: 11.9:1 · AAA
Creme tief
--fc-sand-300 · #EFD9BF
Info-Panels
Text darauf: 10.4:1 · AAA

Roségold — Akzent

Gold-1 und Gold-2 sind die Markenfarben. Für lesbaren goldenen Text sind 600 und 700 davon abgeleitet.

Roségold 300
--fc-rose-300 · #ECC9B6
Glanzlicht, Textauswahl
1.3:1 auf Creme · nur Deko
Gold-1 · 400
--fc-rose-400 · #D9A58C
Verlaufsende, Akzent auf Dunkel
1.8:1 auf Creme · nur Deko
Gold-2 · 500
--fc-rose-500 · #A4674F
Icons, Linien, große Schrift
3.8:1 auf Creme · AA groß
Roségold 600
--fc-rose-600 · #8C5340
Goldener Text, Labels, Links
5.1:1 auf Creme · AA
Roségold 700
--fc-rose-700 · #6F3F30
Hover-Zustände
7.2:1 auf Creme · AAA

Warmbraun — Text & Status

Warmbraun
--fc-ink-900 · #35281C
Headlines, Fließtext, Footer
11.9:1 auf Creme · AAA
Braun gedämpft
--fc-ink-700 · #6B5744
Beschreibungen, Nebentext
5.7:1 auf Creme · AA
Braun leise
--fc-ink-500 · #8A7663
Platzhalter (≥ 18px)
3.6:1 auf Creme · AA groß
Erfolg
--fc-success · #3D6B47
Bestätigungen
5.2:1 auf Creme · AA
Fehler
--fc-error · #9E3328
Formularfehler
5.9:1 auf Creme · AA

Dunkelmodus

Ist am Gerät der Dunkelmodus aktiv, schaltet die Seite auf ein eigenes Nacht-Design: warmes Dunkelbraun statt Creme, Creme-Schrift und helles Roségold (Gold-1) als Akzent. Umgestellt werden nur die semantischen Tokens in tokens.css – Komponenten bleiben unverändert. Ohne dieses eigene Design färben Android-Browser wie Samsung Internet die Seite selbst um, und das Roségold wirkt dann rot.

Nacht
--fc-bg · #2B2018
Seitenhintergrund dunkel
Nacht Fläche
--fc-surface · #3A2C20
Karten, Formulare
Creme als Schrift
--fc-text · #F7E8D8
13.2:1 auf Nacht · AAA
Gold-1 als Akzent
--fc-accent · #D9A58C
7.3:1 auf Nacht · AAA

Verläufe

--fc-gradient-gold-text — Roségold-Schimmer für Wortmarke und Display-Schrift

--fc-gradient-gold-fill — Buttonfläche, trägt weiße Schrift

Typografie

Zwei Schriften, klare Rollen. Beide sind lokal eingebunden — es werden keine Daten an Google übertragen.

Aa

Cinzel

Headlines, Wortmarke, Labels. Gewichte 400 · 500 · 600.

ABCDEFGHIJKLMNOPQRSTUVWXYZ ÄÖÜ 0123456789

Aa

Cormorant Garamond

Fließtext, Zitate (kursiv), Buttons, Formulare. 400 · 500 · 600, kursiv 400 · 500.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ää Öö Üü ß

Schriftgrößen & Stile

Display / WortmarkeCinzel 500 · 46–92px · +6%
Femme Circle
H2Cinzel 500 · 30–42px

Was uns wichtig ist

H3Cinzel 500 · 21px

Speaker Sessions

TaglineCinzel · 13–16px · +42% · Versal
Women's Network
Eyebrow / LabelCinzel · 12px · +28% · Versal
Über uns
LeadCormorant kursiv · 20–26px

Ein kuratierter Kreis für Frauen, die sich gegenseitig stärken.

ZitatCormorant 500 kursiv · 26–38px

„Jede Frau bringt etwas mit.“

FließtextCormorant 400 · 19px · 1.6

Femme Circle ist ein Raum, in dem Frauen einander mit echtem Interesse begegnen — mit dem, was sie wissen, was sie erlebt haben und was sie geben können.

KleinCormorant 400 · 15px

Mit dem Absenden gibst du deine Handynummer für dieses interne Netzwerk frei.

UnterschriftCinzel · 13px · +28%

— Femme Circle

Fließtext steht bei 19px, weil Cormorant Garamond optisch klein läuft. Cinzel nur für kurze Texte — nie für Absätze.

Abstände & Form

Ein 4px-Raster. Großzügige Abstände zwischen Sections (80–120px) geben der Seite Ruhe.

space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-832px
space-1040px
space-1248px
space-1664px
space-2080px

Radien. --fc-radius-sm (2px) für Buttons, Karten und Felder — fast eckig, edel. --fc-radius-md (16px) nur für weiche Info-Panels. --fc-radius-full für Kreise.

Linien. 1px in Roségold mit Transparenz: --fc-line (32%) für Trennlinien und Rahmen, --fc-line-soft (18%) für dezente Flächen, --fc-line-strong für Akzente.

Container. Inhalt max. 70rem (1120px), Lesetext max. 48rem. Seitenabstand 16–32px.

Bewegung. Sanft und kurz (200–400ms). Buttons heben sich um 2px. Bei „Bewegung reduzieren“ wird alles abgeschaltet.

Ornamente & Icons

Der Kreis ist das Leitmotiv — im Signet, als Hintergrund-Ringe und als Rahmen für Icons.

Trenner

.fc-divider — Linie, Stern, Linie. Trennt Inhaltsblöcke wie auf dem Flyer.

Feature-Reihe mit Icon-Kreisen

4 Events
pro Jahr

Exklusive Veranstaltungen für Austausch, Wachstum und echte Verbindungen.

Mitgliedschaft
kostenlos

Unser Netzwerk lebt von Gemeinschaft, nicht von Gebühren.

Für Frauen.
Von Frauen.

Ein sicherer Raum für Empowerment, Inspiration und gemeinsame Ziele.

.fc-feature-row + .fc-icon-ring — aus dem Flyer übernommen.

Ringe

.fc-rings — konzentrische Kreise hinter dem Hero. Nur einmal pro Seite.

Icons

Feine Linien-Icons, 1.25px Kontur, Farbe über currentColor. Einbinden mit <svg class="fc-icon"><use href="./icons.svg#name"/></svg>.

star
calendar
heart
community
laptop
reciprocity
curated
no-pitch
closeness
quote
check-circle
instagram
mail
menu
close

Komponenten

Alle Bausteine tragen das Präfix fc- und nutzen ausschließlich Tokens.

Buttons

.fc-button--primary höchstens einmal pro Ansicht · --outline für alles Weitere · --small im Header · --block in Formularen

Links

Ein Textlink im Fließtext ist roségold und unterstrichen. In der Navigation: Über uns   Aktive Seite

Hinweis & Panel

Die Mitgliedschaft selbst ist kostenlos. Für Events wird ein kleiner Unkostenbeitrag erhoben.
Folgt uns auf Instagram the_femme_circle_community

.fc-note für Hinweise im Textfluss · .fc-panel für abgesetzte Info-Flächen

Formular

Bitte gib deinen Namen an.

Bitte bestätige dein Einverständnis.

Felder mit Unterstrich statt Kasten, Labels in Cinzel-Versalien. Pflichtfelder werden beim Verlassen und beim Absenden geprüft; Fehlertexte sind per aria-describedby verknüpft.

Probier es aus: Klick auf „Absenden“, ohne etwas einzutragen.

.fc-field · .fc-label · .fc-input · .fc-check · .fc-field__error · .fc-form-success

Werte-Raster

Reziprozität

Jede bringt etwas ein: eine Erfahrung, ein Netzwerk, eine Perspektive.

Nahbarkeit

Persönliches Onboarding, aufmerksame Moderation, menschliche Kultur.

Formatliste

Speaker SessionsMonatlich

Eine Frau teilt ihren Weg, ihr Wissen oder ihre Perspektive.

RoundtablesQuartalsweise

Kleine Gruppen, ein Thema, offener Austausch mit Leitfragen.

Zitat

„Jede Frau bringt etwas mit. Niemand verkauft etwas.“

— Femme Circle

FAQ

Ist die Mitgliedschaft wirklich kostenlos?

Ja. Femme Circle lebt von Gemeinschaft, nicht von Gebühren.

Gibt es eine Größenbegrenzung?

Nein. Der Kreis wächst so weit, wie es zur Qualität der Begegnungen passt.

Basiert auf nativem <details> — funktioniert ohne JavaScript und mit Tastatur.

Tonalität

Warm und persönlich — wie ein Brief an eine Frau, die wir einladen möchten.

„Every woman brings something.
No one sells anything.“

Gemeinsam. Stark. Inspiriert.

So klingen wir

  • Wir sprechen mit „du“ — durchgängig auf Deutsch
  • Persönlich und direkt: „Wir melden uns persönlich bei dir.“
  • Wörter wie Kreis, Raum, Begegnung, einbringen, stärken
  • Kurze Sätze, Gedankenstriche statt Ausrufezeichen

So nicht

  • Verkaufssprache: „Jetzt sichern!“, „Nur heute“, „Leads“
  • Floskeln und Superlative: „das beste Netzwerk“
  • Automatenton: „Ihre Anfrage wurde erfolgreich übermittelt“
  • Mehr als ein Ausrufezeichen — am besten keins