Markenmaterial und Gestaltungsregeln

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.

Wortmarke, weiß

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

Das Schachbrettmuster zeigt Transparenz an. Es ist nicht Teil der Dateien.

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
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

Quadrat

Runder Zuschnitt

Avatar

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

PNG

Gut erkennbar halten

Halten Sie auf allen Seiten einen Freiraum von der halben Höhe der Wortmarke ein.

Dunkel auf hell, weiß auf dunkel. Keine anderen Farben.
Mindestgröße: 96 px Breite auf dem Bildschirm, 24 mm im Druck. Darunter die Bildmarke verwenden.

Niemals

Die Farben ändern
Strecken oder drehen
Kontur, Schatten, Schein oder Verlauf hinzufügen
Mit Inter oder einer anderen Schrift neu setzen
In einen Kasten setzen, der nicht das eigene Quadrat der Bildmarke ist

Alles herunterladen Alle Dateien dieser Seite in einer ZIP-Datei.

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.

Klicken Sie auf ein Farbfeld, um den Hexwert zu kopieren. Die Markierung zeigt, welcher Wert in Ihrer Zwischenablage liegt.

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.

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.

Ihr Team sieht, wer als Nächstes dran ist.

Fraunces

100–900 variable, optical size 9–144

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

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;

Jordan prüft die Bewerbungsphase und antwortet im Kandidatenportal auf das Angebot.

Inter

100–900 variable

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

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

Für Code und Hexwerte verwenden wir die Monospace-Schriften des Systems. 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“.

Kostenlos starten Auf hellem Hintergrund

Füllung: #0c090c
Beschriftung: #ffffff
Bei Mauszeigerkontakt: #2a212c

Kostenlos starten Auf dunklem Hintergrund

Füllung: #d7d0d7
Beschriftung: #0c090c
Bei Mauszeigerkontakt: #f3f1f3

Rundung: 9999px
Innenabstand: 12px 20px
Schrift: Inter 15px / 500 / 24px
Abstand zum Icon: 8px

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.

So auf der Startseite verwendet

Jordan sendet einen Lebenslauf und verfolgt die Bewerbungsphase. Ihr Team sieht, wer als Nächstes dran ist.

Der HTML-Code

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.

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.

So geht es

Hände in pflaumenfarbenen Strickärmeln bei einer echten Tätigkeit
Haferfarbenes Papier, gedämpftes Mauve und tiefes Pflaume in Schichten, mit feiner Körnung
Die schwarze Wortmarke oben links, sonst kein Text

Vermeiden

Schwebende Deko-Hände oder ein Händedruck
Erfundenen Oberflächentext oder gefälschte Screenshots
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
startupkit, wo uns ein einzelnes Wort auffindbar machen muss (startupkit.app, @StartupKit_app)
startupkit in Kleinbuchstaben in der Wortmarke