Application shell

Integrated and split application chrome with an optional quiet sidebar treatment.

Pattern

Example

A representative composition rendered with the published package API.

Integrated header

Workspace

Overview

Main region

The real shell also owns collapse, drawer, inspector, and responsive geometry.

Open shell reference

Options

The decisions most consumers need to make when adopting this family.

headerLayout

integrated · split

Integrated is canonical; split remains available for compatibility.

AppSidebar treatment

omitted (default) · quiet

Quiet maps existing sidebar variables to semantic surfaces and selection roles while variant continues to control appearance.

brand chrome

AppSidebar variant="brand" · AppHeader tone="brand"

Paints the chrome Conscia burgundy in both appearances, as on conscia.com. Use them together. Controls inside switch to light-on-burgundy; the workspace stays on the neutral canvas.

Option	Values or anatomy	Guidance
`headerLayout`	integrated · split	Integrated is canonical; split remains available for compatibility.
`AppSidebar treatment`	omitted (default) · quiet	Quiet maps existing sidebar variables to semantic surfaces and selection roles while variant continues to control appearance.
`brand chrome`	AppSidebar variant="brand" · AppHeader tone="brand"	Paints the chrome Conscia burgundy in both appearances, as on conscia.com. Use them together. Controls inside switch to light-on-burgundy; the workspace stays on the neutral canvas.

Usage

Copy the package import and adapt the composition to product-owned content and state.

import { AppHeader, AppHeaderActions, AppHeaderSearch, AppHeaderStart, AppShell } from "@conscia-labs/design-system";