01 / Direction
Core design principles
The interface must feel calm, precise, trustworthy, and efficient. Enterprise software is used repeatedly under time pressure, so clarity and predictable behavior take priority over decoration.
Operational clarity
Prioritize scanability, comparison, status, totals, filters, and direct actions. Users should understand the page within seconds.
Consistent hierarchy
Every module uses the same page shell, spacing rhythm, typography, buttons, metrics, forms, tables, and feedback states.
Controlled expression
Use the blue-to-teal brand gradient only for high-value identity and primary action moments. Most surfaces remain neutral.
Data first
Charts summarize; tables verify. Never hide important operational facts behind visual effects or excessive cards.
Complete states
Design loading, empty, error, disabled, success, permission-limited, and destructive states with the same care as the default state.
Theme parity
Dark mode is not an inversion. It uses deliberate surfaces, borders, text contrast, and softened semantic colors.
02 / Foundations
Color system
Neutral slate colors carry the interface. Blue and teal establish identity. Emerald, amber, and rose communicate operational meaning.
03 / Brand application
Gradient usage
The brand gradient runs from blue to teal at approximately 45 degrees. It signals identity and priority, not decoration.
Approved applications
Primary buttons, module/page icons, logo marks, selected brand text, progress emphasis, and rare hero accents.
Neutral by default
Cards, forms, tables, sidebars, modals, page backgrounds, report bodies, and repeated controls must use neutral surfaces.
Use gradients when
- The element is the single primary action.
- The element represents the product or module identity.
- The gradient occupies a small, controlled area.
- White text maintains strong contrast.
Do not use gradients for
- Page backgrounds or every card.
- Table rows, form fields, or secondary actions.
- Decorative blobs, orbs, or visual noise.
- Semantic states such as success or error.
04 / Type
Typography
Instrument Sans is the preferred family. System sans-serif is the fallback. Use weight and spacing to create hierarchy; do not rely on oversized type in operational screens.
05 / Rhythm
Spacing system
Use a 4px base grid. The dominant operational rhythm is 8, 12, 16, 20, 24, and 32 pixels.
06 / Geometry
Borders and corner radius
Radius communicates scale. Controls stay compact; page-level containers may be softer. Avoid excessive pill shapes and nested rounded containers.
07 / Depth
Elevation and surfaces
Depth should be subtle. Borders carry most structure; shadows provide separation from the canvas, not a floating-card aesthetic.
Level 0
Inputs, table rows, inline panels. Border first, almost no shadow.
Level 1
Standard cards, metric panels, data tables, and page headers.
Level 2
Modals, menus, sticky overlays, and temporary high-priority surfaces.
08 / Composition
Page layout
Application pages use a constrained 1280px content column, 24px vertical rhythm, a shared page header, and full-width section flow.
Financial Management
Accounts Receivable
Monitor customer invoices, payments, aging, and collection health.
Desktop
Maximum content width: 1280px. Horizontal padding: 32px. Section gap: 24px.
Tablet
Horizontal padding: 24px. Multi-column grids reduce to two columns.
Mobile
Horizontal padding: 16px. Controls stack; tables scroll horizontally without shrinking text.
09 / Components
Core component language
Shared components are mandatory where available. Repeated page patterns must not be reimplemented with one-off styling.
Metric cards
Total Budget
MWK 48.2M
Approved portfolio ceiling
Net Income
MWK 8.4M
Current reporting period
Overdue
12
Requires operational action
Buttons and commands
Use icon-only buttons for familiar actions such as edit, delete, download, close, previous, and next. Provide a tooltip and accessible name.
10 / Input
Forms and controls
Forms must be direct, compact, labeled, keyboard-friendly, and explicit about required fields and errors.
Use the legal or operational account name.
Tax number is required.
Binary choices
Use checkboxes or switches. Do not use two text buttons for Yes/No.
Modes
Use segmented controls or tabs when choices change the current view.
Option sets
Use selects or menus when more than three mutually exclusive options exist.
11 / Data
Tables and registers
All operational lists should use the shared datatable pattern: title, description, search, export, optional selection, aligned numeric data, actions, empty state, and pagination.
| Invoice | Customer | Due | Status | Total | |
|---|---|---|---|---|---|
| INV-1042 | Northstar Holdings | 2026-07-15 | Partial | MWK 2,450,000.00 | |
| INV-1041 | Lakeview Group | 2026-06-30 | Paid | MWK 840,000.00 | |
| INV-1040 | Central Works | 2026-06-20 | Overdue | MWK 1,120,000.00 |
12 / Visualization
Charts and dashboards
Charts answer a specific operational question. Use restrained colors, clear labels, stable dimensions, and a corresponding detailed table where decisions require verification.
Budget vs actual
Grouped columns are appropriate for comparable monthly values.
Line
Use for trends over continuous time: cash, revenue, utilization, inventory value.
Bar
Use for ranking and comparison: departments, projects, vendors, status counts.
Donut
Use sparingly for 2-5 parts of a whole. Always show values and labels outside the graphic.
13 / Feedback
Semantic states
Color reinforces meaning but never carries meaning alone. Pair color with a label, icon, number, or explanatory message.
Completed or healthy
Posted, paid, approved, reconciled, on track, positive variance.
Needs attention
Pending, partial, approaching limit, draft review, due soon.
Failure or risk
Overdue, rejected, blocked, failed, overspent, destructive action.
Active context
Selected, processing, current period, informational notice.
Operational progress
Automated, connected, synchronized, billable, in progress.
Inactive or secondary
Archived, disabled, no data, informational metadata.
14 / Theme
Dark mode
Dark mode uses layered slate surfaces and reduced glare. Pure black is reserved for rare report or media contexts, not the application canvas.
Light theme
Canvas: #F8FAFC
Surface: #FFFFFF
Ink: #0F172A
Border: #E2E8F0
Dark theme
Canvas: #020617
Surface: #0F172A
Ink: #F8FAFC
Border: #1E293B
15 / Adaptation
Responsive behavior
Responsive design preserves task completion and information hierarchy. It does not merely shrink the desktop layout.
Below 640px
Single-column layouts, stacked actions, full-width inputs, horizontal table scrolling, compact page padding.
640-1024px
Two-column metric grids, adaptive toolbars, simplified supporting panels, retained navigation access.
Above 1024px
Dense multi-column dashboards, constrained content width, side-by-side comparisons, visible secondary actions.
- Text must wrap without overlapping adjacent controls.
- Fixed-format elements require stable width, height, aspect ratio, or grid tracks.
- Touch targets should be at least 40px high; 44px is preferred for mobile-first controls.
- Tables scroll horizontally instead of compressing columns into unreadable widths.
- Primary workflows must remain available at every supported viewport.
16 / Inclusion
Accessibility standard
WCAG 2.1 AA is the minimum target. Accessibility is a component requirement, not a final-stage audit task.
Required
- Visible labels for form controls.
- Keyboard access to all actions and navigation.
- Visible focus states using the blue focus ring.
- Accessible names for icon-only buttons.
- Text alternatives for charts and meaningful images.
- Reduced-motion support.
- Contrast of at least 4.5:1 for normal text.
Prohibited
- Color-only status communication.
- Placeholder-only form labels.
- Hover-only actions without keyboard access.
- Removing outlines without a replacement focus state.
- Automatic motion that cannot be reduced.
- Low-contrast muted text for important information.
17 / Engineering
Implementation tokens
Use semantic variables rather than repeating raw values. Applications may map these tokens into Tailwind, CSS modules, design-system props, or native platform tokens.
:root {
--cerp-ink: #0f172a;
--cerp-muted: #64748b;
--cerp-canvas: #f8fafc;
--cerp-surface: #ffffff;
--cerp-border: #e2e8f0;
--cerp-blue: #2563eb;
--cerp-teal: #14b8a6;
--cerp-emerald: #10b981;
--cerp-amber: #f59e0b;
--cerp-rose: #f43f5e;
--cerp-gradient: linear-gradient(45deg, var(--cerp-blue), var(--cerp-teal));
--cerp-radius-control: 12px;
--cerp-radius-card: 16px;
--cerp-radius-shell: 24px;
}
.dark {
--cerp-ink: #f8fafc;
--cerp-muted: #94a3b8;
--cerp-canvas: #020617;
--cerp-surface: #0f172a;
--cerp-border: #1e293b;
--cerp-blue: #60a5fa;
--cerp-teal: #2dd4bf;
}Required shared patterns
- Page shell with kicker, title, subtitle, icon, and actions.
- Metric card with semantic tone.
- Datatable with search, export, selection, and empty state.
- Standard modal, notification, field, and footer patterns.
Component ownership
- Fix repeated visual issues in the shared component.
- Keep business logic in feature modules.
- Do not fork shared components for minor styling differences.
- Add variants only when a repeated use case exists.
18 / Governance
Release checklist
A page is not complete until it satisfies the visual, interaction, responsive, accessibility, and state requirements below.
- Uses the shared page shell and the 1280px content constraint.
- Uses semantic color tokens and the approved blue-to-teal gradient only where appropriate.
- Uses Instrument Sans or the approved system fallback.
- Uses the 4px spacing grid and approved radius scale.
- Has no nested cards, decorative gradient blobs, or excessive pill controls.
- Uses shared datatables for operational lists.
- Provides bulk selection where multiple-record actions are useful.
- Aligns numerical data right and uses clear totals.
- Includes loading, empty, error, success, disabled, and permission states.
- Works in light and dark mode without reduced contrast.
- Works at mobile, tablet, and desktop widths without overlap.
- All controls are keyboard accessible and have visible focus states.
- Icon-only actions have tooltips and accessible names.
- Charts have labels, stable dimensions, and supporting tabular data.
- Destructive actions require clear confirmation.
- Page content includes the global application footer where the application shell requires it.