Looks

rpgdesk.css

The skeleton’s second line loads rpgdesk.css:

<link rel="stylesheet" href="https://docs.rpgdesk.com/_sdk/1/rpgdesk.css">

It is optional and gives the sheet RPG Desk’s look: the dark background, the fields, the buttons (roll buttons highlighted), the tabs, the lists and the fonts (Roboto, Lato and Inconsolata). Without it, the page starts raw, and the looks are all yours.

The ready-made classes:

Class	What it does
`rd-row`	a row that wraps when it runs out of space
`rd-col`	a column
`rd-grid`	a grid of cards that adapts to the width
`rd-card`	a box with a background and a border
`rd-grow`	takes up the space left in a row
`rd-primary`	the highlighted button
`rd-muted`	subdued text

The theme colors

rpgdesk.js receives the room’s colors and sets them as CSS variables. Use the variables, and your sheet matches the rest of the room:

.box {
  background: var(--rd-bg-2);
  border: 1px solid var(--rd-line);
  color: var(--rd-text);
}
.highlight { color: var(--rd-accent); }

Variable	What it is
`--rd-text`	the text
`--rd-muted`	subdued text
`--rd-accent`, `--rd-accent-hover`, `--rd-accent-text`	the accent color, on hover and as text
`--rd-bg`, `--rd-bg-2`, `--rd-bg-3`	the backgrounds, from darkest to lightest
`--rd-line`	borders and lines
`--rd-error`	errors
`--rd-font`, `--rd-title-font`	the text and heading fonts
`--rd-radius`	the corner rounding

The room theme’s raw colors also arrive, with the --rd- prefix (such as --rd-dominant-color and --rd-face-color). The list is in Looks (CSS reference).

Narrow and wide screens

The sheet opens in a room space, which can be about 350 px wide or the whole screen (in a window of its own). Make the sheet adapt:

use rd-row (or flex-wrap: wrap) on rows of fields;
use grids with repeat(auto-fill, minmax(150px, 1fr)) instead of fixed columns;
do not fix large widths in pixels;
the page scrolls by itself: do not put overflow: hidden on the body.

Test by narrowing the browser window in test mode.

Images and fonts

The sheet has no internet access: images and fonts from outside do not load.

Small drawings: SVG inside the HTML, or data: addresses.
The character’s portrait: <img data-image="portrait">, which the person chooses in RPG Desk.
Your own images and fonts: put the files in a package and use relative paths (<img src="img/crest.webp">, @font-face { src: url('fonts/mine.woff2') }).