A full Theme Studio for restyling the web app across every role: colors, typography, shapes, buttons, tables, cards, effects, and layout, all with a live preview before you save. See 2.4 for the walked-through version of this; this entry is the flat reference list.

1. Prebuilt Themes

Eight ready-made presets, usable as-is or as a starting point to customize further.

  • Classic (default) — navy brand, medium corners, flat cards.
  • Lagoon — calm teal on warm neutrals.
  • Metro — fully square edges, inspired by Windows 10.
  • Material — Google Material 3, tonal purple, pill buttons.
  • Cupertino — Apple's look, iOS blue, grouped gray backgrounds.
  • Sakura — cherry-blossom pink on soft paper tones.
  • Editorial — magazine feel, serif type, cream paper, burgundy ink.
  • Midnight — full dark mode, glowing focus states.

2. Colors

  • Appearance — Light or Dark; Dark retints every gray, white, and status color in the app.
  • Brand color — used for primary buttons, links, active states, and focus rings.
  • Borders — Subtle or Strong.
  • Neutral grays — a selectable gray family (e.g. Slate/cool) that retints every gray text, border, and background.
  • Status colors — Danger, Success, Warning, Info, plus Surface and Text.

3. Typography

  • Font family and Heading font — independently selectable typefaces.
  • Text size — Smaller / Small / Default / Large / Larger, app-wide.

4. Shape and Spacing

  • Global corner radius — every rounded corner in the app scales from this one value.
  • Global spacing — a percentage that scales every margin, padding, and gap.

5. Buttons

  • Height per size (Extra small / Small / Medium / Large), horizontal padding, and corner style.
  • Primary fill (Gradient/Solid) and Primary shadow (Flat/Subtle/Raised/Hard/Glow).
  • Optional colored secondary buttons, Secondary style (Solid/Soft/Outline), label weight, and uppercase labels.

6. Form Fields

  • Field height, corner style, and a focus-highlight toggle (brand-colored border and glow on the active field).

7. Tables

  • Header style (Light gray / Brand tint / Brand solid / White) and header height.
  • Row and cell padding, text size, corner style, striped rows, column dividers, and outer border.

8. Cards, Dialogs and Chips

  • Card shadow and Dialog shadow, independently (None/Subtle/Soft/Raised/Floating/Hard/Glow), plus card border width.
  • Dialog corner style, backdrop darkness, chip corner style (e.g. Pill), and tab-indicator thickness.

9. Effects

A separate, more experimental tab; the product itself warns these "can slow the app down and make it lag on some devices," so use sparingly.

  • Accent color (second color for glows/neon) and Heading color (Text color or Accent color).
  • Page pattern — None / Grid / Synthwave / Aurora.
  • Toggles: Glowing text, Glowing outlines, Neon tube buttons, Glitching headings, Cut corners, CRT scanlines.
  • Glow intensity — Normal or Maximum.

10. Layout

  • Sidebar — Brand color / Dark / Light / Custom color, plus sidebar width.
  • Top bar — Match sidebar or White (a light sidebar always forces a white top bar).
  • Page background color.

Nothing is visible to anyone else until Save theme is clicked, at which point it applies to every role across the institute at once. A Reset to default option is available from the "…" menu next to Save.