Marka · zasoby dla agentów

System wizualny DPP.COM.PL

Jedno źródło prawdy o marce: logo do pobrania, paleta kolorów z tokenami, typografia, wzorce UI, zasady pisania i stopka e-mail. Strona jest punktem odniesienia dla partnerów oraz agentów AI, którzy tworzą materiały, interfejsy i dokumenty spójne z DPP.COM.PL. Wartości można kopiować jednym kliknięciem.

Logo

Sygnet i logo

Sygnet to zapętlona sygnatura oparta na literze P, cyfrowy ślad produktu. Występuje sam albo z napisem DPP.COM.PL obok (logo poziome) lub pod spodem (logo pionowe). Domyślny kolor sygnetu to cyan-500.

Logo z napisem

Poziome do nagłówków i dokumentów, pionowe (napis pod sygnetem) do formatów kwadratowych

Poziome · jasne tło
logo-lockup-dark
svg eps pdf png jpg
Poziome · ciemne tło
logo-lockup-white
svg eps pdf png jpg
Pionowe · jasne tło
logo-lockup-stacked-dark
svg eps pdf png jpg
Pionowe · ciemne tło
logo-lockup-stacked-white
svg eps pdf png jpg

Sygnet

Sam znak: favicon, awatar, małe formaty

Cyan · domyślny
logomark-cyan
svg eps pdf png jpg
Czarny · druk jednobarwny
logomark-black
svg eps pdf png jpg
Biały · ciemne tło
logomark-white
svg eps pdf png jpg

Zasady użycia

Wordmark zawsze wielkimi literami: DPP.COM.PL.
Wokół logo zostaw wolne pole co najmniej wysokości litery „D” w napisie.
Nie obracaj, nie rozciągaj i nie zmieniaj proporcji ani układu sygnetu i napisu.
Kolory tylko z wariantów: cyan, czerń, biel. Na ciemnym tle wariant biały.
SVG na ekran, EPS i PDF do druku, PNG z przezroczystym tłem, JPG z tłem.
Pliki są w krzywych: napis wygląda tak samo bez zainstalowanego kroju.

Kolory

Paleta

Marka to cyan i szarości. Emerald oznacza potwierdzenie (np. tag zweryfikowany), amber i rose pojawiają się tylko w ostrzeżeniach i błędach. Pozostałe odcienie Tailwinda w ilustracjach i diagramach nie są kolorami marki.

Marka

Cyan to kolor marki, emerald oznacza potwierdzenie

#00B7D7
cyan-500
Sygnet, przyciski, akcenty
#007492
cyan-700
Tekst i linki w kolorze marki (cyan-500 ma za mały kontrast)
#00BB7F
emerald-500
Potwierdzenia, „tag zweryfikowany”

Neutralne

Szarości bez nasycenia (oklch, 0 chroma)

#171717
gray-900
Nagłówki
#525252
gray-600
Tekst treści
#E5E5E5
gray-200
Obrysy, linie podziału
#FAFAFA
gray-50
Tło strony
#FFFFFF
white
Karty

Statusy

Tylko w komunikatach

#F99C00
amber-500
Ostrzeżenie
#FF2357
rose-500
Błąd, „tag niezweryfikowany”

Typografia

Kroje pisma

Dwa kroje z Google Fonts, ładowane przez next/font: Space Grotesk w nagłówkach i wordmarku, Inter w treści i interfejsie. Kody i dane techniczne korzystają z systemowego kroju monospace.

Space Grotesk
Nagłówki, wordmark, hasła · --font-space-grotesk
Aa
Cyfrowy paszport produktu
- Regular 400 - zgodność i zaufanie
- Medium 500 - zgodność i zaufanie
- Semibold 600 - zgodność i zaufanie
- Bold 700 - zgodność i zaufanie
Inter
Treść, interfejs, przyciski · --font-inter
Aa
Wskazujesz, gdzie są dane. AI układa je pod wymagania regulacji, a człowiek tylko zatwierdza.
- Regular 400 - treść UI
- Medium 500 - treść UI
- Semibold 600 - treść UI
Monospace
Kody, UID, dane, wartości KV · ui-monospace
Aa
0401020304050607
- Regular 400 - dane i kody
- Semibold 600 - dane i kody

Tokeny UI

Wzorce i wartości

Gotowe klasy Tailwind i tokeny do wklejenia, zwłaszcza dla agentów budujących nowe widoki. Wspólne klasy żyją w src/components/ui.tsx: importuj je zamiast przepisywać.

Karta
Kontener treści na tle gray-50. Na telefonie bez ramki i tła, karty dzieli linia.
```
py-6 sm:rounded-3xl sm:bg-white sm:p-6 sm:ring-1 sm:ring-gray-200
```
Siatka kart
Lista kart: na telefonie linie zamiast odstępów. Kolumny dodaj przez sm:/lg:grid-cols-N.
```
grid grid-cols-1 divide-y divide-gray-200 sm:gap-6 sm:divide-y-0
```
Etykieta / eyebrow
Nadtytuły, meta-etykiety, tytuły kart. Kolor dobierz do tła.
```
text-[11px] font-semibold tracking-[0.18em] uppercase text-gray-500
```

