Gruvbox

Retro-groove warmth — earthy browns, burnt orange and muted greens, with the contrast and readability the palette is famous for.

Palette

Bold background: off · toggle with the Bold button above.

Backgrounds — dark

bg0_hard#1d2021
bg0#282828
bg0_soft#32302f
bg1#3c3836
bg2#504945
bg3#665c54
bg4#7c6f64
gray#928374

Foregrounds — dark

fg0#fbf1c7
fg1#ebdbb2
fg2#d5c4a1
fg3#bdae93
fg4#a89984

Bright colours

bright_red#fb4934
bright_green#b8bb26
bright_yellow#fabd2f
bright_blue#83a598
bright_purple#d3869b
bright_aqua#8ec07c
bright_orange#fe8019

Neutral colours

neutral_red#cc241d
neutral_green#98971a
neutral_yellow#d79921
neutral_blue#458588
neutral_purple#b16286
neutral_aqua#689d6a
neutral_orange#d65d0e

Colour utilities

red green yellow blue purple aqua orange

Code block

// retro-groove.sh
readonly PALETTE="gruvbox-dark"
declare -i BG0=40  #282828
declare -i ORANGE=254 #fe8019

function build {
    local accent="${ORANGE}"
    printf "bg=%s accent=%s\n" "${BG0}" "${accent}"
}

Navbar

Buttons & Button Groups

Contextual variants

Outline variants

Sizes & states

Button groups

Typography

h1. The quick brown fox

h2. Jumps over the lazy dog

h3. Pack my box with five dozen

h4. Dozens of liquor jugs

h5. How vexingly quick daft zebras
h6. Jump!

A lead paragraph set at a larger size for introductory content.

Body copy uses a neutral UI sans, with a warm background and high-contrast warm foreground.

Inline elements like links, bold text, emphasis, inline code, Ctrl + K and highlighted text.

Palette colours inline: red green yellow blue purple aqua orange

Small print, footnotes and legal text.

Display headings

Display 6

Display 5

Blockquote

Warm, faded, retro — comfort of a familiar room.

Gruvbox

Lists

  • Warm earthy surfaces with heavy 2px borders
  • Bright colours for accents, neutrals for states
  • Optional bold background for max contrast

Tables

Builds
Target Profile Size Status
x86_64-unknown-linuxrelease4.2 MB passing
aarch64-unknown-linuxrelease4.0 MB running
x86_64-apple-darwindebug18.7 MB slow
wasm32-unknownrelease1.1 MB queued
Mode Background Foreground Accent
Dark#282828#ebdbb2#fe8019
Dark + bold#1d2021#ebdbb2#fe8019
Light#fbf1c7#3c3836#af3a03

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 passing failed flaky info light dark pill
mail 12+

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Overview
  • Instances
  • Storage
  • Archived

Linked & actions

metrics logs alerts

Flush

  • Flush item
  • Flush item

Inset

  • release
  • debug

Cards

Basic

Warm surface, 2px border.

Primary

Contextual card.

Success

Contextual card.

With header
Header + body

Tinted header surface.

Header
Header, body & footer

Cards compose with the warm surface hierarchy.

updated 2 minutes ago
Bordered card

Gruvbox leans on visible, chunky borders rather than shadows.

wallpaper.tiff
Card with list group
Metrics
Logs
Alerts
config synced.

Accordions

Default

A warm, faded palette reminiscent of a 1970sIBM terminal screen.

Bright colours carry the accents; neutral colours carry structure and state.

Add data-bold to drop the background to bg0_hard for extra contrast.

Flush

Flush variant removes the outer border.

Each item keeps the style's surface colours.

Carousel

Dialogs

Offcanvas

Sidebar
  • overview
  • instances
  • storage
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Menus

Usage

Dark: <html data-bs-theme="dark"> · Light: data-bs-theme="light" · Bold background: data-bold