2026-08-07 15:50:54 +02:00

8.2 KiB

Raw Permalink Blame History

Chrystal Math – Web Quick Guide

Kompakte Anleitung für neue Seiten und Komponenten auf Basis von styles.css.

1. Grundaufbau

<link rel="stylesheet" href="styles.css">

Verwende immer semantisches HTML, eine maximale Inhaltsbreite über .container und die vorhandenen Design-Tokens statt neuer Einzelwerte.

color: var(--cm-text-on-dark);
background: var(--cm-bg);
border-radius: var(--cm-radius-md);
font-family: var(--cm-body);

2. Markenprinzip

Calculated Chaos bedeutet: klare Struktur zuerst, kontrollierte Überraschung danach.

Layout, Abstände und Formulare bleiben ruhig und nachvollziehbar.
Farbe, Verläufe, Nodes und kleine Sparks setzen gezielte Akzente.
Pro Komponente höchstens eine dominante Akzentfarbe.
Glow nur dekorativ und sparsam einsetzen; nie für normalen Text.
Reines Schwarz vermeiden. Dunkle Flächen nutzen --cm-bg, --cm-bg-2 oder --cm-bg-3.

3. Farben und Aufgaben

Token	Einsatz
`--cm-bg`	dunkler Seitenhintergrund
`--cm-bg-2`	Karten und größere Flächen im Dark Mode
`--cm-bg-3`	erhöhte oder aktive Flächen
`--cm-light`	heller Seitenhintergrund
`--cm-text-on-dark`	Haupttext auf dunklen Flächen
`--cm-muted-on-dark`	Nebentext auf dunklen Flächen
`--cm-ink`	Haupttext auf hellen Flächen
`--cm-muted-ink`	Nebentext auf hellen Flächen
`--cm-magenta`	primäre Aktion, wichtigste Hervorhebung
`--cm-cyan`	Fokus, Links, sekundäre Aktion
`--cm-violet`	Kapitel, Kategorien, dekorative Tiefe
`--cm-lime`	kleine Überraschungsmomente, Status oder Spark
`--cm-gold`	seltene Premium- oder Bühnenakzente

Empfohlene Verteilung: etwa 70 % Basisfarben, 20 % Oberflächen und Textabstufungen, 10 % Akzentfarben.

4. Typografie

font-family: var(--cm-display); /* GFS Didot */
font-family: var(--cm-body);    /* Dosis */

GFS Didot

Nur für große Titel, Kampagnenzeilen, Hero-Text und markante Zahlen verwenden. Nicht für Labels, Buttons oder längere Texte.

Dosis

Für Navigation, Fließtext, Formulare, Buttons, Hinweise und kleine Überschriften verwenden.

Sinnvolle Hierarchie

.page-title {
  font-family: var(--cm-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: .96;
}

.section-title {
  font-family: var(--cm-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
}

.ui-title {
  font-family: var(--cm-body);
  font-size: 1.35rem;
  font-weight: 700;
}

5. Light und Dark Mode

Das bestehende CSS ist standardmäßig dunkel. Für helle Einzelseiten oder Komponenten kann diese kleine Erweiterung an styles.css angehängt werden:

.cm-page {
  min-height: 100vh;
}

.cm-page--dark {
  color-scheme: dark;
  background: var(--cm-bg);
  color: var(--cm-text-on-dark);
}

.cm-page--light {
  color-scheme: light;
  background: var(--cm-light);
  color: var(--cm-ink);
}

Beim Wechsel des Themes ändern sich hauptsächlich Hintergrund, Kartenfläche, Text- und Rahmenfarbe. Akzentfarben bleiben gleich.

6. Formulare

Formulare sollen klarer und ruhiger sein als die dekorativen Brand-Elemente.

Labels immer sichtbar oberhalb des Feldes.
Platzhalter sind Beispiele, keine Ersatz-Labels.
Fokuszustand immer deutlich in Cyan.
Fehlermeldungen als Text plus Symbol ausgeben, nie nur über Farbe.
Mindestens 44 px hohe Eingabefelder und Buttons.
Eine Login-Karte sollte höchstens etwa 28rem breit sein.

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 15% 18%, rgba(247, 64, 167, .13), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(8, 212, 243, .11), transparent 28%);
}

.auth-card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow);
}

.cm-page--dark .auth-card {
  background: rgba(33, 20, 58, .92);
  border: 1px solid rgba(255, 255, 255, .12);
}

.cm-page--light .auth-card {
  background: #fff;
  border: 1px solid #eadfea;
  box-shadow: 0 1.2rem 3rem rgba(36, 23, 46, .10);
}

