Brand · Zasoby dla agentów

System wizualny DPP.COM.PL

Jedno kanoniczne źródło marki: logo do pobrania, paleta kolorów z tokenami, typografia, wzorce UI 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

Znak i wordmark

Znak to zapętlona sygnatura oparta na literze P — cyfrowy ślad produktu. Występuje samodzielnie albo w zestawieniu z wordmarkiem DPP.COM.PL, zawsze pisanym wielkimi literami. Domyślny kolor znaku to cyan-500.

Znak · cyan

DPP.COM.PL

Lockup · jasne tło

Mono · ciemny

DPP.COM.PL

Odwrócony · ciemne tło

Pliki do pobrania

logomark-cyanZnak, cyan #06B6D4svg eps pdf png jpg
logomark-blackZnak mono, ciemnysvg eps pdf png jpg
logomark-whiteZnak mono, na ciemne tłosvg eps pdf png jpg
logo-lockup-darkZnak + wordmark, na jasne tłosvg eps pdf png jpg
logo-lockup-whiteZnak + wordmark, na ciemne tłosvg eps pdf png jpg

Zasady użycia

Wordmark zawsze wielkimi literami: DPP.COM.PL.
Zachowaj wolną przestrzeń wokół znaku równą wysokości litery „D".
Nie obracaj, nie rozciągaj i nie zmieniaj proporcji znaku.
Nie zmieniaj koloru znaku poza wariantami: cyan, czerń, biel.
Na ciemnym tle używaj wariantu białego (odwróconego).

Kolory

Paleta

Cyan to kolor podstawowy marki — znak, akcenty i CTA. Emerald sygnalizuje pozytywną weryfikację produktu jako oryginału. Kolory statusów uzupełniają komunikaty, a neutralna skala szarości (0 chroma, definiowana w oklch) buduje całą resztę interfejsu.

Podstawowy · Cyan

Znak, akcenty, przyciski, fokus

#22D3EE

cyan-400

#06B6D4

cyan-500

#0891B2

cyan-600

#0E7490

cyan-700

Weryfikacja · Emerald

Status „oryginał", potwierdzenia

#34D399

emerald-400

#10B981

emerald-500

#059669

emerald-600

#047857

emerald-700

Statusy

Sygnały semantyczne w komunikatach

#0EA5E9

sky-500

Informacja, krok procesu

#8B5CF6

violet-500

Blockchain, akcent

#F59E0B

amber-500

Ostrzeżenie

#F43F5E

rose-500

Błąd, podróbka

Neutralne · Gray

Tło, powierzchnie, tekst, obrysy — oklch, 0 chroma

#FAFAFA

gray-50

#F5F5F5

gray-100

#E5E5E5

gray-200

#D4D4D4

gray-300

#A3A3A3

gray-400

#737373

gray-500

#525252

gray-600

#404040

gray-700

#262626

gray-800

#171717

gray-900

#0A0A0A

gray-950

Typografia

Kroje pisma

Dwa kroje z Google Fonts, ładowane przez next/font. Space Grotesk buduje nagłówki i wordmark; Inter obsługuje treść i UI. Dane techniczne i etykiety korzystają z systemowego kroju monospace.

Space Grotesk

Nagłówki, wordmark, hasła · --font-space-grotesk

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

Trwały, kryptograficznie weryfikowalny zapis pochodzenia i składu produktu. Odczyt jednym dotknięciem telefonu — bez aplikacji, bez logowania.

Regular 400 — treść UI

Medium 500 — treść UI

Semibold 600 — treść UI

Monospace

0401020304050607

Kody, UID, dane, wartości KV

Etykieta / eyebrow

Trust Tag · Proces

Tokeny UI

Wzorce i wartości

Gotowe klasy Tailwind i kanoniczne tokeny do wklejenia. Sekcja przeznaczona zwłaszcza dla agentów budujących nowe widoki — trzymaj się tych wartości, aby zachować spójność.

