Pro feature

Change colors, fonts, and spacing without code

Pro feature You need SimpleBoards Pro active to use this.

This page is a tour of the design controls on the Design tab. You do not need to know any CSS to use them. Each setting has a label and a small description, and the changes only apply to the board you are editing.

Before you start

The seven groups of settings

Below the Theme row, the Customization section shows a row of pill-shaped buttons. Each pill is one group of related settings. Clicking a pill shows only that group, so you can focus on one part of the look at a time.

1. Layout & Navigation

How wide and how tall the board is, and how the Roadmap / Ideas tabs look.

  • Board Template Width. The maximum width of the board on the page, in pixels. Range 980px to 1680px.
  • Board Side Padding. Empty space on the left and right of the board, in pixels. Range 0px to 64px.
  • Roadmap Column Width. The width of each status column on the roadmap, in pixels. Range 300px to 520px.
  • Roadmap Column Gap. The space between status columns, in pixels. Range 8px to 40px.
  • Board Viewport Height. How tall the roadmap area is, as a share of the screen height. Range 55vh to 95vh. Each column scrolls inside that height.
  • Ideas Sidebar Width. The width of the ideas list panel, in pixels. Range 280px to 520px.
  • Menu Style. How the Roadmap and Ideas tabs look. Pick Card, Minimal, or Underline.

2. Typography

The font and the text sizes used across the board.

  • Font Family. Pick from System default, Inherit from theme, Inter, Plus Jakarta Sans + Inter, Serif (Georgia), or Monospace.
  • Board Title Size. The size of the board's main title. Range 20px to 56px.
  • Card Title Size. The size of the title on each card. Range 12px to 22px.
  • Card Title Weight. How bold card titles look. Pick Medium, Semibold, or Bold.
  • Card Body Text Size. The size of body text in cards and the drawer. Range 12px to 18px.
  • Card Description Size. The size of the description text on a card. Range 11px to 18px.

3. Surface Colors

The eight colors that set the overall mood of the board.

  • Board Background. The main background of the board page.
  • Toolbar Surface. The background of the top search and tabs bar.
  • Muted Surface. The background of pills, inactive controls, and hover states.
  • Global Border. The default border color used across the board.
  • Primary Text. The main readable text color.
  • Secondary Text. Meta and helper text, like dates and counts.
  • Primary Accent. The active link and accent color.
  • Primary Hover. The hover color for accents and links.

4. Cards & Columns

How cards and roadmap columns look.

  • Column Header Style. How the status name is shown above each column. Pick Dot (minimal), Pill (soft tint), or Bold (filled bar). See Change the look of the kanban column headers.
  • Column Container. Pick Boxed (background + padding) or Open (no container) to wrap or remove the column background.
  • Roadmap Column Background. The background behind cards inside a column.
  • Card Background. The background color of each card.
  • Card Border. The border color of each card.
  • Card Hover Border. The border color when a card is hovered.
  • Card Title Color. The color of card titles.
  • Card Description Color. The color of the card description.
  • Card Meta Color. The color of small text like dates and counts.
  • Corner Radius. How rounded card corners are. Range 4px to 24px.
  • Card Shadow. The shadow depth at rest. Pick None, Soft, Medium, or Deep.
  • Card Hover Shadow. The shadow depth when a card is hovered. Same options.

5. Card Display

Show or hide small extras on a card.

  • Card Number. Show or hide the #number badge.
  • Card Due Date. Show or hide the due date in the card meta line.
  • Card Author. Show or hide the author's name in the card meta line.

6. Votes & Due Dates

The look of the vote button and the due-date label.

  • Vote Icon Accent. The color of the up-arrow icon on the vote button.
  • Vote Button Background. The fill color of the button.
  • Vote Button Hover Background. The fill color on hover.
  • Vote Button Active Background. The fill color when the user has voted.
  • Vote Button Text. The color of the vote count.
  • Vote Button Border. The default border color.
  • Vote Button Hover Border. The border color on hover.
  • Vote Button Active Border. The border color when voted.
  • Vote Corner Radius. How rounded the button is. Range 4px to 24px.
  • Vote Text Size. The size of the vote count. Range 10px to 20px.
  • Vote Icon Size. The size of the arrow icon. Range 12px to 24px.
  • Due Date Color. The text color used for due dates on cards.

7. Modal & Drawer

The look of the side drawer and the add/edit popup.

  • Popup Panel Background. The background of the add/edit popup.
  • Drawer Panel Background. The main background of the side drawer.
  • Drawer Surface Cards. The background of cards and sections inside the drawer.
  • Drawer Divider Color. The color of the lines between drawer sections.
  • Comment Toolbar Background. The background of the comment editor toolbar.

Reset a setting

If you want to undo your changes, click the Restore selected theme defaults button at the top of the Customization section. The whole tab resets to the values of the theme picked in the Theme dropdown. Click Update to keep the reset.

What changed

Every change you save here applies to this board only. Other boards keep their own settings. None of your content is touched.

If you want to reuse the same color and spacing choices on another board without re-doing everything, save your changes as a custom theme. See Save a custom theme so you can reuse it.

See also

Last updated

2026-05-23 · SimpleBoards Pro 1.0.1