name: Local Link Kr Admin Design System
description: Compact operator dashboard with green accent, white panels, four-up metrics, and report-list scanning.
colors:
bg: "#f5f6f4"
surface: "#ffffff"
text: "#16201c"
muted: "#66726d"
accent: "#0f7a5f"
danger: "#a33a2b"
border: "#d9dfd9"
typography:
body-md: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 14px, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }
title-lg: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 28px, fontWeight: 800, lineHeight: 1.15, letterSpacing: 0 }
panel-title: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 16px, fontWeight: 700, lineHeight: 1.3, letterSpacing: 0 }
metric-md: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 18px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
rounded: { md: 8px, pill: 999px }
spacing: { sm: 8px, md: 10px, lg: 12px, xl: 18px, xxl: 28px }
components:
shell: "Centered 1080px admin shell with top header and content panels."
metricGrid: "Four equal columns with 12px gap; collapses to one column on narrow screens."
iconButton: "40px square bordered button with 8px radius."
reportRow: "Three-column report row with top border and accent emphasis for status."Overview
Local Link Kr Admin is an operator dashboard. It should stay compact, utilitarian, and easy to scan. The design uses a small token set, minimal visual effects, and a green accent for important operational markers.
Colors
The background is a pale warm gray, panels are white, text is dark green-black, and the accent is a saturated green. Danger is a muted red-brown and should be used only for errors or destructive warnings.
Typography
The Inter/system stack is used throughout. Titles are 28px, panel headings are 16px, and body text inherits the browser-normal 14px rhythm. Metrics are intentionally smaller than marketing KPIs because this surface is operational.
Layout
Use the centered admin shell with 20px horizontal padding. Keep the header separated by a border. Metrics use a four-column grid; report rows use a three-column grid until responsive collapse.
Elevation & Depth
There are no shadows in the source style. Depth comes from white panels on gray background and 1px borders.
Shapes
Use the single 8px radius for panels, metrics, and buttons. Do not introduce rounded card variants.
Components
Icon buttons are 40px square. Metrics are bordered boxes with a strong value and small label. Report rows align title, details, and action/status in three columns.
Do's and Don'ts
Do keep dashboard rows terse. Do use accent text for status emphasis. Don't add decorative cards, shadows, or large imagery. Don't hide errors with color alone; pair danger text with explicit copy.