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 i wzorce UI. 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

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.

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 · /brand/logo-lockup-*.svg
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
Kolor podstawowy: cyan-500 · #06B6D4
Wordmark: DPP.COM.PL

← Strona główna DPP.COM.PL