CINXE.COM

<!doctype html><html itemscope itemtype=http://schema.org/WebPage lang=en class=no-js><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=generator content="Hugo 0.141.0"><meta name=ROBOTS content="INDEX, FOLLOW"><link rel=alternate type=application/rss+xml href=/hig/index.xml><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=manifest href=/site.webmanifest><link rel=mask-icon href=/safari-pinned-tab.svg color=#1f99f3><meta name=msapplication-TileColor content="#1f99f3"><meta name=theme-color content="#1f99f3"><title>KDE Human Interface Guidelines | Developer</title><meta property="og:url" content="/hig/"> <meta property="og:site_name" content="Developer"><meta property="og:title" content="KDE Human Interface Guidelines"><meta property="og:description" content="Welcome to the KDE Human Interface Guidelines! Following them will help you build a beautiful and powerful app that feels at home when run in KDE Plasma, and works well outside of it. Users will learn how to use your app quickly, accomplish their goals with ease, and encounter fewer issues requiring support."><meta property="og:locale" content="en"><meta property="og:type" content="website"><meta property="og:image" content="/images/image-preview.png"><meta itemprop=name content="KDE Human Interface Guidelines"><meta itemprop=description content="Welcome to the KDE Human Interface Guidelines! Following them will help you build a beautiful and powerful app that feels at home when run in KDE Plasma, and works well outside of it. Users will learn how to use your app quickly, accomplish their goals with ease, and encounter fewer issues requiring support."><meta itemprop=dateModified content="2025-02-17T22:09:04+02:00"><meta itemprop=wordCount content="389"><meta itemprop=image content="/images/image-preview.png"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="/images/image-preview.png"><meta name=twitter:title content="KDE Human Interface Guidelines"><meta name=twitter:description content="Welcome to the KDE Human Interface Guidelines! Following them will help you build a beautiful and powerful app that feels at home when run in KDE Plasma, and works well outside of it. Users will learn how to use your app quickly, accomplish their goals with ease, and encounter fewer issues requiring support."><link rel=stylesheet href=/scss/docsy/main.8a1e71bb7017d86ad6a5664cf72886ce11a2fb5567401aaffb10db469d576d91.css integrity="sha256-ih5xu3AX2GrWpWZM9yiGzhGi+1VnQBqv+xDbRp1XbZE="><link rel=preload href=/fonts/Inter.woff2 as=font crossorigin=anonymous><link rel=preload href=/fonts/glyph/glyph.ttf?5ea9rb as=font crossorigin=anonymous><link rel=preconnect href=https://cdn.kde.org/><link href=https://cdn.kde.org/breeze-icons/icons.css rel=stylesheet></head><body class=td-section><a href=#content class="visually-hidden-focusable p-3 mb-2 bg-secondary text-light text-decoration-underline position-fixed" style=z-index:1050>Skip to main content</a><div class="container-fluid td-outer"><header class="header row"><a href=#main class="visually-hidden-focusable p-3 mb-2 bg-secondary text-light text-decoration-underline position-fixed w-auto" style=z-index:1050;outline:revert>Skip to content</a><nav class="navbar navbar-expand-lg"><a class="kde-logo navbar-brand" href=/><span class=visually-hidden>Home</span> Developer </a><button class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarsExampleDefault aria-controls=navbarsExampleDefault aria-expanded=false aria-label="Toggle navigation"> <span class=navbar-toggler-icon></span></button><div class="collapse navbar-collapse" id=navbarsExampleDefault><ul class="navbar-nav col"><li class=nav-item><a class=nav-link href=/docs/><span>Documentation</span></a></li><li class=nav-item><a class=nav-link href=https://api.kde.org><span>API</span></a></li><li class=nav-item><a class="nav-link active" href=/hig/><span>KDE Human Interface Guidelines</span></a></li></ul><ul class=navbar-nav><li class="nav-item dropdown" aria-describedby=language-picker-description><p class=visually-hidden id=language-picker-description>Select your language</p><a class="nav-link dropdown-toggle" href=# data-bs-toggle=dropdown role=button aria-haspopup=true aria-expanded=false><img src=/aether/languages.png alt> <span class="d-lg-none ms-2">Languages</span></a><div class="dropdown-menu dropdown-trans" role=listbox><a class="nav-link active dropdown-item" hreflang=en role=option lang=en href=/hig/>English</a> <a class="nav-link dropdown-item" hreflang=ca role=option lang=ca href=/ca/hig/>Català</a> <a class="nav-link dropdown-item" hreflang=es role=option lang=es href=/es/hig/>Español</a> <a class="nav-link dropdown-item" hreflang=eo role=option lang=eo href=/eo/hig/>Esperanto</a> <a class="nav-link dropdown-item" hreflang=fr role=option lang=fr href=/fr/hig/>Français</a> <a class="nav-link dropdown-item" hreflang=it role=option lang=it href=/it/hig/>Italiano</a> <a class="nav-link dropdown-item" hreflang=nl role=option lang=nl href=/nl/hig/>Nederlands</a> <a class="nav-link dropdown-item" hreflang=pl role=option lang=pl href=/pl/hig/>Polski</a> <a class="nav-link dropdown-item" hreflang=pt-pt role=option lang=pt-pt href=/pt-pt/hig/>Português</a> <a class="nav-link dropdown-item" hreflang=sl role=option lang=sl href=/sl/hig/>Slovenščina</a> <a class="nav-link dropdown-item" hreflang=fi role=option lang=fi href=/fi/hig/>Suomi</a> <a class="nav-link dropdown-item" hreflang=sv role=option lang=sv href=/sv/hig/>Svenska</a> <a class="nav-link dropdown-item" hreflang=tr role=option lang=tr href=/tr/hig/>Türkçe</a> <a class="nav-link dropdown-item" hreflang=uk role=option lang=uk href=/uk/hig/>Українська</a> <a class="nav-link dropdown-item" hreflang=ko role=option lang=ko href=/ko/hig/>한국어</a> <a class="nav-link dropdown-item" hreflang=zh-tw role=option lang=zh-tw href=/zh-tw/hig/>正體中文</a> <a class="nav-link dropdown-item" hreflang=zh-cn role=option lang=zh-cn href=/zh-cn/hig/>简体中文</a></div></li></ul></div></nav></header><div class=td-main id=main><div class="row flex-xl-nowrap"><div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none"><div id=td-sidebar-menu class=td-sidebar__inner><form class="td-sidebar__search d-flex align-items-center"><div class=td-search><div class="td-search__icon icon icon_edit-find d-flex"></div><input type=search id=search-input class="td-search__input form-control td-search-input" placeholder="Search this site…" aria-label="Search this site…" autocomplete=off data-offline-search-index-json-src=/en/offline-search-index.0f3cbd6e61a027d300b548b520e994775fb7b08787bc42f4244d8b4f93f0b46e279e5497aca707607c6f99a111aa3458d285a3901e8d4a1fe361ced7028eaec1.json data-offline-search-base-href=/ data-offline-search-section=hig> <template id=search-results-template><div class=search-results-header style=display:flex;justify-content:space-between;margin-bottom:1em><span style=font-weight:700>Search Results </span><i class="icon icon_paint-none search-result-close-button p-1" style=cursor:pointer></i></div><div class=search-results-body style=overflow-y:auto><p class=search-no-results style=display:none>No results found for your query</p></div></template><template id=search-results-card-template><div class=card><div class=card-header><a class=card-link href=#>Title</a></div><div class=card-body><p class="card-text text-muted">Excerpt</p></div></div></template></div><button class="btn btn-link td-sidebar__toggle d-md-none p-2 m-0 flex-shrink-0 icon icon_application-menu" type=button data-bs-toggle=collapse data-bs-target=#td-section-nav aria-controls=td-section-nav aria-expanded=false aria-label="Toggle section navigation"></button></form><nav class="collapse td-sidebar-nav mt-2" id=td-section-nav><ul class=td-sidebar-nav__section><li><ul><li class="toc-l0 collapse show" id=hig><a class="td-sidebar-link td-sidebar-link__page" id=m-higkde_app_design href=/hig/kde_app_design/>What makes a KDE app a KDE app?</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higsimple_by_default href=/hig/simple_by_default/>Simple by default</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higpowerful_when_needed href=/hig/powerful_when_needed/>Powerful when needed</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higlayout_and_nav href=/hig/layout_and_nav/>Layout and navigation</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higdisplaying_content href=/hig/displaying_content/>Displaying content</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higgetting_input href=/hig/getting_input/>Getting input</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higstatus_changes href=/hig/status_changes/>Communicating status changes</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higtext_and_labels href=/hig/text_and_labels/>Text and labels</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higicons href=/hig/icons/>Icons</a><ul class=td-sidebar-nav__section><li class=td-sidebar-nav__section-title><div class="d-flex flex-row justify-content-between align-items-center"><a href=/hig/icons/colorful/ class="align-left w-100 collapsed td-sidebar-link td-sidebar-link__section">Colorful Icons</a> <a data-bs-toggle=collapse data-bs-target=#higiconscolorful class="icon icon_go-next p-2" onclick='this.classList.toggle("icon_go-down"),this.classList.toggle("icon_go-next")'></a></div></li><li><ul><li class="toc-l1 collapse" id=higiconscolorful><a class="td-sidebar-link td-sidebar-link__page" id=m-higiconscolorfulapplication href=/hig/icons/colorful/application/>Application Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconscolorfulmimetype href=/hig/icons/colorful/mimetype/>MIME Type Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconscolorfulcategory_preferences href=/hig/icons/colorful/category_preferences/>Category and Preferences Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconscolorfulplaces href=/hig/icons/colorful/places/>Places Icons</a></li></ul></li></ul><ul class=td-sidebar-nav__section><li class=td-sidebar-nav__section-title><div class="d-flex flex-row justify-content-between align-items-center"><a href=/hig/icons/monochrome/ class="align-left w-100 collapsed td-sidebar-link td-sidebar-link__section">Monochromatic Icons</a> <a data-bs-toggle=collapse data-bs-target=#higiconsmonochrome class="icon icon_go-next p-2" onclick='this.classList.toggle("icon_go-down"),this.classList.toggle("icon_go-next")'></a></div></li><li><ul><li class="toc-l1 collapse" id=higiconsmonochrome><a class="td-sidebar-link td-sidebar-link__page" id=m-higiconsmonochromeaction href=/hig/icons/monochrome/action/>Action Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconsmonochromeemblem href=/hig/icons/monochrome/emblem/>Emblem Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconsmonochromemimetype href=/hig/icons/monochrome/mimetype/>MIME Type Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconsmonochromeplaces href=/hig/icons/monochrome/places/>Places Icons</a> <a class="td-sidebar-link td-sidebar-link__page" id=m-higiconsmonochromestatus href=/hig/icons/monochrome/status/>Status Icons</a></li></ul></li></ul><a class="td-sidebar-link td-sidebar-link__page" id=m-higaccessibility href=/hig/accessibility/>Accessibility and inclusiveness</a></li></ul></li></ul></nav></div></div><div class="d-none d-xl-block col-xl-2 td-toc d-print-none"><div class="td-page-meta py-1 mb-0"><a href=https://invent.kde.org/documentation/develop-kde-org/-/edit/master/content/hig/_index.md target=_blank><i class="icon icon_document-edit me-2"></i>Edit this page</a> <a href=https://invent.kde.org/documentation/develop-kde-org/-/blob/master/content/hig/_index.md target=_blank><i class="icon icon_redeyes me-2"></i>See source code</a> <a href="https://invent.kde.org/documentation/develop-kde-org/-/issues/new?issue%5Btitle%5D=KDE%20Human%20Interface%20Guidelines" target=_blank><i class="icon icon_document-send me-2"></i>Create documentation issue</a> <a href=/docs/contribute/formatting/><i class="icon icon_format-text-color me-2"></i>Formatting guidelines</a> <a href=/docs/contribute/style/><i class="icon icon_draw-brush me-2"></i>Style guidelines</a></div><nav id=TableOfContents><ul><li><a href=#why-is-good-design-so-important>Why is good design so important?</a></li><li><a href=#topics-not-covered>Topics not covered</a></li><li><a href=#contributing>Contributing</a></li><li><a href=#read-the-guidelines>Read the guidelines</a></li></ul></nav></div><main class="col-12 col-md-9 col-xl-8 ps-md-5" id=content><nav aria-label=breadcrumb class="d-none d-md-block d-print-none"><ol class="breadcrumb spb-1"><li class="breadcrumb-item active" aria-current=page><a href=/hig/>KDE Human Interface Guidelines</a></li></ol></nav><div class=td-content><h1 class=mt-2>KDE Human Interface Guidelines</h1><p>Welcome to the KDE Human Interface Guidelines! Following them will help you build a beautiful and powerful app that feels at home when run in <a href=https://kde.org/plasma-desktop>KDE Plasma</a>, and works well outside of it. Users will learn how to use your app quickly, accomplish their goals with ease, and encounter fewer issues requiring support.</p><p>This document covers KDE's design philosophy and culture, common workflows and patterns, standard user interface conventions, and recommendations for platform integration.</p><h2 id=why-is-good-design-so-important>Why is good design so important?</h2><p>Design determines how well something fulfills its functional purpose and how enjoyable it is to interact with. If either is lacking, the result will be frustrating. People won't want to use a poorly-designed app, and if forced to, they'll be resentful and spread negativity about it. Avoid this through good design!</p><p>Design involves targeted decisions and trade-offs that bring a project closer to its intended goals and usage paradigms. The best apps know which users and use cases they're targeting, and which ones they leave for others. It's better to succeed by focusing on what you can do well than to spread yourself thin and fail. Under-promise and over-deliver, never the reverse.</p><h2 id=topics-not-covered>Topics not covered</h2><p>This document is a set of design guidelines, not instructions for implementing every specific component. While some technical guidance will be provided, much more detail can be found in the components' own <a href=https://develop.kde.org/docs/>usage</a> and <a href=https://api.kde.org/>API</a> documentation as well as the <a href="https://invent.kde.org/explore/groups?sort=name_asc">source code of existing KDE apps</a>. It's more of a <em>what</em> and a <em>why</em>, not a <em>how</em>.</p><p>This document is not intended to be an ironclad law code. By learning and following the rules, you'll understand how to safely innovate within the guidelines, and when it can be appropriate to break them if it produces a superior result.</p><h2 id=contributing>Contributing</h2><p>This is a living document, intended to be updated over time to reflect current KDE design trends and best practices. Contributions are welcome!</p><p>Content is written in <a href=https://commonmark.org/help/>Markdown</a>, and the source files are hosted in a <a href=https://invent.kde.org/documentation/develop-kde-org.git>Git repository</a>. To quickly edit a page, the GitLab editor can be opened on any page with the “Edit this page” button in the drawer on the right. Tasks and changes are organized via <a href=https://invent.kde.org>https://invent.kde.org</a>. To learn how to submit changes, see the <a href=https://invent.kde.org/documentation/develop-kde-org/-/blob/master/README.md>README file</a>.</p><h2 id=read-the-guidelines>Read the guidelines</h2><p>Click on any of these tiles to jump to a page:</p><div class=section-index><div class=row><div class="col-6 my-3"><a href=/hig/kde_app_design/ class="ae-card d-block"><h2 class="h4 mt-0">What makes a KDE app a KDE app?</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/simple_by_default/ class="ae-card d-block"><h2 class="h4 mt-0">Simple by default</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/powerful_when_needed/ class="ae-card d-block"><h2 class="h4 mt-0">Powerful when needed</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/layout_and_nav/ class="ae-card d-block"><h2 class="h4 mt-0">Layout and navigation</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/displaying_content/ class="ae-card d-block"><h2 class="h4 mt-0">Displaying content</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/getting_input/ class="ae-card d-block"><h2 class="h4 mt-0">Getting input</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/status_changes/ class="ae-card d-block"><h2 class="h4 mt-0">Communicating status changes</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/text_and_labels/ class="ae-card d-block"><h2 class="h4 mt-0">Text and labels</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/icons/ class="ae-card d-block"><h2 class="h4 mt-0">Icons</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/icons/colorful/ class="ae-card d-block"><h2 class="h4 mt-0">Colorful Icons</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/icons/monochrome/ class="ae-card d-block"><h2 class="h4 mt-0">Monochromatic Icons</h2><p></p></a></div><div class="col-6 my-3"><a href=/hig/accessibility/ class="ae-card d-block"><h2 class="h4 mt-0">Accessibility and inclusiveness</h2><p></p></a></div></div></div><div class="text-muted mt-5 pt-3"></div></div></main></div></div><footer class="bg-dark py-5 row d-print-none"><div class=container-fluid><div class=row><div class="col-6 col-sm-4 text-xs-center order-sm-2"></div><div class="col-6 col-sm-4 text-end text-xs-center order-sm-3"></div><div class="col-12 col-sm-4 text-center py-2 order-sm-2"><small class=text-white>© 2025 The KDE Community CC-BY-SA-4.0</small></div></div></div></footer></div><script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js integrity=sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz crossorigin=anonymous></script><script>window._site={},window._site.webWorker="/js/lunr-worker.min.js"</script><script src=/js/lunr.min.df84a2d58ea594c04a3371b48d020b55ea10284c2ec636e4e331965d7313e29b.js integrity="sha256-34Si1Y6llMBKM3G0jQILVeoQKEwuxjbk4zGWXXMT4ps=" crossorigin=anonymous></script><script src=/js/main.min.3efeba79ddd6babffb14ecb870952413d534076938303a074bb954d9bb00a858.js integrity="sha256-Pv66ed3Wur/7FOy4cJUkE9U0B2k4MDoHS7lU2bsAqFg=" crossorigin=anonymous></script><template id=copy-btn-template><button class=copy-code-btn data-bs-toggle=popover data-bs-placement=top data-bs-trigger="hover focus" data-bs-content="Copy to clipboard" data-clicked-content=Copied> <i class="icon icon_edit-copy"></i></button></template></body></html>