Orchis Orange

Material Design meets macOS. Rounded corners, soft shadows, floating panels and soft elevation — a designed feel for GNOME, GTK3, GTK4 and libadwaita apps.

Palette

Floating window

Documents 128 items · 4.2 GB
  • Report.pdf
  • Budget.xlsx
  • Notes.md

Density

Orchis ships a compact spacing scale alongside the regular one.

Header bars

Buttons & Button Groups

Contextual variants

Material 3 roles

Sizes & states

Button groups & segmented control

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 Inter and Ubuntu with tight tracking — crisp at small sizes, generous at display sizes.

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

Secondary text is used for supporting copy and metadata.

Small print, footnotes and legal text.

Display headings

Display 6

Display 5

Blockquote

Good design is as little design as possible.

Dieter Rams

Lists

  • Rounded corners and soft elevation throughout
  • Floating panels that sit above the surface
  • Two modes: light and dark

Tables

Applications
Name Type Size Status
FilesSystem— Active
TerminalUtility1.2 MB Installed
SoftwareStore4.8 MB Updates
RhythmboxMedia2.6 MB Paused
Mode Accent Light Dark
Orchis Orangesw-orange#ed5b00#ffa869

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 Draft
Mail 12+

Progress & Spinners

Basic & contextual

Striped & animated

Stacked

Spinners

List Groups

Default & active

  • Favorites
  • Recents
  • Shared
  • Trash

Linked & actions

Dash Files Web

Navigation tiles (Material 3)

Flush

  • Flush item
  • Flush item

Cards

Basic

A floating surface with elevation.

Primary

Contextual card.

Success

Contextual card.

Floating

Highest elevation level.

Header
Bordered card

Cards support contextual border colours.

Updated 2 minutes ago
Image cap

Rounded corners keep imagery inside the panel.

Wallpaper.tiff
Card with list group
Backgrounds
Accent colour
Icons
Settings sync completed.

Accordions

Default

Generous corner radii are the strongest signal of the Orchis look.

Ten accent presets are defined purely in CSS custom properties.

Set data-panels="float" to lift surfaces off the background.

Flush

Flush variant removes the outer border.

Each item is styled as a floating panel.

Carousel

Dialogs

Offcanvas

Sidebar
Inspector
Panel content goes here.
Toolbar
A top drawer, handy for filters.

Popovers & Tooltips

Hover me

Toasts

Placeholders

Misc

Close buttons

Menus

Usage

Orchis Orange is a colour sibling of Orchis. Preset: <html> · Floating panels: data-panels="float" · Density: data-density="compact" · Mode: data-bs-theme="dark"