Marka

Pobierz logotyp, skopiuj kolor i niczego nie zmieniaj.

Pliki, kody kolorów i ustawienia typografii dla każdego, kto umieszcza Kit w swoich materiałach: wpisie na blogu partnera, slajdzie konferencyjnym, artykule prasowym czy prompcie dla agenta.

Pobierz wszystko brand.md

Logotyp i sygnet

Tożsamość wizualna opiera się na dwóch plikach: logotypie zapisanym małymi literami i śliwkowym sygnecie. Każdy plik do pobrania zawiera niezmieniony kształt używany w produkcie.

startupkit

Logotyp, atramentowy

Na jasne tła. Małe litery, „startup” zwykłym krojem, „kit” pogrubione, jedna ścieżka.

startupkit

Logotyp, biały

Na ciemne tła i zdjęcia. Ta sama ścieżka, białe wypełnienie.

Szachownica oznacza przezroczystość. Nie ma jej w plikach.

Sygnet

Jedyna płaska wersja wektorowa sygnetu: litery w kolorze #fafafc na śliwkowym tle. Używaj jej tam, gdzie logotyp byłby zbyt mały.

Ikona programu

Fawikona i ikona ekranu głównego. Tylko w formacie rastrowym; do katalogów oprogramowania, nie do druku.

Kwadrat
Przycięcie do koła

Awatar

Sygnet z marginesem, który chroni litery przy przycięciu do koła. Do zdjęć profilowych.

Zachowaj rozpoznawalność

Z każdej strony logotypu zostaw wolne miejsce równe połowie jego wysokości.
  • Atramentowy na jasnym tle, biały na ciemnym. Bez innych kolorów.
  • Minimalna szerokość: 96 px na ekranie, 24 mm w druku. Przy mniejszych rozmiarach użyj sygnetu.

Nigdy nie wolno

  • Zmieniać kolorów
  • Rozciągać ani obracać
  • Dodawać obrysu, cienia, poświaty ani gradientu
  • Odtwarzać napisu fontem Inter ani żadnym innym
  • Umieszczać znaku w ramce innej niż jego własny kwadrat
Pobierz wszystko Wszystkie pliki z tej strony w jednym archiwum ZIP.

Kolory

Siedem ról kolorystycznych wystarcza na każdy ekran. Najbardziej nasycone kolory na stronie to śliwkowy sygnet oraz dwa kolory odręcznych akcentów.

Kliknij próbkę, aby skopiować kod koloru. Zakreślacz wskazuje ostatnio skopiowany kolor.

Skala mauve

Każda szarość na stronie ma szarofioletowy odcień mauve. 50 to tło strony, 100 to nawigacja i powierzchnie elementów, 600 to tekst drugoplanowy, a 950 to atrament.

Tryb ciemny

Skala się odwraca. Papier przyjmuje odcień mauve 950, atrament zmienia się na #f8f6f8, a przycisk główny ma wypełnienie mauve 300 i atramentowy tekst. Zakreślacz i podkreślenie przyjmują kolor #f7b93b.

Dawne indygo

Indygo #4f46e5 wciąż widać na ubraniach z logo na starszych zdjęciach. Pochodzi sprzed obecnej palety i nie jest już kolorem marki. Nie pobieraj go ze zdjęcia.

Typografia

Dwa fonty na otwartej licencji. Fraunces do zdania, które ma sprawiać wrażenie napisanego odręcznie. Inter do wszystkiego, co trzeba szybko przeczytać.

Twój zespół widzi, kto co robi dalej.

Fraunces

100–900 variable, optical size 9–144

Nagłówki. Główny nagłówek i tytuły sekcji, grubość 480, rozmiar optyczny 144, WONK włączony.

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 sprawdza swój etap i odpowiada na ofertę w portalu kandydata.

Inter

100–900 variable

Tekst i interfejs. Treść 400, przyciski i etykiety 500, nagłówki kolaży 600 z odstępem między literami −0.03em.

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

Kod i wartości kolorów korzystają z systemowych fontów o stałej szerokości znaków. Oba fonty są dostępne na licencji SIL Open Font License 1.1. Pobierz je ze stron projektów; nie udostępniamy ich plików.

Przyciski

Jeden przycisk główny, jeden kształt. Atramentowy na jasnym tle, jasny szarofioletowy na ciemnym. Przycisk rejestracji zawsze ma tekst „Zacznij za darmo”.

