CSS Editor

Sometimes a little-bit of styling goes a long way, specially when the people involved in the decision, or budgeting are not familiar with software design. Therefore, in UI Drafter you can customize the style of your prototypes with CSS.

Paint Calculator with Custom Styles

Custom Services

Learn about our CSS services

To request the service email: Eric


The custom styling service is charged by the Entry. Each one costs $10, and there’s a minimum charge of $100 per Root Card (page).

There’s no charge for non-visible (Auxiliary ) Cards or Entries. Also, feel free to send a graphic design mockup as well, and it’ll be matched pixel perfect.

As an example, the paint calculator page below has 9 Entries, so it costs $100. By the way, Selectors (e.g. "Wall Finish") only count as one.

Tech Support

Tech support is $150/hr billed in 15-minute increments.


With the Key Editor, tag the Cards and Entries you want to style. That key-name becomes a CSS class that you can target in a stylesheet.

Editing CSS styles in UI Drafter.
fieldset.css_demo {
  border: 8px solid lightgrey;
  border-radius: 24px;
.css_demo h1     { text-align: center; }

.entry_b label   { text-align: right; }
.entry_b input   { font-weight: bold; }

.button_b        { display: block; }
.button_b button { width: 100%; }

Editing the Stylesheet

PreviewerCSS Editor

Option 1. Use the text editor of your choice, and run our open source CSS Editor Connector. That program connects your editor to UI Drafter, and live-reloads less, scss, and css stylesheets.

Option 2. Use the integrated editor, which only works with CSS.

Technical Details

Your style rules get applied last. Therefore, they override (in cascade) the default ones.

By the way, don’t use the default classes (the ones starting with an underscore, they’re auto-generated and will change without notice.

Next Shortcuts  ️⇾