Contents Menu Expand Light mode Dark mode Auto light/dark mode
GNOME Human Interface Guidelines
Logo
GNOME Human Interface Guidelines
  • Design Principles
  • Tools & Resources
  • Guidelines
    • App Naming
    • App Icons
    • Pointer & Touch
    • Keyboard
    • UI Icons
    • UI Styling
    • Writing Style
    • Typography
    • Navigation
    • Scaling & Adaptiveness
    • Accessibility
  • Patterns
    • Containers
      • Windows
      • Header Bars
      • Popovers
      • Utility Panes
      • Boxed Lists
      • Grid Views
      • List & Column Views
      • Selection & Edit Modes
    • Navigation
      • Browsing
      • View Switchers
      • Tabs
      • Sidebars
      • Search
    • Controls
      • Buttons
      • Menus
      • Switches
      • Text Fields
      • Checkboxes
      • Radio Buttons
      • Drop-Down Lists
      • Sliders
      • Spin Buttons
      • Overlaid Controls
    • Feedback
      • Notifications
      • Toasts
      • Banners
      • Progress Bars
      • Spinners
      • Dialogs
      • Placeholder Pages
      • Tooltips
  • Reference
    • Standard Keyboard Shortcuts
    • Palette
    • Backgrounds
Back to top
Edit this page

Guidelines#

The guidelines section covers the standard conventions used in GNOME UX design. These are all generally applicable, and are relevant to all apps and design patterns.

  • _images/guidelines-appnaming.svg _images/guidelines-appnaming-dark.svg

    App Naming

  • _images/guidelines-appicons.svg _images/guidelines-appicons-dark.svg

    App Icons

  • _images/guidelines-pointertouch.svg _images/guidelines-pointertouch-dark.svg

    Pointer & Touch

  • _images/guidelines-keyboard.svg _images/guidelines-keyboard-dark.svg

    Keyboard

  • _images/guidelines-uiicons.svg _images/guidelines-uiicons-dark.svg

    UI Icons

  • _images/guidelines-uistyling.svg _images/guidelines-uistyling-dark.svg

    UI Styling

  • _images/guidelines-writingstyle.svg _images/guidelines-writingstyle-dark.svg

    Writing Style

  • _images/guidelines-typography.svg _images/guidelines-typography-dark.svg

    Typography

  • _images/nav-browsing.svg _images/nav-browsing-dark.svg

    Navigation

  • _images/guidelines-scalingandadaptiveness.svg _images/guidelines-scalingandadaptiveness-dark.svg

    Scaling & Adaptiveness

  • _images/guidelines-accessibility.svg _images/guidelines-accessibility-dark.svg

    Accessibility

Next
App Naming
Previous
Tools & Resources