Skip to content

Kirby 3.5.7.1

Search
    Search by Algolia

    UI Kit

    Our Panel is based on Vue and has its own UI component kit. You can use and extend all our components in your Panel plugins for a super fast and consistent developer experience.

    Colors

    We use a distinctive set of colors for defining the look of the Panel. While there are no limitations to colors for your UI components, we recommend that you follow our design principles closely, keeping a smooth and consistent user experience across the whole Panel, including your own extensions. Use the greyscale palette as much as possible and saturated colors sparsely. Unless an element provides additional information or context through its color, it should not stick out.

    Swatch HEX value Name Usage
    #16171a Dark The primary text color and background of the top bar. Think of it as the darkest color used throughout the whole UI of the Panel.
    #2d2f36 Dark background Background color for dark sections (e.g. for media previews).
    #777 Muted grey Labels and secondary text (e.g. the info colum of pages sections, user role in user manager and column titles in tables).
    #ccc Border grey Used to separate elements with a light background from each other (e.g. in the search results modal).
    #efefef Light grey Primary background of the Panel UI and modals. This color basically defines the "canvas" the Panel is drawn onto.
    #fff White Background of interactive list elements (e.g. pages section) and form inputs.
    #5d800d Positive green Positive, non-destructive actions and confirmation of a successful operation. Use for UI elements that start or confirm such an action (e.g. the confirmation message after successfully saving a page).
    #c82829 Negative red Destructive or dangerous actions that can possibly have negative effects or cause data loss and thus require increased attention by the user. Use for UI elements that start or confirm such an action (e.g. the confirm button in the confirmation dialog when deleting a user or page).
    #4271ae Focus blue Used to indicate a user-focussed element. Whenever a clickable element (e.g. a button) or an input gains focus, it should be indicated by adding a border in Focus Blue.
    #f5871f Notice orange Temporary UI objects that should draw user attention without being too conspicuous (e.g. the save bar below an unsaved page).

    Typography

    The Panel uses the system fonts available on your device for fast loading times and to provide good support for websites with non-latin text. It is highly recommended to use our system-font stacks, so your extension will work consistently across multiple languages.

    Sans-serif

    By default, all text throughout the Panel's UI uses a sans-serif font. As the font is automatically inherited by your components, you usually don’t have to apply it again. However, if your plugin uses iframes or third-party components that force you to override the font by hand, we recommend that you use the same font stack as we do:

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    Monospace

    If your component needs to use a monospaced font, we recommend using the font-stack listed below instead:

    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    CSS variables

    Since 3.3.0

    We use CSS variables for the most important parameters in the Panel. This is useful for all plugin developers, because you no longer need to find color values, font sizes or similar stuff in our stylesheets and hope that we won’t change them.

    /** Colors **/
--color-backdrop
--color-background
--color-border
--color-focus
--color-focus-light
--color-focus-outline
--color-negative
--color-negative-light
--color-negative-outline
--color-notice
--color-notice-light
--color-positive
--color-positive-light
--color-positive-outline
--color-text
--color-text-light

/** Font families **/
--font-family-mono
--font-family-sans

/** Font sizes **/
--font-size-tiny
--font-size-small
--font-size-medium
--font-size-large
--font-size-huge
--font-size-monster

/** Shadows **/
--box-shadow-dropdown
--box-shadow-item
--box-shadow-focus