# Markenmaterial und Gestaltungsregeln

Laden Sie die startupkit-Wortmarke, die Bildmarke und das App-Icon herunter. Kopieren Sie die genauen Farben und Schrifteinstellungen und sehen Sie, wie Kit seine Marke verwendet. Auch als Markdown für Agenten verfügbar.

Wortmarke herunterladen, Hexwert kopieren, nichts verändern. Dateien, Farbwerte und Schrifteinstellungen für alle, die Kit auf einer Seite zeigen: im Blog eines Partners, auf einer Konferenzfolie, in einem Pressebeitrag oder im Prompt eines Agenten.

## Wortmarke und Bildmarke

Zwei Dateien prägen das gesamte Erscheinungsbild: die kleingeschriebene Wortmarke und die pflaumenfarbene Bildmarke. Alle Downloads enthalten die unveränderten, tatsächlich verwendeten Pfade.

### Wortmarke, dunkel

Für helle Hintergründe. Kleinbuchstaben, „startup“ in normaler und „kit“ in fetter Schrift, als ein Pfad.

- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-454577a0.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-ink-ffa3d255.png
- PNG auf Weiß: https://startupkit.app/assets/brand/startupkit-wordmark-ink-on-white-d8cc7a7f.png

### Wortmarke, weiß

Für dunkle Hintergründe und Fotos. Derselbe Pfad, weiß gefüllt.

- SVG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-14002263.svg
- PNG transparent: https://startupkit.app/assets/brand/startupkit-wordmark-white-92cc5bff.png
- PNG auf Dunkel: https://startupkit.app/assets/brand/startupkit-wordmark-white-on-ink-4b3b0d48.png

### Bildmarke

Die einzige flächige Vektorgrafik der Bildmarke: Buchstaben in #fafafc auf pflaumenfarbenem Grund. Verwenden Sie sie, wenn die Wortmarke zu klein wäre.

- SVG: https://startupkit.app/assets/brand/startupkit-mark-2eff5e07.svg
- PNG: https://startupkit.app/assets/brand/startupkit-mark-95ae2aac.png

### App-Icon

Das Favicon und das Icon für den Startbildschirm. Nur als Rastergrafik; für App-Verzeichnisse, nicht für den Druck.

- PNG: https://startupkit.app/assets/brand/startupkit-app-icon-040ff0d0.png

### Avatar

Die Bildmarke mit Abstand zum Rand, damit die Buchstaben auch im runden Zuschnitt sichtbar bleiben. Für Profilbilder.

- PNG: https://startupkit.app/assets/brand/startupkit-avatar-dd9d3658.png

### Alles herunterladen

Alle Dateien dieser Seite in einer ZIP-Datei. https://startupkit.app/assets/brand/startupkit-brand-assets-6ba93399.zip

### Gut erkennbar halten

- Halten Sie auf allen Seiten einen Freiraum von der halben Höhe der Wortmarke ein.
- Mindestgröße: 96 px Breite auf dem Bildschirm, 24 mm im Druck. Darunter die Bildmarke verwenden.
- Dunkel auf hell, weiß auf dunkel. Keine anderen Farben.
- Niemals: Die Farben ändern
- Niemals: Strecken oder drehen
- Niemals: Kontur, Schatten, Schein oder Verlauf hinzufügen
- Niemals: Mit Inter oder einer anderen Schrift neu setzen
- Niemals: In einen Kasten setzen, der nicht das eigene Quadrat der Bildmarke ist

## Farben

Sieben Farbrollen decken die gesamte Oberfläche ab. Kräftiger als die pflaumenfarbene Bildmarke und die beiden Markierungsfarben wird es auf der Website nicht.

| Hellmodus | Hex | Dunkelmodus | Role |
|---|---|---|---|
| Dunkel | `#0c090c` | `#f8f6f8` | Text, primärer Button und Wortmarke auf hellem Hintergrund |
| Papier | `#fafafa` | `#0c090c` | Seitenhintergrund |
| Nebel | `#f3f1f3` | `#1d161e` | Navigation und erhöhte Flächen |
| Gedämpft | `#594c5b` | `#a89ea9` | Sekundärtext und zweite Zeile im Hero-Bereich |
| Pflaume | `#3b0f46` | `#3b0f46` | Bildmarke, Avatar und Farbakzente in Plattform-E-Mails |
| Marker | `#fde68a` | `#f7b93b` | Hervorhebung hinter der Kernaussage einer Überschrift |
| Stift | `#b45309` | `#f7b93b` | Handgezeichnete Unterstreichung unter einer Handlung |