Zacznij za darmo Na jasnym tle
Wypełnienie
#0c090c
Tekst
#ffffff
Po najechaniu
#2a212c
Zacznij za darmo Na ciemnym tle
Wypełnienie
#d7d0d7
Tekst
#0c090c
Po najechaniu
#f3f1f3
Zaokrąglenie
9999px
Odstępy wewnętrzne
12px 20px
Typografia
Inter 15px / 500 / 24px
Odstęp od ikony
8px

Odręczne akcenty

Charakterystyczny akcent Kit. Zakreślacz wyróżnia w nagłówku rezultat, a odręczne podkreślenia wskazują czynności. Oba efekty powstają w CSS, więc tekst pozostaje tekstem.

Przykład ze strony głównej

Jordan wysyła CV i śledzi swój etap. Twój zespół widzi, kto co robi dalej.

Kod HTML

Jordan <em>wysyła CV</em> i <em>śledzi swój etap</em>. Twój zespół widzi, <mark>kto co robi dalej</mark>.
  • Jeden zakreślony fragment na nagłówek, zawsze z rezultatem
  • Podkreślaj czasowniki, nigdy rzeczowniki
  • Tylko w nagłówkach. Nigdy w treści, przyciskach ani nawigacji
  • Zakreślacz #fde68a, pióro #b45309. W trybie ciemnym oba przyjmują kolor #f7b93b

Obrazy

Dwa rodzaje obrazów, każdy z osobnym zadaniem. Grafiki do mediów społecznościowych mają formę papierowych wycinanek. Okładki wpisów to fotografie.

Grafiki do mediów społecznościowych

Papierowa wycinanka na ciepłym, beżowym papierze. Warstwy przygaszonego mauve i ciemnej śliwki, czarny logotyp w lewym górnym rogu. Narysowane dłonie wykonują konkretną czynność: trzymają kartę, przesuwają kafelek.

Zdjęcia na blogu

Zdjęcia redakcyjne w stylu filmu 35 mm. Ludzie w ubraniach z logo startupkit, ciepłe światło, niewielki znak na koszulce zamiast na ścianie.

Stosuj

  • Dłonie w śliwkowych, dzianinowych rękawach wykonujące konkretną czynność
  • Papier w ciepłym odcieniu beżu, warstwy przygaszonego mauve i ciemnej śliwki, delikatne ziarno
  • Czarny logotyp w lewym górnym rogu, bez innych napisów

Unikaj

  • Dekoracyjne dłonie zawieszone w powietrzu lub uścisk dłoni
  • Zmyślone napisy w interfejsie lub fałszywe zrzuty ekranu
  • Logo jako główny temat zdjęcia

Styl pisania

Pięć zasad dla każdego, kto pisze o Kit. Stosujemy je również na tej stronie.

Opisuj konkretną rzecz, nie korzyść
Wskaż coś, co istnieje. Link, wiersz księgi, kolumnę CSV, działający zegar.
Przyznaj się do jednego rzeczywistego ograniczenia
Jedno zdanie, którego konkurent nie chciałby opublikować, dodaje wiarygodności pozostałym.
Najpierw osoba z zewnątrz
Zacznij od osoby bez konta. Kandydata, badacza, uczestnika szkolenia, audytora.
Bez ogólników
Bez słów i zwrotów takich jak platforma, rozwiązanie, bezproblemowy, usprawniać, solidny, wykorzystać potencjał, kompleksowy, potężny, oparty na AI.
Jedno zdanie, jedno zadanie
Usuń część zdania, która powtarza poprzednią. Nagłówki zawsze zapisuj jak zwykłe zdania.

Nazwa

Pisz

  • Kit w zdaniach
  • startupkit tam, gdzie jedno słowo ma pomóc nas znaleźć (startupkit.app, @StartupKit_app)
  • startupkit małymi literami w logotypie

Nigdy

  • Startup Kit
  • KIT
  • Kit.app
  • StartupKit w zdaniu

Dla agentów

Ta sama strona w formacie Markdown, ze wszystkimi kodami kolorów i ustawieniami fontów. Podaj agentowi ten adres, zamiast ręcznie opisywać markę. Pod adresem /brand/llms.txt znajdziesz ten sam plik.

startupkit.app/brand.md

Prompt do wklejenia

Przeczytaj https://startupkit.app/brand.md i używaj logotypu startupkit, kolorów oraz typografii dokładnie według opisanych tam zasad.

Logotyp i sygnet startupkit oznaczają Kit. Używaj ich, gdy wspominasz o Kit. Nie sugeruj, że Kit poleca twój produkt.