rct.css — RollerCoaster Tycoon panel chrome, as a framework · View on GitHub

Panel Designer
Theme
Taupe
Taupe
Tan
Slate
Olive
Candy
Title bar text
Body text
Options
My Park
Preview

Type in the form to the left and watch this panel react instantly. You can also observe that we have a nice bespoke scrollbar that's very much in theme here.

Component gallery

Evergreen Gardens

Your objective:

To have at least 1,000 guests in your park at the end of October, Year 4, with a park rating of at least 600.

Component Sheet
Buttons
Checkboxes
Text input
Dropdown
Click me — CSS-only menu
Merry-Go-Round
Wooden Roller Coaster
Haunted House

Built-in themes — and a custom one made in plain CSS

Slate
nice color
Olive
also nice
Candy (custom)

Headings — plain h1–h3, underlined

Headings

Heading 1

The largest step, for a park name or a screen title. Every heading inherits the RCT2 pixel font and gets an etched underline from the window's own theme colors.

Heading 2

A section label inside a panel. Body copy sits underneath at the normal 32px base size, so the hierarchy reads clearly.

Heading 3

A sub-section. Three steps is plenty to show the hierarchy — h4–h6 keep shrinking on the same 16px grid.

Inline text — emphasis, small, keys, marks, code

Inline text

The bitmap font has no bold or italic cut, so strong and emphasis are told apart by colour, not weight — gold for strong, cream for emphasis, each with a hard pixel drop-shadow.

Use underline and strikethrough as chunky 2px rules on the pixel grid, and mark to highlight a run of text.

Set body copy at the 32px base and drop to small print for captions and footnotes — a gentle step down in the same pixel font.

Press Ctrl + S to save. Inline code gets its own raised chip.

Table — the shape of an RCT list window

Rides
RideTypeExcitementQueue
Wooden Wild MouseCoaster6.2118
Haunted HouseGentle4.079
Observation TowerGentle3.544
Launched FreefallThrill7.8826

Header strip in the title colour; value cells are recessed wells. The grid lines are the window's own dark bevel showing through — so it recolours with the theme (this one is slate).

Figure — a framed viewport with a caption

Park view
A launched coaster hill over the park, with the sun and a tree
The Wooden Wild Mouse at dusk — Viewpoint 3
How theming works
Six variables

Every component reads six CSS custom properties. A built-in theme like slate or olive just sets them. Because the compiled rct.css only ever reads these variables, you can invent a brand-new theme in plain CSS — no Sass, no build step:

.rct-window--sunset {
  --body:  #c8582f;  /* frames/buttons */
  --light: #e8935c;  /* bevel highlight */
  --dark:  #6e2a12;  /* bevel shadow */
  --field: #b34a25;  /* input wells */
  --title: #5a2110;  /* title + hover */
  --page:  #c8582f;  /* tab page */
}

Add class="rct-window rct-window--sunset" to any window and it inherits the whole look. That’s the entire theming system.

Get started

<link rel="stylesheet" href="dist/rct.css">
<script src="js/rct.js" defer></script>  <!-- optional: dropdown niceties -->

<details class="rct-window rct-window--taupe" open>
  <summary class="rct-titlebar">
    <span class="rct-close">X</span>Options
  </summary>
  <div class="rct-body">
    <button class="rct-button">Click me</button>
  </div>
</details>

Make a theme without a build

Every component reads six CSS custom properties. Override them on any .rct-window in plain CSS — no Sass required:

.rct-window--candy {
  --body:  #b0568a;   /* frames, buttons, tabs */
  --light: #dd8cbb;   /* raised bevel highlight */
  --dark:  #5e2748;   /* raised bevel shadow */
  --field: #9c4879;   /* sunken input wells */
  --title: #4a1f38;   /* title bar + menu hover */
  --page:  #b0568a;   /* tab page fill */
}

The FontStruction “RCT2” (fontstruct.com/fontstructions/show/465125) by “Qimplef” is licensed under a Creative Commons Attribution Share Alike license (CC BY-SA 3.0). “Departure Mono” (departuremono.com) by Helena Zhang is licensed under the SIL Open Font License 1.1. The rct.css stylesheets and JavaScript are MIT licensed.