The widget design theme currently works with all Program widgets. We are working on expanding this to other widgets soon!
The Theme provides a centralized hub for designing all your Program widgets and sections. This allows you to maintain a consistent brand appearance across all elements and make detailed adjustments easily. Cevoid automatically generates your theme when you create a workspace. You can also use the import tool at any time to fetch design settings directly from your current website.

​
Import design from a website

Cevoid AI (cAI), will scan your website’s code and take a screenshot of your website. The information fetched is then used to apply matching theme settings, fonts, and color schemes.
Importing a theme will replace your current design theme settings and color schemes
  1. Navigate to Settings -> Theme
  2. Click Import
  3. Click Import from website
  4. Enter a public URL from where you want cAI to import from
  5. Click Import

​
Fonts

Cevoid already provide popular fonts, including Google Fonts, the theme editor. If you need to use a font that is not listed, you can upload a custom font below.
The following font file format are supported: .otf .ttf .woff .woff2
  1. Navigate to Settings -> Theme
  2. Click Upload font
  3. Select your font files

​
Theme variables

The theme variables allow you to adjust the look of all Program widgets and sections at the same time. This way, you can ensure on-brand widgets easily and adjust them on a granular level. Designtheme Pn To edit the theme variables:
Navigate to Settings -> Theme
  1. Click Customize
  2. Click Variables
  3. Apply your changes
  4. Click Save changes

​
Available settings for theme variables

typography-headings

Typography - Headings

typography-text

Typography - Text

buttons

Buttons

tabs

Tabs

badges

Badges

cards

Cards

popups

Popup

layout

Layout

mobile

Mobile and Tablets

​
Color schemes

Each Program widget and section can be styled separately with one of the active color schemes.
This opens up for a more visual experience. The color schemes can be customized within the Design Theme. Color Schemes Pn To edit the Color schemes:
Navigate to Settings -> Theme
  1. Click Customize
  2. Click Color Schemes
  3. Apply your changes
  4. Click Save changes

​
Available settings for color schemes

section-color

Sections

solid-button-color

Solid button

outline-button-color

Outline button

cards-color

Cards

tabs-color

Tabs

badges-color

Badges