Pill (badge)

Znaczniki statusu i kategorii.

text-[11px] font-semibold tracking-[0.18em] uppercase inline-flex items-center gap-1.5 rounded-full bg-white px-3 py-1 text-gray-700 ring-1 ring-gray-200 ring-inset

Kafelek ikony

Akcentowany kontener na ikonę.

flex h-12 w-12 items-center justify-center rounded-2xl bg-cyan-50 text-cyan-700 ring-1 ring-cyan-100

Panel ciemny
Sekcje kontrastowe (podsumowania, hero). Zostaje panelem także na telefonie.
```
rounded-3xl bg-gray-900 p-8 text-gray-100 sm:p-10
```

Blok kodu

Dane techniczne, JSON, algorytmy.

rounded-xl bg-gray-950 px-4 py-3 font-mono text-[11px] text-emerald-300/90

Tokeny marki · JSON

{
  "color": {
    "primary": {
      "hex": "#00B7D7",
      "oklch": "oklch(71.5% 0.143 215.221)",
      "tailwind": "cyan-500",
      "use": "Sygnet, przyciski, akcenty"
    },
    "primary-text": {
      "hex": "#007492",
      "oklch": "oklch(52% 0.105 223.128)",
      "tailwind": "cyan-700",
      "use": "Tekst i linki w kolorze marki (cyan-500 ma za mały kontrast)"
    },
    "verified": {
      "hex": "#00BB7F",
      "oklch": "oklch(69.6% 0.17 162.48)",
      "tailwind": "emerald-500",
      "use": "Potwierdzenia, „tag zweryfikowany”"
    },
    "ink": {
      "hex": "#171717",
      "oklch": "oklch(0.205 0 0)",
      "tailwind": "gray-900",
      "use": "Nagłówki"
    },
    "body": {
      "hex": "#525252",
      "oklch": "oklch(0.439 0 0)",
      "tailwind": "gray-600",
      "use": "Tekst treści"
    },
    "line": {
      "hex": "#E5E5E5",
      "oklch": "oklch(0.922 0 0)",
      "tailwind": "gray-200",
      "use": "Obrysy, linie podziału"
    },
    "canvas": {
      "hex": "#FAFAFA",
      "oklch": "oklch(0.985 0 0)",
      "tailwind": "gray-50",
      "use": "Tło strony"
    },
    "surface": {
      "hex": "#FFFFFF",
      "tailwind": "white",
      "use": "Karty"
    },
    "warning": {
      "hex": "#F99C00",
      "oklch": "oklch(76.9% 0.188 70.08)",
      "tailwind": "amber-500",
      "use": "Ostrzeżenie"
    },
    "error": {
      "hex": "#FF2357",
      "oklch": "oklch(64.5% 0.246 16.439)",
      "tailwind": "rose-500",
      "use": "Błąd, „tag niezweryfikowany”"
    }
  },
  "font": {
    "display": {
      "family": "Space Grotesk",
      "use": "nagłówki, wordmark"
    },
    "sans": {
      "family": "Inter",
      "use": "treść, UI"
    },
    "mono": {
      "family": "ui-monospace",
      "use": "kody, etykiety, dane"
    }
  },
  "radius": {
    "button": 8,
    "tile": 16,
    "card": 24
  },
  "wordmark": "DPP.COM.PL"
}

Zmienne CSS · @theme

/* src/styles/tailwind.css - @theme */
--font-sans:    var(--font-inter);        /* Inter  */
--font-display: var(--font-space-grotesk); /* Space Grotesk */

/* Neutralna skala szarości (0 chroma) */
--color-gray-50:  oklch(0.985 0 0);
--color-gray-600: oklch(0.439 0 0);
--color-gray-900: oklch(0.205 0 0);
--color-gray-950: oklch(0.145 0 0);

--radius-4xl: 2rem;    /* rounded-4xl */
--radius-5xl: 2.5rem;  /* rounded-5xl */

Ton

Głos i komunikacja

Piszemy dla zespołów Regulatory Affairs i Product Compliance: rzeczowo, konkretnie, bez obietnic zgodności i bez marketingowego szumu. DPP.COM.PL to platforma compliance oparta na AI, a paszport DPP to jeden z jej wyników.

