# Marka

> Logo, kolory i kroje pisma Hoxgera z zasadami użycia. Pliki możesz pobrać do artykułu, prezentacji albo materiałów partnerskich.

Source: https://hoxger.com/brand

## Logo

Logo składa się ze znaku i napisu. Używaj gotowych plików, zawsze w jednym kolorze: Earth na jasnym tle, Cloud na ciemnym i na obrazie.

- Pole ochronne wokół logo to wysokość litery x.
- Pełne logo ma co najmniej 96 px szerokości.
- Na obrazie stawiaj logo na spokojnym fragmencie nieba.

### Konstrukcja

- **Wysokość znaku**: 1,22 × h
- **Odstęp znak–napis**: 0,42 × x
- **Pole ochronne**: 1 × x
- **Minimalna szerokość**: 96 px

[Pobierz wszystkie pliki (ZIP)](https://hoxger.com/brand/hoxger-logos.zip)

### Logo

Na jasne tło [SVG](https://hoxger.com/brand/hoxger-logo-earth.svg) [PNG](https://hoxger.com/brand/hoxger-logo-earth.png)

Na ciemne tło [SVG](https://hoxger.com/brand/hoxger-logo-cloud.svg) [PNG](https://hoxger.com/brand/hoxger-logo-cloud.png)

### Znak

Na jasne tło [SVG](https://hoxger.com/brand/hoxger-mark-earth.svg) [PNG](https://hoxger.com/brand/hoxger-mark-earth.png)

Na ciemne tło [SVG](https://hoxger.com/brand/hoxger-mark-cloud.svg) [PNG](https://hoxger.com/brand/hoxger-mark-cloud.png)

### Napis

Na jasne tło [SVG](https://hoxger.com/brand/hoxger-wordmark-earth.svg) [PNG](https://hoxger.com/brand/hoxger-wordmark-earth.png)

Na ciemne tło [SVG](https://hoxger.com/brand/hoxger-wordmark-cloud.svg) [PNG](https://hoxger.com/brand/hoxger-wordmark-cloud.png)

## Czego nie robić

Proporcje logo są policzone co do jednostki. Jeśli logo nie pasuje do miejsca, zmień układ wokół niego.

- Nie rozciągaj
- Nie obracaj
- Nie łącz kolorów
- Nie dodawaj cieni ani efektów
- Nie przepisuj nazwy innym krojem
- Nie stawiaj na ruchliwym fragmencie

## Kolory

Podstawowym tłem jest Cloud, a kolorem tekstu Earth. Blue to akcent: najwyżej dwa elementy na stronie.

Tekst musi mieć kontrast z tłem co najmniej 4,5:1. Pewter służy tylko grafice, bo na Cloud jest za jasny do tekstu.

[Pobierz zmienne CSS](https://hoxger.com/brand/hoxger-colors.css)

| Nazwa  | HEX     | OKLCH                  | Zastosowanie                       |
| ------ | ------- | ---------------------- | ---------------------------------- |
| cloud  | #EEEDEA | oklch(94.5% 0.004 85)  | Główne tło, jasne logo             |
| mist   | #C9C7C3 | oklch(83.0% 0.006 85)  | Podziały i powierzchnie pomocnicze |
| pewter | #979591 | oklch(67.0% 0.006 85)  | Grafika pomocnicza                 |
| blue   | #32657B | oklch(48.0% 0.065 228) | Linki, przyciski i akcenty         |
| slate  | #5C5B57 | oklch(47.0% 0.006 85)  | Etykiety i tekst drugorzędny       |
| earth  | #1A1815 | oklch(21.0% 0.006 85)  | Główny tekst, ciemne tło i logo    |

## Typografia

Tytuły i hasła piszemy krojem PT Serif, treść, etykiety i liczby krojem Schibsted Grotesk.

PT Serif [Google Fonts](https://fonts.google.com/specimen/PT+Serif)

Tytuły i hasła. Odmiana Regular.

Schibsted Grotesk [Google Fonts](https://fonts.google.com/specimen/Schibsted+Grotesk)

Treść, etykiety i liczby. Odmiany Regular i Medium.

### Skala

| Rola       | Krój              | Rozmiar | Interlinia | Tracking |
| ---------- | ----------------- | ------- | ---------- | -------- |
| Display    | PT Serif          | 96 px   | 0,97       | -2,5%    |
| H1         | PT Serif          | 64 px   | 1,00       | -2,5%    |
| H2         | PT Serif          | 40 px   | 1,05       | -2%      |
| H3         | PT Serif          | 24 px   | 1,20       | -1%      |
| Tekst duży | Schibsted Grotesk | 19 px   | 1,55       | 0%       |
| Tekst      | Schibsted Grotesk | 16 px   | 1,55       | 0%       |
| Podpis     | Schibsted Grotesk | 13 px   | 1,40       | 0%       |

## Obrazy

Używamy pejzaży holenderskich mistrzów XVII wieku i studiów chmur z XIX wieku, z domeny publicznej.

- Niebo zajmuje co najmniej 60% kadru. Chmury są jasne, bez burz i zachodów słońca.
- Obraz zostaje taki jak w muzeum: bez filtrów i ram. Nie używamy obrazów generowanych przez AI.
- Tekst stawiamy na spokojnym niebie, na ciemnym welonie o kryciu 32%, a na jasnym niebie 40%.

## Komunikacja

Do klienta mówimy na „Ty”, o sobie „my”. Piszemy, co robimy, i podajemy konkretne wyniki, bez branżowego żargonu.

> Budujemy aplikacje webowe i utrzymujemy serwery, na których działają.

> Każdą zmianę sprawdzamy automatycznie, zanim zobaczą ją Twoi klienci.

Potrzebujesz innego formatu albo chcesz użyć logo nietypowo? [Napisz do nas](https://hoxger.com/#contact)