Langweilig = robust
Was nichts Besonderes will, geht auch nicht besonders kaputt. Keine Effekte, keine Überraschungen, keine Trends.
Willkommen bei TRFX Legacy
TRFX Legacy
Sieht alt aus. Funktioniert.
Ein Design System für Oberflächen, die man nicht erklären muss. Graue Flächen, blaue Titelleisten, Schaltflächen, die wie Schaltflächen aussehen. Langweilig im besten Sinn: robust, vertraut und sofort bedienbar.
- 7Designs
- 59Komponenten
- 42 KBCSS, minimiert
- 0Abhängigkeiten
Die drei Grundsätze
Alt = bewährt
Die Formensprache von Windows XP, Windows 2000, Mac OS 9 und dem SAP Signature Theme wurde über Jahrzehnte im Alltag getestet.
Funktion vor Wirkung
Jedes Element zeigt, was es ist und was passiert, wenn man es benutzt. Fokus, Zustand und Fehler sind immer sichtbar.
Sieben Designs, ein Satz Komponenten
Ein Design ist nur ein Satz Variablen. Alle Komponenten bleiben gleich. Wählen Sie eines, die ganze Seite wechselt sofort. Die Auswahl merkt sich Ihr Browser.
Luna Blau
Standard. Blaue Titelleiste, beiger Grund, grüner Fortschritt.
Olivgrün
Das zweite XP-Farbschema. Ruhiger und etwas erdiger.
Silber
Das dritte XP-Farbschema. Hell, kühl, besonders sachlich.
Klassisch
Graue Flächen, harte Kanten, Verlauf von Marineblau nach Hellblau.
Platinum
Feine Streifen in der Titelleiste, runde Schaltflächen, viel Grau.
Signature
Blaugrau mit goldenem Akzent für Auswahl und Fokus.
Hoher Kontrast
Schwarz, Weiß, Gelb. Alle Paare mit mindestens 7 : 1.
Was drin steckt
| Bereich | Inhalt |
|---|---|
| Grundlagen | Haltung, sieben Prinzipien, Vorbilder, Barrierefreiheit, Gut und Schlecht. |
| Farben | Alle Variablen mit Live-Werten und gemessenen Kontrasten pro Design. |
| Typografie | Tahoma, Trebuchet MS und Share Tech Mono. Größenstufen, Abstände, Listen. |
| Komponenten | Schaltflächen, Felder, Reiter, Tabellen, Dialoge, Menüs, Baum, Fortschritt und mehr, jeweils mit Quelltext. |
| Layouts | Explorer-Rahmen, Assistent, Anmeldedialog, Systemsteuerung, Breakpoints. |
| Marke | Logo, Schutzraum, Mindestgröße, Icon und Downloads. |
| Einbindung | CSS einbinden, Designs wechseln, Variablen überschreiben, Änderungsprotokoll. |
Das ist eine öffentliche Testseite.
Hier wird das Design System vorgestellt und ausprobiert. Alles ist echtes HTML und CSS, kopieren erlaubt. Die Seite lädt keine Schriften oder Skripte von Dritten.