Strona główna

Księga znaku

Jak loom.studio wygląda, brzmi i się porusza — zasady, żywe przykłady i pliki w jednym miejscu.

Wersja 1.0 · [DO UZUPEŁNIENIA: data]

01

Wprowadzenie

loom.studio to studio designu w subskrypcji: jedna miesięczna cena, jedno zadanie naraz, średnio 48 godzin na realizację. Identyfikacja mówi to samo co oferta — porządek, konkret i nic ponad potrzebę.

Efektywny design dla Twojej firmy

Hero w miniaturze: logo na osi, żywy gradient na tuszu, kompozycja na papierze. Przełącz motyw — płyta odwraca się razem ze stroną.

  • Porządek

    Jedna oś, jedna siatka, jeden odstęp między sekcjami.

  • Figura

    Kwadrat, koło i trójkąt prowadzą po stronie — to nawigacja, nie ozdoba.

  • Ruch z umiarem

    Ruszają się tylko transformacje, przezroczystość, przycięcie i rozmiar; przy ograniczeniu ruchu wszystko stoi.

Jak czytać tę księgę

  1. Przełącz motyw w prawym górnym rogu — wszystkie przykłady zmienią się na żywo.
  2. Kliknij kolor, żeby skopiować jego wartość.
  3. Pliki znajdziesz w sekcji 11.

Nazwa

Zapis
loom.studio — małymi literami, jednym słowem, z kropką. Także na początku zdania: „loom.studio to…”.
Nigdy
„Loom Studio”, „LOOM.STUDIO”, „Loomstudio”, „loom studio”, „Loom”.
Odmiana
Nazwy nie odmieniamy: „w loom.studio”, „dla loom.studio”.
Domena
[DO UZUPEŁNIENIA] — w konfiguracji strony: loomstudio.pl

03

Kolory

Papier i tusz budują stronę, trzy kolory podstawowe nadają jej rytm. Każda wartość działa w motywie jasnym i ciemnym.

Proporcje

Kolory podstawowe to figury i akcenty, nie tła.

Kolory główne

Stałe

Te wartości nie odwracają się z motywem — na płaszczyznach, które zawsze są ciemne albo białe.

Akcenty i odcienie gradientów

Akcenty

Ciemne odcienie

Jasne odcienie

Marki zewnętrzne

Odcienie żyją wyłącznie w gradientach (content/gradients.ts, content/flow-palettes.ts) — nigdy w tekście ani w przyciskach.

Dwa motywy

Motyw jasny

Jedno zadanie naraz, średnio 48 godzin na realizację.

Umów rozmowęZobacz plan

Motyw ciemny

Jedno zadanie naraz, średnio 48 godzin na realizację.

Umów rozmowęZobacz plan

O motywie decyduje atrybut data-theme na <html> albo prefers-color-scheme; wybór zapisuje cookie loom-theme. Każdy token ma dwie wartości w light-dark() — tu widać obie naraz. Z kolorów podstawowych zmienia się tylko niebieski: #4F59DB w motywie jasnym, #6A73E4 w ciemnym.

Kontrast

ParaKontrastZastosowanie
Tusz na papierze (i odwrotnie)#000000 / #E8E6DF16,82 : 1Cały tekst
Papier stały na nocy#E8E6DF / #040C0D15,81 : 1Cały tekst
Papier stały na fiolecie głębokim#E8E6DF / #2D053214,26 : 1Cały tekst
Czerń na żółtym#000000 / #F0CA4213,23 : 1Cały tekst
Czerń na różu 1#000000 / #F182CF8,83 : 1Cały tekst
Niebieski na bieli#4F59DB / #FFFFFF5,55 : 1Tekst
Czerwony na czerni#ED3434 / #0000005,14 : 1Tekst
Niebieski na czerni (motyw ciemny)#6A73E4 / #0000005,19 : 1Tekst
Niebieski na papierze#4F59DB / #E8E6DF4,44 : 1Duży tekst i grafika
Biel na czerwonym#FFFFFF / #ED34344,08 : 1Duży tekst i grafika
Czerwony na papierze#ED3434 / #E8E6DF3,27 : 1Duży tekst i grafika
Biel na różu 2#FFFFFF / #EF55883,32 : 1Tylko grafika
Szarość na papierze#A6A6A6 / #E8E6DF1,95 : 1Nigdy tekst
Żółty na papierze#F0CA42 / #E8E6DF1,27 : 1Nigdy sam — z obrysem tuszu 2 px

Zasady

  • Tak

    Kolory tylko przez tokeny i light-dark().

    Wtedy oba motywy działają same.

  • Nie

    Nowe wartości HEX w komponentach.

    Nowy odcień zaczyna się w styles/globals.css albo w presetach gradientów.

  • Tak

    Kolory podstawowe na figury, stany aktywne i pojedyncze akcenty.

    Rytm, nie tapeta.

  • Nie

    Tekst w kolorze podstawowym na papierze.

    Czerwony na papierze ma 3,27 : 1, niebieski 4,44 : 1 — za mało na tekst.

  • Tak

    Zaznaczenie: żółte tło i czarny tekst. Fokus: obrys 3 px w kolorze --blue, 3 px od elementu.

    Oba stany wyglądają tak samo w każdym miejscu strony.

  • Nie

    Rozjaśnione i półprzezroczyste wersje kolorów podstawowych.

    Płaszczyzny są pełne.

  • Tak

    Żółty na papierze zawsze z obrysem tuszu 2 px.

    Sam ma 1,27 : 1 — bez obrysu trójkąt znika.

  • Nie

    Odcienie gradientów w tekście albo w przyciskach.

    Żyją tylko w gradientach.

