AI widget styling context

Use this page when you want an external AI assistant, such as ChatGPT, Claude, Cursor, or Codex, to help generate custom CSS for the Remapdb widget. Remapdb does not require a special AI assistant for styling. Your assistant only needs this styling context, the goal you want to achieve, and any brand colors or website examples you want it to follow.

Copy this prompt

Read this Remapdb widget styling context:
https://docs.remapdb.com/widget/branding/ai-widget-styling-context

Generate only valid CSS for the Remapdb Custom CSS field.
Do not include <style> tags.
Prefer Remapdb CSS variables over deep selectors.
Use :root for light theme variables.
Use [data-bs-theme="dark"] for dark theme variables.
Use RGB channel values, not hex, for variables documented as RGB channels, for example --rdb-primary-color: 202, 0, 0;.
Keep selectors scoped to the widget iframe structure and avoid changing layout unless I ask for it.

Goal:
[describe the style you want]

Brand colors:
[add hex colors, fonts, or website URL]

The Remapdb widget is rendered inside an iframe. Custom CSS is injected into that iframe, after the default widget CSS and after the UI-based customizer variables. The order is:

default widget theme CSS
customizer variables
custom CSS

This means Custom CSS can override values set in the UI customizer. When possible, ask the AI assistant to change --rdb-* variables first, then use selectors only for details that variables cannot cover.

Theme model

Light theme variables go in :root.

:root {
  --rdb-widget-bg-2: #ffffff;
  --rdb-title-color: #17181c;
  --rdb-button-solid-bg: #17181c;
  --rdb-button-solid-color: #ffffff;
}

Dark theme variables go in [data-bs-theme="dark"].

[data-bs-theme="dark"] {
  --rdb-widget-bg-2: #17181c;
  --rdb-title-color: #ffffff;
  --rdb-button-solid-bg: #ffffff;
  --rdb-button-solid-color: #17181c;
}

If the widget is set to Auto, Remapdb can switch the iframe theme based on the parent website theme. In that case, include both :root and [data-bs-theme="dark"] values.

Recommended variables

Use these variables before targeting element classes:

:root {
  --rdb-widget-bg-2: #ffffff;
  --rdb-widget-bg-1: #f7f8fa;
  --car-specs-rdb-car-specs-bg-2: #ffffff;
  --rdb-title-color: #17181c;
  --rdb-table-color-1: #17181c;
  --rdb-table-color-2: #525b75;
  --rdb-form-control-bg: #ffffff;
  --rdb-form-control-color: #17181c;
  --rdb-form-control-border-color: #cbd0dd;
  --rdb-form-label-color: #525b75;
  --rdb-dropdown-bg: #ffffff;
  --rdb-dropdown-link-color: #17181c;
  --rdb-chip-bg: #eff2f6;
  --rdb-chip-color: #17181c;
  --rdb-button-solid-bg: #31374a;
  --rdb-button-solid-color: #ffffff;
  --rdb-button-outline-color: #31374a;
  --rdb-button-outline-border-color: #31374a;
  --rdb-modal-bg: #ffffff;
  --rdb-modal-color: #17181c;
  --rdb-border-radius: 0.125rem;
  --rdb-border-width: 1px;
}

See CSS variable reference for the larger variable list.

RGB channel variables

Some Remapdb variables are inserted into CSS like rgb(var(--name)) or rgba(var(--name), 0.25). These variables must contain only RGB channels, not a hex color. Correct:

:root {
  --rdb-primary-color: 202, 0, 0;
}

Incorrect:

:root {
  --rdb-primary-color: #ca0000;
}

If you want to use a hex color, set the final component variable instead:

:root {
  --rdb-button-solid-bg: #ca0000;
  --rdb-button-outline-color: #ca0000;
  --rdb-form-control-focus-border-color: #ca0000;
}

Common RGB-channel variables:

--rdb-primary-color
--rdb-br-primary
--utility-white
--gray-900
--dark-gray-800

Do not override derived aliases such as --rdb-text-primary unless you understand where they are used. Prefer changing --rdb-primary-color as RGB channels, or set final component variables such as --rdb-title-color and --rdb-button-solid-bg. The initial widget view contains:

<div class="container-fluid" data-iframe-size>
  <div id="quoting-success">...</div>
  <div id="vehicle-quote"></div>

  <div id="vehicle-form-content">
    <div id="rdb-alert-info" class="alert alert-info">...</div>

    <div id="vehicle-form" class="row">
      <select id="vehicle-type" class="form-select component-size">...</select>
      <select id="brand" class="form-select component-size">...</select>
      <select id="model" class="form-select component-size">...</select>
      <select id="generation" class="form-select component-size">...</select>
      <select id="engine" class="form-select component-size">...</select>
      <button id="show-remap" class="btn btn-secondary component-size">View remap</button>
      <div id="rdb-alert-danger" class="alert alert-danger">...</div>
    </div>

    <div class="border-disclaimer2 text-disclaimer2">Powered by remapdb.com</div>
  </div>

  <div id="vehicle-content-placeholder" class="bg-widget-content-1 placeholder-glow">...</div>
  <div id="vehicle-content" class="bg-widget-content-1">...</div>
</div>

The vehicle details content is loaded dynamically after a vehicle is selected and View remap is clicked.