.auth-title {
  margin: .35rem 0 .75rem;
  font-family: var(--cm-display);
  font-size: clamp(2.5rem, 9vw, 3.8rem);
  font-weight: 400;
  line-height: .95;
}

.auth-intro {
  margin: 0 0 1.75rem;
}

.cm-page--dark .auth-intro,
.cm-page--dark .field-hint {
  color: var(--cm-muted-on-dark);
}

.cm-page--light .auth-intro,
.cm-page--light .field-hint {
  color: var(--cm-muted-ink);
}

.form-stack {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: .4rem;
}

.field label {
  font-weight: 700;
}

.input {
  width: 100%;
  min-height: 3rem;
  padding: .75rem .9rem;
  border-radius: var(--cm-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  outline: none;
}

.cm-page--dark .input {
  background: var(--cm-bg);
  color: var(--cm-text-on-dark);
  border-color: rgba(255, 255, 255, .16);
}

.cm-page--light .input {
  background: #fff;
  color: var(--cm-ink);
  border-color: #d9cddd;
}

.input:focus-visible {
  border-color: var(--cm-cyan);
  box-shadow: 0 0 0 .22rem rgba(8, 212, 243, .22);
}

.button--full {
  width: 100%;
}

.auth-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  font-size: .95rem;
}

.field-hint {
  margin: 0;
  font-size: .9rem;
}

.form-error {
  margin: 0;
  color: var(--cm-magenta);
  font-weight: 700;
}

Für Dark Mode:

<body class="cm-page cm-page--dark">

Für Light Mode:

<body class="cm-page cm-page--light">

Der übrige Aufbau bleibt identisch:

<main class="auth-shell">
  <section class="auth-card" aria-labelledby="login-title">
    <p class="eyebrow">Chrystal Math · Members</p>
    <h1 class="auth-title gradient-text" id="login-title">Welcome back.</h1>
    <p class="auth-intro">Melde dich an, um deinen Bereich zu öffnen.</p>

    <form class="form-stack">
      <div class="field">
        <label for="email">E-Mail-Adresse</label>
        <input class="input" id="email" name="email" type="email"
               autocomplete="email" required>
      </div>

      <div class="field">
        <label for="password">Passwort</label>
        <input class="input" id="password" name="password" type="password"
               autocomplete="current-password" required>
      </div>

      <div class="auth-meta">
        <label><input type="checkbox" name="remember"> Angemeldet bleiben</label>
        <a href="/passwort-vergessen">Passwort vergessen?</a>
      </div>

      <button class="button button--primary button--full" type="submit">
        Anmelden
      </button>
    </form>
  </section>
</main>

8. Häufige Komponenten

Primäre Aktion

<button class="button button--primary">Speichern</button>

Nur einmal pro klar abgegrenztem Bereich verwenden.

Sekundäre Aktion

<a class="button button--secondary" href="#">Mehr erfahren</a>

Karten

Karten verwenden eine klare Oberfläche, einen feinen Rahmen und höchstens einen dekorativen Akzent. Nicht jede Karte braucht Glow, Verlauf und Nodes gleichzeitig.

Eyebrow

<p class="eyebrow">Kategorie · Kontext</p>

Für kurze Orientierung über einem Titel. Nicht für ganze Sätze.

9. Abstände und Formen

Kleine Abstände: .5rem bis .75rem
Standardabstände: 1rem bis 1.5rem
Abschnittsabstände: 4rem bis 6rem
Kleine Elemente: --cm-radius-sm
Karten und Formulare: --cm-radius-md
Hero- oder Auth-Flächen: --cm-radius-lg

10. Schnellprüfung vor Veröffentlichung

Ist die Seite auch ohne dekorative Effekte verständlich?
Gibt es pro Bereich nur eine klare Hauptaktion?
Wurde GFS Didot nur für kurze, große Texte genutzt?
Sind Labels, Fokuszustände und Fehlermeldungen sichtbar?
Ist Text auf kleinen Displays ohne Zoomen lesbar?
Funktioniert prefers-reduced-motion weiterhin?
Werden Akzentfarben nicht als alleinige Information verwendet?
Sind alle dekorativen Nodes und Orbits mit aria-hidden="true" versehen?

Kurzformel

Dosis organisiert. GFS Didot inszeniert. Magenta führt. Cyan reagiert. Lime überrascht. Der Rest bleibt ruhig.

8.2 KiB Raw Permalink Blame History Unescape Escape