Theme Generator

Buttons

Radio Buttons

Demo

With this key, you can test signing without having to pay for signatures.

Production

Checkboxes

Terms and conditions
Terms and conditions

Switch

Email notifications
Push notifications

Tabs

This is the content for the Signatures tab. It contains all the relevant information and settings for this section.

Links & Text

This is how a link will be highlighted in body text. Links help users navigate between different sections.

Dialog

Leave without saving changes?

This is how a link will be highlighted

Header

Employment contract

Input

Label

Info

Icon Buttons

Edit
Download
Delete

Illustration

Typography

Example title

This is a detailed example description intended to provide a more comprehensive understanding of the subject matter. It elaborates on key points and offers additional context to enhance clarity and depth.

Code Export

:root {
  /* Font */
  --font-family: 'Averta', system-ui, sans-serif;
  /* Tonal Palette */
  --color-50: #f8fcff;
  --color-200: #cee0f9;
  --color-500: #006fe5;
  --color-600: #0062d7;
  --color-700: #004aa9;
  --color-800: #003680;
  --color-950: #000b3c;
  /* Buttons */
  --btn-primary-bg: #006fe5; /* 500 */
  --btn-primary-text: #f8fcff;
  --btn-primary-hover: #0062d7; /* 600 */
  --btn-outline-border: #cee0f9; /* 200 */
  --btn-outline-text: #006fe5; /* 500 */
  --btn-outline-hover-bg: #f8fcff; /* 50 */
  /* Radio Buttons */
  --radio-selected: #006fe5; /* 500 */
  --radio-unselected-border: #b3b8c5;
  /* Checkboxes */
  --checkbox-checked-bg: #006fe5; /* 500 */
  --checkbox-checked-icon: #f8fcff;
  --checkbox-unchecked-border: #b3b8c5;
  /* Links */
  --link-text: #006fe5; /* 500 */
  --link-hover: #0062d7; /* 600 */
  /* Dialog */
  --dialog-header-bg: #003680; /* 800 */
  --dialog-header-text: #f8fcff;
  --dialog-hover: #004aa9; /* 700 */
  /* Header */
  --header-bg: #003680; /* 800 */
  --header-text: #f8fcff;
  --header-hover: #004aa9; /* 700 */
  /* Input */
  --input-focus: #006fe5; /* 500 */
  /* Typography */
  --title-color: #0062d7; /* 600 */
  /* Illustration */
  --illustration-accent: #006fe5; /* 500 */
  --illustration-stroke: #293D66;
}