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.