Applied by Hand · v1
Design-System
Die gemeinsame visuelle Sprache für Website, Zeichnungen und Erklärvideos.
Typografie
sansKlare Worte, gute Ideen.
Fließtext und Oberfläche
monotokens = 1_000_000
Code und Zahlen
pixelKI verstehen.
Gezeichneter Website-Stil
KI verstehen.
Aus dem Font gerasterte SVG-Pixel: leicht gedreht, unregelmäßig und stabil aus dem Text berechnet.
Überschriften
signatureVon Hand erklärt.
Handschriftliche Anmerkungen
Farben
Semantische Rollen in beiden Themes. Statusfarben immer mit einem Label oder Icon kombinieren.
Hell
--bg#fbfaf8--surface#ffffff--hover#f1eeea--fg#1a1918--muted#76726d--line#e8e5e0--accentoklch(0.52 0.17 265)--okoklch(0.52 0.13 155)--warnoklch(0.55 0.14 70)--dangeroklch(0.55 0.19 25)Dunkel
--bg#0d0d0c--surface#141413--hover#1a1a18--fg#ecebe8--muted#8f8b86--line#242321--accentoklch(0.74 0.13 265)--okoklch(0.76 0.14 155)--warnoklch(0.8 0.13 80)--dangeroklch(0.72 0.17 25)Farben für Videozeichnungen
Icons
16 × 16. Runde Linien, 1,5 px Strichstärke. Alle Icons erben die Textfarbe.
ArrowRightSVG 
ArrowUpSVG 
BookmarkSVG 
CaptionsSVG 
CheckCircleSVG 
CheckSVG 
ChevronDownSVG 
ChevronLeftSVG 
CircleSVG 
ClockSVG 
CloseSVG 
CoinSVG 
CopySVG 
DocSVG 
EditSVG 
ExternalSVG 
FullscreenSVG 
GridSVG 
HalfCircleSVG 
LeafSVG 
LinkSVG 
ListSVG 
MarkerSVG 
MenuSVG 
NoteSVG 
PanelLeftSVG 
PanelRightSVG 
PauseSVG 
PlaySVG 
PlusSVG 
SearchSVG 
SparkleSVG 
StarSVG 
StopSVG 
TerminalSVG 
TextSVG 
TrashSVG 
VolumeSVG 
WandSVG 
Komponenten
Aktionen
Kennzeichnung & Eingabe
4812162432486480Abstände in px. Karten: 20 px Radius. Steuerelemente: 8 px. Pills: rund.
Asset-Bibliothek
Bilder, Figurenposen und SVGs an einem Ort. Nach Typ filtern, groß ansehen und herunterladen.
Zeichnung & Bewegung
Von Hand, klar lesbar
Leicht unregelmäßige Linien, Buntstift-Schraffur und einheitliche Figuren. Text bleibt ruhig. Keine X-Platzhalter oder gestrichelten Hilfsrahmen.
Dezente Rückmeldung
Bewegung erklärt eine Aktion. Kurze Rückmeldung, sanfte Übergänge, keine dauernde Ablenkung. Reduzierte Bewegung wird respektiert.
180 ms / 280 msEine Quelle für Website und Remotion
Farben, Fonts, Icons und Asset-Pfade kommen aus design-system/. Website-CSS und Font-Loader werden daraus erstellt. Remotion liest dieselben Daten und bietet eine renderbare Referenztafel.
tokens.json · icons.json · assets.jsonAnti-Patterns
Diese Muster vermeiden wir in der Oberfläche.
Vermeiden
Native Aufklapp-Dreiecke und versteckte Grundlagen wirken wie Browser-Standard statt wie unsere Oberfläche.
So machen wir es
Farben für Videozeichnungen
Grundlagen sind direkt sichtbar. Für echte Zusatzoptionen nutzen wir bewusst gestaltete Icons und klare Rückmeldung.