From ebb5cdd978c094b732d7df42701a49526896f93e Mon Sep 17 00:00:00 2001
From: ben7sys <ben@7sys.de>
Date: Sun, 17 Nov 2024 04:55:51 +0100
Subject: [PATCH] cguidelines added

---
 public/cdguidelines.html | 241 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 241 insertions(+)
 create mode 100644 public/cdguidelines.html
diff --git a/public/cdguidelines.html b/public/cdguidelines.html
new file mode 100644
index 0000000..845644f
--- /dev/null
+++ b/public/cdguidelines.html
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>7SYS Logo Guidelines</title>
+    <link href="https://fonts.googleapis.com/css2?family=Oxanium:wght@600&family=Fira+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --color-7: #112fcf;
+            --color-s1: #3b3bc8;
+            --color-y: #5743ed;
+            --color-s2: #784dd9;
+            --spacing: 2rem;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Fira Sans', sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        h1, h2, h3 {
+            font-family: 'Liberation Sans', sans-serif;
+            margin-bottom: 1.5rem;
+            color: #1a1a1a;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            text-align: center;
+            margin-bottom: var(--spacing);
+        }
+
+        .section {
+            margin-bottom: calc(var(--spacing) * 2);
+            padding: var(--spacing);
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .logo-display {
+            font-family: 'Oxanium', sans-serif;
+            font-weight: 600;
+            font-size: 4rem;
+            margin: var(--spacing) 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .color-logo span:nth-child(1) { color: var(--color-7); }
+        .color-logo span:nth-child(2) { color: var(--color-s1); }
+        .color-logo span:nth-child(3) { color: var(--color-y); }
+        .color-logo span:nth-child(4) { color: var(--color-s2); }
+
+        .bw-logo-light {
+            background: #fff;
+            padding: 1rem;
+        }
+
+        .bw-logo-light span:nth-child(1) { color: #000; }
+        .bw-logo-light span:nth-child(2) { color: #262626; }
+        .bw-logo-light span:nth-child(3) { color: #333333; }
+        .bw-logo-light span:nth-child(4) { color: #404040; }
+
+        .bw-logo-dark {
+            background: #333;
+            padding: 1rem;
+        }
+
+        .bw-logo-dark span:nth-child(1) { color: #fff; }
+        .bw-logo-dark span:nth-child(2) { color: #e6e6e6; }
+        .bw-logo-dark span:nth-child(3) { color: #cccccc; }
+        .bw-logo-dark span:nth-child(4) { color: #b3b3b3; }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: var(--spacing) 0;
+        }
+
+        th, td {
+            padding: 0.75rem;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
+        }
+
+        th {
+            background-color: #f5f5f5;
+            font-weight: 600;
+        }
+
+        .color-sample {
+            width: 50px;
+            height: 25px;
+            border-radius: 4px;
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 0.5rem;
+        }
+
+        .typography {
+            margin-top: var(--spacing);
+        }
+
+        .font-example {
+            margin: 1rem 0;
+            padding: 1rem;
+            background: #f5f5f5;
+            border-radius: 4px;
+        }
+
+        .font-oxanium {
+            font-family: 'Oxanium', sans-serif;
+            font-weight: 600;
+        }
+
+        .font-fira {
+            font-family: 'Fira Sans', sans-serif;
+        }
+
+        .font-liberation {
+            font-family: 'Liberation Sans', sans-serif;
+        }
+
+        @media (max-width: 768px) {
+            body {
+                padding: 1rem;
+            }
+
+            .logo-display {
+                font-size: 3rem;
+            }
+
+            table {
+                font-size: 0.9rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1>7SYS Logo Design Guidelines</h1>
+
+    <div class="section">
+        <h2>Primary Color Logo</h2>
+        <div class="logo-display color-logo">
+            <span>7</span><span>S</span><span>Y</span><span>S</span>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>Element</th>
+                    <th>Color</th>
+                    <th>RGB</th>
+                    <th>HEX</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>7</td>
+                    <td><div class="color-sample" style="background: #112fcf;"></div></td>
+                    <td>17, 47, 227</td>
+                    <td>#112fcf</td>
+                </tr>
+                <tr>
+                    <td>S</td>
+                    <td><div class="color-sample" style="background: #3b3bc8;"></div></td>
+                    <td>59, 59, 230</td>
+                    <td>#3b3bc8</td>
+                </tr>
+                <tr>
+                    <td>Y</td>
+                    <td><div class="color-sample" style="background: #5743ed;"></div></td>
+                    <td>87, 67, 237</td>
+                    <td>#5743ed</td>
+                </tr>
+                <tr>
+                    <td>S</td>
+                    <td><div class="color-sample" style="background: #784dd9;"></div></td>
+                    <td>120, 77, 237</td>
+                    <td>#784dd9</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <div class="section">
+        <h2>Black & White Variants</h2>
+        
+        <h3>Light Background</h3>
+        <div class="logo-display bw-logo-light">
+            <span>7</span><span>S</span><span>Y</span><span>S</span>
+        </div>
+
+        <h3>Dark Background</h3>
+        <div class="logo-display bw-logo-dark">
+            <span>7</span><span>S</span><span>Y</span><span>S</span>
+        </div>
+    </div>
+
+    <div class="section">
+        <h2>Typography</h2>
+        <div class="typography">
+            <h3>Logo Font</h3>
+            <div class="font-example font-oxanium">
+                Oxanium Semi-Bold (600)<br>
+                ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                abcdefghijklmnopqrstuvwxyz<br>
+                0123456789
+            </div>
+
+            <h3>Standard Text Font</h3>
+            <div class="font-example font-fira">
+                Fira Sans<br>
+                ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                abcdefghijklmnopqrstuvwxyz<br>
+                0123456789
+            </div>
+
+            <h3>UI Font</h3>
+            <div class="font-example font-liberation">
+                Liberation Sans<br>
+                ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                abcdefghijklmnopqrstuvwxyz<br>
+                0123456789
+            </div>
+        </div>
+    </div>
+</body>
+</html>

Element	RGB	HEX
7	17, 47, 227	#112fcf
S	59, 59, 230	#3b3bc8
Y	87, 67, 237	#5743ed
S	120, 77, 237	#784dd9