fw.io
Phase 02 — Design systemDirection B / Selected

The Index.

Dunkle Bühne. Klare Haltung.
Eine visuelle Sprache für fw.io.

Das System
Structured boldness01—07 / Foundations to motion
01

Die Marke

01.1 / Wortmarkefw.ioLowercase. Ein Punkt. Eine Haltung.
01.2 / Signetfw.Reduziert für kleine Flächen.

Wortmarke

Space Grotesk Medium. Immer kleingeschrieben, nie gesperrt oder verzerrt.

Freiraum

Mindestens eine Punktbreite auf allen Seiten. Wortmarke ab 80 px, Signet ab 24 px.

Signalpunkt

Lime auf Ink. Electric Blue auf Ivory. Ein Akzent – keine Effekte, keine Verläufe.

02

Farbe mit Funktion

55%

Ink

#101216--ink
25%

Ivory

#F5F4EF--ivory
13%

Electric Blue

#4568FF--electric
7%

Signal Lime

#C7FF6B--lime

Ink trägt die Seite, Ivory die Information. Lime bleibt selten: ein Punkt, ein Fokus, eine Entscheidung.

Aa / Aktion

Lime auf Ink

Aa / Lesetext

Ivory auf Ink

Mist / Support

Details & Hilfstexte

03

Typografie trägt

Display / Space Grotesk

Medium 500 · Headlines & Marke

Präzise. Nicht leise.

Text / Inter

Regular 400 · Fließtext

Eine gute Website braucht Klarheit. In der Idee, in der Gestaltung und in jedem einzelnen Detail. Weniger Dekoration. Mehr Richtung.

Detail / JetBrains Mono

Regular 400 · Indizes & Metadaten

01 / SELECTED WORK
FW.IO — DIGITAL DESIGN / 2026

Display

160 / 152 px

Mobile 66 / 63

Heading

48 / 50 px

Mobile 36 / 38

Body

16 / 26 px

Mobile 16 / 26

Index

11 / 18 px

Mobile 11 / 18

Websites. Aber richtig._

04

Ordnung. Mit Spielraum.

01
02
03
04

12 → 4 Spalten

Desktop / Mobile

48 → 20 px

Außenabstand

4 · 8 · 16 · 24 · 48 · 64

Abstandsrhythmus

Maximal 1440 px. Inhalte sind linksbündig. Linien verbinden die Abschnitte. Große Typografie bricht das Raster bewusst – nie die Lesbarkeit.

05

Die Elemente

05.1 / Buttons

Interaktives Muster / keine Projektanfrage

05.2 / Iconografie

Lucide / 20 px / 1.5 px Strichstärke

05.3 / Eingabefelder

Bitte eine vollständige E-Mail-Adresse eingeben.

05.4 / Index & Accordion

In PlanungAusgewählt
06

Substanz statt Dekoration

Schwarz-weiße Architekturstudie mit klaren Betonrastern und scharfem Schattenwurf
06.1 / ArchitekturstudieKI-generiert · kein Kundenprojekt

Klar. Grafisch. Echt.

Klare Geometrie, bewusste Ausschnitte, sichtbare Materialien. Bilder bringen Substanz in die typografische Bühne.

  • Harte Kontraste statt Farbfilter
  • Echte Arbeit statt Stock-Versprechen
  • Große Flächen statt dekorativer Collagen
Projektmuster / Platzhalter
Selected work

Keine erfundenen Kunden oder Ergebnisse.

07

Bewegung mit Absicht

200 ms

Interaktion

700 ms

Typo-Reveal

Kurze Übergänge, klare Rückmeldung. Keine Endlosschleifen. Bei reduzierter Bewegung bleiben alle Inhalte ohne Animation zugänglich.