Marka

Linia, okrąg i co światło robi z metalem.

Znak, sposób jego budowy oraz pliki IO Patina LLC publikuje do użytku.

Symbol i główna blokada narysowane z siatki w każdym rozmiarze. Oba są wektorami, a nie obrazem jednego.

Budowa

Jedna zasada, a nie dwa kształty.

Szprychy są narysowane dookoła okręgu, a szerokość kątowa każdego z nich zmienia się w zależności od ich położenia. Tam, gdzie szerokość ta osiąga pełny skok, sąsiadujące szprychy spotykają się i pierścień zastyga; gdzie spada do połowy, rozdzielają się do wentylatora. Półksiężyc i wachlarz są zatem tym samym obiektem widzianym pod dwoma kątami, dlatego przejście między nimi nie ma szwu.

Siatka kołpakowa — średnica zewnętrzna pierścienia = jednostki 100
ZmierzWartośćUwaga
Średnica zewnętrzna pierścienia 100 siatka — co druga liczba to jej procent
Średnica pustej przestrzeni 61.18 Pozostała część dopasowana do okręgu 0.84px w odniesieniu
Puste przesunięcie 2.53 w lewo pustka nie jest koncentryczna i taki jest projekt
Szerokość paska 12.99 równo z pierścieniem, górą i dołem
Szczelina między prętem a pierścieniem 12.30 wolną przestrzeń wewnątrz znaku
Szprychy, pełne koło 114 ± 3 skok 3.10°–3.23° metodą autokorelacji w czterech promieniach; mistrz jest zbyt szorstki, aby je dokładnie policzyć
Szerokość szprychy 50% boiska, na świeżym powietrzu
Solidny łuk 195°–330° zmierzone; wyśrodkowany tuż poniżej dziewiątej
Całkowita szerokość 126.67 łącznie z zasięgiem kibica poza ringiem

Rozmiar optyczny

Wentylator staje się cieńszy, gdy znak staje się mniejszy.

Szprycha i jej szczelina wymagają około trzech pikseli łuku, aby można je było odczytać jako dwie rzeczy. Zamiast rysować szprychy 114 i pozwolić rasteryzatorowi je zniszczyć, znak zawiera cztery nacięcia. Pierścień, oddalona od środka pustka i odstęp między prętami a pierścieniem są identyczne we wszystkich czterech — pominięto jedynie detal, którego rozmiar nie jest w stanie utrzymać.

Display cap 90px i więcej · wszystkie szprychy 114
Medium zaślepka 40–89px · co trzecia szprycha, poszerzona — 38 rysowana
Quiet poniżej czapki 40px · bez wentylatora, prawdziwe proporcje — nagłówek witryny
Favicon Ikony 16 i 32px · brak wentylatora, pasek rozszerzony do 17.5, więc ląduje na całym pikselu

Wszystkie cztery są tutaj narysowane w tym samym rozmiarze, więc różnica jest widoczna. Każdy z nich jest zwykle postrzegany tylko w rozmiarze, dla którego został przycięty.

Kolor

Sześć wartości przenoszących tekst.

Każda para poniżej jest mierzona według WCAG 2.2. Trzy z pięciu kolorów zestawu nie osiągają 4.5:1 na papierze, jak stwierdzono — Stone Grey przy 2.81:1, Portal Gold przy 1.85:1 i Mist przy 1.10:1 — zatem każdy z nich jest używany tam, gdzie przechodzi, i usuwany w tym samym odcieniu tam, gdzie go nie ma. Zastąpienia są rejestrowane w systemie projektowym.

  • Deep Ink

    #0F1114

    Nagłówki, główne przyciski, ciemny grunt

    16.76:1 na Paper

  • Paper

    #F3F1ED

    Strona uziemiona

    16.76:1 na Deep Ink

  • Portal Gold

    #C8B092

    Akcent tylko na ciemnych powierzchniach

    9.08:1 na Deep Ink

  • Bronze

    #7C5F3E

    Łącza i oznaczenia na jasnych powierzchniach

    5.22:1 na Paper

  • Graphite

    #4A4C4E

    Kopia ciała

    7.65:1 na Paper

  • Stone

    #6B6D6B

    Mikroetykiety — najjaśniejszy neutralny

    4.63:1 na Paper

Urządzenia

Cztery urządzenia zaczerpnięte ze znaku.