04

Typografia

Jeden krój — Haus — w czterech grubościach i czterech rozmiarach na ekran. Hierarchię budujemy grubością, kolorem i odstępem, nie kolejnym rozmiarem.

Krój

Haus

Haus — alfabet, cyfry i znaki

Projektant
Pier Francesco Martini, 2013
Odlewnia i licencja
[DO UZUPEŁNIENIA]
Pliki
WOFF2 na własnym serwerze (public/fonts/haus/): Light 300, Regular 400, Medium 500, Bold 700. font-display: swap; wstępnie ładowane 300, 500, 700.
Krój zastępczy
„Haus Fallback” = Arial z korektą metryk (ascent 100,09%, descent 25,6%, line-gap 2,86%, size-adjust 91,02%), potem system-ui. Podmiana nie przesuwa układu.
Kursywa
Jest w pakiecie licencji, ale jej nie używamy — wyróżniamy grubością, nigdy kursywą.

Grubości

  • Light 300Tekst główny, leady, nadtytuły, punktory, hasło na ciemnych płaszczyznach.
  • Regular 400Drobny druk, podpisy, tabele, białe pole (zaproszenie i pole pisania).
  • Medium 500Przyciski, tytuły kroków, tytuł hero, cena, wyróżnienia w listach, numery w spisie treści.
  • Bold 700Logotyp, tytuły sekcji (H2) i tytuły podstron (H1), kod języka.

Skala

RolaDesktop ≥ 1024Tablet 640–1023Telefon < 640Interlinia
D — Display--fs-dtext-d6056481 · −0,01 em
T — Tytuł--fs-ttext-t3632281,15
M — Główny--fs-mtext-m2422181,4 (akapity), 1,2 (interfejs)
S — Mały--fs-stext-s1616141,4

Na żywo, w rozmiarach tego ekranu

Księga znaku

D · na tym ekranie: —

Typografia

T · na tym ekranie: —

Jedno zadanie naraz, średnio 48 godzin na realizację.

M · na tym ekranie: —

Podpis pod płytą, drobny druk, tabela.

S · na tym ekranie: —

Role

Tytuł sekcji (H2)
D Bold; T Bold w FAQ i w tej księdze
Tytuł hero
D Medium
Cena
D Medium, okres M
Nadtytuł
M Light
Tytuł kroku
T Medium
Tekst główny
M Light
Przycisk
M Medium; wersaliki tylko w dwóch przyciskach hero i w „Zapytaj asystenta” w FAQ
Białe pole
M Regular, #000
Drobny druk
S Regular
Tytuł spisu treści
S Medium, wersaliki, +0,06 em
Logo
T Bold

Tester

Zasady

  • Tak

    Nagłówki z text-wrap: balance, akapity z pretty; tekst ciągły do 720 px.

    Równe wiersze, bez wdów i sierot.

  • Nie

    Piąty rozmiar albo font-size w stylu inline.

    Czterech rozmiarów na widok pilnują Stylelint i test e2e.

  • Tak

    Polskie cudzysłowy „…”, angielskie “…”; pauza ze spacjami „ — ”; wielokropek jednym znakiem „…”.

    Typografia, nie maszynopis.

  • Nie

    Kursywa i podkreślenie dla wyróżnienia.

    Wyróżnia grubość.

  • Tak

    Twarda spacja po jednoliterowych słowach (a, i, o, u, w, z); ceny tylko przez Intl.

    Nic nie zostaje samo na końcu wiersza.

  • Nie

    Tekst wyjustowany, całe zdania wersalikami, spacjowanie w tekście ciągłym.

    Wyjustowanie robi dziury między słowami, a wersaliki i spacjowanie męczą przy czytaniu.

05

Ikony

Proste figury na siatce 24 px, jeden kolor, bez zaokrągleń. Kierunek pokazuje trójkąt, nigdy strzałka.

Ikony sekcji

  • stairsJak pracujemy · 4,7 s
  • arrowRealizacje · 4,4 s
  • starCennik · 10 s
  • dropOpinie · 4,6 s
  • questionFAQ · 2,6 s
  • atKontakt · 5 s

Tak wyglądają w nagłówkach sekcji — w rzeczywistym rozmiarze.

  • Jak pracujemy
  • Realizacje
  • Cennik
  • Opinie
  • FAQ
  • Kontakt

BauhausGlyph w polu 20 / 18 / 15 px (desktop / tablet / telefon), 8 px od nadtytułu. Na kafelkach powiększone do 64 px. Każda ikona ma własną pętlę; poza ekranem się zatrzymuje, a przy ograniczonym ruchu stoi w kształcie spoczynkowym.

Ikony interfejsu

Glyph, pole 24 × 24, kolor tekstu (currentColor), obrys 2–2,5 px z prostymi końcami. Kliknij ikonę, żeby skopiować jej kod SVG. Formularze Google zachowują swoje fiolety #7248B9 / #A78BDA. Send i external to jeszcze strzałki — w nowych miejscach kierunek pokazuje Tri.

Kierunek

  • right · 0°linki, następny miesiąc
  • down · 90°pobieranie, do najnowszej
  • left · 180°powrót, poprzedni miesiąc
  • up · 270°zwiń opinię
