# Materiały marki i zasady użycia

Pobierz logotyp, sygnet i ikonę startupkit. Skopiuj dokładne kolory i ustawienia typografii, poznaj zasady używania marki. Także w formacie Markdown dla agentów.

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.

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

### Logotyp, atramentowy

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

- SVG przezroczysty: https://startupkit.app/assets/brand/startupkit-wordmark-ink-454577a0.svg
- PNG przezroczysty: https://startupkit.app/assets/brand/startupkit-wordmark-ink-ffa3d255.png
- PNG na białym tle: https://startupkit.app/assets/brand/startupkit-wordmark-ink-on-white-d8cc7a7f.png

### Logotyp, biały

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

- SVG przezroczysty: https://startupkit.app/assets/brand/startupkit-wordmark-white-14002263.svg
- PNG przezroczysty: https://startupkit.app/assets/brand/startupkit-wordmark-white-92cc5bff.png
- PNG na atramentowym tle: https://startupkit.app/assets/brand/startupkit-wordmark-white-on-ink-4b3b0d48.png

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

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

### Ikona programu

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

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

### Awatar

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

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

### Pobierz wszystko

Wszystkie pliki z tej strony w jednym archiwum ZIP. https://startupkit.app/assets/brand/startupkit-brand-assets-6ba93399.zip

### Zachowaj rozpoznawalność

- Z każdej strony logotypu zostaw wolne miejsce równe połowie jego wysokości.
- Minimalna szerokość: 96 px na ekranie, 24 mm w druku. Przy mniejszych rozmiarach użyj sygnetu.
- Atramentowy na jasnym tle, biały na ciemnym. Bez innych kolorów.
- Nigdy nie wolno: Zmieniać kolorów
- Nigdy nie wolno: Rozciągać ani obracać
- Nigdy nie wolno: Dodawać obrysu, cienia, poświaty ani gradientu
- Nigdy nie wolno: Odtwarzać napisu fontem Inter ani żadnym innym
- Nigdy nie wolno: Umieszczać znaku w ramce innej niż jego własny kwadrat

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

| Tryb jasny | Hex | Tryb ciemny | Role |
|---|---|---|---|
| Atrament | `#0c090c` | `#f8f6f8` | Tekst, przycisk główny, logotyp na jasnym tle |
| Papier | `#fafafa` | `#0c090c` | Tło strony |
| Mgła | `#f3f1f3` | `#1d161e` | Nawigacja i elementy wyróżnione tłem |
| Przygaszony | `#594c5b` | `#a89ea9` | Tekst drugoplanowy, drugi wiersz głównego nagłówka |
| Śliwka | `#3b0f46` | `#3b0f46` | Sygnet, awatar i akcenty w wiadomościach e-mail od Kit |
| Zakreślacz | `#fde68a` | `#f7b93b` | Tło pod fragmentem nagłówka opisującym rezultat |
| Pióro | `#b45309` | `#f7b93b` | Odręczne podkreślenie czynności |

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

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

### 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ć.

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

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

Tekst i interfejs. Treść 400, przyciski i etykiety 500, nagłówki kolaży 600 z odstępem między literami −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/

Kod i wartości kolorów korzystają z systemowych fontów o stałej szerokości znaków. `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

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

- Zaokrąglenie: 9999px
- Odstępy wewnętrzne: 12px 20px
- Typografia: Inter 15px / 500 / 24px
- Odstęp od ikony: 8px
- Na jasnym tle: wypełnienie `#0c090c`, tekst `#ffffff`, po najechaniu `#2a212c`
- Na ciemnym tle: wypełnienie `#d7d0d7`, tekst `#0c090c`, po najechaniu `#f3f1f3`

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

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

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

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

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

- Stosuj: Dłonie w śliwkowych, dzianinowych rękawach wykonujące konkretną czynność
- Stosuj: Papier w ciepłym odcieniu beżu, warstwy przygaszonego mauve i ciemnej śliwki, delikatne ziarno
- Stosuj: Czarny logotyp w lewym górnym rogu, bez innych napisów
- Unikaj: Dekoracyjne dłonie zawieszone w powietrzu lub uścisk dłoni
- Unikaj: Zmyślone napisy w interfejsie lub fałszywe zrzuty ekranu
- Unikaj: 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
- Pisz: startupkit tam, gdzie jedno słowo ma pomóc nas znaleźć (startupkit.app, @StartupKit_app)
- Pisz: startupkit małymi literami w logotypie
- Nigdy: Startup Kit
- Nigdy: KIT
- Nigdy: Kit.app
- Nigdy: 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 https://startupkit.app/pl/brand/llms.txt znajdziesz ten sam plik.

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

[Marka](https://startupkit.app/pl/brand)