Skip to content

Kirby 3.8.4

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.

    Preview CSS variable HEX value Usage
    --color-black #000
    --color-white #fff Background of interactive list elements (e.g. pages section) and form inputs.
    --color-gray-100 #f7f7f7
    --color-gray-200 --color-light --color-background #efefef Primary background of the Panel UI and modals. This color basically defines the "canvas" the Panel is drawn onto.
    --color-gray-300 #ddd
    --color-gray-400 --color-border #ccc Used to separate elements with a light background from each other (e.g. in the search results modal).
    --color-gray-500 #999
    --color-gray-600 --color-text-light #777 Labels and secondary text (e.g. the info colum of pages sections, user role in user manager and column titles in tables).
    --color-gray-700 #555
    --color-gray-800 #333
    --color-gray-900 --color-text #111 The primary text color and background of the top bar.
    --color-red-200 #edc1c1
    --color-red-300 #e3a0a0
    --color-red-400 --color-negative-light #d16464
    --color-red-600 --color-negative #c82829 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).
    --color-orange-200 #f2d4bf
    --color-orange-300 #ebbe9e
    --color-orange-400 --color-notice-light #de935f
    --color-orange-600 --color-notice #f4861f Temporary UI objects that should draw user attention without being too conspicuous (e.g. the save bar below an unsaved page).
    --color-yellow-200 #f9e8c7
    --color-yellow-300 #f7e2b8
    --color-yellow-400 #f0c674
    --color-yellow-600 #cca000
    --color-green-200 #dce5c2
    --color-green-300 #c6d49d
    --color-green-400 --color-positive-light #a7bd68
    --color-green-600 --color-positive #5d800d 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).
    --color-aqua-200 #d0e5e2
    --color-aqua-300 #bbd9d5
    --color-aqua-400 #8abeb7
    --color-aqua-600 #398e93
    --color-blue-200 #cbd7e5
    --color-blue-300 #b1c2d8
    --color-blue-400 --color-focus-light #7e9abf
    --color-blue-600 --color-focus #4271ae 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 blue.
    --color-purple-200 #e0d4e4
    --color-purple-300 #d4c3d9
    --color-purple-400 #b294bb
    --color-purple-600 #9c48b9

    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 properties

    We use custom CSS properties 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-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

--color-backdrop
--color-black
--color-light
--color-white

--color-gray-100
--color-gray-200
--color-gray-300
--color-gray-400
--color-gray-500
--color-gray-600
--color-gray-700
--color-gray-800
--color-gray-900
--color-gray

--color-red-200
--color-red-300
--color-red-400
--color-red-600
--color-red

--color-orange-200
--color-orange-300
--color-orange-400
--color-orange-600
--color-orange

--color-yellow-200
--color-yellow-300
--color-yellow-400
--color-yellow-600
--color-yellow

--color-green-200
--color-green-300
--color-green-400
--color-green-600
--color-green

--color-aqua-200
--color-aqua-300
--color-aqua-400
--color-aqua-600
--color-aqua

--color-blue-200
--color-blue-300
--color-blue-400
--color-blue-600
--color-blue

--color-purple-200
--color-purple-300
--color-purple-400
--color-purple-600
--color-purple

/* Fonts */
--font-sans
--font-mono

--font-normal
--font-bold

--text-xs
--text-sm
--text-base
--text-lg
--text-xl
--text-2xl
--text-3xl
--text-4xl
--text-5xl
--text-6xl

--leading-none
--leading-tight
--leading-snug
--leading-normal
--leading-relaxed
--leading-loose

/* Border radius */
--rounded-xs
--rounded-sm
--rounded

/* Shadows */
--shadow
--shadow-md
--shadow-lg
--shadow-xl
--shadow-outline
--shadow-inset

--shadow-sticky
--shadow-dropdown
--shadow-item

/* Spacing */
--spacing-0
--spacing-px
--spacing-2px
--spacing-1
--spacing-2
--spacing-3
--spacing-4
--spacing-5
--spacing-6
--spacing-8
--spacing-10
--spacing-12
--spacing-16
--spacing-20
--spacing-24
--spacing-36

/* Z index */
--z-loader:
--z-notification
--z-dialog
--z-navigation
--z-dropdown
--z-drawer
--z-dropzone
--z-toolbar
--z-content
--z-background

    Logical properties

    Our RTL support is powered by CSS logical properties. For now with fallback code for older browsers. We encourage all plugin developers to look into logical properties for their Panel plugins.