Strona głównaPobierz brand kitZapytaj asystenta

Tri: wypełniony trójkąt 10 × 12, ścieżka M0 0 10 6 0 12Z, kolor tekstu, 8 px od etykiety. Obracamy go o 0 / 90 / 180 / 270° — nie rysujemy nowych grotów.

Ikony systemowe

  • motyw jasny30 × 30
  • motyw ciemny30 × 30
  • znak asystentaØ 48
  • ładowanie22 × 22
  • kod dostępupo 3 / 6 / 8 znakach

Najedź na słońce albo księżyc: przejście trwa 450 ms, promienie ruszają co 20 ms. Znak asystenta to różowe koło z białym kwadratem, który obraca się o 90°. Ładowanie zmienia kwadrat w koło i trójkąt co 600 ms.

Logotypy narzędzi i serwisów

  • Next.js
  • Discord
  • Framer
  • Wix
  • Blender
  • Figma
  • Instagram
  • Facebook
  • GitHub
  • X
  • Behance
  • Dribbble
  • Linktree
  • Trello
  • LinkedIn
  • After Effects
  • InDesign
  • Next.js
  • Discord
  • Framer
  • After Effects
  • Wix
  • InDesign
  • Blender

W użyciu: pasek narzędzi, 56 px, 40% krycia (100% po najechaniu). Ścieżki z simple-icons (CC0); znaki towarowe należą do właścicieli. LinkedIn, After Effects i InDesign rysujemy sami. To nie są elementy naszej marki i nie ma ich w paczce do pobrania.

Zasady

  • Tak

    Siatka 24 px, jeden kolor

    Wypełnienia albo obrys 2–2,5 px w kolorze tekstu (currentColor).

  • Nie

    Znaki strzałek i emoji

    Kierunek pokazuje wyłącznie Tri.

  • Tak

    Opis tylko tam, gdzie ikona jest sama

    Obok tekstu ikona ma aria-hidden; sama w przycisku dostaje aria-label, np. „Kopiuj e-mail”.

  • Nie

    Zaokrąglone końce linii

    Końce są proste, a narożniki ostre — jak figury Bauhausu.

  • Tak

    Pole kliknięcia co najmniej 24 px

    Zalecane 44 px — na telefonie i w rzędach przycisków.

  • Nie

    Ikony dwukolorowe i fonty z ikonami

    Jeden kolor, SVG w kodzie. Wyjątki: Formularze Google i znak asystenta.

06

Znaki graficzne

Kwadrat, koło i trójkąt to nasza nawigacja i nasz podpis. Każda figura ma swój kolor i swoje znaczenie.

Kompozycja

Kompozycja z hero w skali 2 : 1. Pole 179 × 138; kwadrat 77 × 77 w punkcie (0, 0), koło Ø 79 w (46, 46), trójkąt 87 × 76 w (92, 62), wierzchołkiem do góry. Warstwy od dołu: trójkąt, koło, kwadrat.

Znaczenie

  • Portfoliokonkret: praca, którą widaćCzerwony · --red · #ED3434
  • Opinieludzie: klienci i ich słowaNiebieski · --blue · #4F59DB / #6A73E4
  • Showreelruch: film i animacjaŻółty · --yellow · #F0CA42

W znakach marki przypisanie jest stałe: kwadrat czerwony, koło niebieskie, trójkąt żółty. Wymieniamy je zawsze w tej kolejności; wyjątki są w zasadach niżej.

Zachowanie

Najedź na figurę.

  • Portfolio rozpada się na 4 × 4 części420 ms
  • Opinie staje się kroplą250 ms
  • Showreel obraca się w znak odtwarzania350 ms

Tak reagują figury w hero: kwadrat prowadzi do portfolio, koło do opinii, trójkąt włącza film. Rozpad: części odlatują o 8 + 6·|d| px, obracają się o −12 / −6 / 6 / 12°, narożne maleją do 0,86. Przy ograniczonym ruchu figury stoją.

Figury w użyciu

Zakładki dokumentów: obrys 2 px w spoczynku, kolor przy aktywnej.
Kod dostępu: figury wypełniają się po 3, 6 i 8 znakach.
Ładowanie: kwadrat, koło, trójkąt — zmiana co 600 ms (tu 2×).
Proces: żółty kwadrat to Twoje zadanie — dzień rozmowy, karta na tablicy, gotowy projekt.
Ostatnie ujęcie filmu: figury składają się w koło w kwadracie.

Zasady

  • Tak

    Płasko, pełnym kolorem

    Każda figura ma jeden kolor podstawowy: kwadrat czerwony, koło niebieskie, trójkąt żółty.

  • Nie

    Gradienty, cienie, obrys z wypełnieniem

    Jedyny wyjątek: żółty na jasnym tle dostaje obrys 2 px w kolorze tuszu.

  • Tak

    Kolejność: kwadrat, koło, trójkąt

    Tak samo w hero, w zakładkach, w kodzie dostępu i w ładowaniu.

  • Nie

    Inne kolory i inne figury

    Wyjątki: żółte zadanie w scenach procesu, czerwona kropka i czarny trójkąt w filmie oraz znak asystenta. Gwiazda tylko w ikonie cennika.

  • Tak

    Obrót tylko w ruchu

    W spoczynku figury stoją prosto, a ich proporcje się nie zmieniają.

  • Nie

    Znaki zastępcze z portfolio

    Koło w kwadracie, paski i horyzont wypełniają siatkę — to nie są znaki marki.