### Die Mauve-Skala

Jeder Grauton der Website hat einen Mauve-Anteil. Stufe 50 ist der Seitenhintergrund, 100 die Navigation und erhöhte Flächen, 600 der Sekundärtext, 950 die dunkelste Textfarbe.

- mauve-50: `#fafafa`
- mauve-100: `#f3f1f3`
- mauve-200: `#e7e4e7`
- mauve-300: `#d7d0d7`
- mauve-400: `#a89ea9`
- mauve-500: `#79697b`
- mauve-600: `#594c5b`
- mauve-700: `#463947`
- mauve-800: `#2a212c`
- mauve-900: `#1d161e`
- mauve-950: `#0c090c`

### Dunkelmodus

Die Skala kehrt sich um. Der Seitenhintergrund wird Mauve 950, die Textfarbe #f8f6f8. Der primäre Button erhält eine Füllung in Mauve 300 und eine dunkle Beschriftung. Marker und Unterstreichung werden beide #f7b93b.

### Eine Farbe, die ausläuft

Indigo #4f46e5 ist noch auf Kleidungsstücken in älteren Fotos zu sehen. Die Farbe stammt aus der Zeit vor dieser Palette und gehört nicht mehr zu den aktuellen Markenfarben. Übernehmen Sie sie nicht aus einem Foto.

## Typografie

Zwei frei verfügbare Schriften. Fraunces für die Zeile, die persönlich wirken soll. Inter für alles, was schnell lesbar sein muss.

### Fraunces (100–900 variable, optical size 9–144)

Displayschrift. Hero-Überschrift und Abschnittstitel, Schriftstärke 480, optische Größe 144, WONK aktiviert.

```css
font-family: "Fraunces", ui-serif, Georgia, serif;
font-weight: 480;
font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
line-height: 1.08;
letter-spacing: -0.005em;
```

- GitHub: https://github.com/undercasetype/Fraunces
- Google Fonts: https://fonts.google.com/specimen/Fraunces

### Inter (100–900 variable)

Text und Oberfläche. Fließtext 400, Buttons und Beschriftungen 500, Collage-Überschriften 600 bei −0.03em.

```css
font-family: "InterVariable", "Inter", ui-sans-serif, system-ui, sans-serif;
font-feature-settings: "liga", "cv02", "cv03", "cv04", "cv11";
font-weight: 400;
```

- rsms.me/inter: https://rsms.me/inter/

Für Code und Hexwerte verwenden wir die Monospace-Schriften des Systems. `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

Beide Schriften stehen unter der SIL Open Font License 1.1. Laden Sie sie von den Originalprojekten herunter; wir stellen die Dateien nicht selbst bereit.

## Buttons

Ein primärer Button, eine Form. Dunkel auf hellem Hintergrund, helles Mauve auf dunklem. Der Button zur Registrierung heißt immer „Kostenlos starten“.

- Rundung: 9999px
- Innenabstand: 12px 20px
- Schrift: Inter 15px / 500 / 24px
- Abstand zum Icon: 8px
- Auf hellem Hintergrund: füllung `#0c090c`, beschriftung `#ffffff`, bei mauszeigerkontakt `#2a212c`
- Auf dunklem Hintergrund: füllung `#d7d0d7`, beschriftung `#0c090c`, bei mauszeigerkontakt `#f3f1f3`

## Markierungen

Diese Markierungen sind typisch für Kit. In Überschriften liegt eine Markerfläche hinter der Kernaussage; Handlungen werden von Hand unterstrichen. Beides entsteht mit CSS, der Text bleibt Text.

```html
Jordan <em>sendet einen Lebenslauf</em> und <em>verfolgt die Bewerbungsphase</em>. Ihr Team sieht, <mark>wer als Nächstes dran ist</mark>.
```

