Interface Overview
Applies to: All tiers Last updated: 26-Feb-2026
Overview​
Kazinex runs entirely in your browser as a single-page application. This page covers the core interface elements: theme system, tab navigation, responsive layout, and the client-side processing model that keeps your data private.
Theme System​
Kazinex uses a Fluent UI-compatible theme built on the P6 design token system.
| Feature | Description |
|---|---|
| Light Mode | Default. Clean white and slate surfaces with teal accents |
| Dark Mode | Detected automatically from your browser or OS preference |
| Glassmorphism | Frosted-glass card surfaces with backdrop-filter: blur() effects |
| P6 Tokens | Colour palette inspired by Primavera P6 with 16 brand variants (shades 10–160) |
The theme adapts automatically — there is no manual toggle. All components, including the Gantt chart, grid, dialogs, and cards, respect the active theme.
Tab Navigation​
The main interface is organised into tabs. The tab bar adapts to your screen size:
Desktop (1024 px and above)​
Full-width horizontal tabs with icons, labels, hover effects, and keyboard navigation. An animated ink bar highlights the active tab.
Tablet (768–1023 px)​
Compact horizontal tabs with smaller icons and labels. Uses the same ink bar animation in a tighter layout.
Mobile (below 768 px)​
A bottom navigation bar replaces the top tabs — similar to iOS and Android native apps. Features:
- Fixed to the bottom of the screen
- Touch-friendly targets (minimum 48 px)
- Glassmorphism background effect
- Safe area insets for devices with notches
aria-current="page"on the active tab
Available Tabs​
| Tab | Description |
|---|---|
| Projects | Upload and manage schedules |
| Activities | Grid + Gantt view of activities |
| Comparison | Compare current vs baseline |
| Quality | Run and review quality checks |
| Resources | Resource management and histograms |
| Editor | Create and modify schedules (Pro+) |
| AI Copilot | Chat with the AI assistant (Pro+) |
Responsive Layout​
The interface adapts across four breakpoints:
| Breakpoint | Width | Layout |
|---|---|---|
| Mobile | < 768 px | Single column, bottom nav, drawers slide from bottom |
| Tablet | 768–1023 px | Two columns where applicable, compact tabs |
| Desktop | 1024–1279 px | Full multi-panel layout, side drawers |
| Large Desktop | ≥ 1280 px | Extra column space, wider panels |
Responsive Behaviours​
| Element | Mobile | Desktop |
|---|---|---|
| Spacing | 12 px padding, 8 px gutters | 24 px padding, 16 px gutters |
| Modals | 95% viewport width | Fixed pixel width |
| Drawers | Slide from bottom | Slide from right |
| Project Grid | 1 column | 3–4 columns |
| Touch Targets | Minimum 44 px (Apple/Google guideline) | Standard button sizes |
Client-Side Processing​
All schedule parsing, quality analysis, and editing happens entirely in your browser. No schedule data is uploaded to any server.
Privacy Guarantees​
| Guarantee | Detail |
|---|---|
| Zero server uploads | No file upload endpoints exist — parsing is 100% client-side |
| Instant processing | No network latency for file analysis |
| Works offline | Once the app is loaded, core analysis features work without an internet connection |
| GDPR compliant | No schedule data collection means automatic compliance |
| No backend vulnerabilities | Your files cannot be breached on a server because they are never sent to one |
| Local storage only | Only lightweight metadata (settings, preferences) is stored in browser storage |
Trust Badges​
Throughout the application, Trust Badges confirm that processing is client-side:
- A compact pill badge in the comparison selector reads: "Client-side processing • Your files never leave this browser"
- The Security page on the marketing site provides full details
Error Boundaries​
If an unexpected error occurs in any section of the app, an error boundary catches it and displays a recovery message instead of crashing the entire application. You can reload just the affected section without losing work in other tabs.
Tips & Best Practices​
- If the interface feels cramped, try zooming out your browser (Ctrl+Minus) or expanding the window
- On mobile, swipe between tabs using the bottom navigation bar
- Dark mode activates automatically based on your system preference — no manual toggle is needed
- All data stays in your browser. You can verify this by opening your browser's Network tab — no schedule data is transmitted
Related Documentation​
- Keyboard Shortcuts — All keyboard shortcuts
- Supported Formats — Import and export formats
- Security — Full security and privacy details