The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Themes & Styling

A variety of pre-built themes are ready for use under the Themes tab. Simply click the theme you'd like to use from this menu to apply the Theme to your screen.

If you have a specific theme in mind, you're able to create your own theme by clicking the '+' in the top-right corner of the menu that will launch a modal where you can create and customize your own theme. Read more about the configuration options available under each section.

Colors

In this tab, you are able to configure the color palette to be used throughout your project. Please note: Certain settings are automatically applied to certain components that are described in the table below.

Setting

Description

Background

The default background color of the screen

Divider

The default color of the Divider

Error

The color that will be displayed if the Error state is enabled on a Picker, Date Picker or Text Area

Primary

The default color of Buttons, Radio Buttons, Radio Button Fields, Checkboxes, Checkbox Fields, Progress Bars, Sliders, and Slider Fields

📘

You can override these colors choices in the Properties Panel

For the Background: Select the Screen in the Layer Tree and select a new color in the 'Styles' tab.

For Components: You can do this by going to the 'Configs' tab and selecting a new color under the Color Override property.

When you click the eyedropper, a color picker will appear where you are able to use the color picker to select a color or cycle between the options to enter a hex, RGBA, or HSLA value for your color.

Custom Colors

You can add custom Text/Text Decoration and Border Decoration colors by clicking the color panel next to the color dropdown in the Properties Panel. In this window, you can use the color picker, enter a HEX value, or an RGBA value to select a custom color for the property you've selected.

Typography

In this tab, you are able to set the typography to be used throughout your project.

Type Styles

Draftbit offers numerous type styles that can be set individually to your liking. In the picture below, you'll see what text looks like in each available type style in the default Draftbit theme. In addition to changing the font for each type, you are able to set the Font Size, Spacing and Line Height.

Containers

Container Radius

Button Radius

Set the default appearance of the corners of Buttons used in your project.

Global Radius

Set the Global Radius setting which can be applied to components under the Borders section of the Properties Panel.

Elevation

In this tab, you are able to configure the Elevation that can be applied to Cards or Containers. Here you are able to customize the color, size, opacity, and position of the drop shadow across 4 different Elevation settings.

Spacing

All of the options on this page are configured with the number of absolute pixels you would like to apply.

Parameter

Description

Text Spacing

Adjusts padding between headlines and body text within components.

Small Spacing

Smaller margins between related content such as cards, lists, and grids.

Medium Spacing

Medium padding between related content such as elements in cards. Buttons also inherit this padding.

Large Spacing

Larger margins between content and used inside cards as well as margins between lists of rows.

Gutters

Adjusts left/right margins of Containers.

Updated 11 months ago


Themes & Styling


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.