Skip to content

Site Design Principles

Jump to bottom
mdeguzis edited this page Jun 17, 2026 · 1 revision

Site Design Principles

How the site's UI is meant to look and hold together. Follow these when building or extending any admin tab, settings surface, or panel so new screens match the rest of the site instead of drifting.

For raw colors, typography, and component tokens see Design Palette. This page is about layout and grouping.

Group sections into cards, not flat rows

On the dark theme, a stack of labels and input rows blurs into one block and is hard to scan. Group each logical section (a form, a table, a status summary) into a card panel with a short heading.

  • .admin-card is the section container: a faint background, a 1px border, rounded corners, and inner padding. It sets a section apart from the page and from the next section.
  • .admin-subhead is the small uppercase heading at the top of a card (for example "Add admin", "Existing admins"). Every card gets one so its purpose is obvious at a glance.

A tab with a form and a table becomes two cards: the form in one, the table in another. The user does not have to guess where one thing ends and the next begins.

Use a highlight banner for context

Status or context that applies to the whole screen goes in an accent-tinted banner above the content, not in a plain line of text that reads like part of the form below it.

The "Your access" summary in the admin panel is the reference example: an accent background and border, a role chip, and the list of what the signed-in admin can do. The tint signals "this is about you / your context," distinct from the working area.

Label everything

Anything interactive gets a visible label or heading. Avoid a bare control whose meaning depends on the row above it. A short uppercase subhead or an inline label is enough. The goal is that someone landing on the screen cold can tell what each block is for.

Where this lives

  • .admin-card, .admin-subhead, and the access banner (.admin-perms-summary) are defined in css/admin/admin.css.
  • As of the 2026-06-16 admin work, the Admins tab and the global access banner use this pattern. The other admin tabs (Users, Flagged, Banned, Banned Phrases, Analytics) still use the older flat layout and should be migrated to cards for consistency.

Last verified: 2026-06-16.

Clone this wiki locally