name: AB Admin Design System
description: Dense, read-mostly operator console with one teal accent, bordered surfaces, and strict network-gated admin posture.
colors:
bg: "oklch(0.96 0.006 248)"
surface: "oklch(1 0 0)"
panel: "oklch(0.985 0.004 248)"
ink: "oklch(0.2 0.012 248)"
muted: "oklch(0.45 0.018 248)"
muted2: "oklch(0.55 0.018 248)"
line: "oklch(0.88 0.014 248)"
accent: "oklch(0.47 0.09 178)"
accentStrong: "oklch(0.36 0.08 178)"
accentTint: "oklch(0.955 0.025 178)"
danger: "oklch(0.5 0.16 25)"
success: "oklch(0.55 0.1 150)"
warning: "oklch(0.62 0.14 70)"
info: "oklch(0.55 0.13 250)"
typography:
body-md: { fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 14px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
label-sm: { fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 12px, fontWeight: 800, lineHeight: 1.3, letterSpacing: 0.05em }
heading-lg: { fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 24px, fontWeight: 800, lineHeight: 1.2, letterSpacing: 0 }
metric-xl: { fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 36px, fontWeight: 800, lineHeight: 1, letterSpacing: 0 }
rounded: { sm: 6px, md: 8px, pill: 999px }
spacing: { xxs: 4px, xs: 6px, sm: 8px, md: 12px, lg: 16px, xl: 24px, xxl: 32px }
components:
shell: "248px sidebar plus fluid workspace; collapses at existing responsive breakpoints."
panel: "White surface, 1px line border, 8px radius, no decorative shadow stacking."
button: "40px minimum height, 8px radius, border-first secondary style; one accent-filled primary per view."
metricTile: "Uppercase tracked label, large tabular value, optional half-size unit."
status: "Small color token plus text; never color alone."Overview
AB Admin is a network-gated operator console. The design language is quiet, dense, and accountable: information belongs in panels, primary actions are scarce, and the single teal accent marks active or selected states only.
Colors
The token source is src/app/globals.css. The palette uses three surface levels: bg for the page, surface for cards and panels, and panel for nested rows. Text moves from ink to muted and muted2. Status colors are available, but they must be paired with labels or icons.
Typography
Use the system sans stack already defined on :root. Headings are compact and strong; labels are uppercase, tracked, and small. Metrics should use tabular numerals and avoid shrinking large values into unreadable strings.
Layout
The desktop shell is a sidebar and workspace. New top-level content belongs in the workspace as a vertical stack of panels. Use the established 4px-derived spacing rhythm instead of arbitrary gaps.
Elevation & Depth
Depth is mostly border-based. Shadows are restrained and reserved for modal or login-like surfaces. Avoid nested card stacks; use the panel token for one inner level.
Shapes
Use an 8px radius for panels, cards, buttons, inputs, and brand marks. Use 6px only for small internal controls and 999px only for badges or pills.
Components
Buttons use border-first defaults, with one accent-filled primary action per view. Inputs are 42px high and label-led. Data lists should keep status text adjacent to status color. Metrics use label, value, and optional comparison.
Do's and Don'ts
Do keep the console grayscale with sparse teal emphasis. Do add new tokens in :root before using them. Do design empty, loading, error, and success states. Don't widen the default security posture through copy or UI. Don't use accent as body text, broad fill, or decorative gradient.