07

Gradienty i poświaty

Żywe gradienty to powierzchnie, nie ozdobniki: płyną powoli, w kolorach marki, i zatrzymują się, gdy ich nie widać.

Laboratorium

Rampa WebGL work-ember, od najciemniejszego

Siedem gradientów z siatki realizacji: poster CSS (OrganicGradient), a nad nim płynny WebGL (FlowGradient) — dokładnie jak w polu portfolio. „Zatrzymaj” zostawia sam poster. Kliknij kolor rampy, żeby go skopiować.

Powierzchnie strony

  • hero-ink

    baza #000000 / #E8E6DF · plamy #0F2A33 / #F4D9E6, #1B1F5E / #EDE3BD, #2D0532 / #D9DCF3, #3A0A12 / #E3D6E8 (jasny / ciemny motyw) · rampa WebGL hero

    Lewa połowa hero na desktopie. Odwraca się razem z motywem.

  • night-teal

    baza #040C0D · plamy #0F2A33, #06303A, #1B1F5E · rampa WebGL contact-left

    Kontakt: lewy panel na desktopie, cały blok na tablecie i telefonie.

  • night-plum

    baza #0B0410 · plamy #2D0532, #3A0A12, #1B1F5E · rampa WebGL contact-right

    Kontakt: prawy panel na desktopie.

  • assistant-bloom

    baza #EF5588 · plamy #F182CF, #4F59DB, #ED3434, #F0CA42

    Panel asystenta na tablecie i telefonie, pod jedną warstwą szkła.

Ruch

Plamy
Elipsy radial-gradient(62% 44%), bez rozmycia. Rozmiar w cqmax, więc wygląd jest taki sam przy każdych proporcjach.
Trzy ruchy
og-drift, og-breath, og-turn — przesunięcie, oddech i obrót, każdy z innym czasem, więc tor się nie powtarza.
Spokojny
23–71 s, amplituda 9%, oddech 0,92–1,12 — hero-ink, night-teal, night-plum, assistant-bloom.
Łagodny
24–47 s, amplituda 5%, oddech 0,95–1,08 — ember, ultramarine, sun, orchid, night, blush, paper.
WebGL
fBm ze zniekształceniem dziedziny (domain warping), połowa rozdzielczości (najwyżej 1280 × 720), do 30 klatek na sekundę (24 na ekranach dotykowych). Startuje po wczytaniu strony, w bezczynności; poza ekranem i w ukrytej karcie stoi.
Bez WebGL
Przy ograniczonym ruchu, oszczędzaniu danych, 2 rdzeniach lub mniej albo renderowaniu programowym zostaje poster CSS.
Kontrast
Najjaśniejszy kolor ciemnych ramp ma luminancję 0,03 — tekst w kolorze papieru ma na nich zawsze co najmniej 11,2 : 1.

Jedyny gradient statyczny

