Charte byteTuto
Konzept: ▶_ – der Play-Button eines Videos, der zur Eingabeaufforderung eines Terminals wird.
Signatur: «Apprends la tech, un byte à la fois.»
Der Name wird immer als byteTuto geschrieben (niemals Bytetuto, ByteTuto, BYTETUTO im Fließtext).
Farben (Tokens)
| Token | Hell | Dunkel | Verwendung |
|---|---|---|---|
| surface | #F6F5F0 | #0E1116 | Hintergrund der Seite |
| surface-raised | #FFFFFF | #171B22 | Karten, Codeblöcke |
| ink | #0E1116 | #F2F1EC | Haupttext |
| ink-muted | #565B66 | #A3A8B3 | Sekundärtext |
| line | #DDDBD2 | #2A2F38 | Linien, Rasterpunkte |
| byte | #B8F03C | #B8F03C | Signatur-Grün: Kachel, Hauptbutton, Vollflächen |
| byte-ink | #3B6B00 | #B8F03C | Grün, wenn es TEXT ist |
| byte-tint | #E9F9C8 | #24300F | Leichter Hintergrund, Badge |
| on-byte | #0E1116 | #0E1116 | Text auf byte oder spark |
| spark | #FF5A1F | #FF6B33 | Seltener Akzent: NUR EIN Element pro Bildschirm |
| tile | #0E1116 | #1E232C | Dunkle Vollflächen, Banner |
| danger | #C4320A | #FF7A5C | Nur für Fehler |
Regeln:
- Niemals
byte(#B8F03C) als Text auf hellem Hintergrund → stattdessenbyte-inkverwenden. - Kein weißer Text auf
byteoderspark→on-byteverwenden. - Kein Verlauf oder Schlagschatten auf dem Logo. Neonglüheffekte sind animierte Verzierungen, nicht das Logo.
- Text-Hintergrund-Kontrast ≥ 4,5:1.
Typografie (Google Fonts)
- Space Grotesk 700 (Überschriften, enger Buchstabenabstand −0,02em bis −0,03em)
- IBM Plex Sans 400/600 (Text)
- JetBrains Mono 500 (Code, Befehle, kleine terminalartige Etiketten)
Formen
Eckenradien: 6px (Badges), 12px (Buttons, Karten), 24px (große Blöcke, Kachel – 23 % der Seitenlänge).
Hausmotiv: Raster aus Punkten in line auf dunklem Hintergrund, byte/spark-Blöcke ragen über die Ränder hinaus.
Logo
Das Logo ist eine ZEICHNUNG (monoline Striche von 9 Einheiten, abgerundete Enden), keine Schriftart: niemals als Text neu tippen.
Die Pfade befinden sich in site/index.html (SVG .logo). Auf dunklem Hintergrund: „byte“ in #F2F1EC, „Tuto“ in #B8F03C.
Nur Symbol: site/favicon.svg.
Ton
Du-Form, kurze Sätze, Aktionsverben. Zeigen, bevor erklären. Kein unerklärter Jargon, keine übertriebenen Versprechungen. Beispiele: „Installiere Node in 2 Minuten“, „Der Bug, der mich 4 Stunden gekostet hat“.
Barrierefreiheit
prefers-reduced-motion für jede neue Animation respektieren. Sichtbarer Fokus (outline byte).