name: AB Server Public Frontend Design System
description: Compact operational interface for AB proof, support, login, and review flows.
colors:
bg: "#f3f5f7"
surface: "#ffffff"
panel: "#f8fafc"
ink: "#14171a"
muted: "#58616d"
line: "#d8dee6"
accent: "#0f766e"
accent-strong: "#0a5f59"
blue: "#2563a8"
danger: "#b4232a"
success: "#2f7d32"
typography:
body: { fontFamily: "ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 16px, fontWeight: 400, lineHeight: 1.48, letterSpacing: 0 }
eyebrow: { fontFamily: "ui-sans-serif, system-ui, sans-serif", fontSize: 12px, fontWeight: 800, lineHeight: 1.2, letterSpacing: 0 }
h1: { fontFamily: "ui-sans-serif, system-ui, sans-serif", fontSize: 24px, fontWeight: 700, lineHeight: 1.18, letterSpacing: 0 }
h2: { fontFamily: "ui-sans-serif, system-ui, sans-serif", fontSize: 22px, fontWeight: 700, lineHeight: 1.22, letterSpacing: 0 }
h3: { fontFamily: "ui-sans-serif, system-ui, sans-serif", fontSize: 17px, fontWeight: 700, lineHeight: 1.25, letterSpacing: 0 }
spacing:
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 24px
pageY: 28px
loginY: 32px
rounded:
md: 8px
pill: 8px
components:
appShell: { maxWidth: 1120px, minHeight: "100vh", background: "{colors.surface}", borderInline: "1px solid {colors.line}" }
topBar: { padding: "22px 24px 18px", gap: 24px, borderBottom: "1px solid {colors.line}" }
view: { padding: "18px 24px 28px" }
loginPanel: { maxWidth: 620px, padding: 22px, gap: 18px, radius: 8px }
adminReviewGrid: { columns: "minmax(280px, 0.85fr) minmax(0, 1.15fr)", gap: 14px }
panel: { padding: 14px, gap: 12px, radius: 8px, background: "{colors.panel}" }
input: { minHeight: 42px, padding: "10px 11px", radius: 8px, border: "1px solid {colors.line}" }
chip: { minHeight: 30px, padding: "5px 9px", radius: 8px, fontSize: 12px, fontWeight: 800 }Overview
The AB server frontend is a static, API-served operational interface for login, proof review, support, network checks, and admin-style workflows around the AB mobile app. Its design is intentionally conservative: dense, readable, plain CSS, and focused on reviewing evidence rather than presenting a brand campaign.
The visual source is public/styles.css in the server repository. Server domain code, database migrations, and smoke scripts live elsewhere; this document covers only the web UI served from the API repository.
Colors
The background bg frames the app, while surface is the main shell and card surface. panel is used for boxed review content, network check rows, and proof panels. line gives structure to the centered shell and dense grids.
accent and accent-strong identify the AB operational brand and role/status chips. blue is an auxiliary link or action color. danger and success must be reserved for validation, evidence status, and irreversible workflow signals.
Typography
The system uses native UI sans fonts. Heading sizes are small enough for operational pages: 24px for the primary page title, 22px for major sections, and 17px for panels. Eyebrows are uppercase, heavy, and used sparingly to label workflow areas.
Labels are 13px, muted, and heavy. This makes forms and review panels scannable without adding extra explanatory text.
Layout
The app is contained in a centered 1120px shell with full-height white surface and vertical borders. The top bar uses a two-column flex layout with page identity on the left and actions or status on the right.
The default view padding is 18px 24px 28px. Login is centered in a 620px panel. The admin review layout uses a two-column grid: a narrower control or list column and a wider proof/detail column.
Elevation & Depth
Use borders and background shifts, not heavy elevation. Panels sit on panel backgrounds with one-pixel borders. The shell itself is separated from the page background by left and right borders.
Do not add glass, shadows, or gradient backgrounds to proof review surfaces. These screens should feel auditable.
Shapes
The dominant radius is 8px. Chips and goal pills also use 8px, not a fully rounded pill, so the interface stays crisp. Inputs, login panels, network check rows, and proof panels share the same radius.
Components
.app-shell owns page containment. .top-bar owns title and top actions. .view owns page body spacing. .login-shell and .login-panel handle authentication entry.
.admin-review-grid, .admin-panel, and .proof-panel create the primary review workflow. .goal-pill and .chip-static show compact state. .auth-method-grid presents two equal authentication choices. .network-check-list displays readiness rows with a strong title and muted explanatory copy.
Inputs and textareas should always be full width, at least 42px tall, and visibly bordered. Multi-step evidence flows should prefer grids and rows over large narrative blocks.
Do's and Don'ts
Do keep admin, proof, support, and network-check screens compact and evidence-first.
Do preserve the shell, top bar, and review grid spacing so operational users can scan repeated records.
Do use semantic colors only for their states.
Don't expose credentials, internal addresses, or deployment-only values in UI text.
Don't add marketing hero layouts, decorative cards, or oversized typography to this server frontend.
Don't use ambiguous color-only status. Pair state color with clear text.