Was macht drawn-notebook-ui?
name: drawn-notebook-ui beschreibung: > Ein vollständiges Designsystem und Implementierungsleitfaden zur Reproduktion der "Drawn Notebook"-Ästhetik – eine ruhige, redaktionelle, handgefertigte UI-Sprache, die ursprünglich für Askar's persönliches Portfolio entwickelt wurde. Deckt jeden Token, jede Komponente, jede Animation und jedes Interaktionsmuster in detaillierter Tiefe sowohl für Flutter (Dart) als auch für das native Web (HTML/CSS/JS) ab, sowohl im hellen als auch im dunklen Modus. Verwenden Sie dieses Skill immer dann, wenn der Benutzer diese spezifische visuelle Sprache in irgendeinem Kontext erstellen, anpassen oder erweitern möchte.
Übersicht
Das Skizzenheft ist keine Komponentenbibliothek. Es ist eine Designsprache – eine kohärente Philosophie, der jedes Pixel, jede Linienstärke, jeder Abstandsrhythmus und jede Animations-Zeitkurve dient. Ihr Leitprinzip ist, dass sich die Benutzeroberfläche wie ein lebendiges Notizbuch anfühlen soll: Tinte auf cremefarbenem Papier, Abschnitte, die beim Scrollen des Lesers langsam erscheinen, Navigationsfäden, die die Seite wie eine physische Reise durchziehen. Nichts ist laut. Nichts ist dekorativ um seiner selbst willen. Die UI verdient jedes visuelle Element, indem sie es an Bedeutung verankert.
Dieses Skill ist eine präzise, umfassende Referenz. Befolgen Sie bei der Implementierung dieser UI jeden Abschnitt in der richtigen Reihenfolge. Überspringen Sie nicht die Token-Definitionen – jeder Abstand, jede Farbe und jeder Bewegungswert ist tragend. Überspringen Sie nicht den Abschnitt zum dunklen Modus – beide Themes sind gleichberechtigte Bürger und müssen jederzeit gleichzeitig korrekt sein.
Abschnitt 1 – Designphilosophie
1.1 Kernprinzipien
Ruhiges Selbstvertrauen, nicht Minimalismus um seiner selbst willen. Das Design ist sparsam, aber jedes Element, das bleibt, ist zweckmäßig. Leerraum ist keine Faulheit – es ist die Atmosphäre, die die Seite atmet. Der Blick des Benutzers wird durch Komposition, Gewicht und Bewegung gelenkt, nicht durch Farbsättigung oder dekorative Verzierungen.
Handgezeichnete Ästhetik ohne wörtlichen Skeuomorphismus. Die UI bezieht sich auf die Kunst des Zeichnens – dünne Strichstärken, serifenbetonte redaktionelle Schriftarten, Papierkorn-Texturen, SVG-Illustrationen, die als Strichzeichnungen gerendert werden – aber sie tut nicht so, als wäre sie Papier. Es ist eine digitale Oberfläche, die die Haptik analoger Handwerkskunst respektiert, ohne sie unbeholfen nachzuahmen.
Jeder Abschnitt ist ein Kapitel. Die Seite ist ein durchgehender Scroll, und jeder Abschnitt fühlt sich an, als würde man in einem Notizbuch zu einer neuen Seite blättern. Die Hintergründe der Abschnitte wechseln subtil zwischen warmen Neutraltönen. Ein durchgehender goldener Faden (die Reise-Linie SVG) näht sie visuell zusammen.
Bewegung ist Erzählung, nicht Unterhaltung. Animationen enthüllen Inhalte so, wie eine Hand Wörter schreibt – von unten nach oben erscheinend, sanft einblendend, SVG-Pfade nachzeichnend. Die Dauern sind nach modernen Maßstäben langsam (1,2s–2s für Enthüllungen). Das ist beabsichtigt. Geschwindigkeit impliziert Rauschen. Langsamkeit impliziert Handwerkskunst.
Vermeiden Sie KI-slop-Muster. Die folgenden Muster sind ausdrücklich verboten: Verlauf-Hintergründe mit Lila-zu-Rosa-Übergängen, Kartenraster mit identischer Höhe und identischen Eckradien, Hover-Zustände, die neon leuchten, überdimensionierte abgerundete Ecken (> 14px bei den meisten Elementen), farbcodierte Skill-Balken mit Prozentzahlen, Zeitleisten mit Aufzählungspunkten und fetten Daten, und jede Verwendung von Emojis als Dekoration.
Abschnitt 2 – Design-Token
2.1 Farbpalette – Helle Modus (Tageslicht-Notizbuch)
Jede Farbe im hellen Modus ist ein warmer Neutralton, abgeleitet von Papier, Creme und natürlicher Tinte. Es gibt eine einzige Akzentfamilie: Gold/Terrakotta, die von einem gedämpften Amber bis zu einem warmen Ziegelstein reicht.
/* Helle Modus (angewendet auf :root) */
--cream: #F7F5F0; /* Seitenhintergrund – primäre Oberfläche */
--sage: #EEF3ED; /* Hintergrund des Über-mich-Abschnitts – das hellste Grüngrau */
--parchment: #F1ECE3; /* Hintergrund von Erfahrung + Lebenslauf */
--warm-white: #FAF8F5; /* Hintergrund des Fähigkeiten-Abschnitts – die hellste Oberfläche */
--linen: #F3EFE8; /* Hintergrund des Projekte-Abschnitts */
--sage-tint: #EFF3EE; /* Hintergrund des Lern-Abschnitts */
--charcoal: #1A1A1A; /* Primärtext, SVG-Striche, Rahmen */
--soft-black: #2C2C2C; /* Sekundärtext, starke Beschriftungen */
--warm-grey: #8A8580; /* Gedämpfte Beschriftungen, Zeitstempel, Bildunterschriften */
--light-grey: #C5BFB8; /* Scroll-Aufforderung, dekorative Trennzeichen */
--terracotta: #B87A5A; /* Hover-Zustände, Aufzählungspunkte, aktive Wegpunkte */
--indigo: #6B6EA0; /* Reserviert – nicht in primären Mustern verwendet */
--gold: #C4956A; /* Primärer Akzent – Reise-Linie, Skill-Icons, Chips */
--gold-dim: rgba(196, 149, 106, 0.3); /* Weiches Gold für Schatten, Rahmen */
--blush: #F0EBE5; /* Chip-/Badge-Hintergründe beim Hover */
--sage-dark: #8B9E8B; /* Abschnitts-Randtrennfarbe */
2.2 Farbpalette – Dunkle Modus (Nacht-Notizbuch)
Der dunkle Modus ist keine einfache Inversion. Die Hintergründe wechseln von warmen Cremetönen zu tiefen warmen Schwarztönen – eine fast tintenverlaufene Qualität. Die Akzentfarben werden etwas heller, um die Lesbarkeit auf dunklen Oberflächen zu erhalten.
/* Dunkle Modus (angewendet auf :root[data-theme="dark"]) */
--cream: #141210; /* Seitenhintergrund – tiefes warmes Schwarz */
--sage: #171816; /* Hintergrund des Über-mich-Abschnitts */
--parchment: #1A1815; /* Hintergrund von Erfahrung + Lebenslauf */
--warm-white: #1E1B18; /* Hintergrund des Fähigkeiten-Abschnitts */
--linen: #181614; /* Hintergrund des Projekte-Abschnitts */
--sage-tint: #161815; /* Hintergrund des Lern-Abschnitts */
--charcoal: #EDE8E1; /* Primärtext – warmes Off-White */
--soft-black: #D8D2C8; /* Sekundärtext */
--warm-grey: #9E978F; /* Gedämpfte Beschriftungen */
--light-grey: #38342E; /* Dekorative Trennzeichen */
--terracotta: #D98A62; /* Hover-Akzent – etwas heller als im hellen Modus */
--indigo: #8C8FB8;
--gold: #D4A373; /* Primärer Akzent – etwas wärmer als im hellen Modus */
--gold-dim: rgba(212, 163, 115, 0.3);
--blush: #241E1A;
--sage-dark: #9EAF9E;
/* Oberflächentoken */
--card-glass: rgba(30, 27, 24, 0.72);
--card-glass-hover: rgba(42, 38, 34, 0.95);
--card-item-bg: rgba(24, 21, 19, 0.78);
--card-item-hover: rgba(38, 34, 30, 0.96);
--card-border: rgba(212, 163, 115, 0.22);
--card-border-hover: rgba(212, 163, 115, 0.48);
--card-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
--card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08);
--badge-bg: rgba(24, 21, 19, 0.88);
--grain-opacity: 0.022; /* Niedriger im Dunklen, um Trübung zu vermeiden */
2.3 Farbpalette – Helle Modus Oberflächentoken
/* Helle Modus Oberflächentoken */
--card-glass: rgba(255, 255, 255, 0.65);
--card-glass-hover: #ffffff;
--card-item-bg: rgba(247, 245, 240, 0.8);
--card-item-hover: rgba(255, 255, 255, 0.98);
--card-border: rgba(196, 149, 106, 0.22);
--card-border-hover: rgba(196, 149, 106, 0.45);
--card-shadow: 0 4px 16px rgba(26, 26, 26, 0.04);
--card-shadow-hover: 0 6px 20px rgba(196, 149, 106, 0.12);
--card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.95);
--badge-bg: rgba(247, 245, 240, 0.82);
--grain-opacity: 0.035;
2.4 Theme-Wechsel – Flash-freie Implementierung
Die Theme-Erkennung muss synchron im <head> vor dem Rendern der Seite ausgeführt werden, um ein Aufblitzen des falschen Themas (FOUT) zu verhindern. Dies ist eine kritische Implementierungsanforderung:
<head>
<!-- MUSS das erste Skript im <head> sein, vor allen Stylesheet-Links -->
<script>
(function () {
try {
var stored = localStorage.getItem('color-scheme');
var prefersDark = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = (stored === 'dark' || (!stored && prefersDark)) ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
var meta = document.querySelector('meta[name="color-scheme"]');
if (meta && (stored === 'dark' || stored === 'light')) meta.content = stored;
var themeColor = document.querySelector('meta[name="theme-color"]');
if (themeColor) themeColor.content = theme === 'dark' ? '#141210' : '#F8F4F0';
} catch (e) {}
})();
</script>
</head>
Verwenden Sie in Flutter/Dart ThemeMode.system als Standardwert mit einer persistierten Überschreibung über SharedPreferences. Der Schlüssel ist color-scheme, der Wert ist 'dark' oder 'light'.
2.5 Typografie-Token
--font-serif: 'Cormorant Garamond', 'Georgia', serif;
--font-sans: 'Inter', 'Helvetica Neue', sans-serif;
Cormorant Garamond ist nicht verhandelbar für die redaktionelle Stimme dieses Designs. Es wird in den Gewichten 300, 400, 500, 600 geladen, mit kursiven Varianten für 300 und 400. Es wird für alle Überschriften, Abschnittstitel, den Heldennamen, Chips, Leistenbeschriftungen, Wegpunktnachrichten und überall dort verwendet, wo eine "geschriebene" Qualität benötigt wird. Es darf niemals in Gewichten über 600 verwendet werden – dies ist keine fette Schriftart.
Inter ist der funktionale Begleiter. Es wird für Bildunterschriften, Skill-Tags, Zeitstempel, Großbuchstaben-Kicker und Fließtext in dichten Informationskontexten verwendet. Nur die Gewichte 300, 400, 500 laden.
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
2.6 Abstands-Token
Alle Abstände sind fließend mit clamp(). Verwenden Sie keine festen Pixelwerte für Abschnittsabstände oder Inhaltsbreitenbeschränkungen.
--section-pad: clamp(80px, 12vh, 160px); /* Vertikaler Abstand für Hauptabschnitte */
--content-max: 800px; /* Schmale Prosaspalte */
--content-wide: 1100px; /* Breites Layout für Raster */
--side-pad: clamp(24px, 5vw, 80px); /* Horizontale Seitenränder */
2.7 Animations-Token
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Allgemeines Ease-Out */
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material-ähnlich glatt */
--duration-slow: 1.2s; /* Enthüllungsanimationen */
--duration-med: 0.8s; /* Mittelgroße Übergänge */
--duration-fast: 0.4s; /* Schnelle Mikrointeraktionen */
Abschnitt 3 – Globale Grundlagen
3.1 CSS-Reset und Basis
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: var(--cream);
color: var(--charcoal);
font-family: var(--font-sans);
font-weight: 300;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
3.2 Textauswahl
Die Auswahlhervorhebung ist eine weiche Goldwäsche – sie spiegelt die Akzentpalette wider, ohne aggressiv zu sein:
::selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
::-moz-selection {
background: rgba(196, 149, 106, 0.2);
color: var(--charcoal);
}
3.3 SVG-Strich-Anpassung
Alle eingebetteten SVGs verwenden fest codierte Hex-Striche (#1A1A1A, #2C2C2C) aus der Palette des hellen Modus. Um sie an den dunklen Modus anzupassen, ohne das SVG-Markup zu ändern, verwenden Sie eine CSS-Attributselektor-Überschreibung:
svg [stroke="#1A1A1A"], svg [stroke="#1a1a1a"] { stroke: var(--charcoal); }
svg [fill="#1A1A1A"], svg [fill="#1a1a1a"] { fill: var(--charcoal); }
svg [stroke="#2C2C2C"], svg [stroke="#2c2c2c"] { stroke: var(--soft-black); }
svg [fill="#2C2C2C"], svg [fill="#2c2c2c"] { fill: var(--soft-black); }
svg text[fill="#1A1A1A"] { fill: var(--charcoal); }
svg text[fill="#8A8580"] { fill: var(--warm-grey); }
Goldakzente (#C4956A) in SVGs werden ABSICHTLICH NICHT überschrieben. Der Goldakzent ist eine feste Referenzfarbe in beiden Themes; im dunklen Modus hellt der Token --gold auf #D4A373 auf, aber das eingebettete SVG-Gold muss nicht neu zugeordnet werden, da der Kontrast gegen dunkle Hintergründe immer noch akzeptabel ist.
3.4 Sanfter Theme-Übergang
Wenden Sie einen koordinierten Übergang auf jede Oberfläche an, die sich zwischen den Themes ändert. Dies verhindert abrupte Farbwechsel:
body, section,
.about, .experience, .resume-section, .skills, .projects, .learning, .closing,
.exp-card, .exp-item, .skill-cell, .compact-card, .compact-card__icon,
.about__point, .about__visual-card, .about__chip, .closing__link,
.journey-waypoint__message, .rail-node__label, .resume-modal__panel,
.resume-modal__header {
transition:
background-color 0.35s var(--ease-out),
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out);
}
/* Respektieren Sie immer die Bewegungseinstellung des Benutzers */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
Abschnitt 4 – Papierkorn-Overlay
Eine subtile Papierkorn-Textur wird als festes Vollbild-Overlay angewendet. Es befindet sich auf z-index: 9999 – über allem – aber pointer-events: none stellt sicher, dass es niemals Interaktionen abfängt.
.grain-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: var(--grain-opacity, 0.035);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 200px 200px;
transform: translateZ(0);
will-change: transform;
transition: opacity 0.35s var(--ease-out);
}
/* Im dunklen Modus zeigt die Bildschirmmischung das Korn natürlicher */
:root[data-theme="dark"] .grain-overlay {
mix-blend-mode: screen;
}
In Flutter: Reproduzieren Sie dies mit einem CustomPaint-Widget an der Spitze des Widget-Baums mit einem shader-basierten Rauschmuster, oder backen Sie das Korn als PNG-Asset mit ~3% Deckkraft und verwenden Sie BlendMode.screen im dunklen Modus.
Abschnitt 5 – Theme-Umschalter (Himmlischer Schalter)
Der Theme-Umschalter ist eine kleine Pillen-Schaltfläche, die fest in der oberen rechten Ecke positioniert ist. Er
…
[gekürzt für die Übersetzung]