RPG UI Kit

Themes · Materia · Type Lab

Bulletin

NewNow accepting party invitations for Q3 MMXXVI — two slots remaining.

Save file · 87:24:15

Party Leader

Lv. 27 · Software Artificer

Kaelen Vex

Wanderer of interfaces. Forges systems that feel like held objects — precise, tactile, occasionally magical.

HP: 980 / 980
MP: 412 / 500
EXP: 24,701

Profile

Ten winters spent building tools for teams who ship. Fluent in TypeScript, Go, Rust, and the older tongues of C. Currently studying the arcane arts of realtime systems and typographic detail.

HelpOpen Theme Lab or Type Lab (right edge) to restyle live. Export your theme below.

Export Theme

UI Theme / Materia CSS

/* Brushed Metal — Classic FF-style horizontal brushed steel. */
:root {
  --surface: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 1px, rgba(0,0,0,0.198) 1px 2px, transparent 2px 3px), linear-gradient(180deg, #cfd2d6 0%, #9ea3aa 45%, #b6bac0 60%, #7f848b 100%);
  --surface-fg: #1a1c20;
  --surface-fg-muted: #3a3d43;
  --surface-accent: #f5f1c2;
  --edge-light: rgba(255,255,255,0.75);
  --edge-dark: rgba(0,0,0,0.55);
  --surface-link: #3b5a8a;
  --font-heading: "Cinzel", serif;
  --font-body: "Cormorant Garamond", serif;
}

/* Load fonts (add to <head>): */
/* <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:wght@400;600&display=swap"> */

.surface {
  background: var(--surface);
  color: var(--surface-fg);
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow:
    inset 0 1px 0 var(--edge-light),
    inset 0 -2px 0 var(--edge-dark),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--surface-fg);
  letter-spacing: 0.06em;
  text-shadow:
    0 1px 0 var(--edge-light),
    0 2px 4px var(--edge-dark);
}
h1 { font-size: 3rem; line-height: 1.1; }
h2 { font-size: 2rem; line-height: 1.2; }
h3 { font-size: 1.35rem; line-height: 1.3; }

p {
  font-family: var(--font-body);
  color: var(--surface-fg-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

a {
  color: var(--surface-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 120ms ease;
}
a:hover { color: var(--surface-accent); }

Page Background CSS

/* Page background — Clean · dark mode */
:root {
  --page-mode: dark;
  --page-base: radial-gradient(ellipse at 50% -10%, color-mix(in oklab, var(--surface-accent) 14%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--surface-accent) 6%, #0b0d12), #05060a);
  --page-pattern: none;
}

body {
  background: var(--page-pattern, none), var(--page-base);
  color: var(--surface-fg);
}

Type Lab Font CSS

/* No custom fonts chosen in Type Lab.
   The active materia's bundled typefaces are used.
   Open Type Lab (right edge) to override heading / paragraph fonts. */