# 06 · Design system https://exo.now/docs/stack/design-system > Every Exo app uses shadcn/ui components with the Structured Liquidity theme; websites and pages are built and published in Construct. ## What it is [#what-it-is] Every app uses the same open-source components, styled with the Structured Liquidity theme (the stack description on exo.now). The Structured Liquidity foundation is mandatory for every Exo-managed application, Exo-owned interface, management surface, and first-party template ([design standard](../../../docs/design-standard.md)). ### Pages [#pages] Landing pages, marketing sites, and comparison pages are written, laid out, and published in Construct, Exo's content management system for websites. **Construct owns presentation and page organization; Exo owns function** (identity, deployment, access, data, and [Exo Router](../platform/exo-router.mdx)). Components and theming are a separate dimension: [Design system](./design-system.mdx). ## Platform [#platform] * **shadcn/ui** is the open component foundation. Managed frontend work starts from the repository's shadcn configuration (`components.json`, `new-york` baseline) and composes primitives from `src/components/ui` instead of raw interactive controls. * **Structured Liquidity** is the shared theme and tokens every Exo app and Construct page uses. Its three dimensions are Neobrutalist structure, Liquid motion, and Scientific modern clarity, and Construct is its canonical first-party expression. ### Pages [#pages-1] * **Construct** is a first-party Interspace App and the Page platform (catalog layer: CMS, authority Construct). * **Puck** is open-source visual page composition inside Construct. ## Boundary and replaceability [#boundary-and-replaceability] * **One foundation, many expressions.** Tenants may replace palette, typography, imagery, and content density through their documented token and brand contracts, but they must keep the Structured Liquidity and shadcn component foundation and the platform accessibility, responsiveness, performance, and semantic-control rules. * **Controlled visual vocabulary.** No more than two actual typefaces mapped to display, body, and detail roles, seven semantic size tiers, four weight tiers, and semantic color roles instead of component-local values. Exo-owned surfaces keep `--radius: 0px`. * **Design exports as tokens.** Design is part of the tenant export ([portability](../../../docs/portability.md)). ### Pages [#pages-2] * Construct owns Page and website editing, Puck, publishing, Page authorization, and authenticated Surfaces, on its own Convex-native model, with no Payload ([ADR 0003](../../../docs/adr/0003-convex-first-control-plane.md)). * Exo knows Pages only as typed resources for grants, routing, deployment evidence, and aggregate policy ([architecture](../../../docs/architecture.md)). * Portability: the tenant export includes Puck data plus the component contract and migrations needed to interpret it, and a framework-neutral static HTML fallback for published pages ([portability](../../../docs/portability.md)). ## Cost notes [#cost-notes] shadcn/ui is open source. Structured Liquidity is first-party. No cost figure is recorded: **TBD**. ### Pages [#pages-3] Construct operating cost per site: **TBD**. Puck is open source. Construct's AI generation goes through [Exo Router](../platform/exo-router.mdx) (endpoint `POST /v1/ai/generate`), so its model spend is recorded in `exoAiBrokerJobs`. ## Status [#status] * **Live and enforced:** `node scripts/check-structured-liquidity-ui.mjs` checks the shadcn configuration, required primitives, and foundation tokens, and `node scripts/check-visual-vocabulary.mjs` ratchets inherited raw font, size, weight, and color declarations against a baseline. Both run through `pnpm check:ui-system` inside `pnpm lint`. * These docs use the same tokens: `src/app/(docs)/docs.css` maps Fumadocs tokens onto the Exo tokens ([maintaining these docs](../contributing.mdx)). ### Pages [#pages-4] * **Live:** Construct App at `https://staging.exo.now/construct`, verified at Construct commit `875ac2e`. Construct-managed Pages stage at `https://staging.construct.page/{page}`, migrating Page by Page ([staging topology](../../../docs/staging-topology.md)).