Karta

Podstawowy kontener treści na tle gray-50.

rounded-3xl bg-white p-6 ring-1 ring-gray-200 sm:p-8

Etykieta / eyebrow

Nadtytuły, meta-etykiety, nagłówki kolumn.

text-[11px] font-semibold uppercase tracking-[0.18em] text-gray-500

Pill (badge)

Znaczniki statusu i kategorii.

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

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

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

{
  "brand": {
    "primary":   "#06B6D4",  // cyan-500 — znak, akcenty, CTA
    "verified":  "#10B981",  // emerald-500 — status „oryginał"
    "ink":       "#171717",  // gray-900 — tekst nagłówków
    "body":      "#525252",  // gray-600 — tekst treści
    "surface":   "#FFFFFF",  // karty
    "canvas":    "#FAFAFA"   // gray-50 — tło strony
  },
  "font": {
    "display": "Space Grotesk",  // nagłówki, wordmark
    "sans":    "Inter",          // treść, UI
    "mono":    "ui-monospace"    // 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

DPP.COM.PL komunikuje się rzeczowo i konkretnie. Wyjaśniamy technologię (NFC, blockchain, AES-128 CMAC, regulacje ESPR) w sposób precyzyjny, bez marketingowego szumu.

Tak piszemy

Fakty i konkrety: normy, algorytmy, liczby.
Rzeczowy, spokojny ton — technologia mówi sama za siebie.
Terminologia branżowa użyta poprawnie i wyjaśniona.
Krótkie zdania, jasna struktura, aktywna forma.

Czego unikamy

Superlatywów i pustych obietnic („rewolucyjny", „najlepszy").
Żargonu marketingowego bez pokrycia w faktach.
Straszenia i presji — informujemy, nie manipulujemy.
Przesadnej liczby wykrzykników i wielkich liter.

Stopka e-mail

Stopka do Gmaila

Wpisz imię, nazwisko 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

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

DPP.COM.PL Prosta Spółka Akcyjna, ul. Smukalska 33, 85-565 Bydgoszcz
NIP 9671491231 · KRS 0001197259 · dpp.com.pl

„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 cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:20px;color:#525252">
  <tr>
    <td style="padding-bottom:12px">
      <strong style="font-size:15px;color:#171717">Imię Nazwisko</strong><br>
      <a href="tel:+48000000000" style="color:#525252;text-decoration:none">+48 000 000 000</a>
    </td>
  </tr>
  <tr>
    <td style="padding-top:12px;border-top:1px solid #E5E5E5">
      <a href="https://dpp.com.pl"><img src="https://dpp.com.pl/brand/logo-lockup-dark-email.png" width="174" height="24" alt="DPP.COM.PL" style="display:block;border:0"></a>
    </td>
  </tr>
  <tr>
    <td style="padding-top:8px;font-size:11px;line-height:16px;color:#737373">
      <a href="https://dpp.com.pl" style="color:#737373;text-decoration:none">DPP.COM.PL Prosta Spółka Akcyjna</a>, ul. Smukalska 33, 85-565 Bydgoszcz<br>
      NIP 9671491231 · KRS 0001197259 · <a href="https://dpp.com.pl" style="color:#0E7490;text-decoration:none">dpp.com.pl</a>
    </td>
  </tr>
</table>

Zasoby

Indeks i skróty

Szybki wykaz ścieżek do zasobów oraz miejsc, w których marka jest zdefiniowana w kodzie.

Znak (komponent): src/components/Logo.tsx → <Logomark />
Pliki logo: /brand/logomark-*.{svg,eps,pdf,png,jpg} · /brand/logo-lockup-*.{svg,eps,pdf,png,jpg}
Tokeny motywu: src/styles/tailwind.css → @theme
Kroje pisma: src/app/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 · #06B6D4
Wordmark: DPP.COM.PL

← Strona główna DPP.COM.PL