← Back Office pages ↑ General Design System

Back Office — Design System

Component library for the desktop Back Office admin — reporting, navigation and dialog components specific to Back Office, built on the general tokens.

Extends General Design System · colour, type & spacing live in design-system/tokens/

Components

Back Office-specific · desktop · reusable

Date range picker

Presets + two independent month calendars · Monday-start · future dates disabled · range highlight (primary-50 + primary caps) · OK.

Open component →

Table columns control review

Pill trigger → dropdown with a draggable, toggleable column list + «Reset all changes». HTML5 drag reorder.

Open component →

User account menu

Avatar → popover: profile · language flyout (12 languages, overlays the popover) · help · logout · footer id.

Open component →

Export modal

Header + close · selected Excel card (real icon on two stacked disc frames) · full-width «Endir» button.

Open component →

Calendar

Month-grid date picker — the Back Office reporting calendar base.

Open component →

Sidebar

Back Office left navigation — grouped nav items, sections, active/hover states.

Open component →

Add-on card

Feature / add-on tile — icon, title, description, enable action.

Open component →