​
CSS Variables

Platform customers have access to a comprehensive set of CSS variables that can be used to customize the appearance of the embedded signing experience. These variables control everything from colors to spacing and can be used to match your application’s design system.

​
Available Variables

​
Colors

VariableDescriptionDefault
backgroundBase background colorSystem default
foregroundBase text colorSystem default
mutedMuted/subtle background colorSystem default
mutedForegroundMuted/subtle text colorSystem default
popoverPopover/dropdown background colorSystem default
popoverForegroundPopover/dropdown text colorSystem default
cardCard background colorSystem default
cardBorderCard border colorSystem default
cardBorderTintCard border tint/highlight colorSystem default
cardForegroundCard text colorSystem default
fieldCardField card background colorSystem default
fieldCardBorderField card border colorSystem default
fieldCardForegroundField card text colorSystem default
widgetWidget background colorSystem default
widgetForegroundWidget text colorSystem default
borderDefault border colorSystem default
inputInput field border colorSystem default
primaryPrimary action/button colorSystem default
primaryForegroundPrimary action/button text colorSystem default
secondarySecondary action/button colorSystem default
secondaryForegroundSecondary action/button text colorSystem default
accentAccent/highlight colorSystem default
accentForegroundAccent/highlight text colorSystem default
destructiveDestructive/danger action colorSystem default
destructiveForegroundDestructive/danger text colorSystem default
ringFocus ring colorSystem default
warningWarning/alert colorSystem default

​
Spacing and Layout

VariableDescriptionDefault
radiusBorder radius size in REM unitsSystem default

​
Usage Example

Here’s how to use these variables in your embedding implementation:

const cssVars = {
  // Colors
  background: '#ffffff',
  foreground: '#000000',
  primary: '#0000ff',
  primaryForeground: '#ffffff',
  accent: '#4f46e5',
  destructive: '#ef4444',

  // Spacing
  radius: '0.5rem'
};

// React/Preact
<EmbedDirectTemplate
  token={token}
  cssVars={cssVars}
/>

// Vue
<EmbedDirectTemplate
  :token="token"
  :cssVars="cssVars"
/>

// Svelte
<EmbedDirectTemplate
  {token}
  cssVars={cssVars}
/>

// Solid
<EmbedDirectTemplate
  token={token}
  cssVars={cssVars}
/>

​
Color Format

Colors can be specified in any valid CSS color format:

  • Hexadecimal: #ff0000
  • RGB: rgb(255, 0, 0)
  • HSL: hsl(0, 100%, 50%)
  • Named colors: red

The colors will be automatically converted to the appropriate format internally.

​
Best Practices

  1. Maintain Contrast: When customizing colors, ensure there’s sufficient contrast between background and foreground colors for accessibility.

  2. Test Dark Mode: If you haven’t disabled dark mode, test your color variables in both light and dark modes.

  3. Use Your Brand Colors: Align the primary and accent colors with your brand’s color scheme for a cohesive look.

  4. Consistent Radius: Use a consistent border radius value that matches your application’s design system.

​
CSS Class Targets

In addition to CSS variables, specific components in the embedded experience can be targeted using CSS classes for more granular styling:

​
Component Classes

Class NameDescription
.embed--RootMain container for the embedded signing experience
.embed--DocumentContainerContainer for the document and signing widget
.embed--DocumentViewerContainer for the document viewer
.embed--DocumentWidgetThe signing widget container
.embed--DocumentWidgetContainerOuter container for the signing widget, handles positioning
.embed--DocumentWidgetHeaderHeader section of the signing widget
.embed--DocumentWidgetContentMain content area of the signing widget
.embed--DocumentWidgetFormForm section within the signing widget
.embed--DocumentWidgetFooterFooter section of the signing widget
.embed--WaitingForTurnContainer for the waiting screen when it’s not the user’s turn to sign
.embed--DocumentCompletedContainer for the completion screen after signing
.field--FieldRootContainerBase container for document fields (signatures, text, checkboxes, etc.)

Field components also expose several data attributes that can be used for styling different states:

Data AttributeValuesDescription
[data-field-type]SIGNATURE, TEXT, CHECKBOX, RADIO, etc.The type of field
[data-inserted]true, falseWhether the field has been filled
[data-validate]true, falseWhether the field is being validated

​
Field Styling Example

/* Style all field containers */
.field--FieldRootContainer {
  transition: all 200ms ease;
}

/* Style specific field types */
.field--FieldRootContainer[data-field-type='SIGNATURE'] {
  background-color: rgba(0, 0, 0, 0.02);
}

/* Style inserted fields */
.field--FieldRootContainer[data-inserted='true'] {
  background-color: var(--primary);
  opacity: 0.2;
}

/* Style fields being validated */
.field--FieldRootContainer[data-validate='true'] {
  border-color: orange;
}

​
Example Usage

/* Custom styles for the document widget */
.embed--DocumentWidget {
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Custom styles for the waiting screen */
.embed--WaitingForTurn {
  background-color: #f9fafb;
  padding: 2rem;
}

/* Responsive adjustments for the document container */
@media (min-width: 768px) {
  .embed--DocumentContainer {
    gap: 2rem;
  }
}