ocl-design-system/index.html at main · OpenConceptLab/ocl-design-system · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OCL v3 Design System</title>
<link rel="stylesheet" href="assets/tokens.css">
<link rel="stylesheet" href="assets/site.css">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="shortcut icon" href="assets/favicon.ico">
</head>
<body>
<header class="site-header">
  <div class="site-header-inner">
    <a class="site-brand" href="index.html"><img class="brand-logo" src="assets/logo/text-stacked/BlueCircle-WhiteText.png" alt=""><span>OCL v3 Design System</span></a>
    <nav class="site-nav">
      <a href="index.html" class="active">Overview</a>
      <a href="foundations/color.html">Foundations</a>
      <a href="components/index.html">Components</a>
      <a href="patterns/index.html">Patterns</a>
      <a href="gallery.html">Gallery</a>
    </nav>
    <div class="site-nav-right">
      <a href="docs/review-2026-04.md">Review</a>
      <a href="https://github.com/OpenConceptLab/ocl-design-system">GitHub</a>
    </div>
  </div>
</header>

<main class="narrow">
  <div class="hero">
    <div class="hero-logo">
      <img src="assets/logo/full/FullLogo-BlackText.svg" alt="Open Concept Lab">
    </div>
    <div class="hero-copy">
      <h1>OCL v3 Design System</h1>
      <p class="page-intro" style="margin-bottom: 0;">
        The design system for the next generation of OCL's web applications —
        <a href="https://github.com/OpenConceptLab/oclweb3">oclweb3</a> (Term Browser v3) and
        <a href="https://github.com/OpenConceptLab/oclmap">oclmap</a> (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.
      </p>
    </div>
  </div>

  <div class="callout">
    <strong>v1 — start narrow.</strong> Foundations (color, typography, elevation) are fully rendered from
    real tokens. Components and Patterns show catalog grids with three worked exemplars each; the rest are stubs
    that link to the source code in oclweb3. The raw screenshot <a href="gallery.html">Gallery</a> remains available
    for browsing all 120 Zeplin designs and 11 current-state screenshots.
  </div>

  <section>
    <h2>Sections</h2>
    <div class="grid wide" style="margin-top: 16px;">
      <a class="card big" href="guides/building-pages.html" style="border-left: 3px solid var(--primary-main);">
        <h3>Building Pages</h3>
        <p>Developer guide to building new pages in oclweb3: page scaffold, routing, API patterns, i18n, shared utilities, and a worked example. Start here if you're building something new.</p>
        <div class="card-meta">Guide · Routing · API · i18n · Utilities</div>
      </a>
      <a class="card big" href="foundations/color.html">
        <h3>Foundations</h3>
        <p>Color palette, typography, elevation, and the OCL logo — rendered live from the same tokens oclweb3 uses. Click a swatch to copy its hex.</p>
        <div class="card-meta">Color · Typography · Elevation · Logo</div>
      </a>
      <a class="card big" href="components/index.html">
        <h3>Components</h3>
        <p>Catalog of ~20 reusable components from <code>src/components/</code> in oclweb3. Three exemplars (RepoChip, HTMLTooltip, RepoHeader) are fully documented; the rest are stubs that link to source.</p>
        <div class="card-meta">Chips · Tooltips · Headers · Tables · Forms</div>
      </a>
      <a class="card big" href="patterns/index.html">
        <h3>Patterns</h3>
        <p>Page-level compositions from the Zeplin designs, grouped by area. Status badges mark what's implemented, divergent, or not yet built.</p>
        <div class="card-meta">Dashboard · Repository · Search · References</div>
      </a>
      <a class="card big" href="gallery.html">
        <h3>Gallery</h3>
        <p>Raw screenshot browser — every canonical Zeplin design plus current-state TBv3 screenshots. Use this when you want to scan visually.</p>
        <div class="card-meta">131 screenshots · 11 sections</div>
      </a>
      <a class="card big" href="docs/review-2026-04.md">
        <h3>Design Review</h3>
        <p>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.</p>
        <div class="card-meta">Status · Gaps · Open decisions</div>
      </a>
      <a class="card big" href="https://github.com/OpenConceptLab/oclweb3">
        <h3>Source of truth</h3>
        <p>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.</p>
        <div class="card-meta">React 18 · MUI v5.18 · Emotion</div>
      </a>
    </div>
  </section>

  <section>
    <h2>How this site relates to the code</h2>
    <ul style="color: var(--text-secondary); line-height: 1.7;">
      <li><strong>Colors</strong> are hand-copied from <code>oclweb3/src/common/colors.jsx</code> into <a href="assets/tokens.css">assets/tokens.css</a>. Point-in-time — update when the app palette changes. See <a href="docs/token-sync-options.md">docs/token-sync-options.md</a> for the long-term plan.</li>
      <li><strong>Typography</strong> mirrors the MUI v5 defaults because <code>oclweb3/src/index.jsx</code> doesn't override them. Roboto 400/500/700 loaded from Google Fonts.</li>
      <li><strong>Components</strong> each link to their source in <code>oclweb3/src/components/</code>. Prop summaries are extracted by hand from the JSX signature — if the code changes, update the doc.</li>
      <li><strong>Patterns</strong> are drawn from the Zeplin PNGs in <a href="designs/">designs/</a>. Status badges come from the <a href="docs/review-2026-04.md">April 2026 review</a>.</li>
    </ul>
  </section>
</main>

<footer class="site-footer">
  <div>OCL v3 Design System · Canonical implementation: <a href="https://github.com/OpenConceptLab/oclweb3">oclweb3</a></div>
</footer>
</body>
</html>