--pink-gradient: linear-gradient(180deg, #F182CF 0%, #EF5588 100%). To kolor asystenta i niczego więcej — znak asystenta to jedyny przycisk z gradientem.

Poświaty i ziarno

  • hero-mobile.avif

    1170 × 1980 · 1,9 kB

    Panel główny hero na telefonie: poświata na --color-night.

  • hero-tablet.avif

    1668 × 2176 · 2,8 kB

    Panel główny hero na tablecie: ta sama poświata, szerszy kadr.

  • testimonial-bg.avif

    2400 × 1680 · 4,2 kB

    Karty opinii: indygo i śliwka na #2D0532.

  • Ziarno · krycie 0,06

  • Ziarno · krycie 0,6

Poświaty to bitmapy AVIF (z zapasowym WebP), bo w tych miejscach nie ma żywego gradientu. Ziarno /media/grain.png kafelkujemy co 128 px z kryciem 0,06 — to jedyna tekstura marki. Obok to samo ziarno dziesięć razy mocniej, żeby było je widać.

Jedyny cień

Szkło systemowergba(232, 230, 223, 0.58) / rgba(16, 16, 16, 0.62)blur(20px) saturate(140%)

Miękki cień ma tylko szkło systemowe: górna nawigacja, dolny pasek, asystent i karta cookies, zawsze z data-surface="glass". Nigdzie indziej nie ma cieni ani drop-shadow. Pełna specyfikacja szkła jest w sekcji 09.

Zasady

  • Tak

    Gradient jako powierzchnia pod treścią

    Tło panelu, pola portfolio, hero — nigdy pojedynczy element na papierze.

  • Nie

    Gradient w tekście, logo albo przycisku

    Jedyny wyjątek to znak asystenta.

  • Tak

    Tylko kolory z palety i listy odcieni

    Nowy preset dopisujemy do content/gradients.ts i content/flow-palettes.ts — najpierw poster CSS, potem rampa.

  • Nie

    Rozmycia, poświaty za tekstem, gotowe siatki

    Plamy są ostrymi elipsami w ruchu — miękkość daje ruch, nie filtr.

  • Tak

    Sprawdź kontrast na skrajnych klatkach

    Tekst musi być czytelny na najjaśniejszej i najciemniejszej klatce.

  • Nie

    Ruch, którego nie da się zatrzymać

    Poza ekranem, w ukrytej karcie i przy ograniczonym ruchu gradient stoi.

08

Zdjęcia / filmy

Pokazujemy pracę, nie stock. Film gra bez dźwięku i bez kontrolek, a w opiniach mogą się pojawić tylko twarze prawdziwych klientów.

Film promocyjny

Film promocyjny loom.studio

16 : 9 — okno showreelu na desktopie

Film promocyjny loom.studio

9 : 16 — panel karuzeli na tablecie i telefonie

Na razie gra makieta — prawdziwy film dodamy wkrótce. [DO UZUPEŁNIENIA]

Odtwarzanie
Bez dźwięku, w pętli, w miejscu (muted, loop, playsinline). Bez kontrolek, obrazu w obrazie i AirPlay. Nigdy YouTube.
Widoczność
Źródła wczytują się przy 10% widoczności, film gra od 60%, poniżej staje — także w ukrytej karcie.
Ograniczony ruch
Zamiast filmu poster (ujęcie 2). Tak samo, gdy przeglądarka zablokuje autoodtwarzanie.
Pliki
Pion 720 × 1280 px, H.264 do 4 MB (+ opcjonalnie WebM) i poziom 16 : 9; 15–30 s, bez ścieżki dźwiękowej; poster AVIF do 60 kB.
Gdzie
public/media/promo/ albo Vercel Blob, adresy w zmiennych NEXT_PUBLIC_PROMO_*. [DO UZUPEŁNIENIA]

Scenariusz makiety

  1. 01 · Czerń0–3 s

    Logotyp składa się litera po literze, kropka spada jako czerwone koło.

  2. 02 · Papier3–6 s

    Rysują się linie siatki, wjeżdżają kwadrat, koło i trójkąt.

  3. 03 · Niebieski6–9 s

    Przewija się ekran aplikacji, wskakuje żółty element.

  4. 04 · Żółty9–12 s

    Trzy figury krążą i składają się w koło w kwadracie.

Pętla 12 s: cztery ujęcia po 3 s. Każde cięcie to płaskie przetarcie od lewej (clip-path), nigdy przenikanie.

Zasady dla przyszłych filmów

--ease-bauhaus

cubic-bezier(0.7, 0, 0.3, 1) · Ruch, przetarcia, morfingi

--ease-out

cubic-bezier(0.2, 0.8, 0.2, 1) · Wejścia i najechania

Rytm: ujęcie 3 s, przetarcie ok. 0,4 s, pętla 12 s.

  • Tak

    Tylko kolory marki. Ziarno do 6%.

  • Nie

    Filtry, duotony i LUT-y spoza palety.

    Film ma wyglądać jak strona, nie jak reklama z banku zdjęć.

  • Tak

    Cięcie to płaskie przetarcie — jak w makiecie.

  • Nie

    Przenikania, rozmycia i efektowne przejścia.

    Bauhaus tnie płaszczyznami; przenikanie rozmywa formę.

  • Tak

    Jedyny tekst w kadrze to logotyp (Haus Bold).

  • Nie

    Napisy, plansze z hasłami, lektor i muzyka.

    Film gra bez dźwięku — obraz musi mówić sam.

  • Tak

    Prawdziwe nagrania ekranu z prawdziwych projektów.

  • Nie

    Stockowe ujęcia ludzi, biur i laptopów.

    Pokazujemy pracę, nie stock.

Portrety

Opinia — monogram
Odznaka — koła w kolorach podstawowych

Na tej stronie nie ma twarzy — tylko zastępstwa, które serwis pokazuje, gdy brakuje zdjęcia. Portret trafia na stronę wyłącznie za zgodą osoby, która na nim jest.

Kto
Prawdziwi klienci ze zgodą na wizerunek. Do podglądu — portrety AI osób, które nie istnieją (sprawdź licencję komercyjną generatora). Nigdy zdjęcia stockowe prawdziwych ludzi.
Portret
256 × 256 px, AVIF i WebP do 40 kB, kadr 1 : 1 wokół punktu centralnego (domyślnie 50% 35%) — pnpm avatars.
Miniatura
64 × 64 px do 6 kB — do odznaki nad tytułem i w cenniku.
Kształt
Koło, bez ramki i bez cienia.
Brak pliku
Monogram w opiniach, koło w kolorze podstawowym w odznace.
Podgląd AI
Jednolite, ciepłe jasnoszare tło #E8E6DF, miękkie światło z okna z lewej, obiektyw 85 mm, kadr kwadratowy, bez tekstu i logo.

Wizualizacje projektów

Logo białe — na ciemnym albo nasyconym gradiencie · ember
Logo czarne — na jasnym gradiencie · sun
Logo w komórce
Na środku, szerokość min(52%, 220 px), wysokość do 42%, przycięte do znaku — pnpm logos:trim. SVG albo przezroczysty PNG / WebP.
Tło
Żywy gradient z palety marki — nigdy zdjęcie.
Karuzele w cenniku
Pole 288 × 180 px — scena CSS albo wyciszona pętla do 1 MB.

Zasady

  • Tak

    Prawdziwa praca i prawdziwi klienci — za ich zgodą.

  • Nie

    Zdjęcia stockowe ludzi, wymyślone opinie, twarze z AI podpisane jako klienci.

    Opinia jest coś warta tylko wtedy, gdy jest prawdziwa.

  • Tak

    Tekst alternatywny mówi, co widać. Obraz ozdobny ma pusty alt.

  • Nie

    Alt „obrazek”, „zdjęcie1.jpg” albo powtórzony podpis.

    Czytnik ekranu przeczyta to na głos.

  • Tak

    AVIF i WebP, jawne wymiary (width, height) — nic nie skacze.

  • Nie

    Filtry spoza palety, dźwięk, który gra sam, kontrolki odtwarzacza.

    Obraz ma należeć do strony, nie do odtwarzacza.

09

Elementy graficzne

Przyciski, białe pole, szkło, linie i płaszczyzny — mały zestaw, z którego zbudowany jest cały serwis.

Przyciski

Najedź na przycisk, żeby zobaczyć wypełnienie.

Na papierze

Umów rozmowę.btn--solid-inkDowiedz się więcej.btn--outlineZobacz plan.btn--yellow

Na tuszu

Zobacz plan.btn--solid-paperUmów rozmowę.btn--yellowDowiedz się więcej.btn--outline-card

Na stałych ciemnych powierzchniach

Zobacz plan.btn--solid-lightWypełnij formularz.btn--outline-light
Wysokość
--pill-h: 56 / 64 px — jedna dla wszystkich przycisków, nawigacji i dolnego paska.
Odstęp wewnętrzny
--pill-px: 24 / 28 / 32 px
Etykieta
M, Medium 500, wielka litera tylko na początku; wersaliki mają wyłącznie dwa przyciski hero i „Zapytaj asystenta” w FAQ. Na telefonie długa etykieta łamie się na dwie linie w tej samej wysokości.
Kształt
promień 999 px (pełne zaokrąglenie), obrys 2 px w kolorze tekstu (1,5 px na ciemnej karcie).
Najechanie
wypełnienie wjeżdża od lewej: clip-path z inset(0 100% 0 0) do inset(0 0 0 0) w 220 ms (--ease-bauhaus).
Kliknięcie
scale(0.97), 120 ms.

Białe pole

Zapytaj, jak działa subskrypcja…
zaproszenie w górnej nawigacji
Zapytaj o plan, proces albo cenę…
pole pisania asystenta
Kolor
tło #FFF, tekst #000 — tak samo w obu motywach.
Wysokość
--pill-h − 12 px = 44 / 52 px; pełne zaokrąglenie przy jednej linii, bez obrysu i cienia.
Tekst
M, Regular 400.
Podpowiedź
#595959 (7 : 1 na bieli); przycisk wysyłki: czarne koło Ø 34 / 40 px z trójkątem.

Szkło

Barwa
rgba(232, 230, 223, 0.58) / rgba(16, 16, 16, 0.62) (jasny / ciemny motyw)
Rozmycie tła
blur(20px) saturate(140%)
Brzeg
obrys 1 px i 5 px odstępu wewnętrznego — razem 6 px wokół treści.
Asystent
--chat-glass rgb(232 230 223 / 0.8) / rgb(16 16 16 / 0.78), --chat-blur 28px.
Karta cookies
promień 28 px na zewnątrz, 20 px w środku.
Gdzie
Tylko elementy systemowe: górna nawigacja, dolny pasek, asystent, karta cookies — zawsze z data-surface="glass". Nigdy karty treści, cennik ani portfolio.

Linie i ramy

  • 2 pxobrysy figur, linia pod zakładkami, tabele, obrys przycisków
  • 3 pxaktywny wpis spisu treści, pierścień fokusu
  • 4 pxlinia aktywnej zakładki, belki zasad Tak / Nie
  • 5 / 6 px--line: przerwy w siatce portfolio
  • 5 / 7 px--frame: rama siatki i procesu
  • 1 pxjedyna linia 1 px w treści: porządkuje kolumny w karcie cennika

Grubości w rzeczywistym rozmiarze. Oddzielamy płaszczyzną albo linią w kolorze tuszu — nigdy cieniem.

Płaszczyzny

Proces na desktopie: papier w szarości w tuszu, wcięte o 7 px i 15 px. Płaszczyzny i karty mają proste narożniki.

Narożniki — nic poza tym nie jest zaokrąglone.

  • 0płaszczyzny, karty, pola siatki
  • 999pxprzyciski
  • calc(--field-h / 2)białe pole
  • 28px / 20pxkarta cookies
  • 12pxokno Calendly

Drobne elementy

    • Jedno zadanie naraz
    • Średnio 48 godzin na realizację
    • Wstrzymaj lub anuluj w dowolnej chwili

    Punktory: kwadrat 3 px, 4 px od lewej, na wysokości wersalików.

  • +37% więcej leadów już w pierwszym miesiącu

    Odznaka: trzy portrety Ø 22 / 24 px, nachodzące na siebie, S Regular obok. [DO WERYFIKACJI] źródło liczby.

  • FAQ

    Najczęstsze pytania

    Nagłówek sekcji: ikona i 8 px odstępu, nadtytuł M Light, tytuł pod ikoną bez wcięcia.

  • Strona główna

    Link z kierunkiem: Tri 8 px od etykiety; w linku powrotu po najechaniu cofa się o 3 px.

Siatka i odstępy

Szerokość treści
baza 1200px≥ 1440 calc(100vw - 2 * var(--gutter))
Margines boczny
baza 23px≤ 360 22px≥ 640 7.2vw≥ 1024 max(24px, calc((100vw - var(--content)) / 2))≥ 1440 min(calc((100vw - 1200px) / 2), var(--hero-x))
Odstęp między sekcjami
baza 112px≥ 640 136px≥ 1024 clamp(128px, 12vw, 200px)
Od nagłówka do bloku
baza 16px≥ 640 20px≥ 1024 24px
Progi
640 / 1024 / 1440 px

Ruch

--ease-bauhaus: przesunięcia, przetarcia, morfingi
cubic-bezier(0.7, 0, 0.3, 1)
--ease-out: wejścia i najechania
cubic-bezier(0.2, 0.8, 0.2, 1)
Czasy
120 ms kliknięcie, 220 ms najechanie i przetarcie, 350–450 ms zakładki i morfingi.
Co się rusza
Tylko transform, opacity, clip-path i rozmiar — nigdy kolory tła w pętli.
Ograniczony ruch
Wszystko stoi; pętle pauzują też poza ekranem i w ukrytej karcie.

Zasady

  • Tak

    Jeden główny przycisk w grupie

    Pozostałe są obrysem albo zwykłym linkiem.

  • Nie

    Własne wysokości i ikony w przyciskach

    Wysokość zawsze z --pill-h; w środku wolno tylko Tri albo ładowanie.

  • Tak

    Szkło tylko dla elementów systemowych

    Górna nawigacja, dolny pasek, asystent, karta cookies — zawsze z data-surface="glass".

  • Nie

    Szkło i cienie na kartach treści

    Cennik, portfolio i opinie są płaskie.

  • Tak

    Oddzielaj płaszczyzną albo linią

    Linie w kolorze tuszu: 2, 3, 4 albo 5 / 6 px; ramy 5 / 7 px.

  • Nie

    Zaokrąglone karty i ramki

    Zaokrąglone są tylko przyciski, białe pole, karta cookies i okno Calendly.

10

Ton komunikacji

Mówimy krótko, wprost i po ludzku. Obiecujemy tylko to, co dowozimy.

Cztery cechy

Konkretnie

Liczby i fakty zamiast przymiotników.

  • „Jedno zadanie naraz”Cennik
  • „Średnio 48 godzin na realizację”Cennik
  • “One request at a time”Cennik
  • “48-hour average delivery”Cennik

Wprost, na „Ty”

Mówimy do jednej osoby: „Ty”, „Twój”, „Cię” — wielką literą. Studio mówi o sobie „my”.

  • „My zajmujemy się designem,
    Ty skupiasz się na biznesie.”    Jak pracujemy
  • „Nie musisz wybierać konta — kod sam wie, dokąd Cię zaprowadzić.”Logowanie
  • “We handle design
    You focus on business”    Jak pracujemy
  • “No need to pick an account — your code knows where to take you.”Logowanie

Spokojnie

Uspokajamy, nie naciskamy. Żadnych liczników ani „tylko dziś”.

  • „Wstrzymaj lub anuluj w dowolnej chwili”Cennik
  • „Używamy tylko niezbędnych plików. Statystyki i treści zewnętrzne włączymy, jeśli się zgodzisz.”Ciasteczka
  • “Pause or cancel anytime”Cennik
  • “We only use essential files. We'll turn on analytics and external content if you agree.”Ciasteczka

Uczciwie

Mówimy, co może pójść nie tak, i zawsze dajemy następny krok.

  • „AI może się mylić. Wiążące ustalenia potwierdzamy na rozmowie.”Asystent
  • „Ten kod nie działa. Sprawdź go i spróbuj ponownie.”Logowanie
  • “AI can make mistakes. We confirm binding details on a call.”Asystent
  • “This code doesn't work. Check it and try again.”Logowanie

Tak i nie

  • Tak

    „Umów rozmowę”

  • Nie

    „Kliknij tutaj, aby umówić się na rozmowę!”

    „Kliknij tutaj” nic nie mówi, a wykrzyknik krzyczy. Na początek czasownik.

  • Tak

    „Średnio 48 godzin na realizację”

  • Nie

    „Błyskawiczne projekty w rekordowym czasie”

    Przymiotniki zamiast liczby. Podaj czas, który naprawdę dowozimy.

  • Tak

    „Jedna cena, zero ukrytych zobowiązań”

  • Nie

    „Najlepsza oferta na rynku!!!”

    Superlatyw bez dowodu i trzy wykrzykniki. Powiedz, co jest w ofercie.

  • Tak

    „Asystent jest teraz niedostępny. Umów rozmowę albo napisz e-mail.”

  • Nie

    „Błąd 503. Spróbuj później.”

    Kod błędu nic nie mówi człowiekowi. Powiedz, co się stało, i daj następny krok.

  • Tak

    “One price, no hidden contracts”

  • Nie

    “Unbeatable pricing for unlimited design!”

    „Unlimited” obiecuje za dużo: bez limitu są marki i użytkownicy, zadania idą po jednym.

  • Tak

    “Book a call”

  • Nie

    “Hop on a quick call ASAP 🚀”

    Żargon, pośpiech i emoji. Wystarczą trzy słowa.

Słownik

Używamy

  • subskrypcja
  • zadanie
  • realizacja
  • projekt
  • rozmowa
  • tablica Trello
  • panel klienta
  • kod dostępu
  • wstrzymaj
  • anuluj
  • subscription
  • request
  • design
  • book a call
  • client panel
  • access code
  • pause
  • cancel

Unikamy

  • callrozmowa
  • deadlinetermin
  • feedbackuwagi
  • ASAP
  • rewolucyjny
  • kompleksowy
  • najlepszy
  • nielimitowany designbez limitu marek
  • emoji
  • world-class
  • cutting-edge
  • unlimited requestsone request at a time
  • synergy
  • click herebook a call

Bez limitu są marki i użytkownicy — zadania realizujemy po jednym. Dlatego nie piszemy o „nielimitowanym designie”.

Mechanika

Wielkie litery
Jak w zdaniu — w każdym nagłówku i przycisku, także po angielsku: „Nasze historie sukcesu”, „Najczęstsze pytania”
Przyciski
Najpierw czasownik: „Umów rozmowę”, „Zobacz plan”, „Kopiuj e-mail”, „Zapytaj asystenta”
Liczby
Zawsze cyframi: „Średnio 48 godzin na realizację”, „Rabat 15% na pierwszy miesiąc”, „Umów 30-minutową rozmowę”
Wykrzyknik
Tylko w powitaniu i podziękowaniu: „Cześć!”, „Dzięki!”
Wielokropek
Jeden znak „…” — w podpowiedziach i stanach oczekiwania: „Sprawdzamy…”, „Ładowanie terminów…”, „Zapytaj o plan, proces albo cenę…”
Myślnik
Pauza ze spacjami „ — ” w obu językach: „Dzięki! Rozmowa umówiona — do usłyszenia.”
Pisownia
„e-mail” z łącznikiem, „AI” zamiast „SI”, „loom.studio” zawsze małymi literami: „Kopiuj e-mail”, „Asystent AI”
Prawda
Każda liczba na stronie musi mieć pokrycie: „+37% więcej leadów już w pierwszym miesiącu” [DO WERYFIKACJI]

Głos asystenta

Asystent AI

Pytaj o plan, proces i cenę

Cześć! Jestem asystentem AI loom.studio. Wyjaśnię, jak działa subskrypcja, i pomogę sprawdzić, czy do Ciebie pasuje. Nad czym pracujesz?

AI może się mylić. Wiążące ustalenia potwierdzamy na rozmowie.

Forma
Zwykły tekst, najwyżej ok. 90 słów, krótkie akapity, bez nagłówków.
Pytania
Najwyżej jedno pytanie naraz.
Szczerość
Zapytany, mówi, że jest AI. Nie wymyśla cen, rabatów, terminów ani warunków prawnych — wtedy proponuje rozmowę.
Następny krok
Kończy konkretnym krokiem: rozmowa albo formularz.
Język
Odpowiada w języku strony, także gdy rozmówca zmieni język — chyba że wyraźnie o to poprosi.

Sprawdź na żywo

Asystent na tej stronie mówi właśnie tym głosem. Zapytaj go o plan, proces albo cenę.

11

Pliki do pobrania

Logo, znaki i kolory w gotowych plikach. Używaj ich bez zmian.

Logo

  • Logotyp — tusz

    SVG · wektor · 4,9 kBPNG · 2400 × 371 px · 47,8 kB

    Na jasne tła i jasne gradienty, #000000. Krzywe z Haus Bold — font nie jest potrzebny.

    SVGPNG

  • Logotyp — papier

    SVG · wektor · 4,9 kBPNG · 2400 × 371 px · 86,2 kB

    Na ciemne tła, #E8E6DF. PNG na przezroczystym tle.

    SVGPNG

  • Logotyp — biały

    SVG · wektor · 4,9 kB

    Na ciemne gradienty i nasycone kolory, #FFFFFF.

    SVG

  • Logo na osi

    SVG · wektor · 12,2 kBPNG · 2400 × 1260 px · 35 kB

    Tusz i papier, kropka na granicy płaszczyzn. Format obrazu OG.

    SVGPNG

Sygnet

  • Sygnet

    SVG · wektor · 0,3 kBPNG · 1024 × 789 px · 18,9 kB

    Kwadrat, koło i trójkąt — tam, gdzie logotyp miałby mniej niż 82 px szerokości.

    SVGPNG

  • Ikona aplikacji

    SVG · wektor · 0,3 kBPNG · 512 × 512 px · 6,9 kB

    Kafel 64 × 64 z favicony — do awatarów i skrótów.

    SVGPNG

Kolory

  • Paleta kolorów

    JSON · 13,5 kB

    Kolory główne w obu motywach, stałe, akcenty, odcienie, gradienty i rampy WebGL.

    JSON

  • Tokeny CSS

    CSS · 1,6 kB

    Blok :root z light-dark() i skala czterech rozmiarów — prosto z kodu strony.

    CSS

Komplet

  • Brand kit

    ZIP · 3,9 MB

    Wszystko powyżej oraz ikony sekcji, Tri, postery gradientów 1920 × 1080, ziarno i README.

    ZIP

PDF

  • Księga jako PDF

    Wydrukuj tę stronę albo zapisz ją jako PDF — każda sekcja zaczyna nową stronę.

Krój

  • Haus

    Licencja kroju Haus: [DO UZUPEŁNIENIA: adres dystrybutora]

    Pier Francesco Martini, 2013. Krój jest licencjonowany, dlatego nie ma go w paczce — logotyp w plikach to krzywe.

Logo i znaki loom.studio możesz wykorzystać, żeby pokazać współpracę z nami — bez zmian i zgodnie z tą księgą. [DO WERYFIKACJI PRAWNEJ]

Potrzebujesz takiej księgi dla swojej marki?

Umów rozmowę