diff --git a/src/lib/ui/AccountSessions.svelte b/src/lib/ui/AccountSessions.svelte
index 11b4a3fd..f8ee60f8 100644
--- a/src/lib/ui/AccountSessions.svelte
+++ b/src/lib/ui/AccountSessions.svelte
@@ -44,18 +44,18 @@
 	<h2>
 		sessions
 		{#if account_sessions.active_count > 0}
-			<span class="chip color_a">{account_sessions.active_count} active</span>
+			<span class="chip palette_a">{account_sessions.active_count} active</span>
 		{/if}
 	</h2>
 
 	{#if account_sessions.list.loading}
 		<p class="text_50">loading sessions...</p>
 	{:else if account_sessions.list.error}
-		<p class="color_c_50">{account_sessions.list.error}</p>
+		<p class="palette_c_50">{account_sessions.list.error}</p>
 	{:else}
 		{@const revoke_all_error = account_sessions.revoke_all.error}
 		{#if revoke_all_error}
-			<p class="color_c_50">{revoke_all_error}</p>
+			<p class="palette_c_50">{revoke_all_error}</p>
 		{/if}
 		{#if account_sessions.active_count > 1}
 			<div class="mb_md">
@@ -65,7 +65,7 @@
 		<Datatable {columns} rows={account_sessions.sessions} height="300px">
 			{#snippet cell(column, row)}
 				{#if column.key === 'id'}
-					<span class="chip color_b">active</span>
+					<span class="chip palette_b">active</span>
 					<code class="text_50">{truncate_uuid(row.id)}</code>
 				{:else if column.key === 'created_at'}
 					<span title={format_datetime_local(row.created_at)}>
@@ -90,7 +90,7 @@
 						{revoking ? 'revoking…' : 'revoke'}
 					</button>
 					{#if revoke_error}
-						<span class="color_c_50 font_size_sm">{revoke_error}</span>
+						<span class="palette_c_50 font_size_sm">{revoke_error}</span>
 					{/if}
 				{:else if column.format}
 					{column.format(row[column.key], row)}
diff --git a/src/lib/ui/AdminAccounts.svelte b/src/lib/ui/AdminAccounts.svelte
index a1897a9b..998da6fe 100644
--- a/src/lib/ui/AdminAccounts.svelte
+++ b/src/lib/ui/AdminAccounts.svelte
@@ -44,7 +44,7 @@
 	<h1>accounts</h1>
 	{#if admin_accounts.account_count > 0}
 		<p>
-			<span class="chip color_a"
+			<span class="chip palette_a"
 				>{admin_accounts.account_count} account{admin_accounts.account_count === 1 ? '' : 's'}</span
 			>
 		</p>
@@ -66,7 +66,7 @@
 	{#if admin_accounts.list.loading}
 		<p class="text_50">loading accounts...</p>
 	{:else if admin_accounts.list.error}
-		<p class="color_c_50">{admin_accounts.list.error}</p>
+		<p class="palette_c_50">{admin_accounts.list.error}</p>
 	{:else}
 		<Datatable {columns} rows={admin_accounts.accounts} height="400px">
 			{#snippet cell(column, row)}
@@ -76,7 +76,7 @@
 						<span class="text_50 font_size_sm">
 							{row.account.email}
 							{#if row.account.email_verified}
-								<span class="chip font_size_sm color_b">verified</span>
+								<span class="chip font_size_sm palette_b">verified</span>
 							{:else}
 								<span class="chip font_size_sm">unverified</span>
 							{/if}
@@ -94,7 +94,7 @@
 					{#each row.role_grants as role_grant (role_grant.id)}
 						{@const scope = scope_label(role_grant.scope_id, role_grant.role)}
 						<div class="row">
-							<span class="chip color_b">{role_grant.role}</span>
+							<span class="chip palette_b">{role_grant.role}</span>
 							{#if scope !== null}
 								<span class="text_50 font_size_sm" title={role_grant.scope_id ?? undefined}>
 									{scope}
@@ -119,7 +119,7 @@
 									pending={admin_accounts.revoke.loading(role_grant.id)}
 								/>
 								{#if revoke_error}
-									<span class="color_c_50 font_size_sm">{revoke_error}</span>
+									<span class="palette_c_50 font_size_sm">{revoke_error}</span>
 								{/if}
 							{/if}
 						</div>
@@ -147,7 +147,7 @@
 								pending={admin_accounts.retract.loading(offer.id)}
 							/>
 							{#if retract_error}
-								<span class="color_c_50 font_size_sm">{retract_error}</span>
+								<span class="palette_c_50 font_size_sm">{retract_error}</span>
 							{/if}
 						</div>
 					{/each}
@@ -167,13 +167,13 @@
 								pending={admin_accounts.grant.loading(key)}
 							>
 								{#snippet popover_content(_popover, do_confirm)}
-									<button type="button" class="color_b bg_100" onclick={() => do_confirm()}>
+									<button type="button" class="palette_b bg_100" onclick={() => do_confirm()}>
 										<span class="py_sm">offer '{role}' to @{row.account.username}</span>
 									</button>
 								{/snippet}
 							</ConfirmButton>
 							{#if grant_error}
-								<span class="color_c_50 font_size_sm">{grant_error}</span>
+								<span class="palette_c_50 font_size_sm">{grant_error}</span>
 							{/if}
 						{/if}
 					{/each}
@@ -181,7 +181,7 @@
 					{#if row.account.deleted_at}
 						{@const undelete_error = admin_accounts.undelete.error(row.account.id)}
 						<span
-							class="chip font_size_sm color_c"
+							class="chip font_size_sm palette_c"
 							title={format_datetime_local(row.account.deleted_at)}
 						>
 							deleted {format_relative_time(row.account.deleted_at)}
@@ -195,7 +195,7 @@
 							reactivate
 						</button>
 						{#if undelete_error}
-							<span class="color_c_50 font_size_sm">{undelete_error}</span>
+							<span class="palette_c_50 font_size_sm">{undelete_error}</span>
 						{/if}
 					{:else}
 						{@const delete_error = admin_accounts.soft_delete.error(row.account.id)}
@@ -207,13 +207,13 @@
 							pending={admin_accounts.soft_delete.loading(row.account.id)}
 						>
 							{#snippet popover_content(_popover, do_confirm)}
-								<button type="button" class="color_c bg_100" onclick={() => do_confirm()}>
+								<button type="button" class="palette_c bg_100" onclick={() => do_confirm()}>
 									<span class="py_sm">soft-delete @{row.account.username} (reversible)</span>
 								</button>
 							{/snippet}
 						</ConfirmButton>
 						{#if delete_error}
-							<span class="color_c_50 font_size_sm">{delete_error}</span>
+							<span class="palette_c_50 font_size_sm">{delete_error}</span>
 						{/if}
 					{/if}
 				{/if}
diff --git a/src/lib/ui/AdminAuditLog.svelte b/src/lib/ui/AdminAuditLog.svelte
index 3cbd2a01..4080c0bc 100644
--- a/src/lib/ui/AdminAuditLog.svelte
+++ b/src/lib/ui/AdminAuditLog.svelte
@@ -88,7 +88,7 @@
 			</select>
 		</label>
 		<button type="button" onclick={load}>refresh</button>
-		<button type="button" onclick={toggle_streaming} class:color_b={streaming}>
+		<button type="button" onclick={toggle_streaming} class:palette_b={streaming}>
 			{streaming ? 'stop' : 'stream'}
 		</button>
 		{#if streaming}
@@ -101,7 +101,7 @@
 	{#if audit_log.list.loading}
 		<p class="text_50">loading audit log...</p>
 	{:else if audit_log.list.error}
-		<p class="color_c_50">{audit_log.list.error}</p>
+		<p class="palette_c_50">{audit_log.list.error}</p>
 	{:else}
 		<Datatable {columns} rows={audit_log.events} height="500px">
 			{#snippet cell(column, row)}
@@ -114,8 +114,8 @@
 				{:else if column.key === 'outcome'}
 					<span
 						class="chip"
-						class:color_b={row.outcome === 'success'}
-						class:color_c={row.outcome === 'failure'}
+						class:palette_b={row.outcome === 'success'}
+						class:palette_c={row.outcome === 'failure'}
 					>
 						{row.outcome}
 					</span>
diff --git a/src/lib/ui/AdminInvites.svelte b/src/lib/ui/AdminInvites.svelte
index 96434a62..7236eb82 100644
--- a/src/lib/ui/AdminInvites.svelte
+++ b/src/lib/ui/AdminInvites.svelte
@@ -59,7 +59,7 @@
 	</section>
 	{#if admin_invites.invite_count > 0}
 		<p>
-			<span class="chip color_a"
+			<span class="chip palette_a"
 				>{admin_invites.unclaimed_count} unclaimed / {admin_invites.invite_count} total</span
 			>
 		</p>
@@ -103,7 +103,7 @@
 	</form>
 
 	{#if admin_invites.list.error || admin_invites.create.error}
-		<p class="color_c_50">{admin_invites.list.error ?? admin_invites.create.error}</p>
+		<p class="palette_c_50">{admin_invites.list.error ?? admin_invites.create.error}</p>
 	{/if}
 
 	{#if admin_invites.list.loading}
@@ -113,7 +113,7 @@
 			{#snippet cell(column, row)}
 				{#if column.key === 'claimed_at'}
 					{#if row.claimed_at}
-						<span class="chip color_b">claimed</span>
+						<span class="chip palette_b">claimed</span>
 						<span class="text_50 font_size_sm" title={format_datetime_local(row.claimed_at)}>
 							{#if row.claimed_by_username}
 								by {row.claimed_by_username}
@@ -142,7 +142,7 @@
 							pending={admin_invites.remove.loading(row.id)}
 						/>
 						{#if remove_error}
-							<span class="color_c_50 font_size_sm">{remove_error}</span>
+							<span class="palette_c_50 font_size_sm">{remove_error}</span>
 						{/if}
 					{:else}
 						<span class="text_50">-</span>
diff --git a/src/lib/ui/AdminOverview.svelte b/src/lib/ui/AdminOverview.svelte
index 44365d49..a06afd44 100644
--- a/src/lib/ui/AdminOverview.svelte
+++ b/src/lib/ui/AdminOverview.svelte
@@ -92,7 +92,7 @@
 		{#if accounts.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if accounts.list.error}
-			<p class="color_c_50">{accounts.list.error}</p>
+			<p class="palette_c_50">{accounts.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
 				<strong class="font_size_lg">{accounts.account_count}</strong>
@@ -134,7 +134,7 @@
 		{#if sessions.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if sessions.list.error}
-			<p class="color_c_50">{sessions.list.error}</p>
+			<p class="palette_c_50">{sessions.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
 				<strong class="font_size_lg">{sessions.active_count}</strong>
@@ -164,12 +164,12 @@
 		{#if invites.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if invites.list.error}
-			<p class="color_c_50">{invites.list.error}</p>
+			<p class="palette_c_50">{invites.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
 				{#if app_settings.settings?.open_signup}
-					<span class="chip color_b">open</span>
+					<span class="chip palette_b">open</span>
 				{:else}
 					<span class="chip">closed</span>
 				{/if}
@@ -187,7 +187,7 @@
 						<li>
 							<span>{invite.email || invite.username || '—'}</span>
 							{#if invite.claimed_at}
-								<span class="chip font_size_sm color_b">claimed</span>
+								<span class="chip font_size_sm palette_b">claimed</span>
 							{:else}
 								<span class="chip font_size_sm">unclaimed</span>
 							{/if}
@@ -209,7 +209,7 @@
 		{#if audit_log.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if audit_log.list.error}
-			<p class="color_c_50">{audit_log.list.error}</p>
+			<p class="palette_c_50">{audit_log.list.error}</p>
 		{:else if recent_events.length === 0}
 			<p class="text_50">no events</p>
 		{:else}
@@ -221,7 +221,7 @@
 						>
 						<code class="font_size_sm">{event.event_type}</code>
 						{#if event.outcome === 'failure'}
-							<span class="chip font_size_sm color_c">fail</span>
+							<span class="chip font_size_sm palette_c">fail</span>
 						{/if}
 					</li>
 				{/each}
@@ -237,10 +237,10 @@
 		{#if audit_log.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if audit_log.list.error}
-			<p class="color_c_50">{audit_log.list.error}</p>
+			<p class="palette_c_50">{audit_log.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_xs">
-				<strong class="font_size_lg" class:color_c_50={failed_logins.length > 0}>
+				<strong class="font_size_lg" class:palette_c_50={failed_logins.length > 0}>
 					{failed_logins.length}
 				</strong>
 				<span class="text_50">failed logins</span>
@@ -274,12 +274,12 @@
 		{#if app_settings.list.loading}
 			<p class="text_50">loading...</p>
 		{:else if app_settings.list.error}
-			<p class="color_c_50">{app_settings.list.error}</p>
+			<p class="palette_c_50">{app_settings.list.error}</p>
 		{:else}
 			<div class="baseline-row gap_sm">
 				<span class="text_50">public signup</span>
 				{#if app_settings.settings?.open_signup}
-					<span class="chip color_b">open</span>
+					<span class="chip palette_b">open</span>
 				{:else}
 					<span class="chip">invite-only</span>
 				{/if}
diff --git a/src/lib/ui/AdminRoleGrantHistory.svelte b/src/lib/ui/AdminRoleGrantHistory.svelte
index 2f3c605e..38d6c463 100644
--- a/src/lib/ui/AdminRoleGrantHistory.svelte
+++ b/src/lib/ui/AdminRoleGrantHistory.svelte
@@ -43,15 +43,15 @@
 	{#if audit_log.role_grant_history.loading}
 		<p class="text_50">loading role_grant history...</p>
 	{:else if audit_log.role_grant_history.error}
-		<p class="color_c_50">{audit_log.role_grant_history.error}</p>
+		<p class="palette_c_50">{audit_log.role_grant_history.error}</p>
 	{:else}
 		<Datatable {columns} rows={audit_log.role_grant_history_events} height="400px" row_key="id">
 			{#snippet cell(column, row)}
 				{#if column.key === 'event_type'}
 					<span
 						class="chip"
-						class:color_b={row.event_type === 'role_grant_create'}
-						class:color_c={row.event_type === 'role_grant_revoke'}
+						class:palette_b={row.event_type === 'role_grant_create'}
+						class:palette_c={row.event_type === 'role_grant_revoke'}
 					>
 						{row.event_type === 'role_grant_create' ? 'grant' : 'revoke'}
 					</span>
diff --git a/src/lib/ui/AdminSessions.svelte b/src/lib/ui/AdminSessions.svelte
index 4bf657d0..543af321 100644
--- a/src/lib/ui/AdminSessions.svelte
+++ b/src/lib/ui/AdminSessions.svelte
@@ -36,14 +36,14 @@
 	<h1>active sessions</h1>
 	{#if admin_sessions.active_count > 0}
 		<p>
-			<span class="chip color_a">{admin_sessions.active_count} active</span>
+			<span class="chip palette_a">{admin_sessions.active_count} active</span>
 		</p>
 	{/if}
 
 	{#if admin_sessions.list.loading}
 		<p class="text_50">loading sessions...</p>
 	{:else if admin_sessions.list.error}
-		<p class="color_c_50">{admin_sessions.list.error}</p>
+		<p class="palette_c_50">{admin_sessions.list.error}</p>
 	{:else}
 		<Datatable {columns} rows={admin_sessions.sessions} height="400px">
 			{#snippet cell(column, row)}
@@ -72,7 +72,7 @@
 						pending={admin_sessions.revoke_sessions.loading(row.account_id)}
 					/>
 					{#if revoke_sessions_error}
-						<span class="color_c_50 font_size_sm">{revoke_sessions_error}</span>
+						<span class="palette_c_50 font_size_sm">{revoke_sessions_error}</span>
 					{/if}
 					<ConfirmButton
 						onconfirm={() => admin_sessions.submit_revoke_tokens(row.account_id)}
@@ -82,7 +82,7 @@
 						pending={admin_sessions.revoke_tokens.loading(row.account_id)}
 					/>
 					{#if revoke_tokens_error}
-						<span class="color_c_50 font_size_sm">{revoke_tokens_error}</span>
+						<span class="palette_c_50 font_size_sm">{revoke_tokens_error}</span>
 					{/if}
 				{:else if column.format}
 					{column.format(row[column.key], row)}
diff --git a/src/lib/ui/AdminSurface.svelte b/src/lib/ui/AdminSurface.svelte
index f6038a91..37678fab 100644
--- a/src/lib/ui/AdminSurface.svelte
+++ b/src/lib/ui/AdminSurface.svelte
@@ -45,7 +45,7 @@
 	{#if loading}
 		<p class="text_50">loading surface...</p>
 	{:else if error}
-		<p class="color_c_50">{error}</p>
+		<p class="palette_c_50">{error}</p>
 		<button type="button" onclick={() => void load()}>retry</button>
 	{:else if surface}
 		<SurfaceExplorer {surface} />
diff --git a/src/lib/ui/BootstrapForm.svelte b/src/lib/ui/BootstrapForm.svelte
index 2edfeedd..723aa940 100644
--- a/src/lib/ui/BootstrapForm.svelte
+++ b/src/lib/ui/BootstrapForm.svelte
@@ -102,7 +102,7 @@
 		/>
 	</label>
 	{#if form_state.show('username') && username && !username_valid}
-		<p class="color_c_50 font_size_sm mt_0 mb_xs">
+		<p class="palette_c_50 font_size_sm mt_0 mb_xs">
 			3-39 chars, starts with a letter, ends with letter/number, middle allows dash/underscore
 		</p>
 	{/if}
@@ -119,7 +119,7 @@
 			/>
 		</label>
 		{#if form_state.show('password') && password && password.length < PASSWORD_LENGTH_MIN}
-			<p class="color_c_50 font_size_sm mt_0 mb_xs">
+			<p class="palette_c_50 font_size_sm mt_0 mb_xs">
 				password must be at least {PASSWORD_LENGTH_MIN} characters
 			</p>
 		{/if}
@@ -135,7 +135,7 @@
 			/>
 		</label>
 		{#if form_state.show('password_confirm') && password && password_confirm && !passwords_match}
-			<p class="color_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
+			<p class="palette_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
 		{/if}
 	</fieldset>
 	<div class="row gap_sm">
@@ -143,12 +143,12 @@
 			pending={auth_state.verifying}
 			disabled={auth_state.verifying}
 			onclick={handle_bootstrap}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			create account
 		</PendingButton>
 	</div>
 	{#if auth_state.verify_error}
-		<p class="color_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
+		<p class="palette_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
 	{/if}
 </form>
diff --git a/src/lib/ui/ConfirmButton.svelte b/src/lib/ui/ConfirmButton.svelte
index c2e3dc96..8be86cde 100644
--- a/src/lib/ui/ConfirmButton.svelte
+++ b/src/lib/ui/ConfirmButton.svelte
@@ -130,7 +130,7 @@
 		{:else}
 			<button
 				type="button"
-				class="color_c bg_100"
+				class="palette_c bg_100"
 				class:icon_button={!popover_button_content}
 				onclick={() => confirm(popover)}
 				title={rest.title ? `confirm ${rest.title}` : 'confirm'}
diff --git a/src/lib/ui/Datatable.svelte b/src/lib/ui/Datatable.svelte
index 08209674..30a5fd3e 100644
--- a/src/lib/ui/Datatable.svelte
+++ b/src/lib/ui/Datatable.svelte
@@ -178,7 +178,7 @@
 	}
 
 	.datatable-resize-handle:hover {
-		background: var(--color_a_10);
+		background: var(--palette_a_10);
 	}
 
 	.datatable-row {
diff --git a/src/lib/ui/LoginForm.svelte b/src/lib/ui/LoginForm.svelte
index 3e6d42ed..3a9bdbb3 100644
--- a/src/lib/ui/LoginForm.svelte
+++ b/src/lib/ui/LoginForm.svelte
@@ -99,12 +99,12 @@
 			pending={auth_state.verifying}
 			disabled={auth_state.verifying}
 			onclick={handle_login}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			log in
 		</PendingButton>
 	</div>
 	{#if auth_state.verify_error}
-		<p class="color_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
+		<p class="palette_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
 	{/if}
 </form>
diff --git a/src/lib/ui/OpenSignupToggle.svelte b/src/lib/ui/OpenSignupToggle.svelte
index 62bc1792..91ea3b58 100644
--- a/src/lib/ui/OpenSignupToggle.svelte
+++ b/src/lib/ui/OpenSignupToggle.svelte
@@ -40,8 +40,8 @@
 		</label>
 	{/if}
 	{#if app_settings.list.error}
-		<p class="color_c_50">{app_settings.list.error}</p>
+		<p class="palette_c_50">{app_settings.list.error}</p>
 	{:else if app_settings.update.error}
-		<p class="color_c_50">{app_settings.update.error}</p>
+		<p class="palette_c_50">{app_settings.update.error}</p>
 	{/if}
 </div>
diff --git a/src/lib/ui/RoleGrantOfferForm.svelte b/src/lib/ui/RoleGrantOfferForm.svelte
index e91c07de..371a3ae3 100644
--- a/src/lib/ui/RoleGrantOfferForm.svelte
+++ b/src/lib/ui/RoleGrantOfferForm.svelte
@@ -151,6 +151,6 @@
 	</div>
 
 	{#if local_error}
-		<p class="color_c_50 font_size_sm mt_xs mb_0">{local_error}</p>
+		<p class="palette_c_50 font_size_sm mt_xs mb_0">{local_error}</p>
 	{/if}
 </form>
diff --git a/src/lib/ui/RoleGrantOfferHistory.svelte b/src/lib/ui/RoleGrantOfferHistory.svelte
index 69702202..0135c2f0 100644
--- a/src/lib/ui/RoleGrantOfferHistory.svelte
+++ b/src/lib/ui/RoleGrantOfferHistory.svelte
@@ -54,14 +54,14 @@
 	const status_chip_class = (status: string): string => {
 		switch (status) {
 			case 'accepted':
-				return 'chip color_b';
+				return 'chip palette_b';
 			case 'pending':
-				return 'chip color_a';
+				return 'chip palette_a';
 			case 'declined':
 			case 'retracted':
 			case 'superseded':
 			case 'expired':
-				return 'chip color_c';
+				return 'chip palette_c';
 			default:
 				return 'chip';
 		}
@@ -85,7 +85,7 @@
 	{#if role_grant_offers.list_history.loading}
 		<p class="text_50">loading history...</p>
 	{:else if role_grant_offers.list_history.error}
-		<p class="color_c_50">{role_grant_offers.list_history.error}</p>
+		<p class="palette_c_50">{role_grant_offers.list_history.error}</p>
 	{:else}
 		<Datatable {columns} rows={role_grant_offers.history} height="400px" row_key="id">
 			{#snippet cell(column, row)}
diff --git a/src/lib/ui/RoleGrantOfferInbox.svelte b/src/lib/ui/RoleGrantOfferInbox.svelte
index 84b5a282..91bfbfeb 100644
--- a/src/lib/ui/RoleGrantOfferInbox.svelte
+++ b/src/lib/ui/RoleGrantOfferInbox.svelte
@@ -49,7 +49,7 @@
 	<h2>pending offers</h2>
 
 	{#if role_grant_offers.list.error || role_grant_offers.accept.error || role_grant_offers.decline.error}
-		<p class="color_c_50">
+		<p class="palette_c_50">
 			{role_grant_offers.list.error ??
 				role_grant_offers.accept.error ??
 				role_grant_offers.decline.error}
@@ -63,7 +63,7 @@
 			{#each role_grant_offers.incoming as offer (offer.id)}
 				<li class="box p_md column gap_sm">
 					<div class="row gap_sm align_center">
-						<span class="chip color_a">{format_role(offer.role)}</span>
+						<span class="chip palette_a">{format_role(offer.role)}</span>
 						<span class="text_50 font_size_sm">{scope_label(offer.scope_id, offer.role)}</span>
 						<span class="text_50 font_size_sm">from {format_actor(offer.from_actor_id)}</span>
 						<span
@@ -83,7 +83,7 @@
 							pending={role_grant_offers.accept.loading}
 							disabled={role_grant_offers.accept.loading}
 							onclick={() => role_grant_offers.submit_accept(offer.id)}
-							class="color_b"
+							class="palette_b"
 						>
 							accept
 						</PendingButton>
@@ -114,7 +114,7 @@
 										></textarea>
 									</label>
 									<div class="row gap_sm">
-										<button type="button" class="color_c bg_100" onclick={confirm}>
+										<button type="button" class="palette_c bg_100" onclick={confirm}>
 											confirm decline
 										</button>
 										<button type="button" onclick={() => popover.hide()}>cancel</button>
diff --git a/src/lib/ui/SignupForm.svelte b/src/lib/ui/SignupForm.svelte
index 5be35d38..f900759e 100644
--- a/src/lib/ui/SignupForm.svelte
+++ b/src/lib/ui/SignupForm.svelte
@@ -89,7 +89,7 @@
 		/>
 	</label>
 	{#if form_state.show('username') && username && !username_valid}
-		<p class="color_c_50 font_size_sm mt_0 mb_xs">
+		<p class="palette_c_50 font_size_sm mt_0 mb_xs">
 			3-39 chars, starts with a letter, ends with letter/number, middle allows dash/underscore
 		</p>
 	{/if}
@@ -117,7 +117,7 @@
 			/>
 		</label>
 		{#if form_state.show('password') && password && password.length < PASSWORD_LENGTH_MIN}
-			<p class="color_c_50 font_size_sm mt_0 mb_xs">
+			<p class="palette_c_50 font_size_sm mt_0 mb_xs">
 				password must be at least {PASSWORD_LENGTH_MIN} characters
 			</p>
 		{/if}
@@ -133,7 +133,7 @@
 			/>
 		</label>
 		{#if form_state.show('password_confirm') && password && password_confirm && !passwords_match}
-			<p class="color_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
+			<p class="palette_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
 		{/if}
 	</fieldset>
 	<div class="row gap_sm">
@@ -141,12 +141,12 @@
 			pending={auth_state.verifying}
 			disabled={auth_state.verifying}
 			onclick={handle_signup}
-			class={auth_state.verify_error ? 'color_c' : ''}
+			class={auth_state.verify_error ? 'palette_c' : ''}
 		>
 			sign up
 		</PendingButton>
 	</div>
 	{#if auth_state.verify_error}
-		<p class="color_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
+		<p class="palette_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
 	{/if}
 </form>
diff --git a/src/lib/ui/SurfaceExplorer.svelte b/src/lib/ui/SurfaceExplorer.svelte
index 48e43a04..b925fd50 100644
--- a/src/lib/ui/SurfaceExplorer.svelte
+++ b/src/lib/ui/SurfaceExplorer.svelte
@@ -87,10 +87,10 @@
 	};
 
 	const auth_chip_class = (auth: RouteAuth): string => {
-		if (is_public_auth(auth)) return 'chip color_b';
-		if (is_keeper_auth(auth)) return 'chip color_c';
-		if (is_role_auth(auth)) return 'chip color_d';
-		if (is_plain_authenticated_auth(auth)) return 'chip color_a';
+		if (is_public_auth(auth)) return 'chip palette_b';
+		if (is_keeper_auth(auth)) return 'chip palette_c';
+		if (is_role_auth(auth)) return 'chip palette_d';
+		if (is_plain_authenticated_auth(auth)) return 'chip palette_a';
 		return 'chip';
 	};
 
@@ -100,12 +100,12 @@
 <section>
 	<div class="row" style:gap="var(--space_md)" style:flex-wrap="wrap" style:align-items="center">
 		<span class="chip">{surface.routes.length} routes</span>
-		{#if summary.none > 0}<span class="chip color_b">{summary.none} public</span>{/if}
-		{#if summary.authenticated > 0}<span class="chip color_a"
+		{#if summary.none > 0}<span class="chip palette_b">{summary.none} public</span>{/if}
+		{#if summary.authenticated > 0}<span class="chip palette_a"
 				>{summary.authenticated} authenticated</span
 			>{/if}
-		{#if role_count > 0}<span class="chip color_d">{role_count} role</span>{/if}
-		{#if summary.keeper > 0}<span class="chip color_c">{summary.keeper} keeper</span>{/if}
+		{#if role_count > 0}<span class="chip palette_d">{role_count} role</span>{/if}
+		{#if summary.keeper > 0}<span class="chip palette_c">{summary.keeper} keeper</span>{/if}
 		<span class="chip">{surface.middleware.length} middleware</span>
 		{#if rpc_method_count > 0}<span class="chip">{rpc_method_count} rpc methods</span>{/if}
 		{#if ws_method_count > 0}<span class="chip">{ws_method_count} ws methods</span>{/if}
@@ -113,7 +113,7 @@
 		{#if surface.events.length}<span class="chip">{surface.events.length} events</span>{/if}
 		{#if surface.diagnostics.length}{@const warnings = surface.diagnostics.filter(
 				(d: AppSurfaceDiagnostic) => d.level === 'warning',
-			)}{#if warnings.length}<span class="chip color_e"
+			)}{#if warnings.length}<span class="chip palette_e"
 					>{warnings.length} warning{warnings.length === 1 ? '' : 's'}</span
 				>{/if}{/if}
 	</div>
@@ -376,10 +376,10 @@
 				<code>{endpoint.path}</code>
 				<span class="chip">{endpoint.methods.length} methods</span>
 				{#each endpoint.required_roles as role (role)}
-					<span class="chip color_d">role:{role}</span>
+					<span class="chip palette_d">role:{role}</span>
 				{/each}
 				{#each endpoint.allowed_origins as origin (origin)}
-					<span class="chip color_b"><code>{origin}</code></span>
+					<span class="chip palette_b"><code>{origin}</code></span>
 				{/each}
 			</div>
 			{#if endpoint.methods.length === 0}
@@ -457,7 +457,9 @@
 				<tbody>
 					{#each surface.diagnostics as d, i (i)}
 						<tr>
-							<td><span class={d.level === 'warning' ? 'chip color_e' : 'chip'}>{d.level}</span></td
+							<td
+								><span class={d.level === 'warning' ? 'chip palette_e' : 'chip'}>{d.level}</span
+								></td
 							>
 							<td><code>{d.category}</code></td>
 							<td>{d.message}</td>