340 lines
8.2 KiB
Markdown
340 lines
8.2 KiB
Markdown
# Chrystal Math – Web Quick Guide
|
||
|
||
Kompakte Anleitung für neue Seiten und Komponenten auf Basis von `styles.css`.
|
||
|
||
## 1. Grundaufbau
|
||
|
||
```html
|
||
<link rel="stylesheet" href="styles.css">
|
||
```
|
||
|
||
Verwende immer semantisches HTML, eine maximale Inhaltsbreite über `.container` und die vorhandenen Design-Tokens statt neuer Einzelwerte.
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
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
|
||
|
||
```css
|
||
.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:
|
||
|
||
```css
|
||
.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.
|
||
|
||
### CSS-Erweiterung für Login und Formulare
|
||
|
||
```css
|
||
.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;
|
||
}
|
||
```
|
||
|
||
## 7. Login-Beispiel
|
||
|
||
Für Dark Mode:
|
||
|
||
```html
|
||
<body class="cm-page cm-page--dark">
|
||
```
|
||
|
||
Für Light Mode:
|
||
|
||
```html
|
||
<body class="cm-page cm-page--light">
|
||
```
|
||
|
||
Der übrige Aufbau bleibt identisch:
|
||
|
||
```html
|
||
<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
|
||
|
||
```html
|
||
<button class="button button--primary">Speichern</button>
|
||
```
|
||
|
||
Nur einmal pro klar abgegrenztem Bereich verwenden.
|
||
|
||
### Sekundäre Aktion
|
||
|
||
```html
|
||
<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
|
||
|
||
```html
|
||
<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.**
|