Replicord · Logo D6

01 · Warianty znaku

Cztery formy, jedna wstęga

Ta sama krzywa „>" w każdym kontekście. Gradient na ciemnym i na aurorze, monochrom tam gdzie kolor nie ma racji bytu, oraz znak w kontenerze jako ikona aplikacji.

Gradient · podstawowy
na bg-0 / ciemnym tle

Gradient · na aurorze
hero / CTA / ekran logowania

Monochrom · czarny
druk / jasne tło / faktura

Monochrom · biały
stopki, watermark, jednokolorowy druk

Ikona aplikacji
favicon · PWA · iOS / Android

04 · Pole ochronne i zasady

Daj wstędze oddychać

Minimalny margines wokół znaku = grubość samej wstęgi. Nic nie wchodzi w to pole.

Pole ochronne x dookoła — równe grubości wstęgi.

✓ Trzymaj pionową oś — wstęga stoi prosto.

✓ Gradient na ciemnym, monochrom na druku.

✓ Lockup: znak po lewej, odstęp = ½ wysokości znaku.

✕ Nie obracaj ani nie odbijaj wstęgi w lewo.

✕ Nie zmieniaj kolorów gradientu Solar.

✕ Nie zmieniaj grubości ani nie dodawaj obrysu.

✕ Nie stawiaj gradientu na ruchliwym zdjęciu.

05 · Wklej na stronę

Gotowy kod

Trzy fragmenty: favicon i ikony w sekcji <head>, znak w nagłówku jako inline SVG, oraz style lockupu. Wszystko z plików w /assets/logo/ribbon/.

<head> — favicony, ikony, manifest

<!-- Replicord · favicon + ikony -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/assets/logo/ribbon/web/favicon-32.png" sizes="32x32">
<link rel="icon" href="/assets/logo/ribbon/web/favicon-16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/assets/logo/ribbon/web/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0B0D12">

Nagłówek — lockup jako inline SVG (HTML)

<a class="rc-logo" href="/" aria-label="Replicord">
  <svg class="rc-logo__mark" width="25" height="28" viewBox="0 0 28 32" fill="none">
    <defs>
      <linearGradient id="rcBand" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#FDE047"/><stop offset=".5" stop-color="#F97316"/><stop offset="1" stop-color="#DC2626"/>
      </linearGradient>
    </defs>
    <path d="M6 4C6 11 22 12.5 22 16C22 19.5 6 21 6 28" stroke="url(#rcBand)" stroke-width="5.4" stroke-linecap="round"/>
  </svg>
  <span class="rc-logo__word">Replicord</span>
</a>

Style lockupu (CSS)

.rc-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.rc-logo__mark { display:block; flex:none; }
.rc-logo__word {
  font-family:'Inter', system-ui, sans-serif;
  font-weight:600; font-size:22px; letter-spacing:-0.025em;
  color:#EDEFF5; line-height:1;
}

Alternatywa — gotowe pliki SVG przez <img>

<!-- pełny lockup (znak + napis) -->
<img src="/assets/logo/ribbon/replicord-ribbon-lockup.svg" alt="Replicord" height="32">

<!-- sam znak -->
<img src="/assets/logo/ribbon/replicord-ribbon-mark.svg" alt="Replicord" height="36">

<!-- monochrom — kolor sterowany przez CSS color -->
<img src="/assets/logo/ribbon/replicord-ribbon-mark-mono.svg" alt="Replicord" height="36">

06 · Pliki

Co dostajesz

Wszystkie pliki znaku i ikon. Wgraj folder assets/logo/ribbon/ oraz favicon.svg i site.webmanifest do katalogu głównego serwisu.

replicord-ribbon-mark.svgznak podstawowy, gradient Solar

SVG

replicord-ribbon-mark-mono.svgmonochrom, dziedziczy currentColor

SVG

replicord-ribbon-lockup.svgznak + wordmark „Replicord"

SVG

replicord-ribbon-favicon.svgciemny kontener — favicon na każdym tle

SVG

replicord-ribbon-appicon.svggradient + znak — ikona PWA / iOS (maskable)

SVG

web/ — favicon-16/32/48, apple-touch, icon-192/512rastrowe fallbacki PNG dla przeglądarek

PNG

Logo D6 — wstęga „>". Dopracowane i gotowe na stronę.

Cztery formy, jedna wstęga

Trzyma się od 18 px w górę

Jak wygląda na stronie

Daj wstędze oddychać

Gotowy kod

Co dostajesz