Logo | Skribly UI

Do pobraniaLink do sekcji Do pobrania

Każde archiwum zip zawiera dziewięć plików SVG produktu, te same dziewięć jako PNG ze znakiem o wysokości około 330 px oraz zestaw faviconów. Pliki SVG nie potrzebują fontu: nazwa jest zapisana jako kontury.

Wszystkie produkty (zip)

Układy i wersjeLink do sekcji Układy i wersje

Układu poziomego używaj tam, gdzie mieści się nazwa, pionowego w kwadratowym miejscu, a samego znaku tam, gdzie nazwa jest napisana obok albo brakuje miejsca. Wersji jasnej używaj na jasnym tle, ciemnej na ciemnym, a jednokolorowej tam, gdzie możliwy jest tylko jeden kolor, na przykład w grawerunku.

Produkt

Sam znak, JasnaSVG

Sam znak, CiemnaSVG

Sam znak, JednokolorowaSVG

Poziomy, JasnaSVG

Poziomy, CiemnaSVG

Poziomy, JednokolorowaSVG

Pionowy, JasnaSVG

Pionowy, CiemnaSVG

Pionowy, JednokolorowaSVG

Pole ochronneLink do sekcji Pole ochronne

Zostaw wokół znaku pole ochronne równe połowie bloku akcentu z każdej strony: 10 jednostek siatki 64, około jednej szóstej wysokości znaku. Nie wchodzi w nie żaden tekst, krawędź ani inne logo. Każdy plik ma już to pole jako margines, więc wstawiaj plik bez zmian.

Znak z polem ochronnym narysowanym jako przerywana ramka w odległości połowy bloku akcentu od każdego boku

Minimalne rozmiaryLink do sekcji Minimalne rozmiary

Poniżej tych wysokości znaku przestaje być czytelny znak produktu albo nazwa. Przy 16 pikselach produkty odróżnia już tylko kolor, więc sam znak w tym rozmiarze służy wyłącznie jako favicon.

Sam znak: 24 px wysokości na ekranie, 16 px tylko jako favicon.
Poziomy: znak o wysokości 24 px, więc wielkie litery nazwy mają około 12 px.
Pionowy: znak o wysokości 32 px, więc wielkie litery nazwy mają około 11 px.

Tak i nieLink do sekcji Tak i nie

Rób tak. Używaj plików bez zmian, na gładkim tle wersji, dla której powstały.

Nie rób tak. Rozciągnij, ściśnij albo obróć znak: bloki tracą wtedy proporcje.

Rób tak. Używaj koloru produktu, do którego należy znak, z jego tokenu.

Nie rób tak. Przemaluj znak kolorem spoza tokenów albo daj jednemu produktowi kolor innego.

Rób tak. Umieszczaj znak na kolorze strony albo na spokojnym deseniu marki.

Nie rób tak. Postaw znak na niespokojnym zdjęciu albo deseniu, dodaj mu cień, obrys albo poświatę.

Favicony i ikony aplikacjiLink do sekcji Favicony i ikony aplikacji

Każdy produkt ma zestaw faviconów: favicon SVG, który podąża za jasnym lub ciemnym ustawieniem systemu, PNG 32 px na kafelku w kolorze papieru, ikonę Apple touch 180 px oraz ikony maskowalne 192 i 512 px, które trzymają znak w środkowym kole, które zostaje widoczne w każdym kształcie ikony na ekranie głównym, wymienione w manifeście aplikacji webowej. Strona linkuje swój zestaw z biblioteki i nigdy nie rysuje własnego.

html

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

js

import favicon from '@skribly/ui/site/favicons/docs/favicon.svg?url&no-inline'
import appleIcon from '@skribly/ui/site/favicons/docs/apple-touch-icon.png?url&no-inline'