Znak jest przedmiotem precyzyjnym; stronę, która jedynie ją zawiera, czyta się jako stronę z naklejką. Te cztery elementy stanowią miary marki stosowane jako struktura strony, zatem tożsamość i strona internetowa przestają być dwoma obiektami, które tak się składa, że ​​mają wspólne logo. Każdy IO Patina właściwość czerpie z tego samego zestawu — zobacz wspólny temat w motyw/.

Urządzenie 01 · Bar

Zaznacza nagłówek każdej sekcji. Najbardziej rozpoznawalny element tożsamości, na każdej stronie, wielokrotnie, bez żadnych kosztów.

Reguła 5px · pełna wysokość szyny · kolor akcentujący

od trzpień jednostki 12.99

Budowa

Jedna zasada, a nie dwa kształty.

Kolor

Sześć wartości przenoszących tekst.

Urządzenie 02 · Zasada szprychy

Po jednym na stronę, na głównej granicy strony. Każdy inny dzielnik pozostaje linią włosa — narysowana linia zachowuje swoją wagę tylko wtedy, gdy jest jedyna.

wysokość 6px · obowiązek 50% · wysokość 10px · zanika w prawo

od wypowiedź kibica



Urządzenie 03 · Metalowe

Powierzchnia, a nie atrakcja. Jedna na stronę, za bohaterem lub ciemną opaską, nigdy za tekstem, który należy przeczytać.

pranie prętowe jako krawędź strony 13px · mycie pierścieniowe uderzone od prawego górnego rogu

od opublikowane gradienty

Urządzenie 04 · Pustka poza centrum

Układ kopiuje asymetrię pierścienia: kolumna tekstowa jest szersza niż kolumna rekordu, a wycięcie displayowe schodzi poza stronę.

kolumny 1.35 / 1 · znak wypadł poza prawą krawędź w miejscu 16%

od przesunięcie jednostki 2.53 pustej przestrzeni

Budżet na stronę: jedna powierzchnia metalowa, jedno wycięcie znaku, jeden ciemny pas oraz tyle pasków i reguł szprych, ile jest sekcji w treści. Przekroczenie tego sprawia, że ​​tożsamość z powrotem staje się ozdobą.

Krój pisma

Trzy twarze, hostowane samodzielnie.

Wszystkie trzy są dostarczane z tej domeny jako podzbiór woff2. Żadna witryna nie wymaga czcionki z innego miejsca, dlatego też polityka bezpieczeństwa treści może całkowicie zabraniać korzystania z czcionek stron trzecich.

Archivo Interfejs, nagłówki i treść

Ideas, carefully made.

Zmienna, 100–900. Nagłówki sekcji, nawigacja, przyciski i wszystko czytane jako bieżący tekst. Także źródło zarysów znaku słownego.

Source Serif 4 Tylko wyświetlacz

Ideas, carefully made.

Tytuły stron i stwierdzenia, 30–62px. Nigdy poniżej 26px, gdzie szeryf przestaje być głosem i staje się teksturą.

Martian Mono Etykiety i dane

Ideas, carefully made.

Brwi, zapisz rzędy i każdą cyfrę na stronie, aby wszystko, co zmierzone, było odczytane jako zmierzone.

Pliki

Opublikowane pliki logo.

Każdy jest generowany z tego samego modułu geometrii, za pomocą którego witryna rysuje swój nagłówek, więc plik i aktywny znak nie mogą się różnić. Wszystkie są wektorami.

Używanie znaku

Zachowaj wolną przestrzeń

Pozostaw przynajmniej połowę średnicy pierścienia wolną z każdej strony. Opublikowane pliki już zawierają je w swoim viewBoxie, więc wystarczy umieścić je krawędzią do krawędzi.

Nie przerysowuj pierścienia jako zwykłego koła

Półksiężyc wpływający do wentylatora jest znakiem. Ogólny pierścionek to inne logo.

Nie rozciągaj, nie obracaj ani nie zmieniaj koloru

Użyj opublikowanego pliku. Znak jest szerszy niż wyższy, a skalowanie w jednej osi przerywa okrąg.

Poniżej o 56px użyj pliku ikony

Wentylator nie jest w stanie rozwiązać problemu przy tym rozmiarze i zaczyna hałasować. Ikony ulubionych i ikony aplikacji mają już odpowiedni krój.

Pozwolenie