Der komplette Skill-Text
---
name: black-and-ice-brand
description: Dunkles Studio-Design mit Blauschwarz, Graphit-Kacheln und Eisblau als einziger Akzentfarbe. Bebas Neue in Großbuchstaben für Headlines, Inter für Text, Space Mono für Labels. Flush-Raster mit 2 px Abstand, keine Rundungen außer Pill-Buttons, Outline-Schrift auf hellen Flächen, ein eisblauer Schein im Hero. Nachfolger von Black & Yellow. Für KI-Kurse, Tech-Angebote, Agenturen und mutige Salespages. Trigger diesen Skill, wenn jemand sagt: "Black & Ice", "Black & Ice-Design", "im Black & Ice-Stil", "wie Studio-Agenturen", "Studio-Agenturen-Look", "Black and Ice", "Black & Ice", "Eisblau-Design", "dunkles Studio-Design", "Nachfolger von Black and Yellow", "Dark-Mode-Salespage". Auch nutzen, wenn ein Angebot das Gefühl „Mutig. Digital. Vorne dabei.“ auslösen soll.
---
# Black & Ice · Brand-System
> Showcase mit allen Ansichten: https://8bd-3i1.pages.dev/black-and-ice-showcase.html
> Angelehnt an die Designsprache von Studio-Agenturen. Eigene Farben, Schriften und Namen: keine Logos, keine Markennamen und keine geschützten Elemente von Studio-Agenturen übernehmen.
## Kurzfassung (zuerst lesen)
- **Gefühl:** Mutig. Digital. Vorne dabei. Fühlt sich an wie ein Abend in einem Designstudio, in dem gerade etwas Neues gebaut wird: Bildschirme leuchten, alles ist präzise, und du bist mittendrin.
- **Farben:** Blauschwarz #07090C · Nacht #0E1217 · Graphit #141A21 · Graphit hell #1A222B · Stahlgrau #9AA6B2 · Nebelgrau #8693A0
- **Schriften:** Bebas Neue (Headlines) · Inter (Fließtext) · Space Mono (Labels & Technik)
- **Formen:** Karten-Radius 0 (eckig), Button-Radius 50px (Pill), keine Schatten in Ruhe, Buttons mit eisblauem Schein beim Darüberfahren
- **Die 5 wichtigsten Regeln:**
1. Dunkel dominiert, Eisblau ist der einzige Akzent.
2. Headlines in Bebas Neue, immer Großbuchstaben.
3. Flush-Raster mit 2 px Fuge, keine Rundungen außer Pills.
4. Outline-Schrift auf den hellen Flächen.
5. Keine Deko außer dem Eis-Schein im Hero.
---
## Wirkung & Einsatz
**So fühlt es sich an:** Mutig. Digital. Vorne dabei.
Fühlt sich an wie ein Abend in einem Designstudio, in dem gerade etwas Neues gebaut wird: Bildschirme leuchten, alles ist präzise, und du bist mittendrin.
**Nimm dieses Design, wenn:** Deine Kundin soll denken: Die sind schon da, wo ich hinwill.
**Passt zu diesen Angeboten:**
- KI-Kurse und Tech-Workshops für Unternehmerinnen
- Agentur- und Studio-Angebote
- Salespages mit Mut zu großem Auftritt
**Branchen:** KI, Tech, Agentur, Webdesign, Marketing, Musik
**Preisgefühl:** Mittel bis hoch. Wirkt modern und kompromisslos.
**Lieber nicht, wenn:**
- Dein Thema braucht Wärme und Geborgenheit
- Deine Zielgruppe mag es klassisch
- Du druckst viel auf Papier
---
## Tonalität
**Ton:** Direkt, Selbstbewusst, Klar
- Kurze Sätze, Klartext, kein Weichspüler
- Aktiv und nach vorn: „Du baust“, „Du startest“
- Zahlen und Ergebnisse statt Versprechen
- Fachwörter erlaubt, aber erklärt
| Format | Beispiel |
|---|---|
| Headline | Bau dir deine KI-Werkstatt. |
| Button | Jetzt starten |
| Betreff | Dein erster KI-Assistent steht heute Abend |
| Post | Sechs Wochen. Sechs Werkzeuge. Danach arbeitet die KI für dich und nicht du für sie. |
- **Diese Wörter passen:** bauen, starten, Werkzeug, System, live
- **Diese Wörter meiden:** vielleicht, irgendwie, Zauberei, passiv, ganz einfach
Allgemein für alle Texte: kurze, aktive Sätze. Verben statt Hauptwörter („du planst“ statt „die Planung“). Keine Gedankenstrich-Einschübe, keine „nicht X, sondern Y“-Formeln, keine Floskeln.
---
## Farben
| Name | Hex | Einsatz |
|---|---|---|
| Blauschwarz | #07090C | Hauptfläche |
| Nacht | #0E1217 | zweite Fläche, Ticker |
| Graphit | #141A21 | Flush-Kacheln |
| Graphit hell | #1A222B | Kachel beim Darüberfahren |
| Stahlgrau | #9AA6B2 | Fließtext auf Dunkel |
| Nebelgrau | #8693A0 | Nebentext, Labels |
| Eisblau | #9EEBFF | DER einzige Akzent |
| Eisweiß | #EEF6F8 | zwei helle Abschnitte |
| Weiß | #FFFFFF | Headlines auf Dunkel |
| Schiefer | #3C4752 | Fließtext auf Eisweiß |
### Farbregeln
- Eisblau ist die einzige Akzentfarbe. Kein zweiter Akzent.
- Mindestens 70 % der Seite sind dunkel.
- Eisweiß nur für zwei helle Abschnitte: Intro und Angebot.
- Linien auf Dunkel kaum sichtbar (8 % Weiß).
- Schatten nur als eisblauer Schein unter Buttons.
### Kontrast (WCAG)
| Kombination | Farben | Kontrast | Einsatz |
|---|---|---|---|
| Headline auf Blauschwarz | #FFFFFF auf #07090C | 19,9 : 1 | Fließtext ok |
| Fließtext auf Blauschwarz | #9AA6B2 auf #07090C | 8,0 : 1 | Fließtext ok |
| Nebentext auf Graphit | #8693A0 auf #141A21 | 5,6 : 1 | Fließtext ok |
| Button-Text auf Eisblau | #07090C auf #9EEBFF | 15,0 : 1 | Fließtext ok |
| Eisblau auf Blauschwarz | #9EEBFF auf #07090C | 15,0 : 1 | Fließtext ok |
| Fließtext auf Eisweiß | #3C4752 auf #EEF6F8 | 8,7 : 1 | Fließtext ok |
### Diagrammfarben (in dieser Reihenfolge)
1. #9EEBFF
2. #FFFFFF
3. #5FB8D4
4. #8693A0
5. #3E7C93
Eisblau ist die wichtigste Reihe, dann Weiß, dann Abstufungen in Blaugrau. Balken eckig, auf Graphit.
---
## Typografie
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap">
```
| Rolle | Schrift | Details |
|---|---|---|
| Headlines | Bebas Neue | 400 (einzige Stärke) · 48–110 px · immer Großbuchstaben |
| Fließtext | Inter | 400 · 14–16 px · Zeilenhöhe 1,75 · Stahlgrau auf Dunkel |
| Labels & Technik | Space Mono | 700 · 12–13 px · Sperrung 20 % · Studio-Gefühl |
### Schriftgrößen
| Rolle | Werte | Beispiel |
|---|---|---|
| Hero | Bebas 108 / 0,9 | KI-Werkstatt |
| H2 | Bebas 52 / 0,95 | Sechs Wochen, ein System |
| H3 | Inter 15 / 700 / groß | Was du baust |
| Fließtext | Inter 16 / 1,75 | Jede Woche ein Werkzeug, das du sofort nutzt. |
| Label | Space Mono 12 / 700 | Modul 01 |
### Typografie-Regeln
- Headlines immer in Bebas Neue und Großbuchstaben, nie klein geschrieben.
- Hervorhebung ist Eisblau, keine Schreibschrift, keine Kursive.
- Auf hellen Flächen bekommt die mittlere Zeile die Outline-Schrift.
- Alles Technische (Labels, Tags, Preise, Ticker) in Space Mono.
- **Deutsche Texte:** `lang="de"` setzen und Headlines mit `hyphens: auto` ausstatten. Bebas Neue ist schmal, deshalb vertragen Headlines auch lange Wörter. Trotzdem: höchstens drei Zeilen, eine Aussage. Wörter wie „KI-Werkstatt“ mit Bindestrich schreiben, damit sie sauber umbrechen.
---
## Abstände, Formen, Schatten
- **Raster:** 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px. Nur diese Werte für Abstände verwenden.
- **Container:** Text max. 760 px breit (rund 65 Zeichen pro Zeile), breite Layouts max. 1100 px.
- **Abschnitts-Abstand:** Desktop 96 px oben und unten, Handy 56 px. Seitenrand mindestens 16 px.
- **Radius:** Karten 0 (eckig) · Kacheln 0px · Buttons 50px (Pill) · Eingabefelder 50px · Bilder 0px
- **Schatten:** keine Schatten in Ruhe, Buttons mit eisblauem Schein beim Darüberfahren
- **Raster-Abstand zwischen Karten:** 2px
---
## Layout
**Abschnitts-Rhythmus einer Salespage:**
1. Hero: Hintergrund #07090C
2. Schmerz: zweite Fläche #0E1217
3. Vorteile: Hintergrund #07090C
4. Intro: Tönung #EEF6F8
5. Module: Hintergrund #07090C
6. Ticker: Akzentfläche #9EEBFF
7. Story: zweite Fläche #0E1217
8. Angebot: Tönung #EEF6F8
9. FAQ: Hintergrund #07090C
10. CTA: Akzentfläche #9EEBFF
Über 70 % der Seite sind dunkel. Blauschwarz und Nacht wechseln sich ab. Eisweiß gibt es genau zweimal als Atempause, Eisblau als Proof-Ticker und als großen Schluss.
**Erkennungszeichen: Eis-Schein & Outline-Schrift.** Im Hero leuchtet ein einziger runder Schein in Eisblau mit 15 % Deckkraft. Auf den hellen Eisweiß-Flächen bekommt die mittlere Headline-Zeile eine Outline-Schrift: nur Kontur, keine Füllung. Sonst gibt es keine Deko. Reine Struktur.
- Vorteile und Module als Flush-Raster mit 2 px Fuge, ohne Rundung.
- Schmerzpunkte und FAQ als Liste mit feinen Linien.
- Fotos schwarz-weiß, beim Darüberfahren farbig.
---
## Bausteine
### Buttons
```css
.btn { font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 17px 40px; border-radius: 50px; transition: all .3s; }
.btn-primary { background: #9EEBFF; color: #07090C; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(158,235,255,.25); }
.btn-secondary { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; }
```
Alle Buttons sind Pills (50 px Radius), Inter 700 in Großbuchstaben mit Sperrung. Eisblau auf Dunkel, Blauschwarz auf Eisblau und Eisweiß, Outline als Zweitbutton.
### Karten und Kacheln
```css
.card { background: #0E1217; border: none; border-radius: 0px; box-shadow: none; padding: 32px; }
.tile { background: #141A21; border: none; border-radius: 0px; padding: 22px; }
.tile:hover { box-shadow: none; }
```
### Labels, Tags, Eingabefelder
```css
.label { font-family: 'Space Mono', ui-monospace, Consolas, monospace; font-size: 12px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase; color: #9EEBFF; }
.tag { background: #9EEBFF; color: #07090C; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
input { border: 1px solid rgba(255,255,255,.2); background: #0E1217; border-radius: 50px; padding: 14px 16px; font-size: 16px; }
input:focus { border-color: #9EEBFF; box-shadow: 0 0 0 3px rgba(158,235,255,.3); }
```
### Weitere Bausteine (alle im Showcase zu sehen)
- **Schmerzpunkte:** Liste mit feinen Trennlinien (rgba(255,255,255,.08)), links ein Kreis mit ✕ in #9EEBFF. Beim Darüberfahren rückt die Zeile 6 px ein.
- **Vorher / nachher:** Kachel, oben das Vorher klein und durchgestrichen, darunter das Nachher kräftig.
- **Module:** Kachel mit großer Nummer in der Headline-Schrift (#9EEBFF), Titel, kurzer Beschreibung und Tag. Nummern nur, wenn die Reihenfolge wirklich zählt.
- **Kundenstimmen:** Zitat in Inter 17 px, darunter rundes Kürzel, Name und Beruf.
- **Preis-Pakete:** drei Kacheln nebeneinander, das empfohlene Paket mit 2 px Rahmen in #9EEBFF und Tag „Beliebt“.
- **FAQ:** Zeilen mit Trennlinien, rechts ein Kreis mit +. Offen: Kreis gefüllt in #9EEBFF, das + dreht sich zum ×.
- **Checkliste:** echte Checkboxen in #9EEBFF, erledigte Punkte grau und durchgestrichen, darunter „2 von 4 erledigt“.
- **Hinweis-Box:** Fläche #EEF6F8, rundes i-Symbol in #9EEBFF.
- **Formular (Freebie):** Vorname, E-Mail, Datenschutz-Checkbox (nicht vorausgewählt), Button. Fehlermeldungen sagen, was zu tun ist.
- **Tabelle:** Kopfzeile im Label-Stil, letzte Spalte in #9EEBFF hervorgehoben.
---
## Formate
- **Social Media:** Blauschwarz als Fläche, Bebas-Headline mit einem eisblauen Wort, Label in Space Mono. Stories in Eisblau mit Umfrage. Fotos schwarz-weiß.
- **Folien (16:9):** Blauschwarze Folie mit Eis-Schein in der Mitte, Bebas-Headline mit eisblauem Wort, drei Schritt-Kacheln im Flush-Raster mit Bebas-Nummern. Keine Rundungen.
- **Dokumente, Workbooks, PDF:** Eisweißes Blatt (druckt hell), Headline mit Outline-Zeile in der Mitte, Kernsatz auf einer dunklen Kachel, Kennzahlen im Flush-Raster.
- **Newsletter:** Dunkle Mail mit Wortmarke in Bebas, eisblauem Label und Pill-Button. Kurze Sätze, ein Termin, ein Aufruf.
- **Artefakte und kleine Tools:** Blauschwarzer Kopf mit Eis-Schein, Space-Mono-Tabs mit eisblauer Unterstreichung, Flush-Kacheln, Schritte als Kreise mit eisblauem Rand.
- **Salespage:** Hero mit Eis-Schein und Pill-Badge, Schmerz als Linien-Liste, Vorteile im Flush-Raster, Intro auf Eisweiß mit Outline-Schrift, Angebot auf Eisweiß, Schluss auf voller Eisblau-Fläche.
---
## Bildsprache
Schwarz-weiße Fotos mit starkem Kontrast, Bildschirm-Licht, Studio-Situationen bei Nacht. Beim Darüberfahren werden sie farbig. Keine bunten Stockfotos.
**Bild-Prompt-Stichworte:**
```
dark editorial studio aesthetic, blue-black backgrounds, single ice blue accent,
high-contrast minimalism, condensed uppercase typography,
monospaced labels, flush grid layouts, black and white photography,
screen glow at night, premium dark-mode design
```
---
## Bewegung & Interaktion
- Kacheln wechseln beim Darüberfahren von Graphit zu Graphit hell.
- Listen rücken beim Darüberfahren 8 px ein.
- Buttons heben sich 2 px mit eisblauem Schein. Kein Wackeln, kein Hüpfen.
- Alle Übergänge 0,25 bis 0,4 Sekunden. Bei `prefers-reduced-motion` alle Animationen ausschalten.
- Tastatur-Fokus immer sichtbar: 3 px Rahmen in #9EEBFF.
---
## Was dieses Design NICHT ist
- Keine zweite Akzentfarbe
- Keine Rundungen auf Flächen
- Keine Deko außer dem Eis-Schein
- Keine Schreib- oder Serifenschrift
- Keine bunten Fotos
- Keine Headlines in Kleinbuchstaben
---
## CSS-Variablen (kopierfertig)
```css
:root {
--line-strong: rgba(255,255,255,.22);
--on-accent2: rgba(7,9,12,.7);
--line-accent: rgba(7,9,12,.15);
--tile-accent: rgba(7,9,12,.07);
--line-dark: rgba(255,255,255,.08);
--tile-dark: #141A21;
--tile-border-dark: none;
--tag-bg-dark: #9EEBFF;
--tag-ink-dark: #07090C;
--card-border: none;
--tile-border: none;
--shadow: none;
--shadow-hover: none;
--r-pill: 20px;
--r-icon: 50%;
--r-chip: 0px;
--r-bar: 0px;
--r-avatar: 50%;
--r-slide-tile: 0px;
--slide-gap: 2px;
--tab-w: 600;
--quote-size: 17px;
--tag-track: 0.08em;
--wm-tf: uppercase;
--focus-ring: rgba(158,235,255,.3);
--doc-border: none;
--strip-gap: 2px;
--bg: #07090C;
--alt: #0E1217;
--soft: #EEF6F8;
--paper: #EEF6F8;
--card: #0E1217;
--tile: #141A21;
--tile-hover: #1A222B;
--tile-on-bg: #141A21;
--tile-on-soft: #FFFFFF;
--ink: #FFFFFF;
--ink2: #9AA6B2;
--ink3: #8693A0;
--line: rgba(255,255,255,.08);
--accent: #9EEBFF;
--accent-bg: #9EEBFF;
--on-accent: #07090C;
--sa-btn-ink: #9EEBFF;
--accent-text: #9EEBFF;
--label: #9EEBFF;
--dark: #0E1217;
--on-dark: #FFFFFF;
--on-dark2: #9AA6B2;
--label-dark: #9EEBFF;
--accent-text-dark: #9EEBFF;
--x-color: #9EEBFF;
--tag-bg: #9EEBFF;
--tag-ink: #07090C;
--focus: #9EEBFF;
--ticker-bg: #0E1217;
--dot: #9EEBFF;
--nav-bg: rgba(7,9,12,.94);
--tab-active: #9EEBFF;
--r-card: 0px;
--r-tile: 0px;
--r-btn: 50px;
--r-input: 50px;
--r-media: 0px;
--r-slide: 0px;
--r-doc: 0px;
--grid-gap: 2px;
--f-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
--f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--f-label: 'Space Mono', ui-monospace, Consolas, monospace;
--f-mono: 'Space Mono', ui-monospace, Consolas, monospace;
--f-btn: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--f-quote: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--h-w: 400;
--h-track: 0.02em;
--h-lh: 0.92;
--h-tf: uppercase;
--hero-size: clamp(56px,10vw,108px);
--num-w: 400;
--l-size: 12px;
--l-w: 700;
--l-track: 0.22em;
--l-tf: uppercase;
--b-size: 13px;
--b-w: 700;
--b-track: 0.14em;
--b-tf: uppercase;
--b-pad: 17px 40px;
--btn-bg: #9EEBFF;
--btn-ink: #07090C;
--btn-shadow: 0 8px 30px rgba(158,235,255,.25);
--btn-sec-hover-ink: #07090C;
--input-border: 1px solid rgba(255,255,255,.2);
--input-bg: #0E1217;
--star: #9EEBFF;
--ph: linear-gradient(160deg,#1E2731 0%,#0E1217 100%);
--ph-ink: #B4BEC8;
--ph-chip: rgba(7,9,12,.75);
--poll-bg: rgba(255,255,255,.08);
--poll-ink: #FFFFFF;
--doc-shadow: none;
--sa-ink: #07090C;
--sa-ink2: rgba(7,9,12,.7);
--f-script: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
```
---
## Prüfliste vor der Abgabe
- [ ] Nur Farben aus der Palette oben verwendet
- [ ] Fließtext hat mindestens 4,5 : 1 Kontrast, kleinste Schrift 12 px
- [ ] Headlines in Bebas Neue, Fließtext in Inter
- [ ] Deutsche Headlines mit Silbentrennung, keine Wörter abgeschnitten
- [ ] Auf dem Handy (400 px) einspaltig, nichts scrollt seitlich
- [ ] Tastatur-Fokus sichtbar, Bewegungen abschaltbar
- [ ] Mindestens 70 % dunkle Fläche
- [ ] Eisblau als einziger Akzent
- [ ] Outline-Schrift nur auf hellen Flächen