260 lines
16 KiB
HTML
260 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Chrystal Math — CI/CD Guide v2.0</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
.wrap{max-width:1000px;}
|
|
nav.topnav{
|
|
position:sticky;top:0;z-index:50;
|
|
background:color-mix(in srgb, var(--bg) 75%, transparent);
|
|
backdrop-filter:blur(10px);
|
|
border-bottom:1px solid var(--line);
|
|
}
|
|
nav.topnav .wrap{display:flex;align-items:center;gap:22px;padding:14px 32px;overflow-x:auto;white-space:nowrap;}
|
|
nav.topnav a{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;}
|
|
nav.topnav a:hover{color:var(--accent-cyan);}
|
|
nav.topnav .brandmark{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin-right:auto;}
|
|
|
|
section.block{padding:90px 0;border-bottom:1px solid var(--line);}
|
|
section.block:last-of-type{border-bottom:none;}
|
|
h2{margin-bottom:20px;}
|
|
.grad-heading{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;color:transparent;}
|
|
|
|
/* hero */
|
|
.hero{padding:70px 0 76px;text-align:center;}
|
|
.hero img{max-width:400px;width:65%;margin:0 auto 26px;display:block;filter:drop-shadow(0 0 50px color-mix(in srgb, var(--chaos-orchid) 30%, transparent));}
|
|
.hero .kicker{letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--ink-muted);margin-bottom:14px;}
|
|
.hero .doctitle{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:25px;margin-top:20px;color:var(--ink);}
|
|
.hero .verdict{margin:20px auto 0;max-width:520px;font-size:14.5px;color:var(--ink-muted);}
|
|
|
|
/* principle section (new) */
|
|
.principle-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px;}
|
|
.principle-card{padding:24px;border-radius:var(--radius-md);background:var(--bg-raised);border:1px solid var(--line);}
|
|
.principle-card .n{font-family:var(--font-display);font-size:13px;color:var(--accent-gold);margin-bottom:8px;letter-spacing:.08em;}
|
|
.principle-card h4{font-family:var(--font-display);font-size:18px;margin-bottom:6px;color:var(--ink);}
|
|
.principle-card p{font-size:13.5px;margin:0;}
|
|
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;}
|
|
.ba-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);}
|
|
.ba-card .tag{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:10px 16px;}
|
|
.ba-card.bad .tag{background:color-mix(in srgb, var(--chaos-pink) 18%, transparent);color:var(--chaos-pink);}
|
|
.ba-card.good .tag{background:color-mix(in srgb, var(--chaos-cyan) 16%, transparent);color:var(--accent-cyan);}
|
|
.ba-card ul{padding:16px 20px 20px 34px;font-size:13px;color:var(--ink-muted);margin:0;}
|
|
.ba-card li{margin-bottom:6px;}
|
|
|
|
/* swatches */
|
|
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:30px;}
|
|
|
|
.bg-final{margin-top:50px;display:grid;grid-template-columns:280px 1fr;gap:34px;align-items:center;}
|
|
.bg-final .mini{border-radius:16px;padding:40px 24px;text-align:center;border:1px solid var(--line);}
|
|
.bg-final .mini .word{font-family:var(--font-display);font-weight:800;font-size:26px;}
|
|
.bg-final .mini .tagline{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gold);margin-top:6px;}
|
|
.bg-final .hex{font-family:monospace;color:var(--ink-muted);font-size:13px;margin-top:6px;}
|
|
@media(max-width:760px){ .bg-final{grid-template-columns:1fr;} }
|
|
|
|
/* typography */
|
|
.type-block{margin-bottom:50px;}
|
|
.type-block .label-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
|
|
.type-block .role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-gold);font-weight:600;}
|
|
.type-block .license{font-size:11.5px;color:var(--ink-muted);background:var(--bg-raised);padding:3px 10px;border-radius:20px;}
|
|
.specimen-display{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,6vw,60px);color:var(--ink);line-height:1.05;margin:8px 0 10px;}
|
|
.specimen-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,4vw,36px);color:var(--ink);line-height:1.1;margin:8px 0 10px;}
|
|
.specimen-accent{font-family:var(--font-accent);font-style:italic;font-weight:600;font-size:clamp(24px,4vw,34px);color:var(--chaos-pink);margin:8px 0 10px;}
|
|
.specimen-sans{font-weight:600;font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin:8px 0 10px;}
|
|
|
|
table.rules{width:100%;border-collapse:collapse;margin-top:20px;}
|
|
table.rules th,table.rules td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13.5px;}
|
|
table.rules th{color:var(--accent-gold);font-weight:600;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;}
|
|
table.rules td{color:var(--ink-muted);}
|
|
table.rules td b{color:var(--ink);}
|
|
|
|
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:28px;}
|
|
.app-card{border-radius:var(--radius-md);border:1px solid var(--line);padding:22px 20px;background:var(--bg-raised);}
|
|
.app-card .tag2{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-gold);font-weight:700;margin-bottom:8px;}
|
|
.app-card h4{font-family:var(--font-display);font-size:18px;color:var(--ink);margin-bottom:6px;}
|
|
.app-card p{font-size:13px;margin:0;}
|
|
.app-card .status{margin-top:12px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;}
|
|
.app-card .status.done{color:var(--accent-cyan);}
|
|
.app-card .status.pending{color:var(--ink-muted);}
|
|
|
|
footer{padding:56px 0;text-align:center;}
|
|
footer p{margin:0 auto;font-size:12px;color:var(--ink-muted);}
|
|
|
|
@media(max-width:640px){
|
|
.principle-grid,.before-after{grid-template-columns:1fr;}
|
|
section.block{padding:60px 0;}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="topnav">
|
|
<div class="wrap">
|
|
<span class="brandmark">Chrystal Math</span>
|
|
<a href="#prinzip">Prinzip</a>
|
|
<a href="#farben">Farben</a>
|
|
<a href="#typo">Typografie</a>
|
|
<a href="#logo">Logo</a>
|
|
<a href="#anwendung">Anwendungen</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="hero wrap">
|
|
<div class="kicker">Corporate Identity & Design Guide</div>
|
|
<img src="logo.png" alt="Chrystal Math Logo">
|
|
<div class="doctitle">Calculated Chaos — CI/CD Guide v2.0</div>
|
|
<p class="verdict">Überarbeitet: weniger Chaos, mehr Calculated. Gleiche Farben, gleiche Fonts — aber diszipliniert eingesetzt.</p>
|
|
</div>
|
|
|
|
<section class="block" id="prinzip">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Das Prinzip hinter v2.0</span>
|
|
<h2 class="grad-heading">Calculated zuerst. Chaos als Ausnahme.</h2>
|
|
<p class="lead">v1.0 hat den Namen zu wörtlich genommen — Farbverlauf, Glow-Effekte und Zirkel-Deko liefen an mehreren Stellen gleichzeitig. Das Ergebnis: busy statt elegant. Die Regel für v2.0 ist einfach: <b style="color:var(--ink);">Ruhe ist der Normalzustand, Farbe ist die Ausnahme.</b></p>
|
|
|
|
<div class="principle-grid">
|
|
<div class="principle-card"><div class="n">01</div><h4>Ein Verlauf, ein Ort</h4><p>Der Farbverlauf erscheint ausschließlich auf der Wortmarke. Sonst nirgendwo — keine bunten Zahlen, keine Glow-Flecken im Hintergrund.</p></div>
|
|
<div class="principle-card"><div class="n">02</div><h4>Ein Call-to-Action pro Ansicht</h4><p>Nie zwei Buttons um Aufmerksamkeit konkurrieren lassen. Ein klarer nächster Schritt reicht.</p></div>
|
|
<div class="principle-card"><div class="n">03</div><h4>Dekoration: ein Strich, kein Cluster</h4><p>Das Zirkel-Motiv ist eine einzelne, dünne gepunktete Linie — nicht mehr drei überlagerte Kreise plus Punkt.</p></div>
|
|
<div class="principle-card"><div class="n">04</div><h4>Gold bleibt Mikro-Detail</h4><p>Nur für Eyebrow-Labels und einzelne Trennlinien. Nie als zweite Akzentfarbe neben dem Verlauf.</p></div>
|
|
</div>
|
|
|
|
<div class="before-after">
|
|
<div class="ba-card bad">
|
|
<div class="tag">✕ v1.0 — zu viel gleichzeitig</div>
|
|
<ul>
|
|
<li>Zwei Glow-Flecken (Pink + Cyan) im Hero</li>
|
|
<li>Drei überlagerte Zirkel-Kreise als Deko</li>
|
|
<li>Zwei Buttons in der Hero, plus ein dritter in der Nav</li>
|
|
<li>Farbige Zahlen, farbige Foto-Platzhalter</li>
|
|
</ul>
|
|
</div>
|
|
<div class="ba-card good">
|
|
<div class="tag">✓ v2.0 — ein Fokuspunkt</div>
|
|
<ul>
|
|
<li>Ein sehr sanfter, einfarbiger Glow</li>
|
|
<li>Eine dünne gepunktete Linie</li>
|
|
<li>Ein Button, eine klare Handlung</li>
|
|
<li>Zahlen & Flächen in Ink-Tönen, Farbe bleibt der Wortmarke vorbehalten</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block" id="farben">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Farbsystem</span>
|
|
<h2 class="grad-heading">Der Verlauf ist die Signatur — und bleibt es allein.</h2>
|
|
<p class="lead">Fünf Kernfarben aus dem Original-Logo, plus Gold als Mikro-Detail. Unverändert gegenüber v1.0 — geändert hat sich nur, <em>wie sparsam</em> sie eingesetzt werden.</p>
|
|
|
|
<div class="swatch-grid">
|
|
<div class="swatch"><div class="fill" style="background:#F03A82"></div><div class="meta"><div class="name">Chaos Pink</div><div class="hex">#F03A82</div></div></div>
|
|
<div class="swatch"><div class="fill" style="background:#B744C4"></div><div class="meta"><div class="name">Orchid</div><div class="hex">#B744C4</div></div></div>
|
|
<div class="swatch"><div class="fill" style="background:#645EE9"></div><div class="meta"><div class="name">Violet</div><div class="hex">#645EE9</div></div></div>
|
|
<div class="swatch"><div class="fill" style="background:#02AFF1"></div><div class="meta"><div class="name">Sky Cyan</div><div class="hex">#02AFF1</div></div></div>
|
|
<div class="swatch"><div class="fill" style="background:#E3B63E"></div><div class="meta"><div class="name">Calculated Gold</div><div class="hex">#E3B63E</div></div></div>
|
|
</div>
|
|
|
|
<h3 style="margin-top:60px;font-family:var(--font-display);font-weight:600;font-size:22px;">Hintergrund — jetzt festgelegt</h3>
|
|
<p>Nach mehreren Dunkelstufen im Vergleich: Orchid-Anthrazit, so dunkel abgestuft, dass der Farbstich nur noch ein Hauch ist. Gleiche Grundhelligkeit wie neutrales Anthrazit, aber mit dem Orchid-Ton der Marke verbunden.</p>
|
|
|
|
<div class="bg-final">
|
|
<div class="mini" style="background:#070307;">
|
|
<div class="word grad-heading">Chrystal Math</div>
|
|
<div class="tagline">Calculated Chaos.</div>
|
|
<div class="hex">#070307</div>
|
|
</div>
|
|
<div>
|
|
<p style="margin:0;">Orchid-Anthrazit, „Stufe 4" — nahezu Schwarz, mit gerade genug Farbstich, um sich von reinem Neutral-Grau zu unterscheiden. Kontrast zu Ink Light: 18:1, weit über dem Minimum für guten Lesekomfort.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="rules">
|
|
<tr><th>Regel</th><th>Bedeutung</th></tr>
|
|
<tr><td><b>Verlauf = Wortmarke</b></td><td>Der Farbverlauf erscheint ausschließlich im Logo/Wortmarken-Schriftzug. Keine Ausnahmen mehr.</td></tr>
|
|
<tr><td><b>Ein Akzent-Signal</b></td><td>Pro Ansicht höchstens eine einzelne Volltonfarbe als Interaktions-Hinweis (z. B. Cyan bei Hover) — nicht mehrere gleichzeitig.</td></tr>
|
|
<tr><td><b>Kontrast zuerst</b></td><td>Fließtext immer in Ink oder Ink Muted, nie in Verlaufsfarbe direkt.</td></tr>
|
|
<tr><td><b>Gold bleibt Mikro-Detail</b></td><td>Nur Eyebrow-Labels und dünne Trennlinien — nie Flächen, nie zweite Akzentfarbe im selben Screen.</td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block" id="typo">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Typografie</span>
|
|
<h2 class="grad-heading">Drei Stimmen, klare Hierarchie.</h2>
|
|
<p class="lead">Gleiche drei Schriften wie in v1.0 (SIL Open Font License 1.1, vollständig frei) — neu ist die Gewichts-Regel zwischen Wortmarke und Zwischenüberschrift.</p>
|
|
|
|
<div class="type-block" style="margin-top:44px;">
|
|
<div class="label-row"><span class="role">Wortmarke — nur der Logo-Schriftzug</span><span class="license">Bodoni Moda ExtraBold</span></div>
|
|
<div class="specimen-display grad-heading">Chrystal Math</div>
|
|
<p style="font-size:13.5px;">Bleibt schwer und dramatisch — das ist der eine Ort, an dem volles Gewicht <em>und</em> voller Farbverlauf erlaubt sind.</p>
|
|
</div>
|
|
|
|
<div class="type-block">
|
|
<div class="label-row"><span class="role">Zwischenüberschriften (h2) — neu</span><span class="license">Bodoni Moda SemiBold, gerade</span></div>
|
|
<div class="specimen-h2">Exakt geplant, wunderbar chaotisch.</div>
|
|
<p style="font-size:13.5px;">Nicht mehr Bold: bei Bold-Gewicht verschwinden Bodonis feine Haarlinien auf dem Bildschirm, es wirkt blockig statt elegant. SemiBold zeigt den Dünn-Dick-Kontrast weiterhin, wirkt aber ruhiger. <b style="color:var(--ink);">Kursiv ist als alternative Signature-Variante notiert</b>, aber nicht der Standard.</p>
|
|
</div>
|
|
|
|
<div class="type-block">
|
|
<div class="label-row"><span class="role">Fließtext, UI, Labels</span><span class="license">Poppins</span></div>
|
|
<div class="specimen-sans">Calculated Chaos.</div>
|
|
<p style="font-size:13.5px;">Unverändert: Regular für Absätze, SemiBold mit Tracking für Labels/Buttons.</p>
|
|
</div>
|
|
|
|
<div class="type-block">
|
|
<div class="label-row"><span class="role">Signature-Moment, sehr sparsam</span><span class="license">Fraunces SemiBold Italic</span></div>
|
|
<div class="specimen-accent">…mit einer Prise Unordnung.</div>
|
|
<p style="font-size:13.5px;">Unverändert: ein einzelnes Zitat oder eine Unterschriftzeile pro Anwendung, nie mehr.</p>
|
|
</div>
|
|
|
|
<table class="rules">
|
|
<tr><th>Rolle</th><th>Schrift</th><th>Wann</th></tr>
|
|
<tr><td><b>Wortmarke</b></td><td>Bodoni Moda ExtraBold + Verlauf</td><td>Nur der Logo-Schriftzug „Chrystal Math"</td></tr>
|
|
<tr><td><b>Zwischenüberschrift (h2)</b></td><td>Bodoni Moda SemiBold, gerade</td><td>Alle Section-Headlines</td></tr>
|
|
<tr><td><b>Fließtext</b></td><td>Poppins Regular</td><td>Absätze, Beschreibungen</td></tr>
|
|
<tr><td><b>Labels / Tags</b></td><td>Poppins SemiBold, Tracking</td><td>Kicker, Buttons, Navigation</td></tr>
|
|
<tr><td><b>Signature-Moment</b></td><td>Fraunces SemiBold Italic</td><td>1 Zeile, nie mehr</td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block" id="logo">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Logo & Signet</span>
|
|
<h2 class="grad-heading">Der Zirkel bleibt Zirkel.</h2>
|
|
<p class="lead">Das „A" in „MAth" ist eine Zirkel-Illustration, kein Buchstabe. Das Logo existiert nur als Ganzes.</p>
|
|
<table class="rules">
|
|
<tr><th>Regel</th><th>Detail</th></tr>
|
|
<tr><td><b>Schutzraum</b></td><td>Mindestens die Höhe des „C" als Abstand zu Rand, Text oder anderen Elementen</td></tr>
|
|
<tr><td><b>Mindestgröße</b></td><td>Druck: 30mm Breite · Web: 160px Breite</td></tr>
|
|
<tr><td><b>Untergrund</b></td><td>Orchid-Anthrazit `#070307` als Standard; helle Flächen nur mit dunklem Container darunter</td></tr>
|
|
<tr><td><b>Nicht erlaubt</b></td><td>Umfärben außerhalb der Palette, Verzerren, Freistellen einzelner Buchstaben, mehrere Deko-Elemente gleichzeitig um das Logo herum</td></tr>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="block" id="anwendung">
|
|
<div class="wrap">
|
|
<span class="eyebrow">Anwendungen</span>
|
|
<h2 class="grad-heading">Vier Beispiele, ein ruhigeres System.</h2>
|
|
<p class="lead">Alle vier Anwendungen laufen jetzt auf v2.0 — ein ruhigeres, konsistentes System.</p>
|
|
<div class="apps-grid">
|
|
<div class="app-card"><div class="tag2">Web</div><h4>One-Pager</h4><p>Hero, Über mich, Programm, Galerie, Kontakt.</p><div class="status done">✓ v2.0</div></div>
|
|
<div class="app-card"><div class="tag2">Druck</div><h4>Poster</h4><p>A2, Hochformat.</p><div class="status done">✓ v2.0</div></div>
|
|
<div class="app-card"><div class="tag2">Druck</div><h4>Postkarte</h4><p>A6, beidseitig.</p><div class="status done">✓ v2.0</div></div>
|
|
<div class="app-card"><div class="tag2">Druck</div><h4>Briefkopf</h4><p>A4, mit Signature-Moment.</p><div class="status done">✓ v2.0</div></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="wrap">
|
|
<p>Chrystal Math — Calculated Chaos. · CI/CD Guide v2.0 · Alle Schriften: SIL Open Font License 1.1</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|