Brand
The Skribly marks and the small identity badges around them: the logo, the wordmark, the app lockup, people, agents, git hosts, trackers and sites. Badges use letters on a tint of a colour token, so they read in every theme and never rely on colour.
9 pages, 9 exports
- Logo
- Wordmark
- AppLockup
- Avatar
- AgentAvatar
- AgentChip
- VcsBadge
- TrackerBadge
- FaviconLetter
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { Logo, Wordmark, AppLockup, Avatar, … } from '@skribly/ui/brand'Pages in this groupLink to the section Pages in this group
- LogoThe Skribly mark, plain or with the glyph of a tool. Use tone="nav" on the dark sidebar.Logo
- WordmarkThe written name with its first letter in the amber tile, for the front of a site or a splash screen. Use AppLockup in app chrome.Wordmark
- AppLockupThe logo with Skribly and the tool name, for the title bar, the sidebar and sign-in pages. Give it href to make it the link home; compact keeps only the logo in a folded sidebar.AppLockup
- AvatarA person as initials or a photo, in lists, comments and assignee fields. With no name it draws the dashed unassigned circle.Avatar
- AgentAvatarThe square letter tile of a coding agent, in session lists, tabs and chips. The app passes the letters and the colour from its agent list.AgentAvatar
- AgentChipAn agent as a small pill with its avatar, name and version, for the row of ready agents. A missing agent gets a dashed edge and can become the button that installs it.AgentChip
- VcsBadgeThe git host of an account or a repository: GitHub, GitLab, Bitbucket, Gitea or Azure DevOps. Pass the account avatar as src to show the person instead.VcsBadge
- TrackerBadgeThe issue tracker an account or a task comes from, in settings and task lists.TrackerBadge
- FaviconLetterA site icon with a letter fallback, for browser tabs, bookmarks and link lists. The letter is the first one of the host, without www.FaviconLetter