Skip to examples
Bento / Kitchen sink
Bento / design system / v1

A focused place for every detail.

Dense surfaces, clear status colors, and a quiet developer-facing rhythm. Switch the preset, color mode, or density above to compare the same examples under each system.

Foundations

Color and tokens Semantic surface, ink, line, accent, and chart roles.Type and scale Reading rhythm, spacing steps, radii, and elevation.Layout Containers, grids, stacks, surfaces, separators, and ratios.Motion Entrances, hover and press, and change: one helper, as data.

Primitives

Typography Headings, body text, section labels, and inline code.Forms Buttons, fields, text, choices, switches, and selects.Pickers Searchable single and multiple choices, dates, and date ranges.Display Cards, badges, stats, avatars, details, and empty states.Feedback Alerts, progress, and loading placeholders.Navigation Tabs, breadcrumbs, pagination, and nav links.Disclosure Accordions that expand sections in place.Overlays Dialogs, confirmations, menus, popovers, and tooltips.

Compositions

Tables Semantic tables and data tables: members, invoices, usage, audit logs, keys.Charts Lines, areas, columns, bars, sparklines, and donuts, with motion as data.Business charts Progress rings, pie, funnel, stacked and diverging bars, combo and Pareto.Statistical charts Volcano, bubble, ranked bars, and a matrix that keeps four kinds of cell apart.Networks Network graphs with six layouts, and Sankey flows through stages.Motion in use The animate helper on real screens: dashboards, feeds, pickers, forms.Page patterns Page headers, toolbars, selection cards, settings, and whole-screen recipes.Shells The frame a screen sits in: header and sidebar, icon rail, signed-out.Site pages The public pages: a landing page in three compositions, and coming soon in every preset.Preset compositions The composition classes each preset ships with.Data and feedback Tables, statuses, and notices.