Logo

Znak Skribly, zwykły albo ze znakiem i kolorem produktu. Każdy produkt ma swój, zapisany w marks; produkty różnią się znakiem i kolorem i niczym więcej. Na ciemnym panelu bocznym użyj tone="nav".

Logo

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Logo

Skribly
Skribly Agent
Skribly Tracker
agent-skills
Skribly Docs
Skribly UI
Skribly Core
Skribly ID
Skribly Hub
Skribly API
Skribly Status
Skribly Trust
Skribly Tools
Skribly Extensions
Skribly Newsletter
Skribly Feedback
Skribly Recommend
Skribly Bot
Skribly Projects

Noc, podgląd: Logo

Skribly
Skribly Agent
Skribly Tracker
agent-skills
Skribly Docs
Skribly UI
Skribly Core
Skribly ID
Skribly Hub
Skribly API
Skribly Status
Skribly Trust
Skribly Tools
Skribly Extensions
Skribly Newsletter
Skribly Feedback
Skribly Recommend
Skribly Bot
Skribly Projects

Wysoki kontrast, podgląd: Logo

Skribly
Skribly Agent
Skribly Tracker
agent-skills
Skribly Docs
Skribly UI
Skribly Core
Skribly ID
Skribly Hub
Skribly API
Skribly Status
Skribly Trust
Skribly Tools
Skribly Extensions
Skribly Newsletter
Skribly Feedback
Skribly Recommend
Skribly Bot
Skribly Projects

UżycieLink do sekcji Użycie

tsx

import { Logo } from '@skribly/ui/brand'

tsx

<Logo kind="agent" size={32} label="Skribly Agent" />
<Logo kind="hub" size={48} label="Skribly Hub" />
<Logo kind="tracker" tone="nav" />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Dekoracja, chyba że ustawiono label; wtedy jest obrazem o tej nazwie.
Pomiń label, gdy nazwa jest napisana obok.
Rozmiar jest w rem, więc rośnie razem z rozmiarem tekstu czytelnika.
Kolor produktu nigdy nie jest jedynym sygnałem: produkty odróżnia znak i zapisana nazwa.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.