06 · Design system

Dimension

06 · Design system

Platform

shadcn/ui + Structured Liquidity + Construct

shadcn/ui

Open component foundation used through the Structured Liquidity design system. Ecosystem standard · authority: Shared

Structured Liquidity

The shared theme and tokens every Exo app and Construct page uses. Core standard · authority: Structured Liquidity

Construct

Content management for websites, landing pages, marketing sites, and comparison pages. Ecosystem standard · authority: Construct

Status

Design system: Live. Enforced in this repository by pnpm check:ui-system, which runs inside pnpm lint. Pages: Construct is live on staging at staging.exo.now/construct; Pages stage at staging.construct.page.

What it isCopy Anchor Link

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).

PagesCopy Anchor Link

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). Components and theming are a separate dimension: Design system.

PlatformCopy Anchor Link

• 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.

PagesCopy Anchor Link

• 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 replaceabilityCopy Anchor Link

• 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).

PagesCopy Anchor Link

• Construct owns Page and website editing, Puck, publishing, Page authorization, and authenticated Surfaces, on its own Convex-native model, with no Payload (ADR 0003).
• Exo knows Pages only as typed resources for grants, routing, deployment evidence, and aggregate policy (architecture).
• 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).

Cost notesCopy Anchor Link

shadcn/ui is open source. Structured Liquidity is first-party. No cost figure is recorded: TBD.

PagesCopy Anchor Link

Construct operating cost per site: TBD. Puck is open source. Construct's AI generation goes through exo-router (endpoint POST /v1/ai/generate), so its model spend is recorded in exoAiBrokerJobs.

StatusCopy Anchor Link

• 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).

PagesCopy Anchor Link

• 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).