Kili Design System

Preview index · preview/shells/ · preview/components/

Six structural shells define every screen in Kili. A shell is the outermost container — it provides the chrome (sidebar, topbar, secondary nav) that content layouts and overlays sit inside. Pick the right shell first; the content layout follows. Component previews under preview/components/ show controls and patterns (buttons, inputs, modals, navigation) built on the same tokens.

Open components ↗

Shell structures

6 shells
# Shell Description Used for Previews
1
Auth
No nav · No sidebar

Centered card on a warm-cream page. No navigation chrome. Identity and trust are established through the brand wordmark alone.
Login Forgot password Reset password Onboarding wizard
Open ↗ Mobile Tablet
2
Full Canvas
No chrome at all

Viewport-filling content with zero surrounding chrome. The page background and content own the full screen — suitable for print and public-facing views.
Print preview PDF export Public invoice Error pages
Open ↗
3
Sidebar + Topbar
Sidebar open · 240px

The primary working layout. Sidebar fully visible with module labels and group headings. Maximum orientation for users moving between modules.
Dashboard List pages Detail pages Settings Reports
Open ↗ Mobile Tablet
4
Sidebar + Topbar
Sidebar collapsed · 56px icon-only

Same structure as Shell 3, sidebar reduced to icon-only. User-toggled. Reclaims horizontal space for data-heavy screens and wide tables.
Wide tables Data grids Smaller screens
Open ↗ Mobile Tablet
5
Sidebar + Topbar + Secondary Nav
Three-level hierarchy · 44px sub-nav

Adds a horizontal secondary nav bar below the topbar for section-level navigation within a module. Supports deep module hierarchies without losing context.
Finance → AP → Invoices HR → Payroll → Run Settings → Company → Billing
Open ↗ Mobile Tablet
5b
Dual Sidebar
Primary (dark 240px) + Secondary (light 200px)

Primary dark sidebar for module-level nav + a second vertical panel for section-level nav within the active module. Richer hierarchy than a tab bar; best for deep configuration areas.
Settings HR configuration Accounting periods Admin panels
Open ↗ Mobile Tablet
6
Topbar Only
No sidebar · Focused flow

Topbar with a centered step indicator. No sidebar. Removes module navigation to keep the user focused on completing a multi-step task.
Create PO wizard Onboarding flow Multi-step forms
Open ↗ Mobile Tablet

Component previews

6 previews + hub
Component Description Category Preview
Components hub
components/index.html

Card grid index for browsing component documentation. Each card links to a focused demo page with variants and states.
Index
Open ↗
Buttons
components/buttons.html

Primary, secondary, ghost, and danger variants. Sizes sm, md, lg. Interactive states including loading and disabled.
Form controls
Open ↗
Form inputs
components/inputs.html

Text input, textarea, select, checkbox, radio group, and toggle switch — with error and disabled states.
Form controls
Open ↗
Chips & badges
components/chips.html

Status chips with colored dot and label. Workflow statuses aligned with record states in the product.
Display
Open ↗
Modals & dialogs
components/modals.html

Confirmation dialogs and quick-create style panels. Focus-trapped patterns with clear primary and dismiss actions.
Feedback
Open ↗
Sidebar navigation
components/sidebar-nav.html

Module groups with labels, nested items, collapsible sub-menus, active state, optional module toggle, and System settings entry.
Navigation
Open ↗
Odoo-style form view
components/forms.html

Composite record layout: topbar, secondary module nav, breadcrumb, action bar, workflow status bar, stat buttons, and tabbed form body.
Layout
Open ↗

How shells nest

Shell 1  Auth shell              → Login · Reset password · Onboarding wizard
Shell 2  Full canvas             → Print · PDF export · Public invoice · Error pages
│
Shell 3 / 4  Sidebar + Topbar    (open 240px  ·  collapsed 56px)
├── List page                   Filters · search · bulk actions · pagination
├── Detail page                 Record header · status chip · tabbed content
├── Detail + side panel         Main record left · activity feed right
├── Form page                   Single-column · two-column · live preview
├── Split view                  Master list left · detail right
├── Dashboard                   Metric cards · charts · no tables
├── Report                      Filter bar · chart hero · data table
└── Settings                    Category list left · settings form right
    │
Shell 5  + Secondary nav          Finance → AP → Invoices  ·  HR → Payroll
    │
    └── Overlays (sit on any content layout)
        ├── Modal        Confirmation · quick-create · alert
        ├── Drawer       Edit record · notifications · filters
        └── Command palette  Global search · quick navigation
│
Shell 6  Topbar only             → Multi-step wizards · Post-login onboarding

Shell dimensions

Token Value Applied to
--sidebar-width-open 240px Shells 3, 5 — sidebar with labels
--sidebar-width-collapsed 56px Shell 4 — icon-only sidebar
--topbar-height 56px Shells 3, 4, 5, 6 — top navigation bar
--secondary-nav-height 44px Shell 5 only — section tabs within a module
--bg-sidebar #2C2C2A (light) · #111110 (dark) Sidebar background — dark in both themes
--secondary-sidebar-width 200px Shell 5b only — secondary vertical sidebar
--bg-topbar #FFFFFF (light) · #242320 (dark) Topbar background