Visual

O rpgdesk.css

A segunda linha do esqueleto carrega o rpgdesk.css:

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

Ele é opcional e dá à ficha o visual do RPG Desk: o fundo escuro, os campos, os botões (os de rolagem em destaque), as abas, as listas e as fontes (Roboto, Lato e Inconsolata). Sem ele, a página começa crua, e o visual é todo seu.

As classes prontas:

Classe	O que faz
`rd-row`	uma linha que quebra quando falta espaço
`rd-col`	uma coluna
`rd-grid`	uma grade de cartões que se ajusta à largura
`rd-card`	uma caixa com fundo e borda
`rd-grow`	ocupa o espaço que sobra numa linha
`rd-primary`	o botão de destaque
`rd-muted`	o texto discreto

As cores do tema

O rpgdesk.js recebe as cores da mesa e as põe como variáveis CSS. Use as variáveis, e a sua ficha combina com o resto da mesa:

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

Variável	O que é
`--rd-text`	o texto
`--rd-muted`	o texto discreto
`--rd-accent`, `--rd-accent-hover`, `--rd-accent-text`	a cor de destaque, ao passar o mouse e em texto
`--rd-bg`, `--rd-bg-2`, `--rd-bg-3`	os fundos, do mais escuro ao mais claro
`--rd-line`	as bordas e as linhas
`--rd-error`	os erros
`--rd-font`, `--rd-title-font`	as fontes do texto e dos títulos
`--rd-radius`	o arredondamento dos cantos

As cores cruas do tema da mesa também chegam, com o prefixo --rd- (como --rd-dominant-color e --rd-face-color). A lista está em Visual (referência).

Telas estreitas e largas

A ficha abre num espaço da mesa, que pode ter uns 350 px de largura ou a tela inteira (numa janela própria). Faça a ficha se ajustar:

use rd-row (ou flex-wrap: wrap) nas linhas de campos;
use grades com repeat(auto-fill, minmax(150px, 1fr)) em vez de colunas fixas;
não fixe larguras grandes em pixels;
a página rola sozinha: não ponha overflow: hidden no body.

Teste estreitando a janela do navegador no modo de teste.

Imagens e fontes

A ficha não acessa a internet: imagens e fontes de fora não carregam.

Desenhos pequenos: SVG dentro do HTML, ou endereços data:.
O retrato do personagem: <img data-image="retrato">, que a pessoa escolhe no RPG Desk.
Imagens e fontes próprias: ponha os arquivos num pacote e use caminhos relativos (<img src="img/rpgdesko.webp">, @font-face { src: url('fontes/minha.woff2') }).