Adwaita

The neutral visual foundation of GNOME, rebuilt for Bootstrap 5 — subtle grays and blues, a 6px spacing rhythm, and adaptive layouts in the spirit of libadwaita.

Header bars

Light
Window content sits beneath a translucent header bar.
Dark Preferences
Dark header bar on a dark window surface.
Primary
Header bar tinted with the accent colour.
Toolbar

Adaptive layout

libadwaita windows reflow as they resize. The block below is a container-query container: narrow the browser window and its rows stack, while secondary text hides on small sizes.

Documents Last synced 2 minutes ago
Library

128 items indexed

Storage

112 GB of 512 GB used

Devices

3 connected

Wallpaper.tiff
48.2 MB — modified today
Theme.css
24 KB — modified yesterday
Archive.zip
112 MB — read only
Layout responds to the container width

Density

libadwaita ships a compact spacing scale. Toggle it to see every component tighten at once.

Buttons

Contextual variants

Adwaita roles

Outline variants

Sizes & states

Button groups

Typography

Display

Title

Heading

Body copy uses Adwaita Sans, falling back to Cantarell and the platform UI font.

Caption text for supporting descriptions and timestamps.

Heading 3

Heading 4

Heading 5
Heading 6

Inline elements like links, bold, emphasis, code, Ctrl + Alt + T, and highlight.

Numeric labels: 0123456789 · 1,024 items · 22:41

adw-mono: /usr/share/themes/Adwaita

Design should be as invisible as possible, so content leads.

Adwaita design principles

Lists

  • Neutral palette keeps content in focus
  • Consistent 6px spacing rhythm
  • High-contrast mode for accessibility

Description list

Adaptive breakpoints
Window size drives the layout
Density
Regular or compact spacing scale

Tables

Applications
Name Type Size Status
FilesSystem— Active
TerminalUtility1.2 MB Installed
SoftwareStore4.8 MB Updates
RhythmboxMedia2.6 MB Paused
Element Token Light
Accent--adw-accent#3584e4
Surface--adw-surface#ffffff
Border--adw-border#deddda
Spacing unit--adw-space-26px

Forms

We'll never share your address.
Name is available.
Slugs cannot contain spaces.

Search & input groups

@
$ .00

Checks, radios & switches

Range

Floating labels

Navs & Tabs

General

Session and account settings.

Display

Resolution, scaling and night light.

Storage

Disks, partitions and cleanup.

Hidden

You should not see this.

Pills & underline

Breadcrumbs

Pagination

Alerts

Badges

Primary Secondary Success Danger Warning Info Light Dark Pill Draft
Mail 12+ Label

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Favorites
  • Recents
  • Shared
  • Trash

Linked & actions

Dash Files Web

Boxed list (libadwaita)

Automatic updates
Install security fixes as they arrive
Night light
Shift the display to warmer colours

Flush

  • Flush item
  • Flush item

Cards

Basic

A plain card with a body.

Bordered

Accent border variant.

Primary

Contextual card.

Status

Empty states use the adw-status block.

Healthy
Header

Cards compose cleanly with headers, bodies and footers.

Updated 2 minutes ago
Nothing here yet

Items you add to this folder will appear in this list.

Card with list group
Appearance
Accessibility
Privacy
Settings sync completed.

Accordions

Default

A restrained palette keeps content, not branding, in the foreground.

Toggle data-contrast="high" for the accessibility palette.

data-density="compact" switches to the tighter spacing scale.

Flush

Flush variant removes the outer border.

Each item is styled as a flat panel.

Carousel

Dialogs

Offcanvas

Sidebar
  • Favorites
  • Recents
  • Shared
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Menus

Usage

Standard: <html data-bs-theme="light"> · Dark: data-bs-theme="dark" · High contrast: data-contrast="high" · Compact: data-density="compact"