Framework Build Doc — CNC Data Security Platform

File Structure

CNC-DataSecurityPlatform/
├── index.html                    ← CNC Data Security Platform Home
├── topics/
│   ├── dlp.html                  ← Module 01: DLP
│   ├── labeling.html             ← Module 02: Labeling
│   ├── datagovernance.html       ← Module 03: Data Governance
│   ├── datalifecycle.html        ← Module 04: Data Life Cycle
│   └── dspm.html                 ← Module 05: DSPM
├── docs/
│   ├── framework.html            ← This file
│   └── insiderrisk.html          ← Future topic
├── assets/
│   ├── css/
│   │   └── g1-platform.css       ← Token system + component styles
│   ├── js/
│   │   └── g1-platform.js        ← Theme, edit, PDF, ZIP, accordion
│   └── images/
│       └── cnc-logo.png          ← Client logo (replace per engagement)
└── README.md

Theme Token System

Theme 03 — Centene Violet (Default)

          --nav-bg: #512888

          --accent: #00A3AD

          --page-bg: #F4F7FC

          --panel-bg: #FFFFFF

          --text-primary: #1A1A2E

          --text-secondary: #3D3A5C

          --border: #CBD5E1

Theme 04 — Obsidian Teal (Alternate)

          --nav-bg: #0F1117

          --accent: #00A3AD

          --page-bg: #F0F2F5

          --panel-bg: #FFFFFF

          --text-primary: #0D0F14

          --text-secondary: #3C4255

          --border: #C4C9D6

DO NOT MODIFY token values without user approval. Token values are the canonical source of truth. Changes must be made in g1-platform.css only — never inline.

Label Tag Reference

.g1-label--public
Public

.g1-label--secure
Internal
alternate internal tier

.g1-label--internal
Internal

.g1-label--conf
Confidential

.g1-label--ac
Restricted
alternate restricted tier

.g1-label--restrict
Restricted

Key CSS Components

Class	Purpose	Notes
`.g1-card`	Content card with shadow and hover	Add .g1-card--link for anchor cards
`.g1-card--accent / --info / --danger / --caution / --success`	Left border accent variants	Uses token variables
`.g1-grid g1-grid--2/3/4`	Responsive CSS grid	Auto-fit with minmax
`.g1-section-title`	Section heading with gold underline	Uses --accent for border
`.g1-callout--info/warning/danger/success`	Colored callout boxes	Left border + tinted background
`.g1-accordion`	Expand/collapse panels	Requires aria-controls + panel id
`.g1-print-view`	A4 infographic print layout	Hidden on screen, shown on print
`[data-editable]`	Marks content as editable in edit mode	Add id for localStorage persistence

LLM Reconstruction Prompt

Use this prompt to regenerate or extend the platform in any AI coding environment.

Rebuild the CNC Data Security Platform as a static HTML project.

DESIGN SYSTEM:
- Theme 03 (Centene Violet, default): nav #512888, accent #00A3AD, bg #F4F7FC
- Theme 04 (Obsidian Teal, alt): nav #0F1117, accent #00A3AD, bg #F0F2F5
- Font: Calibri, Segoe UI, Arial
- All tokens in :root and [data-theme] blocks in g1-platform.css
- Theme persisted in localStorage as "g1-theme"

TAXONOMY (DEFAULT — configure in setup.html to match client):
- Public · Internal · Confidential · Restricted
- Override via setup.html Label Taxonomy field

FILE STRUCTURE:
index.html, topics/dlp.html, topics/labeling.html,
topics/datagovernance.html, topics/datalifecycle.html, topics/dspm.html,
docs/framework.html, docs/insiderrisk.html,
assets/css/g1-platform.css, assets/js/g1-platform.js, assets/images/cnc-logo.png

FEATURES:
- Theme toggle (🌙/☀️ button, data-action="toggle-theme")
- Edit mode (✏️ button, data-action="toggle-edit"), saves to localStorage
- PDF export (📄 PDF button, data-action="export-pdf") — swaps to .g1-print-view section
- ZIP download (📦 ZIP button, data-action="download-zip") — uses JSZip CDN
- Accordion panels (.g1-accordion__trigger with aria-controls)

PRINT VIEW:
Each topic has a <section class="g1-print-view"> at end of body.
Hidden on screen. Shows on print (body.printing-pdf class or @media print).
A4 portrait. Uses .pv-cover, .pv-body, .pv-row, .pv-block, .pv-refs.

Apply all 14 punch list items from prior build:
1. No nav scrubber — horizontal tabs only
2. PDF = current topic export only
3. ZIP = full package download only
4. All home cards are functional links
5. Reduced header density
6. Compact hero
7. Start Here row with quick-links
8. Standardized export controls on all topic pages
9. Hover + focus states everywhere
10. Grouped category labels (Protection & Enforcement / Governance & Discovery)
11. Export help note explaining PDF vs ZIP
12. PDF is topic-scoped
13. Tooltips on icon buttons
14. Clean terminology

New Topic Page Skeleton

<!DOCTYPE html>
<html lang="en" data-theme="sapphire">
<head>
  <meta charset="UTF-8">
  <title>[Topic Name] — CNC Data Security Platform</title>
  <link rel="stylesheet" href="../assets/css/g1-platform.css">
</head>
<body>
  <!-- Nav: copy from existing topic, update active link -->
  <nav class="g1-nav">...</nav>

  <div class="g1-edit-bar" id="g1-edit-bar">...</div>

  <header class="g1-page-header">
    <div class="g1-page-header__inner">
      <div class="g1-page-header__label">Module XX — [Category]</div>
      <h1>[Topic Title]</h1>
      <p class="g1-page-header__sub">[Subtitle]</p>
    </div>
  </header>

  <main class="g1-main">
    <section class="g1-section">
      <div class="g1-section-title">[Section Title]</div>
      <div class="g1-prose" id="[topic]-intro" data-editable>
        <p>...</p>
      </div>
    </section>
    <!-- Add more sections -->
  </main>

  <footer class="g1-footer">CNC Data Security Platform | Module XX: [Topic] | For Internal Use Only</footer>

  <!-- Print view -->
  <section class="g1-print-view">
    <div class="pv-cover">
      <div class="pv-cover__label">CNC Data Security Platform · Module XX</div>
      <h1>[Topic Title]</h1>
      <div class="pv-cover__sub">[Subtitle]</div>
    </div>
    <div class="pv-body">
      <!-- Use .pv-section-title, .pv-row, .pv-block, .pv-refs -->
    </div>
  </section>

  <script src="../assets/js/g1-platform.js"></script>
</body>
</html>

Naming Rules

Platform Terminology

Use "CNC Data Security Platform" for the product name (or client-specific title from Setup)
Use "Module" for numbered topic pages
Use "Topic" informally in prose
Avoid "Purview" in primary navigation labels
Use "Microsoft Purview" where vendor context is accurate in content

Default Label Schema

Public — lowest sensitivity, no controls
Internal — standard business content, not for external sharing
Confidential — regulated data, DLP enforcement active
Restricted — highest classification, encryption enforced
Override in setup.html to match any client taxonomy