Card
Cards & contentShared surfaces, sections and metrics.
The Baubiber design system
Baubiber uses forest green, construction orange, clear type and soft elevation. Explore the components and patterns behind our interfaces.
Project overview
Budget
Spent
Illustrative project data · Apr–Sep 2026
Charts
Clear scales, named series and readable values. Our charts use the same color roles, type and surfaces as the rest of the interface.
€22,400
EUR
58
completed work items
25
projects
Illustrative project data · Apr–Sep 2026
Components
121 of 121 components
Interactive examples use fictional project data. They never change an account.
Shared surfaces, sections and metrics.
Shared surfaces, sections and metrics.
A project with location, status and optional image.
Actions with a clear visual hierarchy.
Actions with a clear visual hierarchy.
A project, progress and waiting items.
Search, filter and sort local data.
Dates and date ranges in context.
Text fields with labels and validation.
One choice, as radios, cards or segments.
A fixed canvas with pointer-anchored zoom, free panning and keyboard controls.
People and company identities.
Short labels for status and metadata.
Information, warnings and recovery.
Independent choices with connected labels.
Searchable commands and destinations.
A clear consequence before confirmation.
Contextual shortcuts for a record.
Keyboard entry and calendar selection.
Focused tasks without losing context.
A compact menu of related actions.
Compact view header with filter popovers and active values.
Search, single and multiple filters.
Names with an optional identity image.
Visible names connected to controls.
Settings and destinations in grouped rows.
A shared frame for images and previews.
Supporting content beside its trigger.
Accessible interaction without a visual skin.
Choose one value from a list.
A quiet division inside a group.
Loading that preserves the content shape.
Settings that take effect immediately.
Build rules for a focused data view.
Debounced search with a local draft.
Sorting with direction and accessible state.
Structured records with aligned figures.
Switch views within one context.
Longer notes with optional character counts.
Light, dark and system appearance.
24-hour time with keyboard stepping.
Short explanations on hover and focus.
A clear consequence before confirmation.
A compact menu of related actions.
How an entered amount will be read.
Rows enter with restrained, staggered movement.
A stable aspect ratio for changing media.
People and company identities.
Short labels for status and metadata.
A native dialog from the bottom edge with a title and actions.
Independent choices with connected labels.
One choice, as radios, cards or segments.
A brief celebration after reaching a milestone.
Keyboard entry and calendar selection.
Keyboard entry and calendar selection.
Edit text where you read it.
The next actions at the foot of a form.
A clear loading state for a full view.
Icons at consistent sizes with semantic colors.
The app’s shared icon vocabulary.
Names with an optional identity image.
Text fields with labels and validation.
Visible names connected to controls.
Settings and destinations in grouped rows.
Loading that preserves the content shape.
A shared frame for images and previews.
Focused tasks without losing context.
Device motion with a static browser rendering.
Supporting content beside its trigger.
Accessible interaction without a visual skin.
Accessible interaction without a visual skin.
Headings, paragraphs and readable lists.
Page title, explanation and relevant actions.
Grouped content with room for longer lists.
An alphabetical shortcut through long lists.
One choice, as radios, cards or segments.
A quiet division inside a group.
Loading that preserves the content shape.
Adjust a value within a range.
Short introductions with a clear sequence.
Settings that take effect immediately.
The seven native type roles in Outfit and DM Sans.
Choose a start and end date together.
Move between related destinations.
A compact search alongside filters.
Searchable options with a selected value.
One choice presented as labeled cards.
Search and run actions from a dialog.
Related native actions as a group.
A figure with context and an optional icon.
A titled section with content and actions.
A clear destination with a description and next step.
Related actions in an accessible group.
Project requests in the public marketplace.
Public company profiles with services and verification.
Client identity, reference and expandable details.
Work scope, steps and safety notes.
What is missing and what to do next.
A clear failure with a retry action.
Page title, explanation and relevant actions.
Unread and pending counts, capped at 99+.
Search and select records with supporting details.
Verified identity with text or a compact icon.
Bobo listening, thinking and speaking.
A clear notice for unverified AI suggestions.
Outgoing and incoming messages with time and sender.
Images with captions and a shared media treatment.
Open an image and move through the collection.
An introduction and next action on public pages.
The project illustration when there is no photo yet.
A native figure with context.
A native section with title and content.
A native destination with icon and description.
A field with a connected icon or adornment.
People, name chips and avatar stacks.
Budget, spending and usage at a glance.
Outstanding, overdue and unbilled amounts.
Project steps and the current stage.
Bobo status and conversation in its own view.
Localized money with aligned figures.
The native project illustration without a photo.
Brand & foundations
A practical, warm identity for real work. Forest green leads, orange highlights, and the rest gives your project room.
Use the original artwork, preserve its proportions and leave clear space around it.


--primary--brand-orange--card--foregroundPair each status foreground with its surface. Always include a label or icon.
Completed
--successNeeds attention
--warningInformation
--infoError
--destructiveMarketing
Good work starts with clarity.
Syne / Wix Madefor Text
Web & admin
Good work starts with clarity.
Inter
Native app
Good work starts with clarity.
Outfit for titles and figures. DM Sans for body text. Weight 400.
The native rhythm: 20pt screen gutters, 16pt card padding, 12pt between peer cards, 24–32pt between sections.
481216243248Card, raised and overlay shadows are defined by the shared theme. Components choose the level; screens arrange them.