About this design system
What this is, what’s in it, and how it reaches ComPsych’s products.
What this is
This is the design system for ComPsych’s web and mobile products. It defines the visual language — color, typography, spacing, elevation — and the components built on top of that language. The system is structured to theme across ComPsych’s four products (GRO, CRC, GN, FMLA) and to support white-labeling for future brand partners.
What’s in this system
The values that define how everything looks. Organised in four tiers so the system stays clean as it grows.
The source of truth for how each component should behave, look, and respond. Authoritative — framework code is generated from them, not the other way around.
This site. A living showcase of the system, used for walkthroughs and visual verification.
Written instructions for ComPsych’s Angular and React Native teams on how to consume the system in their codebases.
How this reaches ComPsych’s products
ComPsych’s Angular (web) and React Native (mobile) teams adopt this system by importing it as a package in their existing codebases. They then use Claude Code — the AI coding assistant they already use — to generate framework-specific components that follow the specifications in this system.
Konpo Studio maintains the tokens, specifications, and this reference app. ComPsych’s engineering teams own the framework-specific implementations.
Installing in your codebase
The system ships as the npm package @javierkonpo/design-system, hosted on GitHub Packages. Adopting it in an Angular or React Native project takes three steps.
Add a .npmrc at your project root that points the @javierkonpo scope at GitHub Packages and reads a token from the environment.
@javierkonpo:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}One command pulls the token bundles and component specifications into your project.
npm install @javierkonpo/design-system
Pick the brand × product bundle your build targets. Angular imports the CSS file; React Native imports the typed sys object.
// Angular (src/styles.scss)
@import '@javierkonpo/design-system/themes/compsych-gro.css';
// React Native
import { sys } from '@javierkonpo/design-system/themes/compsych-gro';For the fastest path, copy the drop-in CLAUDE.md from adopters/angular/ or adopters/react-native/ into your project root. Any Claude Code session that opens the project will then follow the system’s rules automatically — only sys.* tokens in UI code, matching the spec’s API exactly, honoring the sys.elevation.level* roles, etc. Full walkthrough and troubleshooting in INSTALL.md.