Quote form structure

When quoting is enabled, the quote panel contains:

<div id="quote-title" class="bg-modal">
  <div class="modal-title text-modal">Request a quote</div>
  <button class="btn btn-link close-quote">...</button>
</div>

<form id="quote-form">
  <input id="quote-name" class="form-control component-size">
  <input id="quote-email" class="form-control component-size">
  <input id="quote-phone" class="form-control component-size">
  <input id="quote-location" class="form-control component-size">
  <input id="quote-reg" class="form-control component-size">
  <input id="quote-vin" class="form-control component-size">
  <select id="quote-service" class="form-select component-size">...</select>
  <select id="quote-dealer" class="form-select component-size">...</select>
  <textarea id="quote-text" class="form-control component-size"></textarea>
  <div id="quote-files">...</div>
  <button id="quote-submit" class="btn component-size">...</button>
</form>

Optional quoting features may add pricing, services, options, dealer map controls, file upload, and custom message areas.

Useful selectors

Prefer variables first. Use selectors only for targeted adjustments.

/* Vehicle selector row */
#vehicle-form .form-select {}
#show-remap {}

/* Vehicle result area */
#vehicle-content {}
.text-title {}
.text-table-1 {}
.bg-widget-content-1 {}
.bg-car-spec2 {}
.brand-logo {}

/* Disclaimer */
.text-disclaimer2 {}
.border-disclaimer2 {}

/* Quote panel */
#vehicle-quote {}
#quote-title {}
#quote-form .form-control {}
#quote-form .form-select {}
#quote-submit {}
.quote-container {}
.quote-file-dropzone {}
.quote-custom-message {}

/* Feedback and placeholders */
#rdb-alert-info {}
#rdb-alert-danger {}
#quoting-success {}
#vehicle-content-placeholder {}

CSS rules for AI assistants

Ask the assistant to follow these rules:

Output CSS only.
Do not include <style> tags.
Prefer --rdb-* variables over raw Bootstrap class overrides.
Use 202, 0, 0 format, not #ca0000, for RGB-channel variables such as --rdb-primary-color.
Include both light and dark theme values when the widget can use Auto theme.
Avoid global website selectors. The CSS runs inside the widget iframe, but broad rules still make future maintenance harder.
Avoid @import, external url(...), fixed positioning, very large z-index, and layout resets.
Avoid hiding required controls, validation messages, quote fields, or the View remap button.
Avoid changing IDs or relying on generated option IDs.
Test on desktop and mobile after saving.

Example: dark premium style

:root {
  --rdb-widget-bg-2: #0f1115;
  --rdb-widget-bg-1: #171a21;
  --car-specs-rdb-car-specs-bg-2: #0f1115;
  --rdb-title-color: #f8fafc;
  --rdb-table-color-1: #f8fafc;
  --rdb-table-color-2: #cbd5e1;
  --rdb-form-control-bg: #111827;
  --rdb-form-control-color: #f8fafc;
  --rdb-form-control-border-color: #374151;
  --rdb-dropdown-bg: #111827;
  --rdb-dropdown-link-color: #f8fafc;
  --rdb-chip-bg: #242936;
  --rdb-chip-color: #f8fafc;
  --rdb-button-solid-bg: #d6b25e;
  --rdb-button-solid-color: #111111;
  --rdb-button-solid-hover-bg: #e8c772;
  --rdb-modal-bg: #0f1115;
  --rdb-modal-color: #f8fafc;
  --rdb-border-radius: 0.25rem;
}

[data-bs-theme="dark"] {
  --rdb-widget-bg-2: #0f1115;
  --rdb-widget-bg-1: #171a21;
  --car-specs-rdb-car-specs-bg-2: #0f1115;
  --rdb-title-color: #f8fafc;
  --rdb-table-color-1: #f8fafc;
  --rdb-table-color-2: #cbd5e1;
  --rdb-form-control-bg: #111827;
  --rdb-form-control-color: #f8fafc;
  --rdb-form-control-border-color: #374151;
  --rdb-dropdown-bg: #111827;
  --rdb-dropdown-link-color: #f8fafc;
  --rdb-chip-bg: #242936;
  --rdb-chip-color: #f8fafc;
  --rdb-button-solid-bg: #d6b25e;
  --rdb-button-solid-color: #111111;
  --rdb-button-solid-hover-bg: #e8c772;
  --rdb-modal-bg: #0f1115;
  --rdb-modal-color: #f8fafc;
}

#show-remap,
#quote-submit {
  text-transform: uppercase;
  font-weight: 800;
}

Get started

Widget

AI widget styling context

Copy this prompt

How widget styling is applied

Theme model

Recommended variables

RGB channel variables

Main widget structure

Quote form structure

Useful selectors

CSS rules for AI assistants

Example: dark premium style

More references

​Copy this prompt

​How widget styling is applied

​Theme model

​Recommended variables

​RGB channel variables

​Main widget structure

​Quote form structure

​Useful selectors

​CSS rules for AI assistants

​Example: dark premium style

​More references

Copy this prompt

How widget styling is applied

Theme model

Recommended variables

RGB channel variables

Main widget structure

Quote form structure

Useful selectors

CSS rules for AI assistants

Example: dark premium style

More references