Tak piszemy
- Wskazujesz, gdzie są dane (PDF-y, maile, arkusze, API), AI układa je pod wymagania regulacji, człowiek zatwierdza.
- „Wskaż” / „Point to your data”, nie „wrzuć” / „drop in”.
- „Zgodny z ramami ESPR”, „ESPR-ready”, „obsługa procesów EUDR”.
- Blockchain w tle: „weryfikowalna integralność”, „tamper-evident”.
- „Cyfrowy paszport produktu” małymi literami, jak w ESPR (wielka litera tylko na początku zdania).
- Liczby tylko ze źródłem. Krótkie zdania, aktywna forma.
Czego unikamy
- „Zgodny z ESPR/EUDR”, „ESPR-compliant”, „gwarantuje zgodność”.
- „Niezmienne”, „tamper-proof”, „gwarantuje autentyczność”; NFT, tokenów, portfeli.
- Lat obowiązku DPP podawanych jako fakt: wyznacza je akt delegowany dla grupy produktów.
- Formularzy i ręcznego przepisywania danych jako głównej ścieżki.
- Superlatywów, pustych obietnic i straszenia („rewolucyjny”, „najlepszy”).

Stopka e-mail

Stopka do Gmaila

Wpisz imię, nazwisko, stanowisko i telefon, skopiuj gotową stopkę i wklej ją w ustawieniach Gmaila. Logo i dane spółki są wspólne dla wszystkich.

Twoje dane

Imię

Nazwisko

Stanowisko

Telefon

Jak wkleić w Gmailu

1W Gmailu kliknij koło zębate → „Zobacz wszystkie ustawienia".
2Karta „Ogólne" → sekcja „Podpis" → „Utwórz nowy", nazwij go „DPP.COM.PL".
3Kliknij w pole podpisu i wklej (Ctrl+V / Cmd+V).
4Ustaw go jako domyślny: w „Domyślne ustawienia podpisu" wybierz „DPP.COM.PL" w obu polach, „Dla nowych e-maili użyj" i „Przy odpowiedzi/przekazywaniu użyj".
5Kliknij „Zapisz zmiany" na dole strony.

Podgląd

Imię Nazwisko

+48 000 000 000 · www.dpp.com.pl

DPP.COM.PL Prosta Spółka Akcyjna z siedzibą pod adresem ul. Smukalska 33, 85-565 Bydgoszcz, wpisana do rejestru przedsiębiorców Krajowego Rejestru Sądowego prowadzonego przez Sąd Rejonowy w Bydgoszczy, XIII Wydział Gospodarczy Krajowego Rejestru Sądowego, pod numerem KRS 0001197259, NIP 9671491231, REGON 542861863, kapitał akcyjny 5 000,00 zł

„Kopiuj stopkę" kopiuje sformatowaną stopkę razem z logo - wklejasz ją wprost w Gmailu. Kodu HTML poniżej nie wklejaj w Gmailu (pokaże go jako tekst), przyda się w programach, które przyjmują podpis w HTML.

Stopka · HTML

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right:16px;vertical-align:middle">
      <a href="https://dpp.com.pl"><img src="https://dpp.com.pl/brand/logomark-cyan-email.png" width="56" height="56" alt="DPP.COM.PL" style="display:block;border:0"></a>
    </td>
    <td style="padding-left:16px;border-left:2px solid #00B7D7;vertical-align:middle;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#737373">
      <b style="font-size:15px;color:#171717">Imię Nazwisko</b>
    </td>
  </tr>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-top:16px;font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#525252">
      <a href="tel:+48000000000" style="color:#525252;text-decoration:none">+48 000 000 000</a> · <a href="https://dpp.com.pl" style="color:#007492;text-decoration:none">www.dpp.com.pl</a>
    </td>
  </tr>
  <tr>
    <td style="padding-top:12px;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:16px;color:#737373">
      <a href="https://dpp.com.pl" style="font-weight:bold;color:#525252;text-decoration:none">DPP.COM.PL Prosta Spółka Akcyjna</a> z siedzibą pod adresem ul. Smukalska 33, 85-565 Bydgoszcz, wpisana do rejestru przedsiębiorców Krajowego Rejestru Sądowego prowadzonego przez Sąd Rejonowy w Bydgoszczy, XIII Wydział Gospodarczy Krajowego Rejestru Sądowego, pod numerem KRS 0001197259, NIP 9671491231, REGON 542861863, kapitał akcyjny 5 000,00 zł
    </td>
  </tr>
</table>

Zasoby

Indeks i skróty

Ścieżki do plików i miejsca, w których marka jest zdefiniowana w kodzie.

Sygnet (komponent): src/components/Logo.tsx → <Logomark />
Pliki logo: /brand/logomark-*, /brand/logo-lockup-* (.svg .eps .pdf .png .jpg)
Źródła logo: scripts/brand/*.svg → scripts/brand-outline.py
Tokeny UI: src/components/ui.tsx → EYEBROW, PILL, CARD, CARD_GRID, Bullet
Tokeny motywu: src/styles/tailwind.css → @theme
Kroje pisma: src/app/[locale]/layout.tsx → Inter, Space_Grotesk (next/font)
Dane firmy: src/lib/company.ts → COMPANY
Stopka e-mail: src/app/[locale]/(main)/brand/EmailSignature.tsx
Kolor podstawowy: cyan-500 · #00B7D7
Wordmark: DPP.COM.PL