noski — noski to polska usługa, w której asystent AI prowadzi marketing małej firmy, a właściciel podejmuje decyzje — najczęściej na telefonie, między innymi obowiązkami. System ma sprawić, że każda decyzja jest jedna, jasna i ma znaną cenę.
Projektuj mobile first od 360px. Komponenty są w window.Noski (React 18). Kolory, typografia, odstępy i wymiary — tylko przez tokeny.
ChatMessage + Button variant="accent"). Nie pytaj o to, co produkt już wie.DecisionCard, najwyżej 3 opcje, jedna recommended. Nigdy dwie karty decyzji na jednym ekranie.CostApproval) → ocena materiału (przyciski akceptacji / poprawek) → zgoda na publikację (PublishApproval). Żaden przycisk nie łączy dwóch z nich. Akceptacja materiału nie uruchamia wydatku ani publikacji — mów to wprost po akceptacji.TaskProgress ze stanem queued, running, needs-action, done albo failed. Nie udawaj postępu. Brak danych = „Brak danych” + powód, nigdy 0.Notice tone="locked": widać tylko ten materiał.4 812, 3,1%, 49,00 zł, daty „pt 13 grudnia, 18:00”. Czas 24-godzinny.Przykłady z produktu:
Znam Twoje menu i to, że jest wegańskie. Ostatni post był 3 tygodnie temu. Mam trzy możliwości — polecam pierwszą.
Materiał zaakceptowany. Nic nie zostało opublikowane ani pobrane.
Instagram nie przyjął publikacji. Połączenie z kontem wygasło. Post czeka — opublikujemy go zaraz po ponownym połączeniu.
surface; karty, arkusze, dymki asystenta surface-raised; tło rozmowy i podglądów surface-sunken.ink; pomocniczy ink-muted (≥4.5:1 na wszystkich trzech powierzchniach w obu motywach).surface), ciemnozielony tekst (ink), butelkowa zieleń jako kolor działania (action) i Morela z logo jako akcent (brand). Żadnych kremowych, beżowych ani „kawowych” teł.action (butelkowa zieleń) z tekstem on-action; w ciemnym motywie jasna mięta z ciemnym tekstem. Dymek klienta w rozmowie też action.brand: awatar asystenta, przycisk accent przy rekomendacji, aktywna zakładka (brand-soft + brand-ink), licznik w TabBar. Tekst na brand zawsze on-brand. W jasnym motywie brand nie jest kolorem tekstu ani obrysu — do tego brand-ink.success, warning, danger, info z tłami *-soft. Status zawsze ma ikonę i słowo, kolor nigdy nie jest jedynym nośnikiem. brand nie oznacza żadnego statusu.line dekoracyjnie, line-strong dla kontrolek (≥3:1).outline: 2px solid var(--focus) z odstępem 2px — na każdym elemencie interaktywnym.light (domyślny) i dark, według ustawień systemu.display) do nagłówków i kwot — ten sam krój co logo, oraz Hanken Grotesk (sans) 400/600 do całego interfejsu.display — tylko strona publiczna i powitanie. headline — tytuł ekranu zakładki. title — karta, arkusz, pytanie decyzji. amount — kwoty i liczby, cyfry tabelaryczne.body 18/28 to domyślny tekst interfejsu, body-lg 20/30 — wiadomości w rozmowie. label 17 — przyciski i etykiety pól. caption 15 — metadane w ink-muted. micro 13 — najmniejszy rozmiar w aplikacji; nic mniejszego.display, headline, title) zostają w dotychczasowych rozmiarach — hierarchię buduje grubość i krój, nie skok rozmiaru.space-1…space-12. Margines boczny ekranu space-4, od 600px space-6. Między sekcjami space-6, w karcie space-3.tap-min (44px). Główny przycisk control-h (52px), pełna szerokość, w doku na dole ekranu.bar-h (TopBar), tabbar-h (TabBar) + safe area. Kolumna treści maks. content-max na tablecie i desktopie.radius-sm pola i miniatury, radius-md karty i dymki, radius-lg arkusze i karty zgód, radius-pill przyciski, plakietki, kompozytor.shadow-raised (kompozytor, pływający dok) i shadow-sheet (arkusz dolny). Karty w treści — obrys line, bez cienia.ease-out. Arkusze wjeżdżają z dołu.prefers-reduced-motion.Icon (32 ikony, window.Noski.icons), obrys 1.75, currentColor. Rysowany dla tego systemu — nie ma zewnętrznej biblioteki.spark = asystent AI i tylko on.IconButton label). Bez emoji, bez ikon wypełnionych.noski-noski-poziome-kolor-na-jasne.svg — czarny napis (#17161A) z pomarańczowym myślnikiem (Morela, #FF6B3D), na białym albo przezroczystym tle. Używaj go zawsze, gdy nic nie stoi na przeszkodzie. Wszystkie pozostałe pliki to wersje dodatkowe, tylko gdy główna nie zadziała (ciemne tło, kwadratowe miejsce, druk jednobarwny).brand. Litery są zamienione na krzywe. Pliki są w grupie zasobów Logos; nigdy nie składaj logo fontem ani nie rysuj go od nowa.kolor-na-ciemne na ciemnym tle, czarne / biale do druku jednobarwnego i na zdjęciach, morela tylko na neutralnym jasnym tle.TabBar: Start · Asystenci · Materiały · Wyniki · Twoja Firma. Abonament, rozliczenia, konsultacje i pomoc są w Twojej Firmie.TopBar large. Ekran szczegółu: TopBar back.surface-sunken, ChatMessage, pod wiadomością asystenta DecisionCard / CostApproval / PublishApproval, na dole Composer.body, space-3), ale te same komponenty statusu.Każdy widok, który ładuje dane albo czeka na pracę, projektuj we wszystkich stanach poniżej. Brakujący stan = niedokończony projekt.
| Stan | Komponent | Treść |
|---|---|---|
| Brak danych / pusto | EmptyState; w liczbach StatCard missing |
Co się tu pojawi + jeden krok do asystenta. W statystykach „Brak danych” + powód. |
| Oczekiwanie (do ~2 s) | Skeleton |
Kształt przyszłej treści. Bez pełnoekranowego spinnera. |
| Kolejka | TaskProgress state="queued" |
Kiedy ruszy. |
| Postęp | TaskProgress state="running" |
Pasek określony tylko przy znanym postępie; szacowany czas w detail. Informacja, że można zamknąć aplikację. |
| Decyzja klienta | TaskProgress state="needs-action", DecisionCard, CostApproval, PublishApproval |
Jedna decyzja, jedno działanie. Licznik w TabBar liczy tylko te rzeczy. |
| Sukces | Notice tone="success", StatusBadge |
Co się stało + czego to NIE oznacza („nic nie zostało opublikowane”). |
| Błąd | Notice tone="danger", TaskProgress state="failed", StatusBadge status="failed" |
Co się stało, co zrobić, co z pieniędzmi. Zawsze działanie naprawcze. |
| Brak dostępu | Notice tone="locked" |
Co widać, czego nie, jak uzyskać dostęp (zaloguj się / poproś właściciela). |
| Za mało środków | CostApproval insufficient |
Doładuj saldo; nic nie zostanie pobrane bez zgody. |
button, a href, input z label, radio w DecisionCard.danger/warning jako role="alert", pozostałe role="status"; postęp jako progressbar.Logo główne: noski-noski-poziome-kolor-na-jasne.svg. Czarny napis (#17161A) z pomarańczowym myślnikiem (Morela, #FF6B3D), na białym albo przezroczystym tle. To domyślny wybór wszędzie.
Wszystkie pozostałe pliki to wersje dodatkowe, tylko gdy główna nie zadziała:
noski-noski-kwadrat-kolor-na-jasne.svg: ten sam kolor, układ noski / — / noski, do miejsc kwadratowych (avatar, ikona).*-claim-*: z claimem „marketing dla firm” (Rubik 400), do pierwszego kontaktu z marką.kolor-na-ciemne: tekst #EEF3EF, myślnik #FF6B3D, na ciemne tła.czarne: całość #17161A. biale: całość #FFFFFF (podgląd na jasnym tle jest niewidoczny). morela: całość #FF6B3D.Wszystkie pliki: Rubik 600 zamieniony na krzywe, przezroczyste tło.
surfacelight: #F2F6F3 · dark: #0F1714
Tło ekranu aplikacji i strony publicznej — chłodna, lekko zielonkawa biel.
surface-raisedlight: #FFFFFF · dark: #17211D
Karty, arkusze dolne, dymki asystenta, pola formularzy.
surface-sunkenlight: #E4ECE6 · dark: #0A100E
Wnęki: tło rozmowy, podglądy plików, szkielety ładowania, pasek kompozytora.
linelight: #D1DCD4 · dark: #2A3631
Linie podziału i obrys kart. Dekoracyjne — nie jedyny nośnik informacji.
line-stronglight: #7A8B7F · dark: #6E7E76
Obrys pól, checkboxów i przycisku secondary. Min. 3:1 do surface i surface-raised w obu motywach.
inklight: #0D221A · dark: #EEF3EF
Tekst główny i ikony na surface, surface-raised, surface-sunken.
ink-mutedlight: #4A5C52 · dark: #A7B5AD
Tekst pomocniczy, metadane, podpowiedzi pól — na wszystkich trzech powierzchniach (≥4.5:1).
actionlight: #0F4A37 · dark: #8ED3B0
Butelkowa zieleń — wypełnienie przycisku primary, dymek klienta w rozmowie, zaznaczona opcja. Główne działanie ekranu. W ciemnym motywie jasna mięta z ciemnym tekstem.
on-actionlight: #FFFFFF · dark: #0D221A
Tekst i ikony na wypełnieniu action (biały / ciemnozielony).
brandlight: #FF6B3D · dark: #FF7A50
Morela — kolor myślnika w logo. Wypełnienia: awatar asystenta, przycisk accent (rekomendacja), licznik w TabBar. W jasnym motywie NIE jako tekst ani obrys (2.6:1 do surface) — do tekstu brand-ink.
on-brandlight: #0D221A · dark: #0D221A
Tekst i ikony na wypełnieniu brand. Nigdy biały.
brand-softlight: #FFE6DC · dark: #3A1C12
Tło wyróżnienia: rekomendowana opcja, dymek propozycji asystenta, plakietka „Polecane”.
brand-inklight: #B23A12 · dark: #FF9A78
Tekst w barwie marki na surface, surface-raised i brand-soft; linki w treści.
successlight: #1F7A2E · dark: #74D68F
Sukces, „Zatwierdzone”, „Opublikowane”. Zawsze z ikoną check i słowem — odcieniem jest bliski action, więc kolor nigdy nie jest jedynym nośnikiem.
success-softlight: #DFF3E2 · dark: #0F2B1B
Tło plakietek i komunikatów sukcesu.
warninglight: #8F4B00 · dark: #F2B45A
Wymaga decyzji klienta, niski limit, termin blisko. Tekst/ikona na surface-raised i warning-soft.
warning-softlight: #FFF0D6 · dark: #2E1E06
Tło komunikatów i plakietek „Czeka na Ciebie”.
dangerlight: #B4232B · dark: #FF8A8A
Błąd, odrzucenie, nieudana publikacja/płatność. Tekst/ikona na surface-raised i danger-soft. Zawsze z ikoną alert i słowem.
danger-softlight: #FCE4E4 · dark: #3A1214
Tło komunikatów błędów.
infolight: #1F5FBF · dark: #8AB4FF
Informacja neutralna, zadanie w toku, pasek postępu. Tekst/ikona na surface-raised i info-soft.
info-softlight: #E3ECFB · dark: #13213A
Tło komunikatów informacyjnych i zadań w tle.
focuslight: #1F5FBF · dark: #8AB4FF
Pierścień fokusu klawiatury: 2px odstępu w kolorze tła + 2px pełnej linii focus. ≥3:1 na każdej powierzchni w obu motywach.
scrimlight: rgba(23, 22, 26, 0.48) · dark: rgba(0, 0, 0, 0.64)
Przyciemnienie pod arkuszem dolnym i dialogiem.
Zadbajmy o Twoją firmę
Twoja Firma
Seria postów na grudzień
149,00 zł
Przygotowałem trzy pomysły na posty o nowym menu.
Post zostanie opublikowany na Instagramie w piątek o 18:00.
Wersja 2 · Instagram
Zatwierdź koszt
Zaktualizowano 5 min temu
Do oceny
space-14pxOdstęp ikona–tekst w plakietce.space-28pxOdstęp ikona–etykieta w przycisku, między plakietkami.space-312pxOdstęp między elementami w karcie, między dymkami rozmowy.space-416pxMargines boczny ekranu mobilnego, padding kart.space-520pxPadding arkusza dolnego i kart decyzji.space-624pxOdstęp między sekcjami ekranu; margines boczny od 600px szerokości.space-832pxOdstęp między grupami sekcji, góra pustego stanu.space-1248pxRytm sekcji strony publicznej (mobile).radius-sm8pxPola formularzy, miniatury, plakietki kwadratowe.radius-md14pxKarty, komunikaty, dymki rozmowy.radius-lg24pxArkusz dolny (górne rogi), duże karty podglądu materiału.radius-pill999pxPrzyciski, plakietki statusu, chipy, kompozytor.tap-min44pxMinimalny obszar dotyku każdego elementu interaktywnego (także IconButton).control-h52pxWysokość przycisku size=lg i pola tekstowego — główne działanie ekranu.control-h-sm44pxWysokość przycisku size=md, chipów.bar-h56pxWysokość TopBar.tabbar-h64pxWysokość TabBar (bez safe area).content-max640pxMaks. szerokość kolumny treści w aplikacji na tablecie/desktopie.shadow-raisedKarty unoszące się nad treścią: kompozytor, pływający pasek decyzji.shadow-sheetArkusz dolny i dialog.Ikony liniowe 24×24, obrys 1.75px, zaokrąglone końce; kolor dziedziczą z color.
name (lista: window.Noski.icons) i opcjonalnie size (16 w plakietkach i podpowiedziach, 20 w przyciskach, 22 w nawigacji, 24 domyślnie).label (dostaje aria-hidden). Ikona jako jedyny nośnik treści: zawsze label.spark oznacza wyłącznie asystenta AI. Nie używaj go jako ozdobnika „nowości”.Przycisk działania. Etykieta mówi, co się stanie — nazwa rezultatu, nie mechanizmu.
Podajesz: children (etykieta), variant, size, opcjonalnie icon, iconEnd, loading, block, onClick.
| variant | kiedy |
|---|---|
primary |
Jedno główne działanie ekranu lub karty. Maks. jeden na widoku. |
accent |
Wybór polecany przez asystenta, gdy stoi obok innych opcji. Tło brand, tekst on-brand. |
secondary |
Działanie alternatywne (Poproś o zmiany, Zmień termin). |
ghost |
Odroczenie lub wyjście (Nie teraz, Pomiń). |
danger |
Odwracalne tylko z wysiłkiem: anulowanie, usunięcie, odłączenie konta. |
size="lg" + block, przyklejone na dole ekranu nad TabBar.loading blokuje przycisk i zachowuje szerokość. Zmień etykietę na stan („Zapisuję…”).disabled tylko gdy obok widać powód. Lepiej zostawić aktywny i wyjaśnić po kliknięciu.Okrągły przycisk z samą ikoną, obszar dotyku 44×44 (tap-min).
icon i obowiązkowo label (czytany przez czytnik ekranu i pokazany jako podpowiedź).Button z tekstem.variant="solid" wyłącznie dla „Wyślij” w kompozytorze.Pole tekstowe z etykietą nad polem, podpowiedzią i błędem pod nim.
Podajesz: label (zawsze widoczna — placeholder nie zastępuje etykiety), opcjonalnie hint, error, optional, multiline, oraz zwykłe atrybuty input.
Krótka etykieta (1–3 słowa) przy elemencie: platforma, kategoria, ton.
tone i children, opcjonalnie icon.neutral ma ikonę — kolor nie może być jedynym nośnikiem.brand + spark = rekomendacja asystenta („Polecam”). Nic innego.StatusBadge, nie składaj ich ręcznie.Jedyny sposób pokazania stanu materiału lub publikacji — stały słownik, ikona i kolor.
| status | etykieta | znaczenie |
|---|---|---|
draft |
Szkic | Asystent przygotowuje propozycję, nic nie kosztuje. |
working |
W przygotowaniu | Trwa płatna produkcja (zgoda na koszt już udzielona). |
review |
Do oceny | Klient ma ocenić materiał. |
changes |
Poprawki | Klient poprosił o zmiany. |
approved |
Zatwierdzone | Materiał zaakceptowany. Nie oznacza publikacji. |
scheduled |
Zaplanowane | Konkretna wersja ma termin i konto. |
published |
Opublikowane | Jest na koncie. |
failed |
Błąd publikacji | Platforma odrzuciła — zawsze z Notice i działaniem naprawczym. |
paused |
Wstrzymane | Automatyzacja zatrzymana przez klienta lub operatora. |
status. Własną etykietę (children) tylko gdy słownik nie wystarcza — z tą samą ikoną.Komunikat w treści ekranu: informacja, sukces, ostrzeżenie, błąd, brak dostępu.
Podajesz: tone, title (zdanie, które wystarczy przeczytać), opcjonalnie children (szczegół) i action (jeden Button size="md").
info — stan pracy w tle, wyjaśnienie. success — potwierdzenie po działaniu. warning — potrzebna decyzja lub limit blisko. danger — coś się nie udało. locked — brak dostępu.danger i warning są ogłaszane czytnikom ekranu (role="alert"), pozostałe jako status.Notice danego tonu na ekranie.Zadanie wykonywane w tle — pokazuje rzeczywisty stan, rezultat lub potrzebę działania klienta.
Podajesz: title (co powstaje, językiem rezultatu), state, opcjonalnie progress (0–100, tylko gdy znany), detail, action.
| state | etykieta | kiedy |
|---|---|---|
queued |
W kolejce | Zadanie przyjęte, jeszcze nie ruszyło. |
running |
W toku | Pasek: określony, gdy znamy postęp; nieokreślony, gdy nie. |
needs-action |
Czeka na Ciebie | Bez klienta zadanie nie pójdzie dalej. Zawsze z action. |
done |
Gotowe | Z działaniem do rezultatu. |
failed |
Nie udało się | detail mówi, co się stało i czy pobrano środki. Zawsze z action. |
detail, jeśli znany.failed zawsze informuj o pieniądzach: pobrano / nie pobrano / zwrócono.Szkielet treści na czas ładowania (do ~2 s). Dłużej — TaskProgress lub komunikat.
lines, opcjonalnie media (blok podglądu) i label dla czytnika.prefers-reduced-motion szkielet nie pulsuje.Pusty widok: brak materiałów, rozmów, publikacji, danych.
Podajesz: icon, title (co tu będzie), children (jak to się pojawi), action (jeden krok, najczęściej do asystenta).
StatCard z missing.Wiadomość w rozmowie z asystentem.
Podajesz: from (assistant | user), children (tekst lub akapity <p>), opcjonalnie name (nazwa konkretnego asystenta) i time.
brand z ikoną spark, dymek na surface-raised. Klient: dymek action po prawej.body-lg (17/26) — rozmowa to główna treść produktu.DecisionCard, a płatne kroki CostApproval.Pole wiadomości do asystenta, przyklejone do dołu ekranu rozmowy.
placeholder, opcjonalnie onSend, disabled.Jedna decyzja naraz: pytanie i najwyżej trzy opcje, w tym jedna rekomendowana.
Podajesz: question, options (id, title, opcjonalnie description, meta, recommended), opcjonalnie context i action (przycisk potwierdzenia).
recommended: tło brand-soft, plakietka „Polecam”, domyślnie zaznaczona.meta pokazuje koszt i źródło (prepaid / pula abonamentu) albo „Bez kosztu”. Kwota tu jest orientacyjna — wiąże dopiero CostApproval.Zgoda na koszt — osobna decyzja przed każdą płatną pracą. Klient widzi kwotę, źródło i saldo przed uruchomieniem.
Podajesz: title (co powstanie), amount, source (prepaid | plan), opcjonalnie balance, balanceAfter, note, insufficient, loading, onApprove, onDecline.
source="plan" — zestawy materiałów marki z puli abonamentu (początkowo 5 zmian na okres); amount to liczba zmian.source="prepaid" — zwykła produkcja. Pokaż saldo teraz i po zatwierdzeniu.insufficient zamienia działanie na „Doładuj saldo” i mówi, że nic nie zostanie pobrane bez zgody.Zgoda na publikację: konkretna wersja, konkretne konto, konkretny termin.
Podajesz: version, account (prawdziwa nazwa platformy i konta), when, opcjonalnie preview (podgląd tej wersji), cta, onApprove, onChange.
approved) nie publikuje. Publikacja to ta karta.cta="Opublikuj teraz" i when="Teraz".version, np. „Seria 6 postów · wersje zatwierdzone”.Wiersz materiału w Bibliotece, rozmowie i powiadomieniach: miniatura, tytuł, wersja, status.
Podajesz: title, kind, opcjonalnie kindLabel, version, meta (platforma), status, thumb (URL miniatury) + thumbAlt, href.
thumb pokazuje ikonę rodzaju — nie generuj sztucznych podglądów.href), bez osobnego przycisku.Jedna liczba z kontekstem. Zasięg i zaangażowanie są wyraźnie oddzielone od sprzedaży.
Podajesz: label, kind (reach | sales), value + opcjonalnie delta, trend, source — albo missing (dlaczego brak danych i jak je zdobyć), albo loading.
source podaje platformę i okres.Pasek górny ekranu aplikacji (56px).
Podajesz: title, opcjonalnie back + onBack, actions (maks. jeden IconButton), large + subtitle dla ekranów głównych zakładek.
TabBar): large — nagłówek headline pod paskiem.TabBar.Dolna nawigacja główna aplikacji klienta — 5 sekcji, zawsze te same.
| id | etykieta | zawiera |
|---|---|---|
start |
Start | Co czeka na decyzję, zadania w tle, następny krok asystenta. |
asystenci |
Asystenci | Lista asystentów i ich rozmowy. |
materialy |
Materiały | Biblioteka, materiały marki, publikacje i kalendarz. |
wyniki |
Wyniki | Statystyki i rekomendacje. |
firma |
Twoja Firma | Profil, wiedza, konta, abonament i rozliczenia, pomoc. |
count = liczba rzeczy czekających na decyzję klienta (nie powiadomień ogólnych).brand-soft, ikona brand-ink, aria-current="page".Gotowe sekwencje ekranów sprawdzające system na scenariuszach z briefu. Podglądy: karty w grupie Wzorce (FlowStart, FlowAssistant, FlowReviewLink, FlowResults).
FlowStart)Kolejność sekcji: Czeka na Ciebie (decyzje) → W toku (zadania w tle) → Asystent proponuje (jeden następny krok). Pierwszy dzień: EmptyState z zaproszeniem do rozmowy i stan abonamentu w Notice.
FlowAssistant)DecisionCard (≤3 opcje, jedna polecana, orientacyjny koszt w meta).CostApproval.Notice success o rezerwacji + TaskProgress. Asystent zapowiada ocenę i przypomina, że akceptacja nie publikuje.FlowReviewLink)Notice locked, podgląd, StatusBadge review, pole „Co zmienić?”, dok: Akceptuję / Poproś o zmiany / Przejdź do panelu.Notice success („nic nie zostało opublikowane ani pobrane”) i osobna PublishApproval z wersją, kontem i terminem.StatusBadge failed + Notice danger z działaniem naprawczym.FlowResults)Dwie osobne sekcje: Zasięg i zaangażowanie oraz Sprzedaż. Brak danych pokazany wprost, ładowanie szkieletem, na końcu jedna rekomendacja asystenta z przyciskiem accent.
surface-raised z caption „Ostatnio uzupełnione przez asystenta: …”; edycja przez rozmowę, pola TextField tylko do danych twardych.MaterialCard kind="logo" + CostApproval source="plan" (pula zmian).MaterialCard z filtrami jako Badge w poziomym przewijaniu.TaskProgress + podgląd + PublishApproval (konto = domena).nn-rows (jak w CostApproval), kwoty w amount.DecisionCard (3 najbliższe terminy, „Polecam” przy najbliższym), potem CostApproval.StatusBadge, TaskProgress, Notice; układ tabelaryczny od 1024px.