OCL v3 Design System
The design system for the next generation of OCL's web applications — oclweb3 (Term Browser v3) and oclmap (OCL Mapper). Foundations, components, and patterns grounded in the React + MUI v5 code that actually ships. This site eats its own dog food: it's built with the OCL palette, Roboto typography, the real OCL logo, and the component language documented here — so what you see is what you'll build.
Sections
Foundations
Color palette, typography, elevation, and the OCL logo — rendered live from the same tokens oclweb3 uses. Click a swatch to copy its hex.
Components
Catalog of ~20 reusable components from src/components/ in oclweb3. Three exemplars (RepoChip, HTMLTooltip, RepoHeader) are fully documented; the rest are stubs that link to source.
Patterns
Page-level compositions from the Zeplin designs, grouped by area. Status badges mark what's implemented, divergent, or not yet built.
Gallery
Raw screenshot browser — every canonical Zeplin design plus current-state TBv3 screenshots. Use this when you want to scan visually.
Design Review
The April 2026 team review that drove this repo — which designs we're keeping, which we've diverged from, and where the biggest gaps are.
Source of truth
oclweb3 — the React + MUI v5 implementation. Every component page in this site links back to the real JSX. If the code and the docs disagree, the code wins.
How this site relates to the code
- Colors are hand-copied from
oclweb3/src/common/colors.jsxinto assets/tokens.css. Point-in-time — update when the app palette changes. See docs/token-sync-options.md for the long-term plan. - Typography mirrors the MUI v5 defaults because
oclweb3/src/index.jsxdoesn't override them. Roboto 400/500/700 loaded from Google Fonts. - Components each link to their source in
oclweb3/src/components/. Prop summaries are extracted by hand from the JSX signature — if the code changes, update the doc. - Patterns are drawn from the Zeplin PNGs in designs/. Status badges come from the April 2026 review.