- Eine Markerfläche pro Überschrift, immer hinter der Kernaussage
- Unterstreichungen unter Verben, nie unter Substantiven
- Nur in Überschriften. Nie im Fließtext, auf Buttons oder in der Navigation
- Marker #fde68a, Unterstreichung #b45309. Im Dunkelmodus werden beide #f7b93b

## Bildwelt

Zwei Bildarten mit je einer Aufgabe. Social-Media-Grafiken wirken wie Papierschnitte, Blogtitelbilder sind Fotografien.

### Social-Media-Grafiken

Papiercollage auf warmem, haferfarbenem Grund. Schichten aus gedämpftem Mauve und tiefem Pflaume, die schwarze Wortmarke oben links. Illustrierte Hände tun etwas Konkretes: Sie halten eine Karte oder verschieben eine Kachel.

- https://startupkit.app/assets/opengraph/hiring-20ba841b.png
- https://startupkit.app/assets/opengraph/home-4cb8c4db.png
- https://startupkit.app/assets/opengraph/trust-925ce79b.png

### Blogfotos

Redaktionelle Fotos mit 35-mm-Film-Anmutung, Menschen in startupkit-Kleidung und warmem Licht. Das Logo ist klein und auf einem Kleidungsstück zu sehen, nicht an der Wand.

- https://startupkit.app/de/blog-images/founder-led-hiring-without-recruiter/cover.jpg
- https://startupkit.app/de/blog-images/hire-specialists-not-generalists-lean-teams-2026/cover.jpg

- So geht es: Hände in pflaumenfarbenen Strickärmeln bei einer echten Tätigkeit
- So geht es: Haferfarbenes Papier, gedämpftes Mauve und tiefes Pflaume in Schichten, mit feiner Körnung
- So geht es: Die schwarze Wortmarke oben links, sonst kein Text
- Vermeiden: Schwebende Deko-Hände oder ein Händedruck
- Vermeiden: Erfundenen Oberflächentext oder gefälschte Screenshots
- Vermeiden: Das Logo als Hauptmotiv eines Fotos

## Sprache

Fünf Regeln für alle, die über Kit schreiben. Nach denselben Regeln ist auch die Website geschrieben.

- **Nennen Sie das konkrete Ergebnis, nicht den Nutzen.** Nennen Sie etwas, das tatsächlich existiert. Einen Link, eine Buchungszeile, eine CSV-Spalte, einen laufenden Zähler.
- **Benennen Sie eine echte Grenze.** Ein Satz, den ein Wettbewerber lieber verschweigen würde, macht die übrigen Aussagen glaubwürdiger.
- **Menschen ohne Konto zuerst.** Beginnen Sie mit der Person ohne Login. Mit Kandidaten, Forschern, Teilnehmenden oder Prüfern.
- **Keine leeren Schlagwörter.** Keine leeren Wörter wie Plattform, Lösung, nahtlos, optimieren, robust, Hebel, End-to-End, leistungsstark oder KI-gestützt.
- **Ein Satz, eine Aufgabe.** Streichen Sie den Nebensatz, der das Vorherige nur wiederholt. Immer Satzschreibung.

### Name

- Schreiben Sie: Kit in Sätzen
- Schreiben Sie: startupkit, wo uns ein einzelnes Wort auffindbar machen muss (startupkit.app, @StartupKit_app)
- Schreiben Sie: startupkit in Kleinbuchstaben in der Wortmarke
- Niemals: Startup Kit
- Niemals: KIT
- Niemals: Kit.app
- Niemals: StartupKit in einem Satz

## Für Agenten

Dieselbe Seite als Markdown, mit allen Hexwerten und Schrifteinstellungen. Geben Sie einem Agenten den Link, statt die Marke selbst zu beschreiben. https://startupkit.app/de/brand/llms.txt liefert dieselbe Datei.

Die startupkit-Wortmarke und die Bildmarke kennzeichnen Kit. Verwenden Sie sie, um auf Kit zu verweisen, nicht um eine Empfehlung Ihres Produkts durch Kit anzudeuten.

[Marke](https://startupkit.app/de/brand)