Introduction

Portal is the design system for the customer portal: atoms, Base System tokens and product composites in @sophic/portal-ui. This site is the living home of that system — browse foundations and components, see them with the real tokens in light and dark, and copy usage snippets.

What lives here

• Foundations — the Base System tokens: colors, glass, responsive behaviour, typography, spacing, radii, and how apps opt in.
• Components — each primitive with live demos, usage code, and props documentation.
• Changelog — what changed in the system, newest first.

Using components in an app

Components are consumed from the workspace packages:

import { Button } from "@sophic/portal-ui/components/ui/button";

Base System apps import @sophic/portal-ui/theme.css then @sophic/portal-ui/tokens.css (see Foundations). Apps may override any token in their own globals.css. Conventions live in docs/standards/ui.md in the repo.