An achromatic design system on Base UI: the standard parts plus playful niche components, with semantic tokens that match Figma variables one to one.
A person's photo, or their initials when there's no photo.
A short label for status, category or count.
Triggers an action or event with a single click.
A month grid for picking a day or a range, with full keyboard use; pages side by side, scrolls on phones, or fills a page with a month of events.
A rail of marks that swell under the pointer like the Dock, previewing the chapter at the crest.
A message box built from parts around one draft, so each chat surface composes its own.
Turns a single option on or off, or picks many from a list.
A Cmd+K palette with nested pages, recent commands, ranked search and a preview pane.
A number at a glance: capped at 99+, shortened to 1.2K or signed as +4, read out in full.
A table for lists people work through, on TanStack Table: sorting, search, filters with counts, pages, selection, cell types, locked rows and pinned columns.
A field that opens a calendar to pick a day, or a range with presets and Apply; a popover on desktop, a drawer on phones.
What shows where content would be: a title, why it's empty, and what to do next.
A label, description and error wired to one form control, with a group that sets the size of a whole form.
A filter menu of fields and values that turns into a search as you type.
A pill of destinations that floats above the bottom of a phone screen and steps aside while you scroll.
A single line of free text.
An input with an icon, text or button beside it, drawn as one field.
A hub and the tools wired into it, with pulses along the routes.
Takes people to unread messages, new messages or the present in a conversation.
Shows a key or a keyboard shortcut in text.
Names a form control and widens its hit area.
A pin for a point on a map, with a preview that opens on click or tap.
A short list of actions that opens from a button.
A conversation that groups each person's messages under one heading, with a single tab stop.
Moves through a long list one page at a time.
A one-colour pixel snail that crawls on a loop while something loads.
Shows how far a task has got, or that it's under way.
Picks exactly one option from a short list.
Lets people respond to content with an emoji in one tap.
Formatted writing on Tiptap: headings, marks, lists, quotes and links from a toolbar or Markdown shortcuts, with an optional character limit.
Picks one option from a list that opens on demand.
A thin rule between groups of content, across or down, with an optional label.
A panel that slides in from an edge for a focused task.
A placeholder in the shape of content that's still loading.
Picks a number, or a range, by dragging along a track.
A spinning ring that says something is loading.
A small mark for whether someone is present, away or offline, told apart by shape.
An avatar cut out like a die-cut sticker, with a paper edge that follows its shape and a status told by shape.
Turns a setting on or off, taking effect at once.
Rows and columns of data, at one compact density.
Several lines of free text that grow with the content.
fibo's full token set, light and dark: the achromatic roles, status colours and named -subtle, -hover and -ring roles.
A brief message in the corner about something that just happened.
Walks a colour token from raw value to primitive to semantic role.
A short label that appears when a control is hovered or focused.
Says who's typing in a conversation, naming up to three people.
An aluminium recorder that writes down what you say, with the transcript filling in beside it as you talk.