commit c3d8f68c13c1a1696080b5460e41f517d586e7b3 Author: Patsy Date: Fri Aug 7 15:50:54 2026 +0200 first commit diff --git a/01_Zusammenfassung_Lernhinweise.md b/01_Zusammenfassung_Lernhinweise.md new file mode 100644 index 0000000..505a99c --- /dev/null +++ b/01_Zusammenfassung_Lernhinweise.md @@ -0,0 +1,59 @@ +# CheckPoint VPS-Projekt — Zusammenfassung & Lernhinweise + +## Ausgangslage +- VPS bei IONOS (Typ VPS 6-8-240: 6 vCore, 8 GB RAM, 240 GB NVMe SSD). +- Alter Zustand: unsauber gewachsen — ein Git-Server und eine unfertige App lagen ohne Struktur durcheinander. Ziel: kompletter sauberer Neuaufbau, **kein** Reparieren des Bestehenden. +- Datenschutz-Vorgabe für die geplante App (CheckPoint Ehrenamt): EU-Hosting, eigener Server (= dieser VPS). + +## Getroffene Entscheidungen +- **Kompletter Wipe statt Reparatur** — bereits umgesetzt, VPS ist neu installiert. +- **Reihenfolge:** Desktop zuerst sauber (Anker-Maschine), dann VPS, Laptop zuletzt. +- **LLM-Zugriff** (Desktop als lokaler LLM-Host) läuft künftig über **VPN**, nicht über einen SSH-Tunnel via VPS. +- **SSH-Keys:** pro Gerät ein eigenes **ed25519**-Keypair (Desktop, Laptop). Private Key verlässt das Gerät nie. +- **Shell:** Analyse gemacht, finale Entscheidung noch offen (siehe Lernhinweise + Status). + +--- + +## Lernhinweise + +### SSH-Diagnose +- **„Permission denied"** = Verbindung steht, Dienst läuft — nur die Authentifizierung scheitert (Key / User / Berechtigung). +- **„Connection refused"** = auf dem Port antwortet niemand → Dienst gestoppt/abgestürzt **oder** etwas blockt davor (Firewall / Fail2ban). +- Die Reihenfolge „erst denied, dann refused" ist ein typisches **Fail2ban-Muster**: erst Fehlversuche, dann IP-Bann. +- `ssh -v` (verbose) zeigt, *wie weit* der Verbindungsaufbau kommt → trennt Netzwerk-/Firewall-Problem von Auth-Problem. + +### Fail2ban +- Bannt nach mehreren Fehlversuchen die IP. Weitere Blind-Versuche können den Bann **verlängern/erneuern** → nicht „auf Verdacht" wiederholt probieren. +- Die **Web-Konsole des Hosters** ist der Rettungsweg, wenn SSH gesperrt ist. + +### Backup-Philosophie +- Ein Wipe ist **endgültig**. Entscheidend ist nur, ob Daten *nur* an einem Ort existieren (single-copy). +- Wenn man bewusst „frisch" neu macht (Keys und LLMs regeneriert man ohnehin), muss das Backup nur das **Unwiederbringliche** sichern: echte Daten/Dokumente, single-copy-Repos, Passwort-Tresor/2FA-Seeds, ggf. GPG-Keys. +- In diesem Fall gelöst: Repo-Klone liegen auf der **zweiten Laptop-Partition** → Wipe war risikofrei. + +### Shell: interaktiv vs. Skript (die wichtigste Einsicht) +- Das sind **zwei getrennte Entscheidungen**, die nur wie eine aussehen. +- **Interaktive Shell** = persönlicher Komfort. Per `chsh -s …` wechselbar, jederzeit reversibel, berührt das System **nicht** (Arch: `/bin/sh` → Bash; Systemskripte laufen darüber, unabhängig von der Login-Shell). +- **Skriptsprache** = die einzige „klebende" Entscheidung: Alles, was den VPS anfasst oder reproduzierbar sein soll, **muss Bash/POSIX** sein. Der VPS hat kein Fish; Fish-Skripte laufen dort nicht. +- **Fish:** exzellente Ergonomie out-of-the-box, aber nicht-POSIX (`set -x VAR x` statt `export`, `$status` statt `$?`, Listen 1-indiziert). Eingefügte Bash-Befehle (aus Doku/KI-Tools) brechen gelegentlich. +- **Zsh:** Bash-kompatibel (gleiche Sprache wie die Server) + Fish-ähnliche Plugins (`zsh-autosuggestions`, `zsh-syntax-highlighting`) → bester Kompromiss für server-zentriertes Arbeiten. +- **Bash + ble.sh / atuin / fzf:** maximal gängig, fast gleicher Komfort. + +### SSH-Key-Architektur +- **Pro Gerät ein eigenes Keypair** → ein Gerät verloren/kompromittiert = nur dessen Public Key vom Server entfernen, Rest bleibt unberührt. +- **ed25519** als moderner Standard. +- Public Keys wandern auf den VPS, Private Keys bleiben lokal. + +### VPN für LLM-Zugriff +- „VPN" zum Erreichen des *eigenen* Desktops = **Mesh / Self-Hosted** (WireGuard, Tailscale, Netbird) — **nicht** ein kommerzielles Privacy-VPN (das macht das Gegenteil). +- Passt zur Eigen-Server-/Datenschutz-Philosophie. + +--- + +## Offene Designfrage: Multi-App-Struktur (noch nicht besprochen) +Der VPS soll mehrere Apps parallel hosten. Zu entscheidende Achsen: +- **Isolation:** Container (Docker/Podman) vs. systemd-Services + venvs. +- **Reverse Proxy:** Caddy (Auto-HTTPS, simpel) vs. Nginx vs. Traefik. +- **Domains/Subdomains-Organisation.** +- **Backup-Strategie** für die Zukunft (automatisiert). +- **Hardening:** SSH key-only, Fail2ban sinnvoll konfigurieren, Firewall — und die IONOS-Web-Konsole bewusst als Recovery-Weg behalten, um erneutes Aussperren zu vermeiden. diff --git a/02_Status_Erledigt_Todo.md b/02_Status_Erledigt_Todo.md new file mode 100644 index 0000000..ffb0b0b --- /dev/null +++ b/02_Status_Erledigt_Todo.md @@ -0,0 +1,28 @@ +# CheckPoint VPS-Projekt — Status: Erledigt & To-do + +## ✅ Erledigt +- Desktop neu aufgesetzt (**EndeavourOS**, Arch-basiert) — inkl. Gelegenheit zum Neuordnen von Dokumenten und LLM-Struktur. +- **VPS bei IONOS** (VPS 6-8-240) komplett neu installiert → frisch und leer. +- **Daten gesichert:** Repo-Klone + CheckPoint-Quelle liegen auf der **zweiten Laptop-Partition**. Inventur abgeschlossen → Wipe war risikofrei. +- Grundsatzentscheidungen getroffen: Wipe statt Reparatur · Desktop = Anker · LLM-Zugriff via VPN · pro Gerät eigenes ed25519-Keypair. + +## ⏳ Offen / Entscheidung ausstehend +- **Shell-Wahl** (Fish vs. Bash vs. Zsh) — Analyse liegt vor, Entscheidung noch nicht getroffen. + - Empfehlung: **Zsh** interaktiv, **Bash/POSIX** für alle Skripte. +- **Multi-App-Struktur** des VPS — noch gar nicht besprochen. Das ist die nächste **große Designdiskussion**. +- **Laptop-Reinstall** — Status bestätigen (zweite Partition mit den Klonen muss erhalten bleiben). + +## 📋 To-do (vorgeschlagene Reihenfolge) +1. **Shell-Entscheidung** treffen → Syntax für alles Weitere festlegen. +2. **Schlüsselbasierte SSH-Verbindung** zum frischen VPS einrichten (Desktop- + Laptop-Key → VPS). +3. **VPS-Grundhärtung:** key-only Login, Fail2ban vernünftig konfigurieren, Firewall, Recovery-Weg (IONOS-Konsole) bewusst behalten. +4. **Multi-App-Struktur** besprechen und festlegen (Container vs. systemd, Reverse Proxy, Domains/Subdomains, Isolation, Backups) — erst Optionen + Abwägungen, dann gemeinsam entscheiden. +5. **Grundinstallation** nach gewählter Struktur (Reverse Proxy, Verzeichnis-/Isolations-Layout). +6. **Deployment CheckPoint Ehrenamt** — inkl. **DB-Seed UND erstem Admin-Nutzer** von Anfang an. +7. **Git-Server** (falls weiter gewünscht) sauber und von den Apps isoliert aufsetzen. +8. **Automatisierte Backup-Routine** für die Zukunft einrichten. + +## ⚠️ Nicht vergessen +- **DB-Seed + erster Admin-Nutzer** ist beim letzten Versuch untergegangen → diesmal von Anfang an mitdenken. +- **Nicht erneut aussperren:** vor der Fail2ban-/SSH-Härtung sicherstellen, dass der eigene Key funktioniert *und* die IONOS-Web-Konsole als Notzugang verfügbar ist. +- **Skripte, die den VPS berühren: immer Bash/POSIX, nie Fish.** diff --git a/03_Startprompt_Fortsetzung.md b/03_Startprompt_Fortsetzung.md new file mode 100644 index 0000000..5b1b8fb --- /dev/null +++ b/03_Startprompt_Fortsetzung.md @@ -0,0 +1,39 @@ +# Startprompt — CheckPoint VPS-Projekt (Fortsetzung) + +*Diesen gesamten Block als erste Nachricht in den neuen Chat einfügen.* + +--- + +Ich setze die Arbeit an meinem IONOS-VPS fort. Der grobe Plan steht, einiges ist erledigt — ich brauche dich zum schrittweisen Weitermachen. + +## Arbeitsstil (wichtig) +- Eine Sache nach der anderen, mit klarer Bestätigung, bevor es weitergeht. +- Ich tippe alle Befehle selbst ins Terminal; du erklärst jeden Schritt und wartest auf meine Rückmeldung (Ausgabe, Fehler, „fertig"). +- Keine fertigen Skripte/Configs ungefragt vorausschreiben — ich will jeden Schritt verstehen und nachvollziehen. +- Bei Architektur-/Strukturentscheidungen: erst Optionen + Abwägungen erklären, dann gemeinsam entscheiden — nicht direkt umsetzen. + +## Aktueller Stand +- Desktop neu aufgesetzt (EndeavourOS, Arch-basiert). Ich bin aktuell oft auf dem Laptop. +- VPS bei IONOS (Typ VPS 6-8-240) komplett neu installiert — frisch und leer. +- Daten sicher: Repo-Klone + CheckPoint-Quelle liegen auf der zweiten Laptop-Partition. +- LLM-Zugriff (Desktop als lokaler Host) soll künftig über VPN laufen (Mesh: WireGuard/Tailscale/Netbird), nicht über den VPS. +- SSH-Keys: pro Gerät ein eigenes ed25519-Keypair geplant. +- Shell noch nicht final entschieden (Fish vs. Bash vs. Zsh; Tendenz: Zsh interaktiv, Bash/POSIX für alle Skripte). Frag mich gleich zu Beginn, welche Syntax du verwenden sollst. + +## Ziel-Zustand +Der VPS soll mehrere Apps parallel hosten — in einer sauberen, wiederholbaren, isolierten Struktur, nicht nur die eine App. Erste App: + +**CheckPoint Ehrenamt** — Flask + Jinja2, SQLite, kein App Store, mobile-first Web-App mit zwei Oberflächen (User-Shell mit Bottom-Nav, Admin-Shell mit Sidebar). Datenschutz: EU-Hosting, eigener Server (= dieser VPS). Es gibt ein eigenes `CLAUDE.md` und `TASKS.md`, die ich bei Bedarf einbringe. **Wichtig beim Deployment: DB-Seed UND erster Admin-Nutzer von Anfang an** (das hatte letztes Mal gefehlt). + +## Nächste Schritte (bitte challengen, falls unsinnig) +1. Shell-Entscheidung festzurren → Syntax festlegen. +2. Saubere, schlüsselbasierte SSH-Verbindung zum frischen VPS (Desktop- + Laptop-Key). +3. VPS-Grundhärtung (key-only, Fail2ban vernünftig, Firewall) — ohne mich erneut auszusperren; IONOS-Web-Konsole als Notzugang behalten. +4. Multi-App-Struktur besprechen und festlegen (Container vs. systemd · Reverse Proxy wie Caddy/Nginx/Traefik · Domains/Subdomains · Isolation · Backups). +5. Grundinstallation nach gewählter Struktur. +6. CheckPoint deployen (inkl. DB-Seed + Admin-Nutzer). +7. Git-Server isoliert wieder aufsetzen. +8. Automatisierte Backups einrichten. + +## Hintergrund zu meinem Workflow +Ich arbeite mit Continue.dev (lokale LLMs: Mistral 22B Architect, Qwen2.5-Coder 7B) und mit Claude Code für Mehrdateien-Arbeit. Für den VPS-Umbau hier im Chat reicht reines Anleiten — kein Code-Tool nötig. diff --git a/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.docx b/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.docx new file mode 100644 index 0000000..3b16fb3 Binary files /dev/null and b/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.docx differ diff --git a/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.pdf b/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.pdf new file mode 100644 index 0000000..6e7a658 Binary files /dev/null and b/2026-08-07_privat_aufgebotsverfahren-fahrzeugbrief.pdf differ diff --git a/DASHBOARD_PERPL/# Ivory & Ink UI Style Guide.md b/DASHBOARD_PERPL/# Ivory & Ink UI Style Guide.md new file mode 100644 index 0000000..d1db009 --- /dev/null +++ b/DASHBOARD_PERPL/# Ivory & Ink UI Style Guide.md @@ -0,0 +1,598 @@ +# Ivory & Ink UI Style Guide + +A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white. + +Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F2` | Main page background | +| `--page-accent` | `#F0ECE2` | Subtle page depth | +| `--surface` | `#FFFEFA` | Cards and dialogs | +| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions | +| `--surface-strong` | `#E8E1D4` | Selected and elevated elements | +| `--text` | `#242321` | Main text | +| `--muted` | `#6E6A63` | Secondary text | +| `--border` | `#D8D1C5` | Borders and dividers | +| `--primary` | `#2D2B28` | Main action and brand colour | +| `--primary-hover` | `#171614` | Primary hover and active state | +| `--secondary` | `#E8E2D8` | Secondary action | +| `--secondary-hover` | `#DAD2C5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090806` | Background depth | +| `--surface` | `#151411` | Cards and dialogs | +| `--surface-alt` | `#201E1A` | Inputs and secondary regions | +| `--surface-strong` | `#322F28` | Selected and elevated elements | +| `--text` | `#FAF7EF` | Main text | +| `--muted` | `#C7C1B5` | Secondary text | +| `--border` | `#4D4941` | Borders and dividers | +| `--primary` | `#E8E1D4` | Main action and brand colour | +| `--primary-hover` | `#FFF9ED` | Primary hover and active state | +| `--secondary` | `#4C4840` | Secondary action | +| `--secondary-hover` | `#625D53` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for strong actions and editorial emphasis without saturated colour. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for warm neutral controls, filters and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#817A70` | `#B6ADA0` | +| Accent 2 | `#8C9795` | `#8EA09C` | +| Accent 3 | `#B49B73` | `#C8AD7C` | +| Success | `#6F806F` | `#9BAE99` | +| Danger | `#8A5D54` | `#C89084` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF8F2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --text: #242321; + --muted: #6E6A63; + --border: #D8D1C5; + --primary: #2D2B28; + --secondary: #E8E2D8; +} + +html[data-theme="dark"] { + --page: #020202; + --surface: #151411; + --surface-alt: #201E1A; + --text: #FAF7EF; + --muted: #C7C1B5; + --border: #4D4941; + --primary: #E8E1D4; + --secondary: #4C4840; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use:# Ivory & Ink UI Style Guide + +A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white. + +Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F2` | Main page background | +| `--page-accent` | `#F0ECE2` | Subtle page depth | +| `--surface` | `#FFFEFA` | Cards and dialogs | +| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions | +| `--surface-strong` | `#E8E1D4` | Selected and elevated elements | +| `--text` | `#242321` | Main text | +| `--muted` | `#6E6A63` | Secondary text | +| `--border` | `#D8D1C5` | Borders and dividers | +| `--primary` | `#2D2B28` | Main action and brand colour | +| `--primary-hover` | `#171614` | Primary hover and active state | +| `--secondary` | `#E8E2D8` | Secondary action | +| `--secondary-hover` | `#DAD2C5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090806` | Background depth | +| `--surface` | `#151411` | Cards and dialogs | +| `--surface-alt` | `#201E1A` | Inputs and secondary regions | +| `--surface-strong` | `#322F28` | Selected and elevated elements | +| `--text` | `#FAF7EF` | Main text | +| `--muted` | `#C7C1B5` | Secondary text | +| `--border` | `#4D4941` | Borders and dividers | +| `--primary` | `#E8E1D4` | Main action and brand colour | +| `--primary-hover` | `#FFF9ED` | Primary hover and active state | +| `--secondary` | `#4C4840` | Secondary action | +| `--secondary-hover` | `#625D53` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for strong actions and editorial emphasis without saturated colour. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for warm neutral controls, filters and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#817A70` | `#B6ADA0` | +| Accent 2 | `#8C9795` | `#8EA09C` | +| Accent 3 | `#B49B73` | `#C8AD7C` | +| Success | `#6F806F` | `#9BAE99` | +| Danger | `#8A5D54` | `#C89084` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF8F2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --text: #242321; + --muted: #6E6A63; + --border: #D8D1C5; + --primary: #2D2B28; + --secondary: #E8E2D8; +} + +html[data-theme="dark"] { + --page: #020202; + --surface: #151411; + --surface-alt: #201E1A; + --text: #FAF7EF; + --muted: #C7C1B5; + --border: #4D4941; + --primary: #E8E1D4; + --secondary: #4C4840; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` diff --git a/DASHBOARD_PERPL/InclusiveDesignForCognitionGuidebook.pdf b/DASHBOARD_PERPL/InclusiveDesignForCognitionGuidebook.pdf new file mode 100644 index 0000000..2570782 Binary files /dev/null and b/DASHBOARD_PERPL/InclusiveDesignForCognitionGuidebook.pdf differ diff --git a/DASHBOARD_PERPL/artifact-a4f02344-eba6-47bf-a1a8-d60ae8ddeef3-3.html b/DASHBOARD_PERPL/artifact-a4f02344-eba6-47bf-a1a8-d60ae8ddeef3-3.html new file mode 100644 index 0000000..ef797eb --- /dev/null +++ b/DASHBOARD_PERPL/artifact-a4f02344-eba6-47bf-a1a8-d60ae8ddeef3-3.html @@ -0,0 +1,164 @@ + + + + + + + + + + + + + +Ivory & Ink – Bullet Journal + + + + + + +

My Bullet Journal

+ + +
+

Daily Log

+ +
+ + +
+
+ + +
+

Tasks

+ +
+ + +
+
+ + +
+

Notes

+ +
+ + +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-admin-users-ink.js b/DASHBOARD_PERPL/signal-admin-users-ink.js new file mode 100644 index 0000000..29af5ba --- /dev/null +++ b/DASHBOARD_PERPL/signal-admin-users-ink.js @@ -0,0 +1,115 @@ +(() => { + 'use strict'; + + const root = document.documentElement; + const STORAGE_KEY = 'signal-admin-theme'; + + // ===== Theme Management ===== + + const themeButtons = document.querySelectorAll('.theme-button'); + + function setTheme(theme) { + root.setAttribute('data-theme', theme); + themeButtons.forEach((button) => { + const isActive = button.dataset.theme === theme; + button.dataset.active = isActive ? 'true' : 'false'; + button.setAttribute('aria-checked', isActive ? 'true' : 'false'); + }); + try { + localStorage.setItem(STORAGE_KEY, theme); + } catch { + // Storage unavailable or full + } + } + + function initTheme() { + let theme = 'light'; + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'light' || stored === 'dark') { + theme = stored; + } else if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) { + theme = 'dark'; + } + } catch { + // Storage unavailable + } + setTheme(theme); + } + + themeButtons.forEach((button) => { + button.addEventListener('click', () => setTheme(button.dataset.theme || 'light')); + }); + + // ===== User Detail Binding ===== + + const tableBody = document.querySelector('#user-table tbody'); + const rows = tableBody ? Array.from(tableBody.querySelectorAll('tr')) : []; + const detailEmpty = document.querySelector('.detail-empty'); + const detailBody = document.querySelector('.detail-body'); + + // Cached detail field references + const detailFields = { + name: document.getElementById('detail-name'), + email: document.getElementById('detail-email'), + role: document.getElementById('detail-role'), + status: document.getElementById('detail-status'), + sessions: document.getElementById('detail-sessions'), + }; + + let selectedRow = null; + + function updateDetail(row) { + if (!row) return; + + const cells = row.querySelectorAll('td'); + if (cells.length < 6) return; + + const statusEl = cells[4].querySelector('.status'); + + detailFields.name.textContent = cells[1].textContent.trim(); + detailFields.email.textContent = cells[2].textContent.trim(); + detailFields.role.textContent = cells[3].textContent.trim(); + detailFields.status.textContent = statusEl?.textContent.trim() ?? '—'; + detailFields.sessions.textContent = cells[5].textContent.trim(); + } + + function selectRow(row) { + // Deselect previous row + if (selectedRow) { + selectedRow.removeAttribute('aria-selected'); + selectedRow.style.background = ''; + } + + selectedRow = row; + + if (!row) { + detailEmpty?.setAttribute('data-state', 'empty'); + detailBody?.setAttribute('data-state', 'inactive'); + detailBody?.toggleAttribute('hidden', true); + return; + } + + // Select new row + row.setAttribute('aria-selected', 'true'); + row.style.background = 'var(--surface-strong)'; + + // Update detail view + updateDetail(row); + detailEmpty?.setAttribute('data-state', 'active'); + detailBody?.setAttribute('data-state', 'active'); + detailBody?.toggleAttribute('hidden', false); + } + + // Event delegation for table rows + tableBody?.addEventListener('click', (e) => { + const row = e.target.closest('tr'); + if (row) selectRow(row); + }); + + // Initialize: show empty state + selectRow(null); + + // Initialize theme + initTheme(); +})(); \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-admin-users.js b/DASHBOARD_PERPL/signal-admin-users.js new file mode 100644 index 0000000..c9787f0 --- /dev/null +++ b/DASHBOARD_PERPL/signal-admin-users.js @@ -0,0 +1,115 @@ +(() => { + 'use strict'; + + const root = document.documentElement; + const STORAGE_KEY = 'signal-admin-theme'; + + // ===== Theme Management ===== + + const themeButtons = document.querySelectorAll('.theme-button'); + + function setTheme(theme) { + root.setAttribute('data-theme', theme); + themeButtons.forEach((button) => { + const isActive = button.dataset.theme === theme; + button.dataset.active = isActive ? 'true' : 'false'; + button.setAttribute('aria-checked', isActive ? 'true' : 'false'); + }); + try { + localStorage.setItem(STORAGE_KEY, theme); + } catch { + // Storage unavailable or full + } + } + + function initTheme() { + let theme = 'light'; + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'light' || stored === 'dark') { + theme = stored; + } else if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) { + theme = 'dark'; + } + } catch { + // Storage unavailable + } + setTheme(theme); + } + + themeButtons.forEach((button) => { + button.addEventListener('click', () => setTheme(button.dataset.theme || 'light')); + }); + + // ===== User Detail Binding ===== + + const tableBody = document.querySelector('#user-table tbody'); + const rows = tableBody ? Array.from(tableBody.querySelectorAll('tr')) : []; + const detailEmpty = document.querySelector('.detail-empty'); + const detailBody = document.querySelector('.detail-body'); + + // Cached detail field references + const detailFields = { + name: document.getElementById('detail-name'), + email: document.getElementById('detail-email'), + role: document.getElementById('detail-role'), + status: document.getElementById('detail-status'), + sessions: document.getElementById('detail-sessions'), + }; + + let selectedRow = null; + + function updateDetail(row) { + if (!row) return; + + const cells = row.querySelectorAll('td'); + if (cells.length < 6) return; + + const statusEl = cells[4].querySelector('.status'); + + detailFields.name.textContent = cells[1].textContent.trim(); + detailFields.email.textContent = cells[2].textContent.trim(); + detailFields.role.textContent = cells[3].textContent.trim(); + detailFields.status.textContent = statusEl?.textContent.trim() ?? '—'; + detailFields.sessions.textContent = cells[5].textContent.trim(); + } + + function selectRow(row) { + // Deselect previous row + if (selectedRow) { + selectedRow.removeAttribute('aria-selected'); + selectedRow.style.background = ''; + } + + selectedRow = row; + + if (!row) { + detailEmpty?.setAttribute('data-state', 'empty'); + detailBody?.setAttribute('data-state', 'inactive'); + detailBody?.toggleAttribute('hidden', true); + return; + } + + // Select new row + row.setAttribute('aria-selected', 'true'); + row.style.background = 'rgba(16, 179, 187, 0.08)'; + + // Update detail view + updateDetail(row); + detailEmpty?.setAttribute('data-state', 'active'); + detailBody?.setAttribute('data-state', 'active'); + detailBody?.toggleAttribute('hidden', false); + } + + // Event delegation for table rows + tableBody?.addEventListener('click', (e) => { + const row = e.target.closest('tr'); + if (row) selectRow(row); + }); + + // Initialize: show empty state + selectRow(null); + + // Initialize theme + initTheme(); +})(); \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-dashboard-users-ink.css b/DASHBOARD_PERPL/signal-dashboard-users-ink.css new file mode 100644 index 0000000..373b04b --- /dev/null +++ b/DASHBOARD_PERPL/signal-dashboard-users-ink.css @@ -0,0 +1,625 @@ +/* Signal Dashboard Users – Ivory & Ink Styles */ + +/* ===== Custom Properties ===== */ + +:root { + /* Typography */ + --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif; + --font-ui: "Lexend", "Segoe UI", Arial, sans-serif; + + /* Light theme colors — Ivory & Ink */ + --page: #FAF8F2; + --page-accent: #F0ECE2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --surface-strong: #E8E1D4; + --border: #D8D1C5; + --text: #242321; + --muted: #6E6A63; + --focus: #2D2B28; + --primary: #2D2B28; + --primary-hover: #171614; + --on-primary: #FAF7EF; + --on-secondary: #242321; + --secondary: #E8E2D8; + --secondary-hover: #DAD2C5; + --accent-1: #817A70; + --accent-2: #8C9795; + --accent-3: #B49B73; + --success: #6F806F; + --danger: #8A5D54; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); +} + +[data-theme="dark"] { + --page: #020202; + --page-accent: #090806; + --surface: #151411; + --surface-alt: #201E1A; + --surface-strong: #322F28; + --border: #4D4941; + --text: #FAF7EF; + --muted: #C7C1B5; + --focus: #E8E1D4; + --primary: #E8E1D4; + --primary-hover: #FFF9ED; + --on-primary: #151411; + --on-secondary: #FAF7EF; + --secondary: #4C4840; + --secondary-hover: #625D53; + --accent-1: #B6ADA0; + --accent-2: #8EA09C; + --accent-3: #C8AD7C; + --success: #9BAE99; + --danger: #C89084; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +/* ===== Base ===== */ + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--font-body); + font-size: 18px; + line-height: 1.6; + background: var(--page); + color: var(--text); +} + +button, input, select { + font: inherit; +} + +:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 3px; +} + +/* ===== Layout Shell ===== */ + +.app-shell { + display: grid; + grid-template-columns: 240px minmax(0, 1fr); + min-height: 100vh; +} + +/* ===== Sidebar ===== */ + +.sidebar { + background: var(--surface-alt); + color: var(--text); + padding: 18px 16px; + display: flex; + flex-direction: column; + border-right: 1px solid var(--border); +} + +.sidebar-brand { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.sidebar-sigil { + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--primary); + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar-sigil span { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid var(--on-primary); +} + +.sidebar-title { + display: flex; + flex-direction: column; +} + +.sidebar-name { + font-family: var(--font-ui); + font-size: 13px; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.sidebar-sub { + font-size: 11px; + color: var(--muted); +} + +.sidebar-nav { + display: flex; + flex-direction: column; + gap: 4px; +} + +.nav-item { + border: none; + border-radius: 6px; + padding: 7px 10px; + text-align: left; + font-family: var(--font-ui); + font-size: 13px; + color: var(--muted); + background: transparent; + cursor: pointer; +} + +.nav-item:hover { + background: var(--surface-strong); + color: var(--text); +} + +.nav-item--active { + background: var(--surface-strong); + color: var(--text); + font-weight: 500; +} + +/* ===== Main Area ===== */ + +.main-area { + padding: 24px 32px 32px; + display: flex; + flex-direction: column; + gap: 24px; +} + +/* ===== Top Bar ===== */ + +.top-bar { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 16px; +} + +.page-title { + margin: 0; + font-family: var(--font-ui); + font-size: 22px; + letter-spacing: -0.02em; +} + +.page-subtitle { + margin: 6px 0 0; + font-size: 13px; + color: var(--muted); +} + +.top-bar-right { + display: flex; + align-items: center; + gap: 10px; +} + +.theme-toggle { + border-radius: 9999px; + padding: 4px; + border: 1px solid var(--border); + background: var(--surface-alt); + display: inline-flex; + gap: 4px; +} + +.theme-button { + border: none; + border-radius: 9999px; + padding: 4px 10px; + font-size: 11px; + font-family: var(--font-ui); + background: transparent; + color: var(--muted); + cursor: pointer; +} + +.theme-button[data-active="true"] { + background: var(--secondary); + color: var(--on-secondary); +} + +.theme-button:hover:not([data-active="true"]) { + background: var(--surface-strong); +} + +.profile-chip { + border-radius: 9999px; + border: 1px solid var(--border); + padding: 4px 10px; + background: var(--surface); + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; +} + +.profile-initials { + width: 18px; + height: 18px; + border-radius: 9999px; + background: var(--primary); + color: var(--on-primary); + font-size: 10px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.profile-name { + font-size: 13px; +} + +/* ===== Toolbar ===== */ + +.toolbar { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 16px; +} + +.toolbar-left { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.field-inline { + display: flex; + flex-direction: column; + gap: 4px; +} + +.field-label { + font-size: 11px; + font-family: var(--font-ui); + color: var(--muted); +} + +.field-inline input, +.field-inline select { + min-width: 180px; + padding: 8px 10px; + border-radius: 6px; + border: 1px solid var(--border); + background: var(--surface-alt); + color: var(--text); +} + +.field-inline input:focus, +.field-inline select:focus { + outline: 3px solid var(--focus); + outline-offset: 2px; + border-color: var(--primary); +} + +.toolbar-right { + display: flex; + gap: 8px; +} + +/* ===== Buttons ===== */ + +.btn { + border-radius: 9999px; + font-size: 13px; + cursor: pointer; +} + +.primary-btn { + border: none; + padding: 8px 16px; + font-family: var(--font-ui); + font-weight: 500; + font-size: 14px; + letter-spacing: 0.04em; + text-transform: uppercase; + background: var(--primary); + color: var(--on-primary); + display: inline-flex; + align-items: center; + gap: 6px; +} + +.primary-btn span:first-child { + width: 14px; + height: 14px; + border-radius: 9999px; + border: 1px solid var(--on-primary); + background: transparent; +} + +.primary-btn:hover { + background: var(--primary-hover); +} + +.primary-btn--small { + padding: 6px 12px; + font-size: 13px; +} + +.secondary-btn { + border: 1px solid var(--border); + padding: 8px 14px; + background: var(--secondary); + color: var(--on-secondary); + font-family: var(--font-ui); + font-size: 14px; +} + +.secondary-btn:hover { + background: var(--secondary-hover); + border-color: var(--secondary-hover); +} + +.danger-btn { + border: 1px solid var(--danger); + padding: 8px 14px; + background: var(--danger); + color: var(--on-primary); + font-family: var(--font-ui); + font-size: 14px; +} + +.danger-btn:hover { + box-shadow: 0 0 0 1px var(--danger); +} + +/* ===== Main Layout Grid ===== */ + +.layout-grid { + display: grid; + grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); + gap: 24px; +} + +/* ===== Panels ===== */ + +.panel { + background: var(--surface); + border-radius: 10px; + padding: 16px 16px 20px; + border: 1px solid var(--border); + box-shadow: var(--shadow-sm); +} + +.panel-header { + margin-bottom: 12px; +} + +.panel-title { + margin: 0; + font-family: var(--font-ui); + font-size: 15px; +} + +.panel-subtitle { + margin: 4px 0 0; + font-size: 12px; + color: var(--muted); +} + +/* ===== Table ===== */ + +.table-shell { + margin-top: 8px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--surface-alt); + overflow: hidden; +} + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: 14px; + font-family: var(--font-body); +} + +.data-table th, +.data-table td { + padding: 10px 12px; + text-align: left; +} + +.data-table thead { + background: var(--surface-strong); +} + +.data-table tbody tr:nth-child(even) { + background: var(--surface); +} + +.data-table tbody tr:hover { + background: var(--surface-alt); +} + +.data-table tbody tr[aria-selected="true"] { + background: var(--surface-strong); +} + +.data-table tbody tr { + cursor: pointer; +} + +.status { + display: inline-flex; + border-radius: 9999px; + padding: 2px 8px; + font-size: 11px; + font-family: var(--font-ui); +} + +.status--ok { + background: rgba(111, 128, 111, 0.15); + color: var(--success); +} + +.status--warn { + background: rgba(180, 155, 115, 0.15); + color: var(--accent-3); +} + +.status--error { + background: rgba(138, 93, 84, 0.15); + color: var(--danger); +} + +.table-footer { + margin-top: 12px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + color: var(--muted); +} + +/* ===== Detail Panel ===== */ + +.detail-empty { + display: block; + font-size: 14px; + color: var(--muted); +} + +.detail-empty[data-state="empty"] { + display: block; +} + +.detail-empty[data-state="active"] { + display: none; +} + +.detail-body { + display: block; +} + +.detail-body[data-state="inactive"] { + display: none; +} + +.detail-body[data-state="active"] { + display: block; +} + +.detail-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + margin: 12px 0 16px; + font-size: 14px; +} + +.detail-list dt { + font-family: var(--font-ui); + font-size: 11px; + color: var(--muted); +} + +.detail-list dd { + margin: 2px 0 0; +} + +.detail-preferences h3 { + margin: 0 0 6px; + font-size: 13px; + font-family: var(--font-ui); +} + +.detail-flags { + list-style: none; + padding: 0; + margin: 8px 0 12px; + font-size: 13px; + color: var(--muted); + font-family: var(--font-body); + display: grid; + gap: 6px; +} + +.flag-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 9999px; + margin-right: 6px; +} + +.flag-dot--enabled { + background: var(--primary); +} + +.flag-dot--disabled { + background: var(--border); +} + +.detail-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 12px; +} + +/* ===== Accessibility ===== */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ===== Responsive ===== */ + +@media (max-width: 768px) { + .app-shell { + grid-template-columns: 1fr; + } + + .sidebar { + padding: 12px; + } + + .layout-grid { + grid-template-columns: 1fr; + } + + .toolbar { + flex-direction: column; + align-items: stretch; + } + + .toolbar-left { + flex-direction: column; + } + + .field-inline input, + .field-inline select { + min-width: unset; + width: 100%; + } + + .detail-list { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-dashboard-users-ink.html b/DASHBOARD_PERPL/signal-dashboard-users-ink.html new file mode 100644 index 0000000..431cb06 --- /dev/null +++ b/DASHBOARD_PERPL/signal-dashboard-users-ink.html @@ -0,0 +1,189 @@ + + + + + Signal Admin – Users + + + + + + + + +
+ + +
+
+
+

Users

+

+ Manage access, roles and distraction-aware preferences per user. +

+
+
+
+ + +
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
+
+

User list

+

Neutral surfaces with one primary ink colour for main actions.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailRoleStatusSessions
Alex Riveraalex@example.orgAdminActive42
Lee Chenlee@example.orgMaintainerActive18
Sam K.sam@example.orgMemberInvited0
Jules Hartjules@example.orgMemberSuspended7
+
+
+
Showing 4 of 128 users.
+
+ + +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-dashboard-users.css b/DASHBOARD_PERPL/signal-dashboard-users.css new file mode 100644 index 0000000..507426c --- /dev/null +++ b/DASHBOARD_PERPL/signal-dashboard-users.css @@ -0,0 +1,602 @@ +/* Signal Dashboard Users – Styles */ + +/* ===== Custom Properties ===== */ + +:root { + /* Typography */ + --font-body: 'Inter', system-ui, -apple-system, sans-serif; + --font-ui: 'Inter', system-ui, -apple-system, sans-serif; + + /* Light theme colors */ + --page: #F4F7F8; + --page-accent: #E0F7FA; + --surface: #FFFFFF; + --surface-alt: #F9FAFB; + --surface-strong: #F0F4F5; + --border: #DCE3E8; + --text: #1A2327; + --muted: #6B7C83; + --focus: #0FB5B9; + --primary: #0FB5B9; + --accent-1: #0B858C; + --on-primary: #FFFFFF; + --on-secondary: #FFFFFF; + --secondary: #0B858C; + --success: #2F9B5C; + --warn: #D18E2E; + --danger: #E51A2A; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); +} + +[data-theme="dark"] { + --page: #0D1117; + --page-accent: #0B171B; + --surface: #161B22; + --surface-alt: #1C2333; + --surface-strong: #1A2035; + --border: #2A3441; + --text: #E6EDF3; + --muted: #7B8A90; + --focus: #0FB5B9; + --primary: #0FB5B9; + --accent-1: #12C4C8; + --on-primary: #FFFFFF; + --on-secondary: #FFFFFF; + --secondary: #0B858C; + --success: #3CC776; + --warn: #E5A845; + --danger: #F04F5C; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); +} + +/* ===== Base ===== */ + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--font-body); + background: radial-gradient(circle at top left, var(--page-accent), var(--page)); + color: var(--text); +} + +button, input, select { + font: inherit; +} + +:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 3px; +} + +/* ===== Layout Shell ===== */ + +.app-shell { + display: grid; + grid-template-columns: 240px minmax(0, 1fr); + min-height: 100vh; +} + +/* ===== Sidebar ===== */ + +.sidebar { + background: #0B171B; + color: #F4F7F8; + padding: 18px 16px; + display: flex; + flex-direction: column; +} + +.sidebar-brand { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.sidebar-sigil { + width: 28px; + height: 28px; + border-radius: 50%; + background: radial-gradient(circle at 20% 0%, var(--primary), var(--accent-1)); + box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 12px 24px rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar-sigil span { + width: 12px; + height: 12px; + border-radius: 50%; + border: 2px solid rgba(255,255,255,0.8); +} + +.sidebar-title { + display: flex; + flex-direction: column; +} + +.sidebar-name { + font-family: var(--font-ui); + font-size: 13px; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.sidebar-sub { + font-size: 11px; + color: #B0BEC5; +} + +.sidebar-nav { + display: flex; + flex-direction: column; + gap: 4px; +} + +.nav-item { + border: none; + border-radius: 6px; + padding: 7px 10px; + text-align: left; + font-family: var(--font-ui); + font-size: 13px; + color: #CFD8DC; + background: transparent; + cursor: pointer; +} + +.nav-item:hover { + background: rgba(16, 179, 187, 0.1); + color: #E0F7FA; +} + +.nav-item--active { + background: rgba(16, 179, 187, 0.18); + color: #E0F7FA; +} + +/* ===== Main Area ===== */ + +.main-area { + padding: 20px 22px 26px; + display: flex; + flex-direction: column; + gap: 18px; +} + +/* ===== Top Bar ===== */ + +.top-bar { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 16px; +} + +.page-title { + margin: 0; + font-family: var(--font-ui); + font-size: 22px; + letter-spacing: -0.02em; +} + +.page-subtitle { + margin: 6px 0 0; + font-size: 13px; + color: var(--muted); +} + +.top-bar-right { + display: flex; + align-items: center; + gap: 10px; +} + +.theme-toggle { + border-radius: 9999px; + padding: 4px; + border: 1px solid var(--border); + background: var(--surface-alt); + display: inline-flex; + gap: 4px; +} + +.theme-button { + border: none; + border-radius: 9999px; + padding: 4px 10px; + font-size: 11px; + background: transparent; + color: var(--muted); + cursor: pointer; +} + +.theme-button[data-active="true"] { + background: var(--secondary); + color: var(--on-secondary); +} + +.profile-chip { + border-radius: 9999px; + border: 1px solid var(--border); + padding: 4px 10px; + background: var(--surface); + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; +} + +.profile-initials { + width: 18px; + height: 18px; + border-radius: 9999px; + background: var(--primary); + color: var(--on-primary); + font-size: 10px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.profile-name { + font-size: 13px; +} + +/* ===== Toolbar ===== */ + +.toolbar { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 16px; +} + +.toolbar-left { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.field-inline { + display: flex; + flex-direction: column; + gap: 4px; +} + +.field-label { + font-size: 11px; + font-family: var(--font-ui); + color: var(--muted); +} + +.field-inline input, +.field-inline select { + min-width: 180px; + padding: 6px 10px; + border-radius: 6px; + border: 1px solid var(--border); + background: var(--surface-alt); + color: var(--text); +} + +.field-inline input:focus, +.field-inline select:focus { + outline: 3px solid var(--focus); + outline-offset: 2px; + border-color: var(--focus); +} + +.toolbar-right { + display: flex; + gap: 8px; +} + +/* ===== Buttons ===== */ + +.btn { + border-radius: 9999px; + font-size: 13px; + cursor: pointer; +} + +.primary-btn { + border: none; + padding: 7px 14px; + font-family: var(--font-ui); + font-weight: 500; + letter-spacing: 0.04em; + text-transform: uppercase; + background: radial-gradient(circle at 0% 0%, #E8FBFC, var(--primary)); + color: var(--on-primary); + display: inline-flex; + align-items: center; + gap: 6px; +} + +.primary-btn span:first-child { + width: 14px; + height: 14px; + border-radius: 9999px; + border: 1px solid rgba(255,255,255,0.85); + background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); +} + +.primary-btn:hover { + box-shadow: 0 0 0 1px var(--focus); +} + +.primary-btn--small { + padding: 5px 10px; + font-size: 12px; +} + +.secondary-btn { + border: 1px solid var(--border); + padding: 7px 12px; + background: var(--surface-alt); + color: var(--text); +} + +.secondary-btn:hover { + border-color: var(--focus); + background: var(--surface); +} + +.danger-btn { + border: 1px solid var(--danger); + padding: 7px 12px; + background: var(--danger); + color: #FDF2F3; +} + +.danger-btn:hover { + box-shadow: 0 0 0 1px var(--danger); +} + +/* ===== Main Layout Grid ===== */ + +.layout-grid { + display: grid; + grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); + gap: 16px; +} + +/* ===== Panels ===== */ + +.panel { + background: var(--surface); + border-radius: 10px; + padding: 14px 14px 16px; + border: 1px solid var(--border); + box-shadow: var(--shadow-sm); +} + +.panel-header { + margin-bottom: 10px; +} + +.panel-title { + margin: 0; + font-family: var(--font-ui); + font-size: 15px; +} + +.panel-subtitle { + margin: 4px 0 0; + font-size: 12px; + color: var(--muted); +} + +/* ===== Table ===== */ + +.table-shell { + margin-top: 6px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--surface-alt); + overflow: hidden; +} + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: 12px; +} + +.data-table th, +.data-table td { + padding: 7px 10px; + text-align: left; +} + +.data-table thead { + background: var(--surface-strong); +} + +.data-table tbody tr:nth-child(even) { + background: var(--surface); +} + +.data-table tbody tr:hover { + background: var(--surface-alt); +} + +.data-table tbody tr[aria-selected="true"] { + background: rgba(16, 179, 187, 0.08); +} + +.data-table tbody tr { + cursor: pointer; +} + +.status { + display: inline-flex; + border-radius: 9999px; + padding: 2px 8px; + font-size: 11px; +} + +.status--ok { + background: rgba(47, 155, 92, 0.12); + color: var(--success); +} + +.status--warn { + background: rgba(209, 138, 46, 0.12); + color: var(--warn); +} + +.status--error { + background: rgba(229, 26, 34, 0.12); + color: var(--danger); +} + +.table-footer { + margin-top: 8px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: var(--muted); +} + +/* ===== Detail Panel ===== */ + +.detail-empty { + display: block; + font-size: 13px; + color: var(--muted); +} + +.detail-empty[data-state="empty"] { + display: block; +} + +.detail-empty[data-state="active"] { + display: none; +} + +.detail-body { + display: block; +} + +.detail-body[data-state="inactive"] { + display: none; +} + +.detail-body[data-state="active"] { + display: block; +} + +.detail-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + margin: 8px 0 12px; + font-size: 12px; +} + +.detail-list dt { + font-family: var(--font-ui); + font-size: 11px; + color: var(--muted); +} + +.detail-list dd { + margin: 2px 0 0; +} + +.detail-preferences h3 { + margin: 0 0 4px; + font-size: 13px; + font-family: var(--font-ui); +} + +.detail-flags { + list-style: none; + padding: 0; + margin: 6px 0 10px; + font-size: 12px; + color: var(--muted); + display: grid; + gap: 4px; +} + +.flag-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 9999px; + margin-right: 6px; +} + +.flag-dot--enabled { + background: var(--primary); +} + +.flag-dot--disabled { + background: var(--border); +} + +.detail-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} + +/* ===== Accessibility ===== */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ===== Responsive ===== */ + +@media (max-width: 768px) { + .app-shell { + grid-template-columns: 1fr; + } + + .sidebar { + padding: 12px; + } + + .layout-grid { + grid-template-columns: 1fr; + } + + .toolbar { + flex-direction: column; + align-items: stretch; + } + + .toolbar-left { + flex-direction: column; + } + + .field-inline input, + .field-inline select { + min-width: unset; + width: 100%; + } + + .detail-list { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/DASHBOARD_PERPL/signal-dashboard-users.html b/DASHBOARD_PERPL/signal-dashboard-users.html new file mode 100644 index 0000000..c14c2ae --- /dev/null +++ b/DASHBOARD_PERPL/signal-dashboard-users.html @@ -0,0 +1,189 @@ + + + + + Signal Admin – Users + + + + + + + + +
+ + +
+
+
+

Users

+

+ Manage access, roles and distraction-aware preferences per user. +

+
+
+
+ + +
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
+
+

User list

+

Cyan marks primary admin actions. Red is reserved for destructive updates.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameEmailRoleStatusSessions
Alex Riveraalex@example.orgAdminActive42
Lee Chenlee@example.orgMaintainerActive18
Sam K.sam@example.orgMemberInvited0
Jules Hartjules@example.orgMemberSuspended7
+
+
+
Showing 4 of 128 users.
+
+ + +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Dev-Playbook.md b/Dev-Playbook.md new file mode 100644 index 0000000..2307b14 --- /dev/null +++ b/Dev-Playbook.md @@ -0,0 +1,420 @@ +# App Development Playbook +> From idea to shipped app using AI assistance +> Tools: Claude Code CLI · Codex CLI · Continue + local LLMs + +--- + +## Overview + +This playbook covers the full journey from a raw idea to a working, deployed app. It is structured in five phases. Each phase has a clear goal, a set of steps, and the exact prompts to use. + +The core discipline throughout: **one task per session, always**. The AI has no memory between sessions — that is a feature, not a bug. You control exactly what it knows. + +--- + +## Your Tools and Their Roles + +| Tool | Role | When to use | +|---|---|---| +| Claude (chat) | Concept partner | Phase 1 — idea to specification | +| Claude Code CLI | Architect + scaffold | Multi-file work, wiring up, audits | +| Codex CLI | Implementation | Single-feature build sessions | +| Continue + Mistral | Reviewer | After any finished component | +| Continue + Qwen | Inline fixes | Targeted edits, `Ctrl+I` | + +**Rule:** Claude Code and Codex are interchangeable for implementation. Run them on the same task to compare. Mistral is always your reviewer — never skip the review step for core logic. + +--- + +## Phase 1 — Concept + +**Goal:** Lock every decision before a single file is created. + +Work through this in Claude chat. Do not open VS Code. + +--- + +### Step 1.1 — Define the idea + +``` +I want to build [brief description]. +Let's work through the concept together before any code is written. +Ask me everything you need to know to produce a complete specification. +One question at a time. +``` + +Stay in this conversation until every question is answered: +- What problem does it solve? +- Who uses it, and what roles do they have? +- What is the core user flow, step by step? +- What are the edge cases and special rules? +- What is explicitly out of scope for now? + +--- + +### Step 1.2 — Lock the concept document + +``` +Produce a complete concept document covering: +auth, roles, data model decisions, core user flows, edge cases, +notifications, export requirements, and anything deferred to a later phase. +Present it as a visual summary. Flag any remaining open questions. +``` + +Do not proceed until every open question is answered. + +--- + +### Step 1.3 — Define the design system + +``` +Here are my brand assets: [attach files] +The app needs light and dark mode. +Primary users will be on [mobile / desktop / both]. +Produce a design system covering: +- CSS variables for all colours (brand + status colours) +- Logo usage rules for light and dark mode +- Typography choices +- Any language toggle requirements +Show me a preview of light and dark mode side by side. +``` + +--- + +### Step 1.4 — Produce the three project files + +``` +Produce three files for this project: + +1. CLAUDE.md — the project anchor file. Covers: stack, roles, + data model rules, key business logic, design system (colours, + fonts, logo rules, CSS variables), UI rules, and project structure. + Claude Code and Codex read this at the start of every session. + +2. TASKS.md — a numbered build checklist, one task per session, + ordered by dependency. Each task includes: which tool to use, + the exact session prompt, and a checklist of deliverables. + Include Phase 1 (core build) and stub out Phase 2. + +3. A stakeholder document in [German/English] — plain language, no code. + Covers: the problem, the solution, every feature with its reasoning, + the technical approach in one paragraph, and a phased roadmap. + Suitable for presenting to a non-technical audience. +``` + +--- + +## Phase 2 — Setup + +**Goal:** Initialise the project on your machine. + +Run once, before any coding sessions begin. + +```fish +# Create project folder +mkdir ~/projects/your-app-name +cd ~/projects/your-app-name + +# Copy in the three documents from Phase 1 +cp ~/Downloads/CLAUDE.md . +cp ~/Downloads/TASKS.md . +cp ~/Downloads/logo-signet.png . # if applicable + +# Initialise git +git init +git add . +git commit -m "chore: initial concept documents" + +# Create virtual environment +python -m venv venv +source venv/bin/activate.fish + +# Create .env (never commit this) +touch .env +echo ".env" >> .gitignore +echo "*.db" >> .gitignore +echo "__pycache__/" >> .gitignore +echo "*.pyc" >> .gitignore +echo "venv/" >> .gitignore + +git add .gitignore +git commit -m "chore: gitignore" +``` + +**Minimal `.env` for any Flask + SQLite + Flask-Mail project:** + +```ini +FLASK_APP=run.py +FLASK_CONFIG=development +SECRET_KEY=generate-with-python-c-import-secrets-print-secrets.token_hex-32 +MAIL_PASSWORD=your-mail-password +MAIL_SUPPRESS_SEND=True # remove this in production +``` + +--- + +## Phase 3 — Core Build (Phase 1 sessions) + +**Goal:** Build the working app, one session at a time. + +### Before every session + +1. Open `TASKS.md` — find the next unchecked session +2. Read the deliverables — understand what done looks like +3. Choose your tool: + +| Use Claude Code / Codex CLI when | Use Continue + Qwen when | +|---|---| +| Creating multiple new files | Editing one specific file | +| Wiring up the whole app | Adding a single route or function | +| Cross-file refactoring | Fixing a bug | +| First session (scaffold) | All implementation sessions | + +### Claude Code session + +```fish +cd ~/projects/your-app-name +claude +``` + +Paste the session prompt from `TASKS.md`. Claude Code reads `CLAUDE.md` automatically. + +### Codex CLI session + +```fish +cd ~/projects/your-app-name +codex +``` + +Same session prompt. Codex also reads `CLAUDE.md` if you instruct it to at the start: + +``` +Read CLAUDE.md first. Then: [paste session prompt] +``` + +### Continue session (Qwen — writing code) + +```fish +llama-switch # pick Coder +code ~/projects/your-app-name +``` + +New chat (`Ctrl+L` → `+`), then: + +``` +@file app/[relevant-file].py +@file CLAUDE.md + +[Paste session prompt from TASKS.md] +``` + +### Review after every core session (Mistral) + +```fish +llama-switch # pick Architect +``` + +New chat: + +``` +@file app/[file-you-just-wrote].py +@file CLAUDE.md + +Review this against CLAUDE.md. +Correctness issues first, then anything that will break +when integrated with related files. +Do not rewrite — flag issues as a numbered list. +``` + +### Inline fix (Qwen · Ctrl+I) + +Highlight code → `Ctrl+I`: + +``` +[One sentence describing the change] +``` + +Accept: `Ctrl+Shift+Enter` — Reject: `Escape` + +### After every session + +```fish +git add . +git commit -m "feat: session [N] — [short description]" +``` + +Check off every deliverable in `TASKS.md` before starting the next session. + +--- + +## Phase 4 — Feature Expansion (Phase 2 sessions) + +**Goal:** Add features on top of a working foundation. + +Same session discipline as Phase 3. Each feature is a mini-cycle: + +``` +Audit → Plan → Build → Review → Commit +``` + +### Audit prompt (run first, before any build session) + +``` +Read CLAUDE.md. +I want to add [feature name]. +Audit the current codebase for what already exists that is relevant. +Tell me: +- What files will need to change? +- What already exists that I can build on? +- What are the risks or dependencies? +- What order should I tackle this in? +Do not write any code. Diagnosis only. +``` + +### Build prompt template + +``` +Read CLAUDE.md. +I am implementing [feature name]. +Relevant existing files: [list them] + +Task: [specific thing to build this session] +State your approach and which files you will touch before writing anything. +One piece at a time — start with [data model / logic / route / template]. +``` + +--- + +## Phase 5 — AI Tool Comparison + +**Goal:** Run Claude Code and Codex on the same task to compare output quality. + +### Setup + +```fish +# Clone the repo twice into separate folders +git clone your-repo-url room-booking-claude +git clone your-repo-url room-booking-codex + +# Create a comparison branch in each +cd room-booking-claude && git checkout -b compare/claude-code +cd ../room-booking-codex && git checkout -b compare/codex +``` + +### Give both the same task + +Use the same session prompt verbatim. Do not adjust it between tools. + +### Scoring rubric + +After each tool completes the task, score it: + +| Criterion | What to look for | +|---|---| +| Correctness | Does it follow the business rules in CLAUDE.md exactly? | +| Completeness | Are all deliverables produced without prompting? | +| Code quality | Is it readable, consistent with existing style? | +| Context adherence | Did it touch files it was told not to touch? | +| Autonomy | How many clarifying questions did it ask mid-task? | + +Score each 1–5. Keep notes. After 3–4 sessions you will have a clear picture of which tool suits your workflow better. + +--- + +## Prompt Library + +### Concept phase + +**Start a new idea:** +``` +I want to build [description]. Let's work through the concept +before any code is written. Ask me one question at a time. +``` + +**Lock a decision:** +``` +Summarise what we have agreed on so far and list any remaining +open questions before we move on. +``` + +### Build phase + +**Plan before writing:** +``` +Read CLAUDE.md. +Task: [description] +Before writing anything, state your approach and which files you will touch. +``` + +**One piece at a time:** +``` +Good. Now write only the [data model / service layer / route / template]. +Nothing else yet. +``` + +**Bug diagnosis:** +``` +@currentFile +Line [N] throws [error] when [condition]. +Root cause first, then minimal fix, then any follow-up improvements. +Do not ask for other files unless you explain exactly why you need them. +``` + +**Explain unfamiliar code:** +``` +@file src/some-file.py +Walk me through what this file does step by step. +Assume I have not seen this codebase before. +Focus on: what it does, why it is written this way, any gotchas. +Keep it under 10 lines. +``` + +**Refactor safely:** +``` +@currentFile +Refactor this one step at a time. +Explain what you are changing and why before each step. +Do not touch anything outside the highlighted section. +``` + +**Review finished component:** +``` +@file [component] +@file CLAUDE.md +Review this against CLAUDE.md. +Correctness first, then maintainability concerns. +Do not rewrite — flag issues as a numbered list. +``` + +**Stuck on approach:** +``` +@file CLAUDE.md +I need to implement [X]. +Give me 2–3 approaches, pros and cons of each, then your recommendation. +``` + +--- + +## The Five Rules + +1. **New session per task** — never carry context across tasks +2. **Always attach files explicitly** — never assume the model knows what you are looking at +3. **Plan before you build** — agree on the approach before any code is written +4. **One piece at a time** — data model, then logic, then route, then template +5. **Architect reviews every core component** — never skip the review step on models, auth, and business logic + +--- + +## Quick Reference + +```fish +Start Claude Code: cd ~/project && claude +Start Codex: cd ~/project && codex +Start Continue chat: Ctrl+L → click + +Inline edit: Highlight code → Ctrl+I +Accept inline: Ctrl+Shift+Enter +Reject inline: Escape +Switch local model: llama-switch +Commit after session: git add . && git commit -m "feat: session N — description" +Generate secret key: python -c "import secrets; print(secrets.token_hex(32))" +``` diff --git a/Download 2026-07-21T15-14-36-571Z.zip b/Download 2026-07-21T15-14-36-571Z.zip new file mode 100644 index 0000000..a371e6c Binary files /dev/null and b/Download 2026-07-21T15-14-36-571Z.zip differ diff --git a/Download 2026-07-21T15-14-36-571Z/2026-06-03_einverstndniserklrung_msd_patrick-jacobs.pdf b/Download 2026-07-21T15-14-36-571Z/2026-06-03_einverstndniserklrung_msd_patrick-jacobs.pdf new file mode 100644 index 0000000..4d8921a Binary files /dev/null and b/Download 2026-07-21T15-14-36-571Z/2026-06-03_einverstndniserklrung_msd_patrick-jacobs.pdf differ diff --git a/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd-vertrag-und-einwilligung_podcast-stellungswechsel_2026.pdf b/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd-vertrag-und-einwilligung_podcast-stellungswechsel_2026.pdf new file mode 100644 index 0000000..c9de97c Binary files /dev/null and b/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd-vertrag-und-einwilligung_podcast-stellungswechsel_2026.pdf differ diff --git a/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd_podcast-stellungswechsel_hiv-und-drag_edit_v1.docx b/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd_podcast-stellungswechsel_hiv-und-drag_edit_v1.docx new file mode 100644 index 0000000..493986d Binary files /dev/null and b/Download 2026-07-21T15-14-36-571Z/2026-06-09_chrystal_msd_podcast-stellungswechsel_hiv-und-drag_edit_v1.docx differ diff --git a/Element.txt b/Element.txt new file mode 100644 index 0000000..4a3dd72 --- /dev/null +++ b/Element.txt @@ -0,0 +1,43 @@ +Element +Regular +High‑Contrast +Page background +#FFFFFF +#FFFFFF +Header background +#F9F9F9 +#F5F5F5 +Primary button +#BFA7E6 (Lavender) +#5C2C7A (Deep Purple) +Secondary button +#F4E2C1 (Pale Peach) +#A15E3A (Burnt Sienna) +Button text +#333333 +#FFFFFF (white) +Success toast / banner +#A8E6CF (Minty Green) +#0C7C5C (Teal Green) +Warning toast / banner +#FFF1B5 (Light Amber) +#DDAA00 (Gold) +Error toast / banner +#F9D5DB (Soft Rose) +#CC0000 (Crimson) +Form field border +#E0E0E0 (light gray) +#BDBDBD (medium gray) +Table header background +#F9F9F9 +#F5F5F5 +Table border +#E0E0E0 +#BDBDBD +Card background +#F9F9F9 +#F5F5F5 +List item hover +Slightly darker shade of card background +Slightly darker shade of card background +Links \ No newline at end of file diff --git a/NOTES.md b/NOTES.md new file mode 100644 index 0000000..e69de29 diff --git a/README-netbird-mesh-llm-setup.md b/README-netbird-mesh-llm-setup.md new file mode 100644 index 0000000..3861425 --- /dev/null +++ b/README-netbird-mesh-llm-setup.md @@ -0,0 +1,352 @@ +# NetBird Mesh + Local LLM Remote Access — Setup Guide + +Goal: reach the desktop's local LLM stack (llama-swap) securely from a laptop +and phone, over a self-hosted-friendly VPN mesh — not the raw LAN, not the +open internet. + +## Architecture at a glance + +``` +Phone ─┐ + ├─ NetBird mesh (encrypted, peer-to-peer) ─→ Desktop (Heimdall-home) +Laptop ─┘ └─ llama-swap :8080 + └─ UFW: only wt0 allowed in +``` + +- **NetBird Cloud** provides the control plane (who's allowed to talk to + whom). Actual traffic between peers goes directly, peer-to-peer — it does + not route through NetBird's servers. +- **llama-swap** on the desktop is only reachable via the mesh interface + (`wt0`), enforced by UFW — not from the raw home LAN, not from the internet. +- **Open WebUI** runs locally on each client device (laptop) rather than + centrally on the desktop, so the desktop doesn't need to expose an extra + service. + +--- + +## Prerequisites + +- A NetBird Cloud account (free): https://app.netbird.io +- Arch-based Linux on desktop and laptop (commands below assume `yay`/`pacman`) +- `sudo` access on both machines + +--- + +## Step 1 — Create a NetBird Cloud account + +Go to https://app.netbird.io and sign up (Google/GitHub/Microsoft/email — +doesn't matter, it's just for the dashboard). You'll land on an empty +dashboard; peers will appear here as you add them below. + +--- + +## Step 2 — Install and connect the NetBird client (any Arch-based device) + +```bash +yay -S netbird # or: paru -S netbird +netbird version # sanity check (note: no "--" before version) + +sudo netbird service install +sudo netbird service start +sudo netbird up +``` + +`netbird up` prints a login URL. Open it in a browser, log into your NetBird +account, and approve the device. The command then returns once approved. + +### ⚠️ Known pitfall: "no such device" / TUN interface error + +If `netbird up` fails with something like: + +``` +failed creating tunnel interface wt0: [error creating tun device: no such device] +``` + +and `sudo modprobe tun` responds with: + +``` +modprobe: FATAL: Module tun not found in directory /lib/modules/ +``` + +— this is **not a NetBird problem**. It means a kernel package update +replaced `/lib/modules//` on disk, but you're still *running* +the old kernel in memory (no reboot since the update). Confirm with: + +```bash +uname -r # currently running kernel +pacman -Q linux # installed kernel package +``` + +If these two versions differ, **reboot** — that's the fix. This is a +general Arch/rolling-release gotcha, not specific to this tool. + +### Verify the connection + +```bash +sudo netbird status +``` + +Look for `Management: Connected`, `Signal: Connected`, and a NetBird IP +(usually `100.x.x.x`). Note this IP down for each device — you'll need it +below. + +--- + +## Step 3 — Confirm connectivity between two peers + +From one device, ping the other's NetBird IP: + +```bash +ping -c 4 +``` + +The **first** packet may be slow (100–200ms) — that's the mesh negotiating +the actual path between peers (NAT traversal). Subsequent packets should +drop to single-digit ms if a direct peer-to-peer path was found. If *all* +packets stay slow, the connection likely fell back to a relay server instead +of going direct — still functional, just not optimal. + +Also check: + +```bash +sudo netbird status +``` + +`Peers count: 1/1 Connected` confirms it. Note: NetBird uses **lazy +connections** — it only establishes the tunnel once there's real traffic, so +`0/1 Connected` immediately after joining is normal, not a failure. + +--- + +## Step 4 — Lock down the LLM service with UFW (on the desktop) + +```bash +sudo pacman -S ufw +sudo ufw default deny incoming +sudo ufw default allow outgoing +sudo ufw allow in on wt0 to any port 8080 proto tcp +sudo ufw enable +sudo ufw status verbose +``` + +`wt0` is NetBird's virtual network interface — this rule only allows port +8080 traffic that arrives *via the mesh*, not the raw LAN interface, not +Docker's bridge, not the internet. + +> **If you rely on remote SSH access**, add an allow rule for port 22 +> *before* enabling default-deny, or you may lock yourself out. This guide +> assumes SSH access is either local-only or handled separately. + +### Verify — from a *different* device, not the desktop itself + +```bash +curl http://:8080/ # should respond +curl http://:8080/ # should hang / time out +``` + +⚠️ **Run this from the laptop or another peer — not from the desktop +itself.** A machine connecting to its own IP typically routes over loopback +internally, which bypasses the interface-specific firewall rule entirely and +gives a false pass. + +**Diagnostic signal worth knowing:** an *instant* "connection refused" means +nothing is listening on that port. A *hang/timeout* means something is +listening, but the firewall is silently dropping the packets. Different +causes, different fixes. + +--- + +## Step 5 — Run llama-swap as a systemd service + +Converts a manually-started process into something that auto-restarts on +crash and survives reboots. + +```bash +sudo nano /etc/systemd/system/llama-swap.service +``` + +```ini +[Unit] +Description=llama-swap LLM router +After=network-online.target +Wants=network-online.target + +[Service] +Type=simple +User=heimdall +WorkingDirectory=/home/heimdall/apps/llama-swap +ExecStart=/home/heimdall/apps/llama-swap/llama-swap -config config.yaml +Restart=on-failure +RestartSec=5 + +[Install] +WantedBy=multi-user.target +``` + +If you had it running manually beforehand, kill that process first (check +`ps aux | grep llama-swap` for its PID) so it doesn't conflict over port +8080 with the new service. + +```bash +sudo systemctl daemon-reload +sudo systemctl enable --now llama-swap.service +sudo systemctl status llama-swap.service +``` + +`enable` makes it start on every boot; `--now` also starts it immediately. +`Restart=on-failure` (not `always`) means it restarts on a crash, but not if +you intentionally stop it for maintenance. + +--- + +## Step 6 — Prevent the desktop from sleeping + +A sleeping desktop can't serve requests, mesh or not. Check both the +desktop-environment layer and the underlying system layer — they can +disagree even when one looks correctly configured. + +```bash +cat /etc/systemd/logind.conf | grep -i idleaction +systemctl status sleep.target suspend.target +``` + +For a hard guarantee regardless of any GUI setting or future update: + +```bash +sudo systemctl mask sleep.target suspend.target hibernate.target hybrid-sleep.target +``` + +Verify: + +```bash +systemctl status sleep.target suspend.target hibernate.target hybrid-sleep.target +``` + +Each should now show `Loaded: masked`. + +--- + +## Step 7 — Install Docker + Open WebUI on the laptop + +```bash +sudo pacman -S docker +sudo systemctl enable --now docker.service +sudo usermod -aG docker $USER +``` + +⚠️ Group membership only applies after a fresh login — log out/in (or +reboot) before expecting `docker` commands to work without `sudo`. + +```bash +docker run -d -p 3000:8080 \ + -v open-webui:/app/backend/data \ + --name open-webui \ + --restart always \ + ghcr.io/open-webui/open-webui:main +``` + +Open `http://localhost:3000` — the **first account you create automatically +becomes admin**, no separate seed step needed. + +> ⚠️ **Pending hardening step (not yet done):** this binds to all +> interfaces (`0.0.0.0:3000`), meaning it's reachable on *any* network the +> laptop joins, not just the mesh. To restrict it to the mesh only: +> ```bash +> docker stop open-webui && docker rm open-webui +> docker run -d -p :3000:8080 \ +> -v open-webui:/app/backend/data \ +> --name open-webui --restart always \ +> ghcr.io/open-webui/open-webui:main +> ``` +> Trade-off: if the laptop's mesh IP ever changes, this binding breaks +> silently until updated. + +--- + +## Step 8 — Point Open WebUI at llama-swap + +In Open WebUI: **Admin Panel → Settings → Connections → OpenAI API** + +- **URL:** `http://:8080/v1` +- **API Key:** any non-empty placeholder if llama-swap has no auth + configured (most clients require *something* in the field even if it's + not validated). + +Save, and the model list should populate automatically. Test with a real +chat message, not just the model list loading — that confirms actual +inference is working end to end, not just the metadata endpoint. + +--- + +## Step 9 — Add more devices (e.g. phone) + +Install the official NetBird app, log in with the same account, approve the +device. It'll appear as a new peer in the dashboard automatically. + +--- + +## Troubleshooting: a Docker container can't reach a service on its own host + +Symptom: Open WebUI *on the desktop itself* (in Docker) can't reach +llama-swap via `host.docker.internal:8080`, even though llama-swap is +healthy and the same setup works fine from other peers over the mesh. + +**Diagnosis path:** + +```bash +# 1. Confirm the service is actually up +sudo ss -tlnp | grep 8080 +sudo systemctl status llama-swap.service + +# 2. Check if requests are even arriving +sudo journalctl -u llama-swap -n 20 --no-pager + +# 3. Check the firewall's own block log +# (Arch doesn't ship /var/log/ufw.log by default — check the kernel log instead) +sudo journalctl -k -n 50 --no-pager | grep -i "block\|deny" +``` + +**Root cause:** `host.docker.internal` resolves to Docker's bridge gateway +(commonly `172.17.0.1`), not to `localhost` or the mesh interface. Traffic +from a container to the host arrives via the `docker0` interface. Since the +UFW rule from Step 4 only allowed `wt0`, this traffic gets silently dropped +under default-deny. + +This is a **different problem** from "Docker bypasses UFW for published +ports" (that's about *incoming* traffic to a container from outside the +machine, via Docker's own NAT rules bypassing UFW's chain). This case is a +container reaching *out* to something on the host — which does go through +UFW's normal `INPUT` chain like any other interface. + +**Fix:** + +```bash +sudo ufw allow in on docker0 to any port 8080 proto tcp +``` + +Re-test with a real chat message in the desktop's Open WebUI, and confirm +with `journalctl -u llama-swap` that a fresh request appears from the +container's Docker IP. + +--- + +## Diagnostic cheatsheet (built up during this setup) + +| Symptom | Likely meaning | +|---|---| +| Instant "connection refused" | Nothing is listening on that port | +| Hang / timeout | Something's listening, but a firewall is silently dropping packets | +| `modprobe: module not found` after a kernel update | Running kernel ≠ installed kernel package; needs a reboot | +| `netbird up` → `context deadline exceeded` | Vague — check `client.log` or journal for the *real* underlying error, don't assume it's the login step | +| Curl test passes when run *on* the target machine, fails from elsewhere | You tested via loopback, not the actual interface — re-test from a different device | +| Docker container can't reach a host service | Check `host.docker.internal` → `docker0` gateway → firewall rule for that interface specifically | + +--- + +## Open items (see companion status document for full detail) + +- UFW rule for `docker0`→llama-swap: written above, not yet confirmed tested +- Laptop's Open WebUI: still bound to all interfaces, not yet restricted to the mesh IP +- SSH remote access to the desktop: deliberately deferred, currently unreachable remotely +- Cline on the laptop: configured and confirmed working +- llama-swap's "reachable by all hosts" startup warning: expected, mitigated at the firewall layer — not a bug diff --git a/STATUS-netbird-mesh-continuation.md b/STATUS-netbird-mesh-continuation.md new file mode 100644 index 0000000..bfa20c3 --- /dev/null +++ b/STATUS-netbird-mesh-continuation.md @@ -0,0 +1,117 @@ +# Continuation Prompt — NetBird Mesh / Local LLM Remote Access + +*Paste this entire block as the first message in a new chat.* + +--- + +I'm continuing my local infrastructure project. The VPN mesh between my +desktop, laptop, and phone is built and mostly working — this thread picked +up mid-way through fixing one specific bug, plus a few smaller things left +open. + +## Working style (important) +- One thing at a time, confirmation before moving on. +- I type every command myself; explain each step, wait for my output/error/"done". +- No unsolicited finished scripts or configs — I want to understand and + reproduce each step. +- Architecture/structural decisions: lay out options + trade-offs first, + decide together, don't just implement. +- If I put a **"?"** before a question, I want a short answer only. +- English throughout (technical topic). +- End meaningful steps with a short "Done / Learned" bullet-journal note. +- Check current info/versions before recommending specific tools when it + matters — this space moves fast. + +## Devices and identities + +| Device | Hostname | NetBird IP | Notes | +|---|---|---|---| +| Desktop | Heimdall-home | `100.105.210.21` | EndeavourOS, user `heimdall`, runs llama-swap | +| Laptop | heymdall-750xed | `100.105.247.153` | EndeavourOS, user `heymdall`, runs Open WebUI | +| Phone | — | — | Joined mesh, not yet pointed at anything | + +- Home LAN subnet: `192.168.178.0/24` +- Desktop's Docker bridge: `172.17.0.0/16`, gateway `172.17.0.1` + +## Fully working / confirmed + +- **NetBird Cloud mesh** — all three devices joined, dashboard shows 3 + peers, peer-to-peer connectivity verified (desktop ↔ laptop ping test, + direct path not relayed). +- **llama-swap on the desktop** — running as a proper systemd service + (`llama-swap.service`, `Restart=on-failure`, enabled for boot). Old + manually-run process was killed cleanly; no port conflict. +- **UFW on the desktop** — installed, default-deny incoming / default-allow + outgoing. Port 8080 (llama-swap) restricted to the `wt0` (NetBird) + interface only — verified from the laptop: mesh access works, raw LAN + access is blocked (hangs/times out, doesn't refuse instantly). +- **Desktop sleep prevention** — confirmed KDE PowerDevil and + `systemd-logind` both defaulted to no idle action; additionally hard-masked + `sleep.target`, `suspend.target`, `hibernate.target`, `hybrid-sleep.target` + at the systemd level as a belt-and-suspenders guarantee. +- **Open WebUI on the laptop** (Docker) — installed, connected to the + desktop's llama-swap via `http://100.105.210.21:8080/v1`, all configured + models (`daily`, `coder-fim`, `architect`, etc.) tested and confirmed + working with real inference, not just model-list loading. +- **Cline on the laptop** — pointed at the desktop's llama-swap, confirmed + working. +- **Phone** — added to the NetBird mesh, shows as a connected peer. Not yet + pointed at anything (see below). + +## 🔴 Immediate unresolved issue (where this thread left off) + +**The desktop's own Open WebUI container can't reach the desktop's own +llama-swap.** Its connection is configured as `host.docker.internal:8080`. + +- Root cause **confirmed** via `sudo journalctl -k | grep -i block`: UFW is + blocking the request. `host.docker.internal` resolves to the Docker + bridge gateway (`172.17.0.1`), so the request arrives on the `docker0` + interface — which was never given an allow rule (Step 4 in the setup + guide only opened `wt0`). +- **Fix identified but not yet confirmed executed/tested:** + ```bash + sudo ufw allow in on docker0 to any port 8080 proto tcp + ``` +- **Next action:** have the user run that command, then send a real test + message from the desktop's Open WebUI, then confirm with + `sudo journalctl -u llama-swap -n 5 --no-pager` that a fresh request + appears from the container's Docker IP (`172.17.0.2`). + +## Other open items (not urgent, in rough priority order) + +1. **Laptop's Open WebUI (port 3000)** is still bound to all interfaces + (`0.0.0.0`), reachable on whatever network the laptop happens to be + connected to — not just the mesh. A fix was proposed (rebind the Docker + port publish to the laptop's specific NetBird IP, + `-p 100.105.247.153:3000:8080`) but never executed — the conversation + moved to the desktop bug above before this was actioned. +2. **Phone → Open WebUI** — not yet tested end to end. Depends on resolving + item 1 first (decide whether phone should reach the laptop's Open WebUI + via its LAN IP or mesh IP going forward). +3. **SSH remote access to the desktop** — deliberately deferred by the user + ("when I have time to set up correctly"). Current state: SSH daemon is + running on the desktop, but UFW has no rule for port 22 at all, so it's + unreachable remotely (local keyboard access only). No key-based auth set + up yet either — would need a new ed25519 keypair on the laptop (per the + user's per-device key policy) plus a UFW rule, likely scoped to the home + LAN subnet specifically (not just `wt0`) so it still works as a fallback + if NetBird itself is ever the thing that's broken. +4. **Docker's general iptables/UFW interaction** — flagged as a topic worth + understanding properly later (the `DOCKER-USER` chain approach), since it + will likely recur with future Dockerized services. Not blocking anything + right now — the desktop/laptop specific cases so far have had narrower + fixes that didn't require it. +5. **Vault entries** — three candidates were identified and offered to the + user, but no response yet on which (if any) to draft: + - Kernel/module mismatch after an unrebooted update (general Arch lesson) + - Instant refusal vs. hang/timeout as a firewall diagnostic signal + - Docker bypassing UFW for published ports (the *incoming* case, distinct + from the `docker0`-outbound case solved in this session) + +## Reference: full setup as documented + +A companion tutorial-style document (`README-netbird-mesh-llm-setup.md`) +captures every step taken so far in reproducible form, including the two +non-obvious pitfalls hit along the way (kernel/module mismatch, and the +`docker0` UFW gap). Bring that in if a fresh recreation or a review of +exact commands is needed. diff --git a/Startprompt-VPS-Neuaufsetzung.md b/Startprompt-VPS-Neuaufsetzung.md new file mode 100644 index 0000000..c42cf20 --- /dev/null +++ b/Startprompt-VPS-Neuaufsetzung.md @@ -0,0 +1,74 @@ +# Startprompt — VPS-Neuaufsetzung (Multi-App-Host, IONOS) + +> Diesen gesamten Block als erste Nachricht in einen neuen Chat einfügen. + +--- + +Ich möchte meinen VPS bei IONOS sauber neu aufsetzen. Bitte leite mich **Schritt für +Schritt** an — ich tippe die Befehle selbst in mein Terminal, du erklärst jeden Schritt +und wartest auf meine Rückmeldung (z. B. Ausgabe, Fehler, „fertig"), bevor der nächste +Schritt kommt. Bitte keine fertigen Skripte oder Configs ungefragt vorausschreiben — +ich will jeden Schritt verstehen und nachvollziehen können. + +## Ausgangslage + +- VPS bei **IONOS**, Typ **VPS 6-8-240** (6 vCore, 8 GB RAM, 240 GB NVMe SSD). +- Aktueller Zustand: **unsauber gewachsen** — ein Git-Server und eine unfertige App + liegen durcheinander, ohne klare Struktur. Ich will komplett neu aufsetzen, nicht + den bestehenden Zustand reparieren. +- **Bevor irgendetwas neu installiert wird: ein vollständiges Backup der aktuellen + Daten (DB, Uploads, Git-Repositories, alles Relevante).** Das Backup steht noch + aus — ich brauche dabei Hilfe, das ist der erste Schritt, nicht ein Nice-to-have + danach. +- Zugriff aktuell unklar/gestört: Letzte SSH-Versuche endeten erst mit „Permission + denied", dann mit „Connection refused" (Verdacht: Fail2ban-Sperre nach mehreren + Fehlversuchen, oder SSH-Dienst-Problem). Das müssen wir als Allererstes klären, + bevor an Backup oder Neuinstallation zu denken ist. +- Plattform/Shell: **CachyOS, Fish shell**. Bitte alle Terminal-Befehle in Fish-Syntax. + +## Ziel-Zustand + +Der VPS soll danach **mehrere Apps parallel** hosten können, in einer **sauberen, +wiederholbaren Struktur** — nicht nur die eine App von vorher. Eine der Apps ist ein +konkretes Projekt mit eigenem Workflow (siehe unten); es können mit der Zeit weitere +dazukommen. Ich bin offen für deine Empfehlung zur Struktur (z. B. wie Apps +voneinander isoliert werden, wie Reverse Proxy/Domains/Subdomains organisiert sind, +ob containerisiert oder nicht, wie Backups künftig laufen) — bitte schlag mir das +explizit vor und erklär die Abwägungen, statt es einfach vorauszusetzen. + +Eine der Apps, die danach (neu, sauber) deployt werden soll, ist: + +- **CheckPoint Ehrenamt** — Flask + Jinja2, SQLite, kein App Store, mobile-first + Web-App mit zwei Oberflächen (User-Shell mit Bottom-Nav, Admin-Shell mit Sidebar). + Das Projekt hat ein eigenes `CLAUDE.md` und `TASKS.md`, die den fachlichen und + technischen Rahmen festlegen — die bringe ich bei Bedarf in diesen Chat ein. + Datenschutz-Vorgabe: **EU-Hosting, eigener Server** (genau das ist dieser VPS). + +## Reihenfolge, die ich mir vorstelle (bitte challengen, falls unsinnig) + +1. SSH-Zugriffsproblem klären (Fail2ban-Verdacht, ggf. über Web-Konsole des + Hosters statt SSH). +2. Vollständiges Backup aller bestehenden Daten — Datenbanken, Uploads, + Git-Repositories, sonstige Konfiguration, die noch gebraucht wird. +3. Empfehlung für die künftige VPS-Struktur (Multi-App-fähig) besprechen und + festlegen. +4. Saubere Neuinstallation nach dieser Struktur. +5. Deployment der CheckPoint-App in die neue Struktur (inkl. Datenbank-Seed + und erstem Admin-Nutzer — das hatte beim letzten Versuch gefehlt und sollte + dieses Mal von Anfang an mitgedacht werden). +6. Git-Server (falls weiterhin gewünscht) sauber und isoliert von den Apps + wieder aufsetzen. + +## Was du über meinen Stil wissen solltest + +- Ich arbeite gerne mit **Continue.dev (lokale LLMs: Mistral 22B Architect, + Qwen2.5-Coder 7B)** für Code-Sessions und mit **Claude Code** für + Mehrdateien-Arbeit — für diesen VPS-Umbau hier im Chat reicht aber reines + Anleiten, kein Code-Tool nötig. +- Bei Architektur-/Strukturentscheidungen bitte **erst erklären und Optionen + zeigen**, dann gemeinsam entscheiden — nicht direkt umsetzen. +- Bitte **eine Sache nach der anderen**, mit klarer Bestätigung, bevor es + weitergeht. + +Bitte fang mit Schritt 1 an (SSH-Zugriff klären) und stelle mir die Fragen, die du +dafür brauchst. diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/README.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/README.md new file mode 100644 index 0000000..10d91a8 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/README.md @@ -0,0 +1,39 @@ +# ADHD-Friendly Colour Variant Library + +This collection contains 17 complete UI colour systems: + +1. Simple Pink +2. Calm Denim Blue +3. Sage Green +4. Coral Red +5. Mustard Yellow +6. Turquoise Blue +7. Burgundy & Dusty Rose +8. Graphite + Pink Accent +9. Warm Brown +10. Black & White +11. Ivory & Ink +12. Seafoam +13. Dusty Lilac +14. Mist Blue +15. Olive & Oat +16. Sunset Apricot +17. Orchid Pop + + +Each folder contains: + +- one realistic responsive login page in HTML +- one matching UX/UI style guide in Markdown +- complete light and dark colour tokens +- Atkinson Hyperlegible and Lexend typography +- form validation, theme switching and responsive behaviour + +Open `index.html` for the visual overview. + +All login demos also include: + +- a reusable typography sample card +- a heading and subheading in Lexend +- a Lorem Ipsum paragraph in Atkinson Hyperlegible +- Google Fonts CSS API integration diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-login.html new file mode 100644 index 0000000..19882c1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-login.html @@ -0,0 +1,829 @@ + + + + + + + Black & White — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Mono +
+ +
+

Black & White

+

Nothing extra. Everything clear.

+

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-style-guide.md new file mode 100644 index 0000000..5e4488f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/black-white/black-white-style-guide.md @@ -0,0 +1,300 @@ +# Black & White UI Style Guide + +A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable. + +Pure black and white can feel harsh. Layered grey surfaces and off-white content areas preserve the monochrome look while lowering visual strain. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECECEC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F1F1` | Inputs and secondary regions | +| `--surface-strong` | `#DEDEDE` | Selected and elevated elements | +| `--text` | `#111111` | Main text | +| `--muted` | `#626262` | Secondary text | +| `--border` | `#CDCDCD` | Borders and dividers | +| `--primary` | `#111111` | Main action and brand colour | +| `--primary-hover` | `#000000` | Primary hover and active state | +| `--secondary` | `#E1E1E1` | Secondary action | +| `--secondary-hover` | `#D2D2D2` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#000000` | Main dark background | +| `--page-accent` | `#050505` | Background depth | +| `--surface` | `#101010` | Cards and dialogs | +| `--surface-alt` | `#1A1A1A` | Inputs and secondary regions | +| `--surface-strong` | `#2B2B2B` | Selected and elevated elements | +| `--text` | `#FFFFFF` | Main text | +| `--muted` | `#BEBEBE` | Secondary text | +| `--border` | `#444444` | Borders and dividers | +| `--primary` | `#FFFFFF` | Main action and brand colour | +| `--primary-hover` | `#E8E8E8` | Primary hover and active state | +| `--secondary` | `#353535` | Secondary action | +| `--secondary-hover` | `#494949` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strongest action, active navigation and unmistakable selection. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls and optional actions without introducing colour. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#777777` | `#D0D0D0` | +| Accent 2 | `#A0A0A0` | `#9A9A9A` | +| Accent 3 | `#C5C5C5` | `#6E6E6E` | +| Success | `#666666` | `#B8B8B8` | +| Danger | `#4A4A4A` | `#D8D8D8` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F1F1; + --text: #111111; + --muted: #626262; + --border: #CDCDCD; + --primary: #111111; + --secondary: #E1E1E1; +} + +html[data-theme="dark"] { + --page: #000000; + --surface: #101010; + --surface-alt: #1A1A1A; + --text: #FFFFFF; + --muted: #BEBEBE; + --border: #444444; + --primary: #FFFFFF; + --secondary: #353535; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html new file mode 100644 index 0000000..3c52ab1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html @@ -0,0 +1,829 @@ + + + + + + + Burgundy & Dusty Rose — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Merlot +
+ +
+

Burgundy & Dusty Rose

+

Quiet confidence. Rich clarity.

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md new file mode 100644 index 0000000..d8e06ed --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md @@ -0,0 +1,321 @@ +# Burgundy & Dusty Rose UI Style Guide + +A mature burgundy system softened by dusty rose and warm neutral surfaces. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF7F8` | Main page background | +| `--page-accent` | `#F2E6E9` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEF1` | Inputs and secondary regions | +| `--surface-strong` | `#EBDADF` | Selected and elevated elements | +| `--text` | `#38272D` | Main text | +| `--muted` | `#75656B` | Secondary text | +| `--border` | `#DFC9D0` | Borders and dividers | +| `--primary` | `#7E374D` | Main action and brand colour | +| `--primary-hover` | `#61263A` | Primary hover and active state | +| `--secondary` | `#E7D8DE` | Secondary action | +| `--secondary-hover` | `#D9C5CD` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050203` | Main dark background | +| `--page-accent` | `#0C0608` | Background depth | +| `--surface` | `#170D11` | Cards and dialogs | +| `--surface-alt` | `#24151B` | Inputs and secondary regions | +| `--surface-strong` | `#38202A` | Selected and elevated elements | +| `--text` | `#F8EFF2` | Main text | +| `--muted` | `#CABAC0` | Secondary text | +| `--border` | `#583B46` | Borders and dividers | +| `--primary` | `#B85F7A` | Main action and brand colour | +| `--primary-hover` | `#99445F` | Primary hover and active state | +| `--secondary` | `#624754` | Secondary action | +| `--secondary-hover` | `#765867` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for luxurious primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for dusty rose structure, optional actions and calm support. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B07D8D` | `#C78DA0` | +| Accent 2 | `#718B92` | `#7D9BA1` | +| Accent 3 | `#C0A06F` | `#D0B17B` | +| Success | `#698873` | `#90B098` | +| Danger | `#A64E5D` | `#DA8795` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF7F8; + --surface: #FFFFFF; + --surface-alt: #F8EEF1; + --text: #38272D; + --muted: #75656B; + --border: #DFC9D0; + --primary: #7E374D; + --secondary: #E7D8DE; +} + +html[data-theme="dark"] { + --page: #050203; + --surface: #170D11; + --surface-alt: #24151B; + --text: #F8EFF2; + --muted: #CABAC0; + --border: #583B46; + --primary: #B85F7A; + --secondary: #624754; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html new file mode 100644 index 0000000..8b0c7e9 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Calm Denim Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Harbor +
+ +
+

Calm Denim Blue

+

Steady focus. Clear progress.

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md new file mode 100644 index 0000000..8bcda94 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md @@ -0,0 +1,321 @@ +# Calm Denim Blue UI Style Guide + +A trustworthy denim-blue system for dashboards, administration and focused work. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F8FB` | Main page background | +| `--page-accent` | `#E8EEF6` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EEF3F8` | Inputs and secondary regions | +| `--surface-strong` | `#DCE6F0` | Selected and elevated elements | +| `--text` | `#243142` | Main text | +| `--muted` | `#687486` | Secondary text | +| `--border` | `#CBD6E2` | Borders and dividers | +| `--primary` | `#4D6F98` | Main action and brand colour | +| `--primary-hover` | `#385777` | Primary hover and active state | +| `--secondary` | `#E2E8EF` | Secondary action | +| `--secondary-hover` | `#D2DCE6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020509` | Main dark background | +| `--page-accent` | `#07101A` | Background depth | +| `--surface` | `#0D1824` | Cards and dialogs | +| `--surface-alt` | `#142333` | Inputs and secondary regions | +| `--surface-strong` | `#21384E` | Selected and elevated elements | +| `--text` | `#F1F5FA` | Main text | +| `--muted` | `#B9C4D0` | Secondary text | +| `--border` | `#344D66` | Borders and dividers | +| `--primary` | `#7598C2` | Main action and brand colour | +| `--primary-hover` | `#5F83AF` | Primary hover and active state | +| `--secondary` | `#405A73` | Secondary action | +| `--secondary-hover` | `#526F8A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for main actions, active navigation and trustworthy emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls, toolbars and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7F8FB5` | `#9A9FC6` | +| Accent 2 | `#6F9697` | `#81A7A7` | +| Accent 3 | `#C6A66E` | `#D0B17B` | +| Success | `#668A73` | `#90B29A` | +| Danger | `#A8646E` | `#D3929A` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F8FB; + --surface: #FFFFFF; + --surface-alt: #EEF3F8; + --text: #243142; + --muted: #687486; + --border: #CBD6E2; + --primary: #4D6F98; + --secondary: #E2E8EF; +} + +html[data-theme="dark"] { + --page: #020509; + --surface: #0D1824; + --surface-alt: #142333; + --text: #F1F5FA; + --muted: #B9C4D0; + --border: #344D66; + --primary: #7598C2; + --secondary: #405A73; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-login.html new file mode 100644 index 0000000..24f8765 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-login.html @@ -0,0 +1,829 @@ + + + + + + + Coral Red — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Common +
+ +
+

Coral Red

+

Human warmth. Clear action.

+

A social, warm coral system balanced by slate blue so it stays calm and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md new file mode 100644 index 0000000..f6489c0 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md @@ -0,0 +1,321 @@ +# Coral Red UI Style Guide + +A social, warm coral system balanced by slate blue so it stays calm and readable. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8F6` | Main page background | +| `--page-accent` | `#F7E8E3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FBEFEB` | Inputs and secondary regions | +| `--surface-strong` | `#F1DDD6` | Selected and elevated elements | +| `--text` | `#3B2926` | Main text | +| `--muted` | `#776761` | Secondary text | +| `--border` | `#E2CEC7` | Borders and dividers | +| `--primary` | `#C86457` | Main action and brand colour | +| `--primary-hover` | `#A84D42` | Primary hover and active state | +| `--secondary` | `#DDE6EA` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050202` | Main dark background | +| `--page-accent` | `#0D0807` | Background depth | +| `--surface` | `#18100E` | Cards and dialogs | +| `--surface-alt` | `#261917` | Inputs and secondary regions | +| `--surface-strong` | `#392824` | Selected and elevated elements | +| `--text` | `#FAF1EF` | Main text | +| `--muted` | `#CABCB8` | Secondary text | +| `--border` | `#5A403B` | Borders and dividers | +| `--primary` | `#E58678` | Main action and brand colour | +| `--primary-hover` | `#CB6A5D` | Primary hover and active state | +| `--secondary` | `#3C5962` | Secondary action | +| `--secondary-hover` | `#4C6D78` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for human, confident primary actions and social emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate balance for supporting actions and structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B17C72` | `#C89A91` | +| Accent 2 | `#6C8D95` | `#7FA2AA` | +| Accent 3 | `#C4A06B` | `#D3B17B` | +| Success | `#66886E` | `#90B096` | +| Danger | `#9E4C48` | `#DF9189` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8F6; + --surface: #FFFFFF; + --surface-alt: #FBEFEB; + --text: #3B2926; + --muted: #776761; + --border: #E2CEC7; + --primary: #C86457; + --secondary: #DDE6EA; +} + +html[data-theme="dark"] { + --page: #050202; + --surface: #18100E; + --surface-alt: #261917; + --text: #FAF1EF; + --muted: #CABCB8; + --border: #5A403B; + --primary: #E58678; + --secondary: #3C5962; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html new file mode 100644 index 0000000..85993ff --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html @@ -0,0 +1,829 @@ + + + + + + + Dusty Lilac — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Hush +
+ +
+

Dusty Lilac

+

Gentle structure. Clear thought.

+

A quiet lilac system with slate support, separated from the brighter purple and pink families.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md new file mode 100644 index 0000000..dbea156 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md @@ -0,0 +1,300 @@ +# Dusty Lilac UI Style Guide + +A quiet lilac system with slate support, separated from the brighter purple and pink families. + +Dusty Lilac is deliberately muted. Avoid bright violet additions, which would undermine its calm character. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7FB` | Main page background | +| `--page-accent` | `#EEEAF3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F3EFF7` | Inputs and secondary regions | +| `--surface-strong` | `#E4DDEB` | Selected and elevated elements | +| `--text` | `#302B38` | Main text | +| `--muted` | `#706A79` | Secondary text | +| `--border` | `#D6CFDE` | Borders and dividers | +| `--primary` | `#88769A` | Main action and brand colour | +| `--primary-hover` | `#6D5B80` | Primary hover and active state | +| `--secondary` | `#DEE6E9` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030205` | Main dark background | +| `--page-accent` | `#0A0710` | Background depth | +| `--surface` | `#141019` | Cards and dialogs | +| `--surface-alt` | `#201827` | Inputs and secondary regions | +| `--surface-strong` | `#32263B` | Selected and elevated elements | +| `--text` | `#F6F1F8` | Main text | +| `--muted` | `#C5BBCB` | Secondary text | +| `--border` | `#4C4056` | Borders and dividers | +| `--primary` | `#B09BC3` | Main action and brand colour | +| `--primary-hover` | `#947DAA` | Primary hover and active state | +| `--secondary` | `#40575E` | Secondary action | +| `--secondary-hover` | `#526D75` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for gentle primary actions, selected states and quiet brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for slate structure, secondary actions and informational controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A594B6` | `#C1AED1` | +| Accent 2 | `#718F96` | `#82A1A8` | +| Accent 3 | `#C2A475` | `#D0B27F` | +| Success | `#6C8973` | `#94B09A` | +| Danger | `#A76470` | `#D4939D` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7FB; + --surface: #FFFFFF; + --surface-alt: #F3EFF7; + --text: #302B38; + --muted: #706A79; + --border: #D6CFDE; + --primary: #88769A; + --secondary: #DEE6E9; +} + +html[data-theme="dark"] { + --page: #030205; + --surface: #141019; + --surface-alt: #201827; + --text: #F6F1F8; + --muted: #C5BBCB; + --border: #4C4056; + --primary: #B09BC3; + --secondary: #40575E; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html new file mode 100644 index 0000000..d9eece3 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Graphite + Pink Accent — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Signal +
+ +
+

Graphite + Pink Accent

+

Less noise. One clear signal.

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md new file mode 100644 index 0000000..48f234a --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md @@ -0,0 +1,321 @@ +# Graphite + Pink Accent UI Style Guide + +An ultra-calm graphite system with one simple pink accent for primary actions. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECEEEF` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F2F3` | Inputs and secondary regions | +| `--surface-strong` | `#E1E4E6` | Selected and elevated elements | +| `--text` | `#292D30` | Main text | +| `--muted` | `#6C7378` | Secondary text | +| `--border` | `#D1D5D8` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E3E6E8` | Secondary action | +| `--secondary-hover` | `#D4D9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020303` | Main dark background | +| `--page-accent` | `#080A0B` | Background depth | +| `--surface` | `#121516` | Cards and dialogs | +| `--surface-alt` | `#1B2022` | Inputs and secondary regions | +| `--surface-strong` | `#2B3235` | Selected and elevated elements | +| `--text` | `#F3F5F5` | Main text | +| `--muted` | `#BAC0C2` | Secondary text | +| `--border` | `#424B4F` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#3A4347` | Secondary action | +| `--secondary-hover` | `#4C575C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strong accent for main actions and active states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for neutral graphite structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7D858A` | `#929A9E` | +| Accent 2 | `#8A9499` | `#7F979C` | +| Accent 3 | `#B79A70` | `#C8AA78` | +| Success | `#6B8872` | `#91AF98` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F2F3; + --text: #292D30; + --muted: #6C7378; + --border: #D1D5D8; + --primary: #D35F87; + --secondary: #E3E6E8; +} + +html[data-theme="dark"] { + --page: #020303; + --surface: #121516; + --surface-alt: #1B2022; + --text: #F3F5F5; + --muted: #BAC0C2; + --border: #424B4F; + --primary: #EE7DA4; + --secondary: #3A4347; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/index.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/index.html new file mode 100644 index 0000000..c83c19f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/index.html @@ -0,0 +1,348 @@ + + + + + + ADHD-Friendly Colour Variants + + + +
+

Colour system library

+

ADHD-Friendly UI Colour Variants

+

+ The expanded library now includes monochrome, warm-neutral and soft pastel systems. Every variant uses the same realistic login layout, Atkinson Hyperlegible for reading, + Lexend for interface text, complete light and dark modes, restrained accents, + visible focus states, reduced-motion support, and a typography sample card with + a heading, subheading and paragraph text. +

+
+ + + +
+
+ + + + +
+

Calm Denim Blue

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+
+ Open login demo + Open style guide +
+
+ + + + + + + + + +
+
+ + + + +
+

Burgundy & Dusty Rose

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+
+ Open login demo + Open style guide +
+
+ +
+
+ + + + +
+

Graphite + Pink Accent

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+
+ Open login demo + Open style guide +
+
+ + + + +
+
+ + + + +
+

Black & White

+

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Ivory & Ink

+

A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Seafoam

+

A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Dusty Lilac

+

A quiet lilac system with slate support, separated from the brighter purple and pink families.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Mist Blue

+

A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Olive & Oat

+

A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Sunset Apricot

+

A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces.

+
+ Open login demo + Open style guide +
+
+ + +
+
+ + + + +
+

Orchid Pop

+

A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.

+
+ Open login demo + Open style guide +
+
+ +
+
+ + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants-v2.zip b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants-v2.zip new file mode 100644 index 0000000..d986aff Binary files /dev/null and b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants-v2.zip differ diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-dashboard.html new file mode 100644 index 0000000..395d8b1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Black White — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Black White system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Black White palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-login.html new file mode 100644 index 0000000..19882c1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-login.html @@ -0,0 +1,829 @@ + + + + + + + Black & White — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Mono +
+ +
+

Black & White

+

Nothing extra. Everything clear.

+

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-style-guide.md new file mode 100644 index 0000000..5e4488f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/black-white/black-white-style-guide.md @@ -0,0 +1,300 @@ +# Black & White UI Style Guide + +A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable. + +Pure black and white can feel harsh. Layered grey surfaces and off-white content areas preserve the monochrome look while lowering visual strain. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECECEC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F1F1` | Inputs and secondary regions | +| `--surface-strong` | `#DEDEDE` | Selected and elevated elements | +| `--text` | `#111111` | Main text | +| `--muted` | `#626262` | Secondary text | +| `--border` | `#CDCDCD` | Borders and dividers | +| `--primary` | `#111111` | Main action and brand colour | +| `--primary-hover` | `#000000` | Primary hover and active state | +| `--secondary` | `#E1E1E1` | Secondary action | +| `--secondary-hover` | `#D2D2D2` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#000000` | Main dark background | +| `--page-accent` | `#050505` | Background depth | +| `--surface` | `#101010` | Cards and dialogs | +| `--surface-alt` | `#1A1A1A` | Inputs and secondary regions | +| `--surface-strong` | `#2B2B2B` | Selected and elevated elements | +| `--text` | `#FFFFFF` | Main text | +| `--muted` | `#BEBEBE` | Secondary text | +| `--border` | `#444444` | Borders and dividers | +| `--primary` | `#FFFFFF` | Main action and brand colour | +| `--primary-hover` | `#E8E8E8` | Primary hover and active state | +| `--secondary` | `#353535` | Secondary action | +| `--secondary-hover` | `#494949` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strongest action, active navigation and unmistakable selection. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls and optional actions without introducing colour. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#777777` | `#D0D0D0` | +| Accent 2 | `#A0A0A0` | `#9A9A9A` | +| Accent 3 | `#C5C5C5` | `#6E6E6E` | +| Success | `#666666` | `#B8B8B8` | +| Danger | `#4A4A4A` | `#D8D8D8` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F1F1; + --text: #111111; + --muted: #626262; + --border: #CDCDCD; + --primary: #111111; + --secondary: #E1E1E1; +} + +html[data-theme="dark"] { + --page: #000000; + --surface: #101010; + --surface-alt: #1A1A1A; + --text: #FFFFFF; + --muted: #BEBEBE; + --border: #444444; + --primary: #FFFFFF; + --secondary: #353535; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html new file mode 100644 index 0000000..97b3edb --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Burgundy Rose — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Burgundy Rose system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Burgundy Rose palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html new file mode 100644 index 0000000..3c52ab1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html @@ -0,0 +1,829 @@ + + + + + + + Burgundy & Dusty Rose — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Merlot +
+ +
+

Burgundy & Dusty Rose

+

Quiet confidence. Rich clarity.

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md new file mode 100644 index 0000000..d8e06ed --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md @@ -0,0 +1,321 @@ +# Burgundy & Dusty Rose UI Style Guide + +A mature burgundy system softened by dusty rose and warm neutral surfaces. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF7F8` | Main page background | +| `--page-accent` | `#F2E6E9` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEF1` | Inputs and secondary regions | +| `--surface-strong` | `#EBDADF` | Selected and elevated elements | +| `--text` | `#38272D` | Main text | +| `--muted` | `#75656B` | Secondary text | +| `--border` | `#DFC9D0` | Borders and dividers | +| `--primary` | `#7E374D` | Main action and brand colour | +| `--primary-hover` | `#61263A` | Primary hover and active state | +| `--secondary` | `#E7D8DE` | Secondary action | +| `--secondary-hover` | `#D9C5CD` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050203` | Main dark background | +| `--page-accent` | `#0C0608` | Background depth | +| `--surface` | `#170D11` | Cards and dialogs | +| `--surface-alt` | `#24151B` | Inputs and secondary regions | +| `--surface-strong` | `#38202A` | Selected and elevated elements | +| `--text` | `#F8EFF2` | Main text | +| `--muted` | `#CABAC0` | Secondary text | +| `--border` | `#583B46` | Borders and dividers | +| `--primary` | `#B85F7A` | Main action and brand colour | +| `--primary-hover` | `#99445F` | Primary hover and active state | +| `--secondary` | `#624754` | Secondary action | +| `--secondary-hover` | `#765867` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for luxurious primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for dusty rose structure, optional actions and calm support. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B07D8D` | `#C78DA0` | +| Accent 2 | `#718B92` | `#7D9BA1` | +| Accent 3 | `#C0A06F` | `#D0B17B` | +| Success | `#698873` | `#90B098` | +| Danger | `#A64E5D` | `#DA8795` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF7F8; + --surface: #FFFFFF; + --surface-alt: #F8EEF1; + --text: #38272D; + --muted: #75656B; + --border: #DFC9D0; + --primary: #7E374D; + --secondary: #E7D8DE; +} + +html[data-theme="dark"] { + --page: #050203; + --surface: #170D11; + --surface-alt: #24151B; + --text: #F8EFF2; + --muted: #CABAC0; + --border: #583B46; + --primary: #B85F7A; + --secondary: #624754; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html new file mode 100644 index 0000000..ebfe3ea --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Calm Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Calm Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Calm Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html new file mode 100644 index 0000000..8b0c7e9 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Calm Denim Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Harbor +
+ +
+

Calm Denim Blue

+

Steady focus. Clear progress.

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md new file mode 100644 index 0000000..8bcda94 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md @@ -0,0 +1,321 @@ +# Calm Denim Blue UI Style Guide + +A trustworthy denim-blue system for dashboards, administration and focused work. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F8FB` | Main page background | +| `--page-accent` | `#E8EEF6` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EEF3F8` | Inputs and secondary regions | +| `--surface-strong` | `#DCE6F0` | Selected and elevated elements | +| `--text` | `#243142` | Main text | +| `--muted` | `#687486` | Secondary text | +| `--border` | `#CBD6E2` | Borders and dividers | +| `--primary` | `#4D6F98` | Main action and brand colour | +| `--primary-hover` | `#385777` | Primary hover and active state | +| `--secondary` | `#E2E8EF` | Secondary action | +| `--secondary-hover` | `#D2DCE6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020509` | Main dark background | +| `--page-accent` | `#07101A` | Background depth | +| `--surface` | `#0D1824` | Cards and dialogs | +| `--surface-alt` | `#142333` | Inputs and secondary regions | +| `--surface-strong` | `#21384E` | Selected and elevated elements | +| `--text` | `#F1F5FA` | Main text | +| `--muted` | `#B9C4D0` | Secondary text | +| `--border` | `#344D66` | Borders and dividers | +| `--primary` | `#7598C2` | Main action and brand colour | +| `--primary-hover` | `#5F83AF` | Primary hover and active state | +| `--secondary` | `#405A73` | Secondary action | +| `--secondary-hover` | `#526F8A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for main actions, active navigation and trustworthy emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls, toolbars and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7F8FB5` | `#9A9FC6` | +| Accent 2 | `#6F9697` | `#81A7A7` | +| Accent 3 | `#C6A66E` | `#D0B17B` | +| Success | `#668A73` | `#90B29A` | +| Danger | `#A8646E` | `#D3929A` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F8FB; + --surface: #FFFFFF; + --surface-alt: #EEF3F8; + --text: #243142; + --muted: #687486; + --border: #CBD6E2; + --primary: #4D6F98; + --secondary: #E2E8EF; +} + +html[data-theme="dark"] { + --page: #020509; + --surface: #0D1824; + --surface-alt: #142333; + --text: #F1F5FA; + --muted: #B9C4D0; + --border: #344D66; + --primary: #7598C2; + --secondary: #405A73; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html new file mode 100644 index 0000000..929e9a8 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Coral Red — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Coral Red system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Coral Red palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-login.html new file mode 100644 index 0000000..24f8765 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-login.html @@ -0,0 +1,829 @@ + + + + + + + Coral Red — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Common +
+ +
+

Coral Red

+

Human warmth. Clear action.

+

A social, warm coral system balanced by slate blue so it stays calm and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md new file mode 100644 index 0000000..f6489c0 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md @@ -0,0 +1,321 @@ +# Coral Red UI Style Guide + +A social, warm coral system balanced by slate blue so it stays calm and readable. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8F6` | Main page background | +| `--page-accent` | `#F7E8E3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FBEFEB` | Inputs and secondary regions | +| `--surface-strong` | `#F1DDD6` | Selected and elevated elements | +| `--text` | `#3B2926` | Main text | +| `--muted` | `#776761` | Secondary text | +| `--border` | `#E2CEC7` | Borders and dividers | +| `--primary` | `#C86457` | Main action and brand colour | +| `--primary-hover` | `#A84D42` | Primary hover and active state | +| `--secondary` | `#DDE6EA` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050202` | Main dark background | +| `--page-accent` | `#0D0807` | Background depth | +| `--surface` | `#18100E` | Cards and dialogs | +| `--surface-alt` | `#261917` | Inputs and secondary regions | +| `--surface-strong` | `#392824` | Selected and elevated elements | +| `--text` | `#FAF1EF` | Main text | +| `--muted` | `#CABCB8` | Secondary text | +| `--border` | `#5A403B` | Borders and dividers | +| `--primary` | `#E58678` | Main action and brand colour | +| `--primary-hover` | `#CB6A5D` | Primary hover and active state | +| `--secondary` | `#3C5962` | Secondary action | +| `--secondary-hover` | `#4C6D78` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for human, confident primary actions and social emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate balance for supporting actions and structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B17C72` | `#C89A91` | +| Accent 2 | `#6C8D95` | `#7FA2AA` | +| Accent 3 | `#C4A06B` | `#D3B17B` | +| Success | `#66886E` | `#90B096` | +| Danger | `#9E4C48` | `#DF9189` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8F6; + --surface: #FFFFFF; + --surface-alt: #FBEFEB; + --text: #3B2926; + --muted: #776761; + --border: #E2CEC7; + --primary: #C86457; + --secondary: #DDE6EA; +} + +html[data-theme="dark"] { + --page: #050202; + --surface: #18100E; + --surface-alt: #261917; + --text: #FAF1EF; + --muted: #CABCB8; + --border: #5A403B; + --primary: #E58678; + --secondary: #3C5962; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html new file mode 100644 index 0000000..65ace72 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Dusty Lilac — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Dusty Lilac system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Dusty Lilac palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html new file mode 100644 index 0000000..85993ff --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html @@ -0,0 +1,829 @@ + + + + + + + Dusty Lilac — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Hush +
+ +
+

Dusty Lilac

+

Gentle structure. Clear thought.

+

A quiet lilac system with slate support, separated from the brighter purple and pink families.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md new file mode 100644 index 0000000..dbea156 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md @@ -0,0 +1,300 @@ +# Dusty Lilac UI Style Guide + +A quiet lilac system with slate support, separated from the brighter purple and pink families. + +Dusty Lilac is deliberately muted. Avoid bright violet additions, which would undermine its calm character. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7FB` | Main page background | +| `--page-accent` | `#EEEAF3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F3EFF7` | Inputs and secondary regions | +| `--surface-strong` | `#E4DDEB` | Selected and elevated elements | +| `--text` | `#302B38` | Main text | +| `--muted` | `#706A79` | Secondary text | +| `--border` | `#D6CFDE` | Borders and dividers | +| `--primary` | `#88769A` | Main action and brand colour | +| `--primary-hover` | `#6D5B80` | Primary hover and active state | +| `--secondary` | `#DEE6E9` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030205` | Main dark background | +| `--page-accent` | `#0A0710` | Background depth | +| `--surface` | `#141019` | Cards and dialogs | +| `--surface-alt` | `#201827` | Inputs and secondary regions | +| `--surface-strong` | `#32263B` | Selected and elevated elements | +| `--text` | `#F6F1F8` | Main text | +| `--muted` | `#C5BBCB` | Secondary text | +| `--border` | `#4C4056` | Borders and dividers | +| `--primary` | `#B09BC3` | Main action and brand colour | +| `--primary-hover` | `#947DAA` | Primary hover and active state | +| `--secondary` | `#40575E` | Secondary action | +| `--secondary-hover` | `#526D75` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for gentle primary actions, selected states and quiet brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for slate structure, secondary actions and informational controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A594B6` | `#C1AED1` | +| Accent 2 | `#718F96` | `#82A1A8` | +| Accent 3 | `#C2A475` | `#D0B27F` | +| Success | `#6C8973` | `#94B09A` | +| Danger | `#A76470` | `#D4939D` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7FB; + --surface: #FFFFFF; + --surface-alt: #F3EFF7; + --text: #302B38; + --muted: #706A79; + --border: #D6CFDE; + --primary: #88769A; + --secondary: #DEE6E9; +} + +html[data-theme="dark"] { + --page: #030205; + --surface: #141019; + --surface-alt: #201827; + --text: #F6F1F8; + --muted: #C5BBCB; + --border: #4C4056; + --primary: #B09BC3; + --secondary: #40575E; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html new file mode 100644 index 0000000..c42277f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Graphite Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Graphite Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Graphite Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html new file mode 100644 index 0000000..d9eece3 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Graphite + Pink Accent — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Signal +
+ +
+

Graphite + Pink Accent

+

Less noise. One clear signal.

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md new file mode 100644 index 0000000..48f234a --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md @@ -0,0 +1,321 @@ +# Graphite + Pink Accent UI Style Guide + +An ultra-calm graphite system with one simple pink accent for primary actions. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECEEEF` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F2F3` | Inputs and secondary regions | +| `--surface-strong` | `#E1E4E6` | Selected and elevated elements | +| `--text` | `#292D30` | Main text | +| `--muted` | `#6C7378` | Secondary text | +| `--border` | `#D1D5D8` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E3E6E8` | Secondary action | +| `--secondary-hover` | `#D4D9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020303` | Main dark background | +| `--page-accent` | `#080A0B` | Background depth | +| `--surface` | `#121516` | Cards and dialogs | +| `--surface-alt` | `#1B2022` | Inputs and secondary regions | +| `--surface-strong` | `#2B3235` | Selected and elevated elements | +| `--text` | `#F3F5F5` | Main text | +| `--muted` | `#BAC0C2` | Secondary text | +| `--border` | `#424B4F` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#3A4347` | Secondary action | +| `--secondary-hover` | `#4C575C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strong accent for main actions and active states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for neutral graphite structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7D858A` | `#929A9E` | +| Accent 2 | `#8A9499` | `#7F979C` | +| Accent 3 | `#B79A70` | `#C8AA78` | +| Success | `#6B8872` | `#91AF98` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F2F3; + --text: #292D30; + --muted: #6C7378; + --border: #D1D5D8; + --primary: #D35F87; + --secondary: #E3E6E8; +} + +html[data-theme="dark"] { + --page: #020303; + --surface: #121516; + --surface-alt: #1B2022; + --text: #F3F5F5; + --muted: #BAC0C2; + --border: #424B4F; + --primary: #EE7DA4; + --secondary: #3A4347; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html new file mode 100644 index 0000000..4e66506 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory Ink Lavender — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory Ink Lavender system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory Ink Lavender palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html new file mode 100644 index 0000000..0fd2f33 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html @@ -0,0 +1,840 @@ + + + + + + + Ivory & Ink + Lavender — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper Lavender +
+ +
+

Ivory & Ink + Lavender

+

Soft calm. Clear focus.

+

+ This version keeps the warm Ivory & Ink foundation but extends it + with a soft lavender for primary actions, emphasis and a more elegant, + quiet personality. +

+ +
    +
  • + + Warm neutral surfaces with one clear lavender action colour +
    • +
  • + + Balanced by grey-green and soft sand supporting accents +
    • +
  • + + Lexend and Atkinson Hyperlegible through the Google Fonts CSS API +
    • +
+
+ +
+ Editorial calm + Readable + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md new file mode 100644 index 0000000..d4d3a40 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md @@ -0,0 +1,179 @@ +# Ivory & Ink + Lavender UI Style Guide + +A warm editorial UI system based on the Ivory & Ink palette, extended with a refined lavender accent. + +The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a restrained lavender used for the primary action. The result is elegant, soft and readable without becoming overly decorative. + +--- + +## 1. Core idea + +Use **Ivory & Ink** as the foundation and **lavender** as the signal. + +That means: + +- the page and cards stay mostly neutral +- lavender identifies the next important action +- grey-green and sand provide soft balance +- the interface should feel editorial, calm and slightly elegant + +Lavender should not take over the whole page. It should guide attention. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F3` | Main page background | +| `--page-accent` | `#F2ECE4` | Subtle background depth | +| `--surface` | `#FFFEFB` | Cards and dialogs | +| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections | +| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces | +| `--text` | `#262320` | Main text | +| `--muted` | `#6F6963` | Secondary text | +| `--border` | `#DCCFC4` | Borders and dividers | +| `--primary` | `#9682B4` | Lavender primary action | +| `--primary-hover` | `#7A6697` | Primary hover state | +| `--secondary` | `#E7DED3` | Neutral secondary actions | +| `--secondary-hover` | `#D9CEC1` | Secondary hover state | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090705` | Background depth | +| `--surface` | `#171411` | Main cards and dialogs | +| `--surface-alt` | `#231D1A` | Inputs and secondary sections | +| `--surface-strong` | `#35302B` | Selected and raised surfaces | +| `--text` | `#FAF6F0` | Main text | +| `--muted` | `#C9C1B7` | Secondary text | +| `--border` | `#554D46` | Borders and dividers | +| `--primary` | `#B8A7D2` | Lavender primary action | +| `--primary-hover` | `#A08FC0` | Primary hover state | +| `--secondary` | `#4F4840` | Neutral secondary actions | +| `--secondary-hover` | `#655D54` | Secondary hover state | + +--- + +## 4. Supporting accents + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Soft lavender | `#C7B8DE` | `#D9CDEA` | Highlights and personality | +| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support | +| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis | +| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action | +| Success | `#6E816E` | `#9CAE99` | Positive confirmation | + +Recommended balance: + +- **70%** ivory / ink / neutral surfaces +- **20%** lavender and neutral secondary structure +- **10%** supporting accents + +--- + +## 5. Usage rules + +### Use lavender for: + +- the main button +- active links +- selected controls +- one compact accent line +- small brand highlights + +### Do not use lavender for: + +- large page backgrounds +- long paragraphs +- every badge +- multiple competing cards +- error messaging if a danger colour already exists + +### Use the neutral secondary for: + +- secondary buttons +- optional actions +- toolbars +- filters +- supporting cards + +### Use grey-green and sand for: + +- quiet icon accents +- status support +- visual balance +- warmth without more lavender + +--- + +## 6. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading content + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 7. Typography sample card + +The demo includes a sample content card so you can test the fonts in a more editorial surface. + +```html +
+

Typography sample

+

A calm editorial card heading

+

+ A concise subheading demonstrates Lexend in a refined ivory-and-lavender interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +Recommended use: + +- eyebrow + heading + subheading in **Lexend** +- paragraph in **Atkinson Hyperlegible** + +--- + +## 8. ADHD-friendly notes + +- Keep the lavender limited to primary focus points. +- Let the ivory background do most of the visual calming. +- Use strong spacing rather than extra decoration. +- Preserve clear contrast between background, surface and action. +- Avoid placing too many coloured chips near the main button. +- Keep one obvious next step visible. + +--- + +## 9. Final rule + +If the design starts to feel too decorative, remove lavender rather than adding more neutral styling. + +The warm neutral base should carry the interface. Lavender should simply guide attention. diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html new file mode 100644 index 0000000..ab4f303 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory Ink Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory Ink Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory Ink Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html new file mode 100644 index 0000000..b464a90 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html @@ -0,0 +1,839 @@ + + + + + + + Ivory & Ink + Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper Rose +
+ +
+

Ivory & Ink + Pink

+

Soft warmth. Clear focus.

+

+ This version keeps the warm ivory-and-ink foundation but extends it + with a polished pink for primary actions, emphasis and a touch of personality. +

+ +
    +
  • + + Warm neutral surfaces with one clear pink action colour +
    • +
  • + + Balanced by grey-green and soft sand supporting accents +
    • +
  • + + Lexend and Atkinson Hyperlegible through the Google Fonts CSS API +
    • +
+
+ +
+ Editorial calm + Readable + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md new file mode 100644 index 0000000..fbbcc44 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md @@ -0,0 +1,179 @@ +# Ivory & Ink + Pink UI Style Guide + +A warm editorial UI system based on the Ivory & Ink palette, extended with a refined pink accent. + +The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a very restrained pink used for the primary action. The result is warmer and more personal than pure monochrome, but still clean, grown-up and readable. + +--- + +## 1. Core idea + +Use **Ivory & Ink** as the foundation and **pink** as the signal. + +That means: + +- the page and cards stay mostly neutral +- pink identifies the next important action +- grey-green and sand provide soft balance +- the interface should feel editorial, calm and slightly warm + +Pink should not take over the whole page. It should guide attention. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F3` | Main page background | +| `--page-accent` | `#F2ECE4` | Subtle background depth | +| `--surface` | `#FFFEFB` | Cards and dialogs | +| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections | +| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces | +| `--text` | `#262320` | Main text | +| `--muted` | `#6F6963` | Secondary text | +| `--border` | `#DCCFC4` | Borders and dividers | +| `--primary` | `#D8739A` | Pink primary action | +| `--primary-hover` | `#BC5A80` | Primary hover state | +| `--secondary` | `#E7DED3` | Neutral secondary actions | +| `--secondary-hover` | `#D9CEC1` | Secondary hover state | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090705` | Background depth | +| `--surface` | `#171411` | Main cards and dialogs | +| `--surface-alt` | `#231D1A` | Inputs and secondary sections | +| `--surface-strong` | `#35302B` | Selected and raised surfaces | +| `--text` | `#FAF6F0` | Main text | +| `--muted` | `#C9C1B7` | Secondary text | +| `--border` | `#554D46` | Borders and dividers | +| `--primary` | `#EB97B7` | Pink primary action | +| `--primary-hover` | `#D97DA1` | Primary hover state | +| `--secondary` | `#4F4840` | Neutral secondary actions | +| `--secondary-hover` | `#655D54` | Secondary hover state | + +--- + +## 4. Supporting accents + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Soft pink | `#E8A9C2` | `#F0BFD2` | Highlights and brand personality | +| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support | +| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis | +| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action | +| Success | `#6E816E` | `#9CAE99` | Positive confirmation | + +Recommended balance: + +- **70%** ivory / ink / neutral surfaces +- **20%** pink and neutral secondary structure +- **10%** supporting accents + +--- + +## 5. Usage rules + +### Use pink for: + +- the main button +- active links +- selected controls +- one compact accent line +- small brand highlights + +### Do not use pink for: + +- large page backgrounds +- long paragraphs +- every badge +- multiple competing cards +- error messaging if a danger colour already exists + +### Use the neutral secondary for: + +- secondary buttons +- optional actions +- toolbars +- filters +- supporting cards + +### Use grey-green and sand for: + +- quiet icon accents +- status support +- visual balance +- warmth without more pink + +--- + +## 6. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading content + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 7. Typography sample card + +The demo includes a sample content card so you can test the fonts in a more editorial surface. + +```html +
+

Typography sample

+

A warm editorial card heading

+

+ A concise subheading demonstrates Lexend in a refined ivory-and-pink interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +Recommended use: + +- eyebrow + heading + subheading in **Lexend** +- paragraph in **Atkinson Hyperlegible** + +--- + +## 8. ADHD-friendly notes + +- Keep the pink limited to primary focus points. +- Let the ivory background do most of the visual calming. +- Use strong spacing rather than extra decoration. +- Preserve clear contrast between background, surface and action. +- Avoid placing too many coloured chips near the main button. +- Keep one obvious next step visible. + +--- + +## 9. Final rule + +If the design starts to feel too sweet or decorative, remove pink rather than adding more neutral styling. + +The warm neutral base should carry the interface. Pink should simply guide attention. diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html new file mode 100644 index 0000000..157145d --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory & Ink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory & Ink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory & Ink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html new file mode 100644 index 0000000..b6959ee --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html @@ -0,0 +1,829 @@ + + + + + + + Ivory & Ink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper +
+ +
+

Ivory & Ink

+

Quiet contrast. Thoughtful focus.

+

A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md new file mode 100644 index 0000000..140fffa --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md @@ -0,0 +1,300 @@ +# Ivory & Ink UI Style Guide + +A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white. + +Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F2` | Main page background | +| `--page-accent` | `#F0ECE2` | Subtle page depth | +| `--surface` | `#FFFEFA` | Cards and dialogs | +| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions | +| `--surface-strong` | `#E8E1D4` | Selected and elevated elements | +| `--text` | `#242321` | Main text | +| `--muted` | `#6E6A63` | Secondary text | +| `--border` | `#D8D1C5` | Borders and dividers | +| `--primary` | `#2D2B28` | Main action and brand colour | +| `--primary-hover` | `#171614` | Primary hover and active state | +| `--secondary` | `#E8E2D8` | Secondary action | +| `--secondary-hover` | `#DAD2C5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090806` | Background depth | +| `--surface` | `#151411` | Cards and dialogs | +| `--surface-alt` | `#201E1A` | Inputs and secondary regions | +| `--surface-strong` | `#322F28` | Selected and elevated elements | +| `--text` | `#FAF7EF` | Main text | +| `--muted` | `#C7C1B5` | Secondary text | +| `--border` | `#4D4941` | Borders and dividers | +| `--primary` | `#E8E1D4` | Main action and brand colour | +| `--primary-hover` | `#FFF9ED` | Primary hover and active state | +| `--secondary` | `#4C4840` | Secondary action | +| `--secondary-hover` | `#625D53` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for strong actions and editorial emphasis without saturated colour. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for warm neutral controls, filters and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#817A70` | `#B6ADA0` | +| Accent 2 | `#8C9795` | `#8EA09C` | +| Accent 3 | `#B49B73` | `#C8AD7C` | +| Success | `#6F806F` | `#9BAE99` | +| Danger | `#8A5D54` | `#C89084` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF8F2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --text: #242321; + --muted: #6E6A63; + --border: #D8D1C5; + --primary: #2D2B28; + --secondary: #E8E2D8; +} + +html[data-theme="dark"] { + --page: #020202; + --surface: #151411; + --surface-alt: #201E1A; + --text: #FAF7EF; + --muted: #C7C1B5; + --border: #4D4941; + --primary: #E8E1D4; + --secondary: #4C4840; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html new file mode 100644 index 0000000..7e9468a --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Mist Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Mist Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Mist Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html new file mode 100644 index 0000000..f3048f0 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Mist Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Drift +
+ +
+

Mist Blue

+

Open space. Steady attention.

+

A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md new file mode 100644 index 0000000..ef03598 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md @@ -0,0 +1,300 @@ +# Mist Blue UI Style Guide + +A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity. + +Mist Blue is suitable for information-heavy interfaces because it creates separation without strong saturation. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F9FA` | Main page background | +| `--page-accent` | `#E7EFF2` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EDF4F6` | Inputs and secondary regions | +| `--surface-strong` | `#DAE6EA` | Selected and elevated elements | +| `--text` | `#28363D` | Main text | +| `--muted` | `#68777E` | Secondary text | +| `--border` | `#C9D7DC` | Borders and dividers | +| `--primary` | `#63889A` | Main action and brand colour | +| `--primary-hover` | `#496C7D` | Primary hover and active state | +| `--secondary` | `#E3E4ED` | Secondary action | +| `--secondary-hover` | `#D4D6E3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#061014` | Background depth | +| `--surface` | `#0D181D` | Cards and dialogs | +| `--surface-alt` | `#15252C` | Inputs and secondary regions | +| `--surface-strong` | `#233943` | Selected and elevated elements | +| `--text` | `#EFF5F7` | Main text | +| `--muted` | `#B7C5CB` | Secondary text | +| `--border` | `#38535E` | Borders and dividers | +| `--primary` | `#88AEC0` | Main action and brand colour | +| `--primary-hover` | `#6E94A7` | Primary hover and active state | +| `--secondary` | `#4B4F69` | Secondary action | +| `--secondary-hover` | `#606681` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm primary actions, active navigation and focused progress. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for soft violet-grey controls and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#85A3B0` | `#A1C0CD` | +| Accent 2 | `#898DAA` | `#A0A4C2` | +| Accent 3 | `#C4A36F` | `#D0B17D` | +| Success | `#688A73` | `#91B29A` | +| Danger | `#A56569` | `#D29195` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F9FA; + --surface: #FFFFFF; + --surface-alt: #EDF4F6; + --text: #28363D; + --muted: #68777E; + --border: #C9D7DC; + --primary: #63889A; + --secondary: #E3E4ED; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0D181D; + --surface-alt: #15252C; + --text: #EFF5F7; + --muted: #B7C5CB; + --border: #38535E; + --primary: #88AEC0; + --secondary: #4B4F69; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html new file mode 100644 index 0000000..fd4ada7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Mustard Yellow — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Mustard Yellow system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Mustard Yellow palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html new file mode 100644 index 0000000..668364f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html @@ -0,0 +1,829 @@ + + + + + + + Mustard Yellow — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Beacon +
+ +
+

Mustard Yellow

+

Bright thinking. Calm structure.

+

An editorial mustard system balanced by deep blue-grey for usable contrast.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md new file mode 100644 index 0000000..a7d9f41 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md @@ -0,0 +1,321 @@ +# Mustard Yellow UI Style Guide + +An editorial mustard system balanced by deep blue-grey for usable contrast. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF9F3` | Main page background | +| `--page-accent` | `#F0E9D7` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F7F1E3` | Inputs and secondary regions | +| `--surface-strong` | `#EBDDCA` | Selected and elevated elements | +| `--text` | `#373128` | Main text | +| `--muted` | `#756E61` | Secondary text | +| `--border` | `#DDD2BE` | Borders and dividers | +| `--primary` | `#B58A2F` | Main action and brand colour | +| `--primary-hover` | `#916B1E` | Primary hover and active state | +| `--secondary` | `#DCE5E9` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020405` | Main dark background | +| `--page-accent` | `#080B0D` | Background depth | +| `--surface` | `#111719` | Cards and dialogs | +| `--surface-alt` | `#1B2427` | Inputs and secondary regions | +| `--surface-strong` | `#2C383C` | Selected and elevated elements | +| `--text` | `#F7F3E9` | Main text | +| `--muted` | `#C8C1B2` | Secondary text | +| `--border` | `#4A565A` | Borders and dividers | +| `--primary` | `#D5AA4D` | Main action and brand colour | +| `--primary-hover` | `#B88C35` | Primary hover and active state | +| `--secondary` | `#3B5965` | Secondary action | +| `--secondary-hover` | `#4C6D7A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for high-value actions, selected states and editorial highlights. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for deep blue-grey structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#C19D4E` | `#E0BC67` | +| Accent 2 | `#657F8C` | `#7C9AA7` | +| Accent 3 | `#A27B78` | `#C28B87` | +| Success | `#6D896B` | `#95B096` | +| Danger | `#A65F55` | `#D58E82` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF9F3; + --surface: #FFFFFF; + --surface-alt: #F7F1E3; + --text: #373128; + --muted: #756E61; + --border: #DDD2BE; + --primary: #B58A2F; + --secondary: #DCE5E9; +} + +html[data-theme="dark"] { + --page: #020405; + --surface: #111719; + --surface-alt: #1B2427; + --text: #F7F3E9; + --muted: #C8C1B2; + --border: #4A565A; + --primary: #D5AA4D; + --secondary: #3B5965; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html new file mode 100644 index 0000000..538ccf7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Olive Oat — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Olive Oat system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Olive Oat palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html new file mode 100644 index 0000000..73c3f3f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html @@ -0,0 +1,829 @@ + + + + + + + Olive & Oat — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Meadow +
+ +
+

Olive & Oat

+

Grounded calm. Practical focus.

+

A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md new file mode 100644 index 0000000..fd4a022 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md @@ -0,0 +1,300 @@ +# Olive & Oat UI Style Guide + +A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown. + +Olive & Oat is calm and practical. Keep the olive muted; brighter yellow-green shades quickly become visually demanding. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7F0` | Main page background | +| `--page-accent` | `#ECE8D9` | Subtle page depth | +| `--surface` | `#FFFDF8` | Cards and dialogs | +| `--surface-alt` | `#F4F1E5` | Inputs and secondary regions | +| `--surface-strong` | `#E3DFCD` | Selected and elevated elements | +| `--text` | `#35362B` | Main text | +| `--muted` | `#737363` | Secondary text | +| `--border` | `#D7D3C1` | Borders and dividers | +| `--primary` | `#777B4F` | Main action and brand colour | +| `--primary-hover` | `#5D623A` | Primary hover and active state | +| `--secondary` | `#DDE6E2` | Secondary action | +| `--secondary-hover` | `#CEDBD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030401` | Main dark background | +| `--page-accent` | `#0A0C05` | Background depth | +| `--surface` | `#15170E` | Cards and dialogs | +| `--surface-alt` | `#212418` | Inputs and secondary regions | +| `--surface-strong` | `#343827` | Selected and elevated elements | +| `--text` | `#F5F4EA` | Main text | +| `--muted` | `#C4C3B4` | Secondary text | +| `--border` | `#505443` | Borders and dividers | +| `--primary` | `#A9AD75` | Main action and brand colour | +| `--primary-hover` | `#8F945D` | Primary hover and active state | +| `--secondary` | `#3E5A57` | Secondary action | +| `--secondary-hover` | `#50706C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool green-grey controls that prevent the palette becoming too earthy. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#96966D` | `#BCBD8D` | +| Accent 2 | `#6E8B88` | `#82A09D` | +| Accent 3 | `#C29A64` | `#CFAD76` | +| Success | `#6F8464` | `#9BAF8F` | +| Danger | `#A36558` | `#D18E7E` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7F0; + --surface: #FFFDF8; + --surface-alt: #F4F1E5; + --text: #35362B; + --muted: #737363; + --border: #D7D3C1; + --primary: #777B4F; + --secondary: #DDE6E2; +} + +html[data-theme="dark"] { + --page: #030401; + --surface: #15170E; + --surface-alt: #212418; + --text: #F5F4EA; + --muted: #C4C3B4; + --border: #505443; + --primary: #A9AD75; + --secondary: #3E5A57; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html new file mode 100644 index 0000000..3268de7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Orchid Pop — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Orchid Pop system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Orchid Pop palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html new file mode 100644 index 0000000..efc2d05 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html @@ -0,0 +1,829 @@ + + + + + + + Orchid Pop — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Bloom +
+ +
+

Orchid Pop

+

Bold accent. Calm structure.

+

A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md new file mode 100644 index 0000000..2b3bcb7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md @@ -0,0 +1,300 @@ +# Orchid Pop UI Style Guide + +A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable. + +The exact anchor colour is `#B744C4`. Because it is already visually assertive, the supporting palette is intentionally softer and more neutral. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FCF7FD` | Main page background | +| `--page-accent` | `#F2E6F5` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEFA` | Inputs and secondary regions | +| `--surface-strong` | `#EDD8F0` | Selected and elevated elements | +| `--text` | `#33273A` | Main text | +| `--muted` | `#766A7D` | Secondary text | +| `--border` | `#E0CEE4` | Borders and dividers | +| `--primary` | `#B744C4` | Main action and brand colour | +| `--primary-hover` | `#972FA3` | Primary hover and active state | +| `--secondary` | `#E0E5EB` | Secondary action | +| `--secondary-hover` | `#D1D9E1` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#040105` | Main dark background | +| `--page-accent` | `#0B0610` | Background depth | +| `--surface` | `#180F1A` | Cards and dialogs | +| `--surface-alt` | `#25172A` | Inputs and secondary regions | +| `--surface-strong` | `#39253F` | Selected and elevated elements | +| `--text` | `#F8EFFA` | Main text | +| `--muted` | `#CCBFCE` | Secondary text | +| `--border` | `#5A4060` | Borders and dividers | +| `--primary` | `#C865D3` | Main action and brand colour | +| `--primary-hover` | `#B744C4` | Primary hover and active state | +| `--secondary` | `#455B68` | Secondary action | +| `--secondary-hover` | `#587180` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for distinct primary actions, selected states and confident brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool grey-blue controls and supporting actions that keep the palette calm. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#D38ADC` | `#DEA7E4` | +| Accent 2 | `#758FA0` | `#8CA3B2` | +| Accent 3 | `#C3A06D` | `#D0B07B` | +| Success | `#6C8974` | `#94AF9B` | +| Danger | `#AF5F7B` | `#DA93AB` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FCF7FD; + --surface: #FFFFFF; + --surface-alt: #F8EEFA; + --text: #33273A; + --muted: #766A7D; + --border: #E0CEE4; + --primary: #B744C4; + --secondary: #E0E5EB; +} + +html[data-theme="dark"] { + --page: #040105; + --surface: #180F1A; + --surface-alt: #25172A; + --text: #F8EFFA; + --muted: #CCBFCE; + --border: #5A4060; + --primary: #C865D3; + --secondary: #455B68; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html new file mode 100644 index 0000000..8aa7e08 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Sage Green — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Sage Green system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Sage Green palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-login.html new file mode 100644 index 0000000..5bad7e5 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-login.html @@ -0,0 +1,829 @@ + + + + + + + Sage Green — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Stillleaf +
+ +
+

Sage Green

+

Calm structure. Natural rhythm.

+

A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md new file mode 100644 index 0000000..0387090 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md @@ -0,0 +1,321 @@ +# Sage Green UI Style Guide + +A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F8F4` | Main page background | +| `--page-accent` | `#EAEDE4` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F0F3EB` | Inputs and secondary regions | +| `--surface-strong` | `#DFE5D8` | Selected and elevated elements | +| `--text` | `#2C352C` | Main text | +| `--muted` | `#6D786B` | Secondary text | +| `--border` | `#CED7C8` | Borders and dividers | +| `--primary` | `#71866C` | Main action and brand colour | +| `--primary-hover` | `#586D54` | Primary hover and active state | +| `--secondary` | `#DDE6E1` | Secondary action | +| `--secondary-hover` | `#CEDCD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020503` | Main dark background | +| `--page-accent` | `#08100A` | Background depth | +| `--surface` | `#101812` | Cards and dialogs | +| `--surface-alt` | `#19231B` | Inputs and secondary regions | +| `--surface-strong` | `#2A382D` | Selected and elevated elements | +| `--text` | `#F1F5EF` | Main text | +| `--muted` | `#BCC6B9` | Secondary text | +| `--border` | `#435246` | Borders and dividers | +| `--primary` | `#9BB094` | Main action and brand colour | +| `--primary-hover` | `#829A7C` | Primary hover and active state | +| `--secondary` | `#3F5B57` | Secondary action | +| `--secondary-hover` | `#53716C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm confirmation, primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool eucalyptus structure and supporting actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#8D9F8B` | `#A9B6A7` | +| Accent 2 | `#66888A` | `#7FA4A4` | +| Accent 3 | `#C2A36F` | `#CFB37F` | +| Success | `#64806A` | `#92B09A` | +| Danger | `#A9655D` | `#D38E83` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F8F4; + --surface: #FFFFFF; + --surface-alt: #F0F3EB; + --text: #2C352C; + --muted: #6D786B; + --border: #CED7C8; + --primary: #71866C; + --secondary: #DDE6E1; +} + +html[data-theme="dark"] { + --page: #020503; + --surface: #101812; + --surface-alt: #19231B; + --text: #F1F5EF; + --muted: #BCC6B9; + --border: #435246; + --primary: #9BB094; + --secondary: #3F5B57; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html new file mode 100644 index 0000000..a457005 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Seafoam — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Seafoam system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Seafoam palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-login.html new file mode 100644 index 0000000..a53a909 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-login.html @@ -0,0 +1,829 @@ + + + + + + + Seafoam — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Tide +
+ +
+

Seafoam

+

Soft clarity. Easy momentum.

+

A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md new file mode 100644 index 0000000..131c830 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md @@ -0,0 +1,300 @@ +# Seafoam UI Style Guide + +A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise. + +Seafoam is softer than turquoise and less earthy than sage. It works well for wellbeing, planning and service interfaces. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F5FAF8` | Main page background | +| `--page-accent` | `#E3F1EC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F2` | Inputs and secondary regions | +| `--surface-strong` | `#D5EAE2` | Selected and elevated elements | +| `--text` | `#263A37` | Main text | +| `--muted` | `#667A76` | Secondary text | +| `--border` | `#C5DCD5` | Borders and dividers | +| `--primary` | `#4F8F82` | Main action and brand colour | +| `--primary-hover` | `#397166` | Primary hover and active state | +| `--secondary` | `#DDE9EE` | Secondary action | +| `--secondary-hover` | `#CCDCE3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010504` | Main dark background | +| `--page-accent` | `#05100D` | Background depth | +| `--surface` | `#0D1916` | Cards and dialogs | +| `--surface-alt` | `#14251F` | Inputs and secondary regions | +| `--surface-strong` | `#213A32` | Selected and elevated elements | +| `--text` | `#EFF7F4` | Main text | +| `--muted` | `#B7C8C3` | Secondary text | +| `--border` | `#35564C` | Borders and dividers | +| `--primary` | `#7AB7A8` | Main action and brand colour | +| `--primary-hover` | `#61A091` | Primary hover and active state | +| `--secondary` | `#3B5666` | Secondary action | +| `--secondary-hover` | `#4C6C7F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm actions, progress and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue structure and optional controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#82ADA2` | `#98C6BA` | +| Accent 2 | `#718DA0` | `#819DB0` | +| Accent 3 | `#C5A576` | `#D0B17E` | +| Success | `#668B73` | `#91B39B` | +| Danger | `#A56561` | `#D3908C` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F5FAF8; + --surface: #FFFFFF; + --surface-alt: #EBF6F2; + --text: #263A37; + --muted: #667A76; + --border: #C5DCD5; + --primary: #4F8F82; + --secondary: #DDE9EE; +} + +html[data-theme="dark"] { + --page: #010504; + --surface: #0D1916; + --surface-alt: #14251F; + --text: #EFF7F4; + --muted: #B7C8C3; + --border: #35564C; + --primary: #7AB7A8; + --secondary: #3B5666; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html new file mode 100644 index 0000000..82c82e2 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Simple Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Simple Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Simple Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html new file mode 100644 index 0000000..97111d5 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Simple Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Roseline +
+ +
+

Simple Pink

+

Clear space. Gentle focus.

+

A grown-up pink system with warm neutrals and a muted mauve secondary.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md new file mode 100644 index 0000000..1dca5e8 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md @@ -0,0 +1,321 @@ +# Simple Pink UI Style Guide + +A grown-up pink system with warm neutrals and a muted mauve secondary. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8FA` | Main page background | +| `--page-accent` | `#F7E8EE` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FCEEF3` | Inputs and secondary regions | +| `--surface-strong` | `#F2DCE5` | Selected and elevated elements | +| `--text` | `#38272F` | Main text | +| `--muted` | `#74656C` | Secondary text | +| `--border` | `#E1CBD4` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E9DFE4` | Secondary action | +| `--secondary-hover` | `#DCCFD6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050204` | Main dark background | +| `--page-accent` | `#0C0709` | Background depth | +| `--surface` | `#160D12` | Cards and dialogs | +| `--surface-alt` | `#24151C` | Inputs and secondary regions | +| `--surface-strong` | `#35212B` | Selected and elevated elements | +| `--text` | `#F8EFF3` | Main text | +| `--muted` | `#CBBCC3` | Secondary text | +| `--border` | `#513B45` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#5A3F4C` | Secondary action | +| `--secondary-hover` | `#715061` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for friendly primary actions and brand emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for quiet optional actions and mauve structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A88FA0` | `#B29BAA` | +| Accent 2 | `#77949A` | `#7E9DA1` | +| Accent 3 | `#C8A575` | `#D0B27F` | +| Success | `#6A8C73` | `#92B09A` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8FA; + --surface: #FFFFFF; + --surface-alt: #FCEEF3; + --text: #38272F; + --muted: #74656C; + --border: #E1CBD4; + --primary: #D35F87; + --secondary: #E9DFE4; +} + +html[data-theme="dark"] { + --page: #050204; + --surface: #160D12; + --surface-alt: #24151C; + --text: #F8EFF3; + --muted: #CBBCC3; + --border: #513B45; + --primary: #EE7DA4; + --secondary: #5A3F4C; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html new file mode 100644 index 0000000..931a79c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Sunset Apricot — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Sunset Apricot system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Sunset Apricot palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html new file mode 100644 index 0000000..22b42ad --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html @@ -0,0 +1,829 @@ + + + + + + + Sunset Apricot — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Glow +
+ +
+

Sunset Apricot

+

Warm focus. Friendly clarity.

+

A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md new file mode 100644 index 0000000..9cd2a2c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md @@ -0,0 +1,300 @@ +# Sunset Apricot UI Style Guide + +A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces. + +The exact anchor colour is `#FF8C4F`. Because it is lively, the rest of the interface stays quieter and cooler so the primary action remains clear without becoming overstimulating. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF9F4` | Main page background | +| `--page-accent` | `#F8EBDD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FFF2E7` | Inputs and secondary regions | +| `--surface-strong` | `#F6DEC9` | Selected and elevated elements | +| `--text` | `#382920` | Main text | +| `--muted` | `#79695F` | Secondary text | +| `--border` | `#E6D2C3` | Borders and dividers | +| `--primary` | `#FF8C4F` | Main action and brand colour | +| `--primary-hover` | `#E86F2F` | Primary hover and active state | +| `--secondary` | `#DDE7EA` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0C0705` | Background depth | +| `--surface` | `#18110D` | Cards and dialogs | +| `--surface-alt` | `#251A15` | Inputs and secondary regions | +| `--surface-strong` | `#3A291F` | Selected and elevated elements | +| `--text` | `#FBF2EC` | Main text | +| `--muted` | `#D0BFB5` | Secondary text | +| `--border` | `#62493B` | Borders and dividers | +| `--primary` | `#FF9A63` | Main action and brand colour | +| `--primary-hover` | `#FF8C4F` | Primary hover and active state | +| `--secondary` | `#425C66` | Secondary action | +| `--secondary-hover` | `#55717C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for warm primary actions, active states and friendly emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate structure, optional actions and visual balance. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#FFB285` | `#FFC5A4` | +| Accent 2 | `#6E8E98` | `#89A4AE` | +| Accent 3 | `#C79A67` | `#D2AE7B` | +| Success | `#6D8A72` | `#95B09A` | +| Danger | `#B86354` | `#DE9383` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF9F4; + --surface: #FFFFFF; + --surface-alt: #FFF2E7; + --text: #382920; + --muted: #79695F; + --border: #E6D2C3; + --primary: #FF8C4F; + --secondary: #DDE7EA; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #18110D; + --surface-alt: #251A15; + --text: #FBF2EC; + --muted: #D0BFB5; + --border: #62493B; + --primary: #FF9A63; + --secondary: #425C66; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html new file mode 100644 index 0000000..5e3683c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Turquoise Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Turquoise Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Turquoise Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html new file mode 100644 index 0000000..c70c9b7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Turquoise Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Current +
+ +
+

Turquoise Blue

+

Fresh focus. Clear movement.

+

A fresh turquoise system anchored by deep navy and restrained warm accents.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md new file mode 100644 index 0000000..e2083d1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md @@ -0,0 +1,321 @@ +# Turquoise Blue UI Style Guide + +A fresh turquoise system anchored by deep navy and restrained warm accents. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F4FAFA` | Main page background | +| `--page-accent` | `#E2F0F1` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F6` | Inputs and secondary regions | +| `--surface-strong` | `#D6E9E9` | Selected and elevated elements | +| `--text` | `#20363A` | Main text | +| `--muted` | `#62777B` | Secondary text | +| `--border` | `#C4DADB` | Borders and dividers | +| `--primary` | `#238C91` | Main action and brand colour | +| `--primary-hover` | `#176D72` | Primary hover and active state | +| `--secondary` | `#DDE5EE` | Secondary action | +| `--secondary-hover` | `#CCD8E5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#041014` | Background depth | +| `--surface` | `#0A181B` | Cards and dialogs | +| `--surface-alt` | `#10262A` | Inputs and secondary regions | +| `--surface-strong` | `#1A3B40` | Selected and elevated elements | +| `--text` | `#EDF7F7` | Main text | +| `--muted` | `#B3C6C7` | Secondary text | +| `--border` | `#31545A` | Borders and dividers | +| `--primary` | `#45B8BC` | Main action and brand colour | +| `--primary-hover` | `#2E999E` | Primary hover and active state | +| `--secondary` | `#354E69` | Secondary action | +| `--secondary-hover` | `#45627F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for fresh primary actions, progress and active navigation. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for navy-blue structure and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#5CA5A6` | `#72C0C1` | +| Accent 2 | `#6F83A1` | `#8296B5` | +| Accent 3 | `#C39A68` | `#D0AD7C` | +| Success | `#63886F` | `#8EB39A` | +| Danger | `#A86062` | `#D48E90` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F4FAFA; + --surface: #FFFFFF; + --surface-alt: #EBF6F6; + --text: #20363A; + --muted: #62777B; + --border: #C4DADB; + --primary: #238C91; + --secondary: #DDE5EE; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0A181B; + --surface-alt: #10262A; + --text: #EDF7F7; + --muted: #B3C6C7; + --border: #31545A; + --primary: #45B8BC; + --secondary: #354E69; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html new file mode 100644 index 0000000..2758638 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Warm Brown — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Warm Brown system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Warm Brown palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html new file mode 100644 index 0000000..9c23e1c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html @@ -0,0 +1,829 @@ + + + + + + + Warm Brown — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Cocoa +
+ +
+

Warm Brown

+

Grounded focus. Warm clarity.

+

A grounded brown system with clay warmth and muted blue-grey balance.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md new file mode 100644 index 0000000..1fea16a --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md @@ -0,0 +1,321 @@ +# Warm Brown UI Style Guide + +A grounded brown system with clay warmth and muted blue-grey balance. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF7F3` | Main page background | +| `--page-accent` | `#EFE6DD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F6EFE8` | Inputs and secondary regions | +| `--surface-strong` | `#E8D9CC` | Selected and elevated elements | +| `--text` | `#392E28` | Main text | +| `--muted` | `#756961` | Secondary text | +| `--border` | `#DCCFC5` | Borders and dividers | +| `--primary` | `#8B5E3C` | Main action and brand colour | +| `--primary-hover` | `#6D452A` | Primary hover and active state | +| `--secondary` | `#DDE5E7` | Secondary action | +| `--secondary-hover` | `#CCD9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0A0705` | Background depth | +| `--surface` | `#17110D` | Cards and dialogs | +| `--surface-alt` | `#251A14` | Inputs and secondary regions | +| `--surface-strong` | `#39291F` | Selected and elevated elements | +| `--text` | `#F7F1EC` | Main text | +| `--muted` | `#C7BBB2` | Secondary text | +| `--border` | `#59483D` | Borders and dividers | +| `--primary` | `#B77A4D` | Main action and brand colour | +| `--primary-hover` | `#975F38` | Primary hover and active state | +| `--secondary` | `#3D555B` | Secondary action | +| `--secondary-hover` | `#4E6971` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions, selected states and brand marks. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue-grey balance and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A47758` | `#C08E67` | +| Accent 2 | `#6E8A8F` | `#7E9EA3` | +| Accent 3 | `#C49E69` | `#D2AF78` | +| Success | `#6D896F` | `#92AF96` | +| Danger | `#A65F4F` | `#D58D7C` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF7F3; + --surface: #FFFFFF; + --surface-alt: #F6EFE8; + --text: #392E28; + --muted: #756961; + --border: #DCCFC5; + --primary: #8B5E3C; + --secondary: #DDE5E7; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #17110D; + --surface-alt: #251A14; + --text: #F7F1EC; + --muted: #C7BBB2; + --border: #59483D; + --primary: #B77A4D; + --secondary: #3D555B; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/dashboard-index.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/dashboard-index.html new file mode 100644 index 0000000..f7db192 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/adhd-friendly-dashboard-variants/dashboard-index.html @@ -0,0 +1,387 @@ + + + + + + ADHD-Friendly Dashboard Variants + + + +
+

Dashboard library

+

ADHD-Friendly Dashboard Variants

+

+ This overview contains dashboard demos for all colour schemes created so far, including the pure Ivory & Ink version. + Every dashboard includes sidebar navigation, a top bar, stats cards, progress and activity sections, and a typography sample card. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-lavender-dashboard-package.zip b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-lavender-dashboard-package.zip new file mode 100644 index 0000000..3ed9de8 Binary files /dev/null and b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-lavender-dashboard-package.zip differ diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html new file mode 100644 index 0000000..b464a90 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html @@ -0,0 +1,839 @@ + + + + + + + Ivory & Ink + Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper Rose +
+ +
+

Ivory & Ink + Pink

+

Soft warmth. Clear focus.

+

+ This version keeps the warm ivory-and-ink foundation but extends it + with a polished pink for primary actions, emphasis and a touch of personality. +

+ +
    +
  • + + Warm neutral surfaces with one clear pink action colour +
    • +
  • + + Balanced by grey-green and soft sand supporting accents +
    • +
  • + + Lexend and Atkinson Hyperlegible through the Google Fonts CSS API +
    • +
+
+ +
+ Editorial calm + Readable + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md new file mode 100644 index 0000000..fbbcc44 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md @@ -0,0 +1,179 @@ +# Ivory & Ink + Pink UI Style Guide + +A warm editorial UI system based on the Ivory & Ink palette, extended with a refined pink accent. + +The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a very restrained pink used for the primary action. The result is warmer and more personal than pure monochrome, but still clean, grown-up and readable. + +--- + +## 1. Core idea + +Use **Ivory & Ink** as the foundation and **pink** as the signal. + +That means: + +- the page and cards stay mostly neutral +- pink identifies the next important action +- grey-green and sand provide soft balance +- the interface should feel editorial, calm and slightly warm + +Pink should not take over the whole page. It should guide attention. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F3` | Main page background | +| `--page-accent` | `#F2ECE4` | Subtle background depth | +| `--surface` | `#FFFEFB` | Cards and dialogs | +| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections | +| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces | +| `--text` | `#262320` | Main text | +| `--muted` | `#6F6963` | Secondary text | +| `--border` | `#DCCFC4` | Borders and dividers | +| `--primary` | `#D8739A` | Pink primary action | +| `--primary-hover` | `#BC5A80` | Primary hover state | +| `--secondary` | `#E7DED3` | Neutral secondary actions | +| `--secondary-hover` | `#D9CEC1` | Secondary hover state | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090705` | Background depth | +| `--surface` | `#171411` | Main cards and dialogs | +| `--surface-alt` | `#231D1A` | Inputs and secondary sections | +| `--surface-strong` | `#35302B` | Selected and raised surfaces | +| `--text` | `#FAF6F0` | Main text | +| `--muted` | `#C9C1B7` | Secondary text | +| `--border` | `#554D46` | Borders and dividers | +| `--primary` | `#EB97B7` | Pink primary action | +| `--primary-hover` | `#D97DA1` | Primary hover state | +| `--secondary` | `#4F4840` | Neutral secondary actions | +| `--secondary-hover` | `#655D54` | Secondary hover state | + +--- + +## 4. Supporting accents + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Soft pink | `#E8A9C2` | `#F0BFD2` | Highlights and brand personality | +| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support | +| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis | +| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action | +| Success | `#6E816E` | `#9CAE99` | Positive confirmation | + +Recommended balance: + +- **70%** ivory / ink / neutral surfaces +- **20%** pink and neutral secondary structure +- **10%** supporting accents + +--- + +## 5. Usage rules + +### Use pink for: + +- the main button +- active links +- selected controls +- one compact accent line +- small brand highlights + +### Do not use pink for: + +- large page backgrounds +- long paragraphs +- every badge +- multiple competing cards +- error messaging if a danger colour already exists + +### Use the neutral secondary for: + +- secondary buttons +- optional actions +- toolbars +- filters +- supporting cards + +### Use grey-green and sand for: + +- quiet icon accents +- status support +- visual balance +- warmth without more pink + +--- + +## 6. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading content + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 7. Typography sample card + +The demo includes a sample content card so you can test the fonts in a more editorial surface. + +```html +
+

Typography sample

+

A warm editorial card heading

+

+ A concise subheading demonstrates Lexend in a refined ivory-and-pink interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +Recommended use: + +- eyebrow + heading + subheading in **Lexend** +- paragraph in **Atkinson Hyperlegible** + +--- + +## 8. ADHD-friendly notes + +- Keep the pink limited to primary focus points. +- Let the ivory background do most of the visual calming. +- Use strong spacing rather than extra decoration. +- Preserve clear contrast between background, surface and action. +- Avoid placing too many coloured chips near the main button. +- Keep one obvious next step visible. + +--- + +## 9. Final rule + +If the design starts to feel too sweet or decorative, remove pink rather than adding more neutral styling. + +The warm neutral base should carry the interface. Pink should simply guide attention. diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html new file mode 100644 index 0000000..b6959ee --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html @@ -0,0 +1,829 @@ + + + + + + + Ivory & Ink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper +
+ +
+

Ivory & Ink

+

Quiet contrast. Thoughtful focus.

+

A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md new file mode 100644 index 0000000..140fffa --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md @@ -0,0 +1,300 @@ +# Ivory & Ink UI Style Guide + +A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white. + +Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F2` | Main page background | +| `--page-accent` | `#F0ECE2` | Subtle page depth | +| `--surface` | `#FFFEFA` | Cards and dialogs | +| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions | +| `--surface-strong` | `#E8E1D4` | Selected and elevated elements | +| `--text` | `#242321` | Main text | +| `--muted` | `#6E6A63` | Secondary text | +| `--border` | `#D8D1C5` | Borders and dividers | +| `--primary` | `#2D2B28` | Main action and brand colour | +| `--primary-hover` | `#171614` | Primary hover and active state | +| `--secondary` | `#E8E2D8` | Secondary action | +| `--secondary-hover` | `#DAD2C5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090806` | Background depth | +| `--surface` | `#151411` | Cards and dialogs | +| `--surface-alt` | `#201E1A` | Inputs and secondary regions | +| `--surface-strong` | `#322F28` | Selected and elevated elements | +| `--text` | `#FAF7EF` | Main text | +| `--muted` | `#C7C1B5` | Secondary text | +| `--border` | `#4D4941` | Borders and dividers | +| `--primary` | `#E8E1D4` | Main action and brand colour | +| `--primary-hover` | `#FFF9ED` | Primary hover and active state | +| `--secondary` | `#4C4840` | Secondary action | +| `--secondary-hover` | `#625D53` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for strong actions and editorial emphasis without saturated colour. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for warm neutral controls, filters and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#817A70` | `#B6ADA0` | +| Accent 2 | `#8C9795` | `#8EA09C` | +| Accent 3 | `#B49B73` | `#C8AD7C` | +| Success | `#6F806F` | `#9BAE99` | +| Danger | `#8A5D54` | `#C89084` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF8F2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --text: #242321; + --muted: #6E6A63; + --border: #D8D1C5; + --primary: #2D2B28; + --secondary: #E8E2D8; +} + +html[data-theme="dark"] { + --page: #020202; + --surface: #151411; + --surface-alt: #201E1A; + --text: #FAF7EF; + --muted: #C7C1B5; + --border: #4D4941; + --primary: #E8E1D4; + --secondary: #4C4840; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html new file mode 100644 index 0000000..f3048f0 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Mist Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Drift +
+ +
+

Mist Blue

+

Open space. Steady attention.

+

A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md new file mode 100644 index 0000000..ef03598 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md @@ -0,0 +1,300 @@ +# Mist Blue UI Style Guide + +A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity. + +Mist Blue is suitable for information-heavy interfaces because it creates separation without strong saturation. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F9FA` | Main page background | +| `--page-accent` | `#E7EFF2` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EDF4F6` | Inputs and secondary regions | +| `--surface-strong` | `#DAE6EA` | Selected and elevated elements | +| `--text` | `#28363D` | Main text | +| `--muted` | `#68777E` | Secondary text | +| `--border` | `#C9D7DC` | Borders and dividers | +| `--primary` | `#63889A` | Main action and brand colour | +| `--primary-hover` | `#496C7D` | Primary hover and active state | +| `--secondary` | `#E3E4ED` | Secondary action | +| `--secondary-hover` | `#D4D6E3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#061014` | Background depth | +| `--surface` | `#0D181D` | Cards and dialogs | +| `--surface-alt` | `#15252C` | Inputs and secondary regions | +| `--surface-strong` | `#233943` | Selected and elevated elements | +| `--text` | `#EFF5F7` | Main text | +| `--muted` | `#B7C5CB` | Secondary text | +| `--border` | `#38535E` | Borders and dividers | +| `--primary` | `#88AEC0` | Main action and brand colour | +| `--primary-hover` | `#6E94A7` | Primary hover and active state | +| `--secondary` | `#4B4F69` | Secondary action | +| `--secondary-hover` | `#606681` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm primary actions, active navigation and focused progress. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for soft violet-grey controls and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#85A3B0` | `#A1C0CD` | +| Accent 2 | `#898DAA` | `#A0A4C2` | +| Accent 3 | `#C4A36F` | `#D0B17D` | +| Success | `#688A73` | `#91B29A` | +| Danger | `#A56569` | `#D29195` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F9FA; + --surface: #FFFFFF; + --surface-alt: #EDF4F6; + --text: #28363D; + --muted: #68777E; + --border: #C9D7DC; + --primary: #63889A; + --secondary: #E3E4ED; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0D181D; + --surface-alt: #15252C; + --text: #EFF5F7; + --muted: #B7C5CB; + --border: #38535E; + --primary: #88AEC0; + --secondary: #4B4F69; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html new file mode 100644 index 0000000..668364f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html @@ -0,0 +1,829 @@ + + + + + + + Mustard Yellow — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Beacon +
+ +
+

Mustard Yellow

+

Bright thinking. Calm structure.

+

An editorial mustard system balanced by deep blue-grey for usable contrast.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md new file mode 100644 index 0000000..a7d9f41 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md @@ -0,0 +1,321 @@ +# Mustard Yellow UI Style Guide + +An editorial mustard system balanced by deep blue-grey for usable contrast. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF9F3` | Main page background | +| `--page-accent` | `#F0E9D7` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F7F1E3` | Inputs and secondary regions | +| `--surface-strong` | `#EBDDCA` | Selected and elevated elements | +| `--text` | `#373128` | Main text | +| `--muted` | `#756E61` | Secondary text | +| `--border` | `#DDD2BE` | Borders and dividers | +| `--primary` | `#B58A2F` | Main action and brand colour | +| `--primary-hover` | `#916B1E` | Primary hover and active state | +| `--secondary` | `#DCE5E9` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020405` | Main dark background | +| `--page-accent` | `#080B0D` | Background depth | +| `--surface` | `#111719` | Cards and dialogs | +| `--surface-alt` | `#1B2427` | Inputs and secondary regions | +| `--surface-strong` | `#2C383C` | Selected and elevated elements | +| `--text` | `#F7F3E9` | Main text | +| `--muted` | `#C8C1B2` | Secondary text | +| `--border` | `#4A565A` | Borders and dividers | +| `--primary` | `#D5AA4D` | Main action and brand colour | +| `--primary-hover` | `#B88C35` | Primary hover and active state | +| `--secondary` | `#3B5965` | Secondary action | +| `--secondary-hover` | `#4C6D7A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for high-value actions, selected states and editorial highlights. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for deep blue-grey structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#C19D4E` | `#E0BC67` | +| Accent 2 | `#657F8C` | `#7C9AA7` | +| Accent 3 | `#A27B78` | `#C28B87` | +| Success | `#6D896B` | `#95B096` | +| Danger | `#A65F55` | `#D58E82` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF9F3; + --surface: #FFFFFF; + --surface-alt: #F7F1E3; + --text: #373128; + --muted: #756E61; + --border: #DDD2BE; + --primary: #B58A2F; + --secondary: #DCE5E9; +} + +html[data-theme="dark"] { + --page: #020405; + --surface: #111719; + --surface-alt: #1B2427; + --text: #F7F3E9; + --muted: #C8C1B2; + --border: #4A565A; + --primary: #D5AA4D; + --secondary: #3B5965; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html new file mode 100644 index 0000000..73c3f3f --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html @@ -0,0 +1,829 @@ + + + + + + + Olive & Oat — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Meadow +
+ +
+

Olive & Oat

+

Grounded calm. Practical focus.

+

A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md new file mode 100644 index 0000000..fd4a022 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md @@ -0,0 +1,300 @@ +# Olive & Oat UI Style Guide + +A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown. + +Olive & Oat is calm and practical. Keep the olive muted; brighter yellow-green shades quickly become visually demanding. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7F0` | Main page background | +| `--page-accent` | `#ECE8D9` | Subtle page depth | +| `--surface` | `#FFFDF8` | Cards and dialogs | +| `--surface-alt` | `#F4F1E5` | Inputs and secondary regions | +| `--surface-strong` | `#E3DFCD` | Selected and elevated elements | +| `--text` | `#35362B` | Main text | +| `--muted` | `#737363` | Secondary text | +| `--border` | `#D7D3C1` | Borders and dividers | +| `--primary` | `#777B4F` | Main action and brand colour | +| `--primary-hover` | `#5D623A` | Primary hover and active state | +| `--secondary` | `#DDE6E2` | Secondary action | +| `--secondary-hover` | `#CEDBD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030401` | Main dark background | +| `--page-accent` | `#0A0C05` | Background depth | +| `--surface` | `#15170E` | Cards and dialogs | +| `--surface-alt` | `#212418` | Inputs and secondary regions | +| `--surface-strong` | `#343827` | Selected and elevated elements | +| `--text` | `#F5F4EA` | Main text | +| `--muted` | `#C4C3B4` | Secondary text | +| `--border` | `#505443` | Borders and dividers | +| `--primary` | `#A9AD75` | Main action and brand colour | +| `--primary-hover` | `#8F945D` | Primary hover and active state | +| `--secondary` | `#3E5A57` | Secondary action | +| `--secondary-hover` | `#50706C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool green-grey controls that prevent the palette becoming too earthy. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#96966D` | `#BCBD8D` | +| Accent 2 | `#6E8B88` | `#82A09D` | +| Accent 3 | `#C29A64` | `#CFAD76` | +| Success | `#6F8464` | `#9BAF8F` | +| Danger | `#A36558` | `#D18E7E` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7F0; + --surface: #FFFDF8; + --surface-alt: #F4F1E5; + --text: #35362B; + --muted: #737363; + --border: #D7D3C1; + --primary: #777B4F; + --secondary: #DDE6E2; +} + +html[data-theme="dark"] { + --page: #030401; + --surface: #15170E; + --surface-alt: #212418; + --text: #F5F4EA; + --muted: #C4C3B4; + --border: #505443; + --primary: #A9AD75; + --secondary: #3E5A57; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html new file mode 100644 index 0000000..efc2d05 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html @@ -0,0 +1,829 @@ + + + + + + + Orchid Pop — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Bloom +
+ +
+

Orchid Pop

+

Bold accent. Calm structure.

+

A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md new file mode 100644 index 0000000..2b3bcb7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md @@ -0,0 +1,300 @@ +# Orchid Pop UI Style Guide + +A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable. + +The exact anchor colour is `#B744C4`. Because it is already visually assertive, the supporting palette is intentionally softer and more neutral. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FCF7FD` | Main page background | +| `--page-accent` | `#F2E6F5` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEFA` | Inputs and secondary regions | +| `--surface-strong` | `#EDD8F0` | Selected and elevated elements | +| `--text` | `#33273A` | Main text | +| `--muted` | `#766A7D` | Secondary text | +| `--border` | `#E0CEE4` | Borders and dividers | +| `--primary` | `#B744C4` | Main action and brand colour | +| `--primary-hover` | `#972FA3` | Primary hover and active state | +| `--secondary` | `#E0E5EB` | Secondary action | +| `--secondary-hover` | `#D1D9E1` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#040105` | Main dark background | +| `--page-accent` | `#0B0610` | Background depth | +| `--surface` | `#180F1A` | Cards and dialogs | +| `--surface-alt` | `#25172A` | Inputs and secondary regions | +| `--surface-strong` | `#39253F` | Selected and elevated elements | +| `--text` | `#F8EFFA` | Main text | +| `--muted` | `#CCBFCE` | Secondary text | +| `--border` | `#5A4060` | Borders and dividers | +| `--primary` | `#C865D3` | Main action and brand colour | +| `--primary-hover` | `#B744C4` | Primary hover and active state | +| `--secondary` | `#455B68` | Secondary action | +| `--secondary-hover` | `#587180` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for distinct primary actions, selected states and confident brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool grey-blue controls and supporting actions that keep the palette calm. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#D38ADC` | `#DEA7E4` | +| Accent 2 | `#758FA0` | `#8CA3B2` | +| Accent 3 | `#C3A06D` | `#D0B07B` | +| Success | `#6C8974` | `#94AF9B` | +| Danger | `#AF5F7B` | `#DA93AB` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FCF7FD; + --surface: #FFFFFF; + --surface-alt: #F8EEFA; + --text: #33273A; + --muted: #766A7D; + --border: #E0CEE4; + --primary: #B744C4; + --secondary: #E0E5EB; +} + +html[data-theme="dark"] { + --page: #040105; + --surface: #180F1A; + --surface-alt: #25172A; + --text: #F8EFFA; + --muted: #CCBFCE; + --border: #5A4060; + --primary: #C865D3; + --secondary: #455B68; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-login.html new file mode 100644 index 0000000..5bad7e5 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-login.html @@ -0,0 +1,829 @@ + + + + + + + Sage Green — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Stillleaf +
+ +
+

Sage Green

+

Calm structure. Natural rhythm.

+

A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md new file mode 100644 index 0000000..0387090 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md @@ -0,0 +1,321 @@ +# Sage Green UI Style Guide + +A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F8F4` | Main page background | +| `--page-accent` | `#EAEDE4` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F0F3EB` | Inputs and secondary regions | +| `--surface-strong` | `#DFE5D8` | Selected and elevated elements | +| `--text` | `#2C352C` | Main text | +| `--muted` | `#6D786B` | Secondary text | +| `--border` | `#CED7C8` | Borders and dividers | +| `--primary` | `#71866C` | Main action and brand colour | +| `--primary-hover` | `#586D54` | Primary hover and active state | +| `--secondary` | `#DDE6E1` | Secondary action | +| `--secondary-hover` | `#CEDCD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020503` | Main dark background | +| `--page-accent` | `#08100A` | Background depth | +| `--surface` | `#101812` | Cards and dialogs | +| `--surface-alt` | `#19231B` | Inputs and secondary regions | +| `--surface-strong` | `#2A382D` | Selected and elevated elements | +| `--text` | `#F1F5EF` | Main text | +| `--muted` | `#BCC6B9` | Secondary text | +| `--border` | `#435246` | Borders and dividers | +| `--primary` | `#9BB094` | Main action and brand colour | +| `--primary-hover` | `#829A7C` | Primary hover and active state | +| `--secondary` | `#3F5B57` | Secondary action | +| `--secondary-hover` | `#53716C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm confirmation, primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool eucalyptus structure and supporting actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#8D9F8B` | `#A9B6A7` | +| Accent 2 | `#66888A` | `#7FA4A4` | +| Accent 3 | `#C2A36F` | `#CFB37F` | +| Success | `#64806A` | `#92B09A` | +| Danger | `#A9655D` | `#D38E83` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F8F4; + --surface: #FFFFFF; + --surface-alt: #F0F3EB; + --text: #2C352C; + --muted: #6D786B; + --border: #CED7C8; + --primary: #71866C; + --secondary: #DDE6E1; +} + +html[data-theme="dark"] { + --page: #020503; + --surface: #101812; + --surface-alt: #19231B; + --text: #F1F5EF; + --muted: #BCC6B9; + --border: #435246; + --primary: #9BB094; + --secondary: #3F5B57; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-login.html new file mode 100644 index 0000000..a53a909 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-login.html @@ -0,0 +1,829 @@ + + + + + + + Seafoam — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Tide +
+ +
+

Seafoam

+

Soft clarity. Easy momentum.

+

A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md new file mode 100644 index 0000000..131c830 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md @@ -0,0 +1,300 @@ +# Seafoam UI Style Guide + +A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise. + +Seafoam is softer than turquoise and less earthy than sage. It works well for wellbeing, planning and service interfaces. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F5FAF8` | Main page background | +| `--page-accent` | `#E3F1EC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F2` | Inputs and secondary regions | +| `--surface-strong` | `#D5EAE2` | Selected and elevated elements | +| `--text` | `#263A37` | Main text | +| `--muted` | `#667A76` | Secondary text | +| `--border` | `#C5DCD5` | Borders and dividers | +| `--primary` | `#4F8F82` | Main action and brand colour | +| `--primary-hover` | `#397166` | Primary hover and active state | +| `--secondary` | `#DDE9EE` | Secondary action | +| `--secondary-hover` | `#CCDCE3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010504` | Main dark background | +| `--page-accent` | `#05100D` | Background depth | +| `--surface` | `#0D1916` | Cards and dialogs | +| `--surface-alt` | `#14251F` | Inputs and secondary regions | +| `--surface-strong` | `#213A32` | Selected and elevated elements | +| `--text` | `#EFF7F4` | Main text | +| `--muted` | `#B7C8C3` | Secondary text | +| `--border` | `#35564C` | Borders and dividers | +| `--primary` | `#7AB7A8` | Main action and brand colour | +| `--primary-hover` | `#61A091` | Primary hover and active state | +| `--secondary` | `#3B5666` | Secondary action | +| `--secondary-hover` | `#4C6C7F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm actions, progress and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue structure and optional controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#82ADA2` | `#98C6BA` | +| Accent 2 | `#718DA0` | `#819DB0` | +| Accent 3 | `#C5A576` | `#D0B17E` | +| Success | `#668B73` | `#91B39B` | +| Danger | `#A56561` | `#D3908C` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F5FAF8; + --surface: #FFFFFF; + --surface-alt: #EBF6F2; + --text: #263A37; + --muted: #667A76; + --border: #C5DCD5; + --primary: #4F8F82; + --secondary: #DDE9EE; +} + +html[data-theme="dark"] { + --page: #010504; + --surface: #0D1916; + --surface-alt: #14251F; + --text: #EFF7F4; + --muted: #B7C8C3; + --border: #35564C; + --primary: #7AB7A8; + --secondary: #3B5666; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html new file mode 100644 index 0000000..97111d5 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Simple Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Roseline +
+ +
+

Simple Pink

+

Clear space. Gentle focus.

+

A grown-up pink system with warm neutrals and a muted mauve secondary.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md new file mode 100644 index 0000000..1dca5e8 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md @@ -0,0 +1,321 @@ +# Simple Pink UI Style Guide + +A grown-up pink system with warm neutrals and a muted mauve secondary. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8FA` | Main page background | +| `--page-accent` | `#F7E8EE` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FCEEF3` | Inputs and secondary regions | +| `--surface-strong` | `#F2DCE5` | Selected and elevated elements | +| `--text` | `#38272F` | Main text | +| `--muted` | `#74656C` | Secondary text | +| `--border` | `#E1CBD4` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E9DFE4` | Secondary action | +| `--secondary-hover` | `#DCCFD6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050204` | Main dark background | +| `--page-accent` | `#0C0709` | Background depth | +| `--surface` | `#160D12` | Cards and dialogs | +| `--surface-alt` | `#24151C` | Inputs and secondary regions | +| `--surface-strong` | `#35212B` | Selected and elevated elements | +| `--text` | `#F8EFF3` | Main text | +| `--muted` | `#CBBCC3` | Secondary text | +| `--border` | `#513B45` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#5A3F4C` | Secondary action | +| `--secondary-hover` | `#715061` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for friendly primary actions and brand emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for quiet optional actions and mauve structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A88FA0` | `#B29BAA` | +| Accent 2 | `#77949A` | `#7E9DA1` | +| Accent 3 | `#C8A575` | `#D0B27F` | +| Success | `#6A8C73` | `#92B09A` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8FA; + --surface: #FFFFFF; + --surface-alt: #FCEEF3; + --text: #38272F; + --muted: #74656C; + --border: #E1CBD4; + --primary: #D35F87; + --secondary: #E9DFE4; +} + +html[data-theme="dark"] { + --page: #050204; + --surface: #160D12; + --surface-alt: #24151C; + --text: #F8EFF3; + --muted: #CBBCC3; + --border: #513B45; + --primary: #EE7DA4; + --secondary: #5A3F4C; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html new file mode 100644 index 0000000..22b42ad --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html @@ -0,0 +1,829 @@ + + + + + + + Sunset Apricot — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Glow +
+ +
+

Sunset Apricot

+

Warm focus. Friendly clarity.

+

A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md new file mode 100644 index 0000000..9cd2a2c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md @@ -0,0 +1,300 @@ +# Sunset Apricot UI Style Guide + +A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces. + +The exact anchor colour is `#FF8C4F`. Because it is lively, the rest of the interface stays quieter and cooler so the primary action remains clear without becoming overstimulating. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF9F4` | Main page background | +| `--page-accent` | `#F8EBDD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FFF2E7` | Inputs and secondary regions | +| `--surface-strong` | `#F6DEC9` | Selected and elevated elements | +| `--text` | `#382920` | Main text | +| `--muted` | `#79695F` | Secondary text | +| `--border` | `#E6D2C3` | Borders and dividers | +| `--primary` | `#FF8C4F` | Main action and brand colour | +| `--primary-hover` | `#E86F2F` | Primary hover and active state | +| `--secondary` | `#DDE7EA` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0C0705` | Background depth | +| `--surface` | `#18110D` | Cards and dialogs | +| `--surface-alt` | `#251A15` | Inputs and secondary regions | +| `--surface-strong` | `#3A291F` | Selected and elevated elements | +| `--text` | `#FBF2EC` | Main text | +| `--muted` | `#D0BFB5` | Secondary text | +| `--border` | `#62493B` | Borders and dividers | +| `--primary` | `#FF9A63` | Main action and brand colour | +| `--primary-hover` | `#FF8C4F` | Primary hover and active state | +| `--secondary` | `#425C66` | Secondary action | +| `--secondary-hover` | `#55717C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for warm primary actions, active states and friendly emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate structure, optional actions and visual balance. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#FFB285` | `#FFC5A4` | +| Accent 2 | `#6E8E98` | `#89A4AE` | +| Accent 3 | `#C79A67` | `#D2AE7B` | +| Success | `#6D8A72` | `#95B09A` | +| Danger | `#B86354` | `#DE9383` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF9F4; + --surface: #FFFFFF; + --surface-alt: #FFF2E7; + --text: #382920; + --muted: #79695F; + --border: #E6D2C3; + --primary: #FF8C4F; + --secondary: #DDE7EA; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #18110D; + --surface-alt: #251A15; + --text: #FBF2EC; + --muted: #D0BFB5; + --border: #62493B; + --primary: #FF9A63; + --secondary: #425C66; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html new file mode 100644 index 0000000..c70c9b7 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Turquoise Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Current +
+ +
+

Turquoise Blue

+

Fresh focus. Clear movement.

+

A fresh turquoise system anchored by deep navy and restrained warm accents.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md new file mode 100644 index 0000000..e2083d1 --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md @@ -0,0 +1,321 @@ +# Turquoise Blue UI Style Guide + +A fresh turquoise system anchored by deep navy and restrained warm accents. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F4FAFA` | Main page background | +| `--page-accent` | `#E2F0F1` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F6` | Inputs and secondary regions | +| `--surface-strong` | `#D6E9E9` | Selected and elevated elements | +| `--text` | `#20363A` | Main text | +| `--muted` | `#62777B` | Secondary text | +| `--border` | `#C4DADB` | Borders and dividers | +| `--primary` | `#238C91` | Main action and brand colour | +| `--primary-hover` | `#176D72` | Primary hover and active state | +| `--secondary` | `#DDE5EE` | Secondary action | +| `--secondary-hover` | `#CCD8E5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#041014` | Background depth | +| `--surface` | `#0A181B` | Cards and dialogs | +| `--surface-alt` | `#10262A` | Inputs and secondary regions | +| `--surface-strong` | `#1A3B40` | Selected and elevated elements | +| `--text` | `#EDF7F7` | Main text | +| `--muted` | `#B3C6C7` | Secondary text | +| `--border` | `#31545A` | Borders and dividers | +| `--primary` | `#45B8BC` | Main action and brand colour | +| `--primary-hover` | `#2E999E` | Primary hover and active state | +| `--secondary` | `#354E69` | Secondary action | +| `--secondary-hover` | `#45627F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for fresh primary actions, progress and active navigation. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for navy-blue structure and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#5CA5A6` | `#72C0C1` | +| Accent 2 | `#6F83A1` | `#8296B5` | +| Accent 3 | `#C39A68` | `#D0AD7C` | +| Success | `#63886F` | `#8EB39A` | +| Danger | `#A86062` | `#D48E90` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F4FAFA; + --surface: #FFFFFF; + --surface-alt: #EBF6F6; + --text: #20363A; + --muted: #62777B; + --border: #C4DADB; + --primary: #238C91; + --secondary: #DDE5EE; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0A181B; + --surface-alt: #10262A; + --text: #EDF7F7; + --muted: #B3C6C7; + --border: #31545A; + --primary: #45B8BC; + --secondary: #354E69; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html new file mode 100644 index 0000000..9c23e1c --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html @@ -0,0 +1,829 @@ + + + + + + + Warm Brown — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Cocoa +
+ +
+

Warm Brown

+

Grounded focus. Warm clarity.

+

A grounded brown system with clay warmth and muted blue-grey balance.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md new file mode 100644 index 0000000..1fea16a --- /dev/null +++ b/adhd-friendly-colour-variants-new/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md @@ -0,0 +1,321 @@ +# Warm Brown UI Style Guide + +A grounded brown system with clay warmth and muted blue-grey balance. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF7F3` | Main page background | +| `--page-accent` | `#EFE6DD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F6EFE8` | Inputs and secondary regions | +| `--surface-strong` | `#E8D9CC` | Selected and elevated elements | +| `--text` | `#392E28` | Main text | +| `--muted` | `#756961` | Secondary text | +| `--border` | `#DCCFC5` | Borders and dividers | +| `--primary` | `#8B5E3C` | Main action and brand colour | +| `--primary-hover` | `#6D452A` | Primary hover and active state | +| `--secondary` | `#DDE5E7` | Secondary action | +| `--secondary-hover` | `#CCD9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0A0705` | Background depth | +| `--surface` | `#17110D` | Cards and dialogs | +| `--surface-alt` | `#251A14` | Inputs and secondary regions | +| `--surface-strong` | `#39291F` | Selected and elevated elements | +| `--text` | `#F7F1EC` | Main text | +| `--muted` | `#C7BBB2` | Secondary text | +| `--border` | `#59483D` | Borders and dividers | +| `--primary` | `#B77A4D` | Main action and brand colour | +| `--primary-hover` | `#975F38` | Primary hover and active state | +| `--secondary` | `#3D555B` | Secondary action | +| `--secondary-hover` | `#4E6971` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions, selected states and brand marks. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue-grey balance and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A47758` | `#C08E67` | +| Accent 2 | `#6E8A8F` | `#7E9EA3` | +| Accent 3 | `#C49E69` | `#D2AF78` | +| Success | `#6D896F` | `#92AF96` | +| Danger | `#A65F4F` | `#D58D7C` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF7F3; + --surface: #FFFFFF; + --surface-alt: #F6EFE8; + --text: #392E28; + --muted: #756961; + --border: #DCCFC5; + --primary: #8B5E3C; + --secondary: #DDE5E7; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #17110D; + --surface-alt: #251A14; + --text: #F7F1EC; + --muted: #C7BBB2; + --border: #59483D; + --primary: #B77A4D; + --secondary: #3D555B; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants-with-font-cards.zip b/adhd-friendly-colour-variants-with-font-cards.zip new file mode 100644 index 0000000..5c1e905 Binary files /dev/null and b/adhd-friendly-colour-variants-with-font-cards.zip differ diff --git a/adhd-friendly-colour-variants.zip b/adhd-friendly-colour-variants.zip new file mode 100644 index 0000000..1b3890b Binary files /dev/null and b/adhd-friendly-colour-variants.zip differ diff --git a/adhd-friendly-colour-variants/README.md b/adhd-friendly-colour-variants/README.md new file mode 100644 index 0000000..10d91a8 --- /dev/null +++ b/adhd-friendly-colour-variants/README.md @@ -0,0 +1,39 @@ +# ADHD-Friendly Colour Variant Library + +This collection contains 17 complete UI colour systems: + +1. Simple Pink +2. Calm Denim Blue +3. Sage Green +4. Coral Red +5. Mustard Yellow +6. Turquoise Blue +7. Burgundy & Dusty Rose +8. Graphite + Pink Accent +9. Warm Brown +10. Black & White +11. Ivory & Ink +12. Seafoam +13. Dusty Lilac +14. Mist Blue +15. Olive & Oat +16. Sunset Apricot +17. Orchid Pop + + +Each folder contains: + +- one realistic responsive login page in HTML +- one matching UX/UI style guide in Markdown +- complete light and dark colour tokens +- Atkinson Hyperlegible and Lexend typography +- form validation, theme switching and responsive behaviour + +Open `index.html` for the visual overview. + +All login demos also include: + +- a reusable typography sample card +- a heading and subheading in Lexend +- a Lorem Ipsum paragraph in Atkinson Hyperlegible +- Google Fonts CSS API integration diff --git a/adhd-friendly-colour-variants/black-white/black-white-login.html b/adhd-friendly-colour-variants/black-white/black-white-login.html new file mode 100644 index 0000000..19882c1 --- /dev/null +++ b/adhd-friendly-colour-variants/black-white/black-white-login.html @@ -0,0 +1,829 @@ + + + + + + + Black & White — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Mono +
+ +
+

Black & White

+

Nothing extra. Everything clear.

+

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/black-white/black-white-style-guide.md b/adhd-friendly-colour-variants/black-white/black-white-style-guide.md new file mode 100644 index 0000000..5e4488f --- /dev/null +++ b/adhd-friendly-colour-variants/black-white/black-white-style-guide.md @@ -0,0 +1,300 @@ +# Black & White UI Style Guide + +A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable. + +Pure black and white can feel harsh. Layered grey surfaces and off-white content areas preserve the monochrome look while lowering visual strain. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECECEC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F1F1` | Inputs and secondary regions | +| `--surface-strong` | `#DEDEDE` | Selected and elevated elements | +| `--text` | `#111111` | Main text | +| `--muted` | `#626262` | Secondary text | +| `--border` | `#CDCDCD` | Borders and dividers | +| `--primary` | `#111111` | Main action and brand colour | +| `--primary-hover` | `#000000` | Primary hover and active state | +| `--secondary` | `#E1E1E1` | Secondary action | +| `--secondary-hover` | `#D2D2D2` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#000000` | Main dark background | +| `--page-accent` | `#050505` | Background depth | +| `--surface` | `#101010` | Cards and dialogs | +| `--surface-alt` | `#1A1A1A` | Inputs and secondary regions | +| `--surface-strong` | `#2B2B2B` | Selected and elevated elements | +| `--text` | `#FFFFFF` | Main text | +| `--muted` | `#BEBEBE` | Secondary text | +| `--border` | `#444444` | Borders and dividers | +| `--primary` | `#FFFFFF` | Main action and brand colour | +| `--primary-hover` | `#E8E8E8` | Primary hover and active state | +| `--secondary` | `#353535` | Secondary action | +| `--secondary-hover` | `#494949` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strongest action, active navigation and unmistakable selection. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls and optional actions without introducing colour. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#777777` | `#D0D0D0` | +| Accent 2 | `#A0A0A0` | `#9A9A9A` | +| Accent 3 | `#C5C5C5` | `#6E6E6E` | +| Success | `#666666` | `#B8B8B8` | +| Danger | `#4A4A4A` | `#D8D8D8` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F1F1; + --text: #111111; + --muted: #626262; + --border: #CDCDCD; + --primary: #111111; + --secondary: #E1E1E1; +} + +html[data-theme="dark"] { + --page: #000000; + --surface: #101010; + --surface-alt: #1A1A1A; + --text: #FFFFFF; + --muted: #BEBEBE; + --border: #444444; + --primary: #FFFFFF; + --secondary: #353535; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html b/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html new file mode 100644 index 0000000..c9c1424 --- /dev/null +++ b/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html @@ -0,0 +1,738 @@ + + + + + + + Burgundy & Dusty Rose — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Merlot +
+ +
+

Burgundy & Dusty Rose

+

Quiet confidence. Rich clarity.

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md b/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md new file mode 100644 index 0000000..4e47e8c --- /dev/null +++ b/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md @@ -0,0 +1,286 @@ +# Burgundy & Dusty Rose UI Style Guide + +A mature burgundy system softened by dusty rose and warm neutral surfaces. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF7F8` | Main page background | +| `--page-accent` | `#F2E6E9` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEF1` | Inputs and secondary regions | +| `--surface-strong` | `#EBDADF` | Selected and elevated elements | +| `--text` | `#38272D` | Main text | +| `--muted` | `#75656B` | Secondary text | +| `--border` | `#DFC9D0` | Borders and dividers | +| `--primary` | `#7E374D` | Main action and brand colour | +| `--primary-hover` | `#61263A` | Primary hover and active state | +| `--secondary` | `#E7D8DE` | Secondary action | +| `--secondary-hover` | `#D9C5CD` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050203` | Main dark background | +| `--page-accent` | `#0C0608` | Background depth | +| `--surface` | `#170D11` | Cards and dialogs | +| `--surface-alt` | `#24151B` | Inputs and secondary regions | +| `--surface-strong` | `#38202A` | Selected and elevated elements | +| `--text` | `#F8EFF2` | Main text | +| `--muted` | `#CABAC0` | Secondary text | +| `--border` | `#583B46` | Borders and dividers | +| `--primary` | `#B85F7A` | Main action and brand colour | +| `--primary-hover` | `#99445F` | Primary hover and active state | +| `--secondary` | `#624754` | Secondary action | +| `--secondary-hover` | `#765867` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for luxurious primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for dusty rose structure, optional actions and calm support. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B07D8D` | `#C78DA0` | +| Accent 2 | `#718B92` | `#7D9BA1` | +| Accent 3 | `#C0A06F` | `#D0B17B` | +| Success | `#698873` | `#90B098` | +| Danger | `#A64E5D` | `#DA8795` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF7F8; + --surface: #FFFFFF; + --surface-alt: #F8EEF1; + --text: #38272D; + --muted: #75656B; + --border: #DFC9D0; + --primary: #7E374D; + --secondary: #E7D8DE; +} + +html[data-theme="dark"] { + --page: #050203; + --surface: #170D11; + --surface-alt: #24151B; + --text: #F8EFF2; + --muted: #CABAC0; + --border: #583B46; + --primary: #B85F7A; + --secondary: #624754; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html b/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html new file mode 100644 index 0000000..76c1ff3 --- /dev/null +++ b/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html @@ -0,0 +1,738 @@ + + + + + + + Calm Denim Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Harbor +
+ +
+

Calm Denim Blue

+

Steady focus. Clear progress.

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md b/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md new file mode 100644 index 0000000..6437001 --- /dev/null +++ b/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md @@ -0,0 +1,286 @@ +# Calm Denim Blue UI Style Guide + +A trustworthy denim-blue system for dashboards, administration and focused work. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F8FB` | Main page background | +| `--page-accent` | `#E8EEF6` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EEF3F8` | Inputs and secondary regions | +| `--surface-strong` | `#DCE6F0` | Selected and elevated elements | +| `--text` | `#243142` | Main text | +| `--muted` | `#687486` | Secondary text | +| `--border` | `#CBD6E2` | Borders and dividers | +| `--primary` | `#4D6F98` | Main action and brand colour | +| `--primary-hover` | `#385777` | Primary hover and active state | +| `--secondary` | `#E2E8EF` | Secondary action | +| `--secondary-hover` | `#D2DCE6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020509` | Main dark background | +| `--page-accent` | `#07101A` | Background depth | +| `--surface` | `#0D1824` | Cards and dialogs | +| `--surface-alt` | `#142333` | Inputs and secondary regions | +| `--surface-strong` | `#21384E` | Selected and elevated elements | +| `--text` | `#F1F5FA` | Main text | +| `--muted` | `#B9C4D0` | Secondary text | +| `--border` | `#344D66` | Borders and dividers | +| `--primary` | `#7598C2` | Main action and brand colour | +| `--primary-hover` | `#5F83AF` | Primary hover and active state | +| `--secondary` | `#405A73` | Secondary action | +| `--secondary-hover` | `#526F8A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for main actions, active navigation and trustworthy emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls, toolbars and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7F8FB5` | `#9A9FC6` | +| Accent 2 | `#6F9697` | `#81A7A7` | +| Accent 3 | `#C6A66E` | `#D0B17B` | +| Success | `#668A73` | `#90B29A` | +| Danger | `#A8646E` | `#D3929A` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F8FB; + --surface: #FFFFFF; + --surface-alt: #EEF3F8; + --text: #243142; + --muted: #687486; + --border: #CBD6E2; + --primary: #4D6F98; + --secondary: #E2E8EF; +} + +html[data-theme="dark"] { + --page: #020509; + --surface: #0D1824; + --surface-alt: #142333; + --text: #F1F5FA; + --muted: #B9C4D0; + --border: #344D66; + --primary: #7598C2; + --secondary: #405A73; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/coral-red/coral-red-login.html b/adhd-friendly-colour-variants/coral-red/coral-red-login.html new file mode 100644 index 0000000..8cae2c5 --- /dev/null +++ b/adhd-friendly-colour-variants/coral-red/coral-red-login.html @@ -0,0 +1,738 @@ + + + + + + + Coral Red — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Common +
+ +
+

Coral Red

+

Human warmth. Clear action.

+

A social, warm coral system balanced by slate blue so it stays calm and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md b/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md new file mode 100644 index 0000000..d985a46 --- /dev/null +++ b/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md @@ -0,0 +1,286 @@ +# Coral Red UI Style Guide + +A social, warm coral system balanced by slate blue so it stays calm and readable. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8F6` | Main page background | +| `--page-accent` | `#F7E8E3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FBEFEB` | Inputs and secondary regions | +| `--surface-strong` | `#F1DDD6` | Selected and elevated elements | +| `--text` | `#3B2926` | Main text | +| `--muted` | `#776761` | Secondary text | +| `--border` | `#E2CEC7` | Borders and dividers | +| `--primary` | `#C86457` | Main action and brand colour | +| `--primary-hover` | `#A84D42` | Primary hover and active state | +| `--secondary` | `#DDE6EA` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050202` | Main dark background | +| `--page-accent` | `#0D0807` | Background depth | +| `--surface` | `#18100E` | Cards and dialogs | +| `--surface-alt` | `#261917` | Inputs and secondary regions | +| `--surface-strong` | `#392824` | Selected and elevated elements | +| `--text` | `#FAF1EF` | Main text | +| `--muted` | `#CABCB8` | Secondary text | +| `--border` | `#5A403B` | Borders and dividers | +| `--primary` | `#E58678` | Main action and brand colour | +| `--primary-hover` | `#CB6A5D` | Primary hover and active state | +| `--secondary` | `#3C5962` | Secondary action | +| `--secondary-hover` | `#4C6D78` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for human, confident primary actions and social emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate balance for supporting actions and structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B17C72` | `#C89A91` | +| Accent 2 | `#6C8D95` | `#7FA2AA` | +| Accent 3 | `#C4A06B` | `#D3B17B` | +| Success | `#66886E` | `#90B096` | +| Danger | `#9E4C48` | `#DF9189` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8F6; + --surface: #FFFFFF; + --surface-alt: #FBEFEB; + --text: #3B2926; + --muted: #776761; + --border: #E2CEC7; + --primary: #C86457; + --secondary: #DDE6EA; +} + +html[data-theme="dark"] { + --page: #050202; + --surface: #18100E; + --surface-alt: #261917; + --text: #FAF1EF; + --muted: #CABCB8; + --border: #5A403B; + --primary: #E58678; + --secondary: #3C5962; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html b/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html new file mode 100644 index 0000000..b011348 --- /dev/null +++ b/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html @@ -0,0 +1,738 @@ + + + + + + + Graphite + Pink Accent — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Signal +
+ +
+

Graphite + Pink Accent

+

Less noise. One clear signal.

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md b/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md new file mode 100644 index 0000000..4887ff0 --- /dev/null +++ b/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md @@ -0,0 +1,286 @@ +# Graphite + Pink Accent UI Style Guide + +An ultra-calm graphite system with one simple pink accent for primary actions. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECEEEF` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F2F3` | Inputs and secondary regions | +| `--surface-strong` | `#E1E4E6` | Selected and elevated elements | +| `--text` | `#292D30` | Main text | +| `--muted` | `#6C7378` | Secondary text | +| `--border` | `#D1D5D8` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E3E6E8` | Secondary action | +| `--secondary-hover` | `#D4D9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020303` | Main dark background | +| `--page-accent` | `#080A0B` | Background depth | +| `--surface` | `#121516` | Cards and dialogs | +| `--surface-alt` | `#1B2022` | Inputs and secondary regions | +| `--surface-strong` | `#2B3235` | Selected and elevated elements | +| `--text` | `#F3F5F5` | Main text | +| `--muted` | `#BAC0C2` | Secondary text | +| `--border` | `#424B4F` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#3A4347` | Secondary action | +| `--secondary-hover` | `#4C575C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strong accent for main actions and active states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for neutral graphite structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7D858A` | `#929A9E` | +| Accent 2 | `#8A9499` | `#7F979C` | +| Accent 3 | `#B79A70` | `#C8AA78` | +| Success | `#6B8872` | `#91AF98` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F2F3; + --text: #292D30; + --muted: #6C7378; + --border: #D1D5D8; + --primary: #D35F87; + --secondary: #E3E6E8; +} + +html[data-theme="dark"] { + --page: #020303; + --surface: #121516; + --surface-alt: #1B2022; + --text: #F3F5F5; + --muted: #BAC0C2; + --border: #424B4F; + --primary: #EE7DA4; + --secondary: #3A4347; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/index.html b/adhd-friendly-colour-variants/index.html new file mode 100644 index 0000000..00e4e03 --- /dev/null +++ b/adhd-friendly-colour-variants/index.html @@ -0,0 +1,219 @@ + + + + + + ADHD-Friendly Colour Variants + + + +
+

Colour system library

+

ADHD-Friendly UI Colour Variants

+

+ Every variant uses the same realistic login layout, Atkinson Hyperlegible for reading, + Lexend for interface text, complete light and dark modes, restrained accents, + visible focus states and reduced-motion support. +

+
+ + + +
+
+ + + + +
+

Calm Denim Blue

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+
+ Open login demo + Open style guide +
+
+ + + + + + + + + +
+
+ + + + +
+

Burgundy & Dusty Rose

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+
+ Open login demo + Open style guide +
+
+ +
+
+ + + + +
+

Graphite + Pink Accent

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+
+ Open login demo + Open style guide +
+
+ + + +
+
+ + diff --git a/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html b/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html new file mode 100644 index 0000000..2f20516 --- /dev/null +++ b/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html @@ -0,0 +1,738 @@ + + + + + + + Mustard Yellow — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Beacon +
+ +
+

Mustard Yellow

+

Bright thinking. Calm structure.

+

An editorial mustard system balanced by deep blue-grey for usable contrast.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md b/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md new file mode 100644 index 0000000..7446654 --- /dev/null +++ b/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md @@ -0,0 +1,286 @@ +# Mustard Yellow UI Style Guide + +An editorial mustard system balanced by deep blue-grey for usable contrast. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF9F3` | Main page background | +| `--page-accent` | `#F0E9D7` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F7F1E3` | Inputs and secondary regions | +| `--surface-strong` | `#EBDDCA` | Selected and elevated elements | +| `--text` | `#373128` | Main text | +| `--muted` | `#756E61` | Secondary text | +| `--border` | `#DDD2BE` | Borders and dividers | +| `--primary` | `#B58A2F` | Main action and brand colour | +| `--primary-hover` | `#916B1E` | Primary hover and active state | +| `--secondary` | `#DCE5E9` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020405` | Main dark background | +| `--page-accent` | `#080B0D` | Background depth | +| `--surface` | `#111719` | Cards and dialogs | +| `--surface-alt` | `#1B2427` | Inputs and secondary regions | +| `--surface-strong` | `#2C383C` | Selected and elevated elements | +| `--text` | `#F7F3E9` | Main text | +| `--muted` | `#C8C1B2` | Secondary text | +| `--border` | `#4A565A` | Borders and dividers | +| `--primary` | `#D5AA4D` | Main action and brand colour | +| `--primary-hover` | `#B88C35` | Primary hover and active state | +| `--secondary` | `#3B5965` | Secondary action | +| `--secondary-hover` | `#4C6D7A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for high-value actions, selected states and editorial highlights. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for deep blue-grey structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#C19D4E` | `#E0BC67` | +| Accent 2 | `#657F8C` | `#7C9AA7` | +| Accent 3 | `#A27B78` | `#C28B87` | +| Success | `#6D896B` | `#95B096` | +| Danger | `#A65F55` | `#D58E82` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF9F3; + --surface: #FFFFFF; + --surface-alt: #F7F1E3; + --text: #373128; + --muted: #756E61; + --border: #DDD2BE; + --primary: #B58A2F; + --secondary: #DCE5E9; +} + +html[data-theme="dark"] { + --page: #020405; + --surface: #111719; + --surface-alt: #1B2427; + --text: #F7F3E9; + --muted: #C8C1B2; + --border: #4A565A; + --primary: #D5AA4D; + --secondary: #3B5965; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/sage-green/sage-green-login.html b/adhd-friendly-colour-variants/sage-green/sage-green-login.html new file mode 100644 index 0000000..a4d8769 --- /dev/null +++ b/adhd-friendly-colour-variants/sage-green/sage-green-login.html @@ -0,0 +1,738 @@ + + + + + + + Sage Green — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Stillleaf +
+ +
+

Sage Green

+

Calm structure. Natural rhythm.

+

A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md b/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md new file mode 100644 index 0000000..87f42f2 --- /dev/null +++ b/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md @@ -0,0 +1,286 @@ +# Sage Green UI Style Guide + +A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F8F4` | Main page background | +| `--page-accent` | `#EAEDE4` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F0F3EB` | Inputs and secondary regions | +| `--surface-strong` | `#DFE5D8` | Selected and elevated elements | +| `--text` | `#2C352C` | Main text | +| `--muted` | `#6D786B` | Secondary text | +| `--border` | `#CED7C8` | Borders and dividers | +| `--primary` | `#71866C` | Main action and brand colour | +| `--primary-hover` | `#586D54` | Primary hover and active state | +| `--secondary` | `#DDE6E1` | Secondary action | +| `--secondary-hover` | `#CEDCD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020503` | Main dark background | +| `--page-accent` | `#08100A` | Background depth | +| `--surface` | `#101812` | Cards and dialogs | +| `--surface-alt` | `#19231B` | Inputs and secondary regions | +| `--surface-strong` | `#2A382D` | Selected and elevated elements | +| `--text` | `#F1F5EF` | Main text | +| `--muted` | `#BCC6B9` | Secondary text | +| `--border` | `#435246` | Borders and dividers | +| `--primary` | `#9BB094` | Main action and brand colour | +| `--primary-hover` | `#829A7C` | Primary hover and active state | +| `--secondary` | `#3F5B57` | Secondary action | +| `--secondary-hover` | `#53716C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm confirmation, primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool eucalyptus structure and supporting actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#8D9F8B` | `#A9B6A7` | +| Accent 2 | `#66888A` | `#7FA4A4` | +| Accent 3 | `#C2A36F` | `#CFB37F` | +| Success | `#64806A` | `#92B09A` | +| Danger | `#A9655D` | `#D38E83` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F8F4; + --surface: #FFFFFF; + --surface-alt: #F0F3EB; + --text: #2C352C; + --muted: #6D786B; + --border: #CED7C8; + --primary: #71866C; + --secondary: #DDE6E1; +} + +html[data-theme="dark"] { + --page: #020503; + --surface: #101812; + --surface-alt: #19231B; + --text: #F1F5EF; + --muted: #BCC6B9; + --border: #435246; + --primary: #9BB094; + --secondary: #3F5B57; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html b/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html new file mode 100644 index 0000000..b42966b --- /dev/null +++ b/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html @@ -0,0 +1,738 @@ + + + + + + + Simple Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Roseline +
+ +
+

Simple Pink

+

Clear space. Gentle focus.

+

A grown-up pink system with warm neutrals and a muted mauve secondary.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md b/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md new file mode 100644 index 0000000..6151623 --- /dev/null +++ b/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md @@ -0,0 +1,286 @@ +# Simple Pink UI Style Guide + +A grown-up pink system with warm neutrals and a muted mauve secondary. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8FA` | Main page background | +| `--page-accent` | `#F7E8EE` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FCEEF3` | Inputs and secondary regions | +| `--surface-strong` | `#F2DCE5` | Selected and elevated elements | +| `--text` | `#38272F` | Main text | +| `--muted` | `#74656C` | Secondary text | +| `--border` | `#E1CBD4` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E9DFE4` | Secondary action | +| `--secondary-hover` | `#DCCFD6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050204` | Main dark background | +| `--page-accent` | `#0C0709` | Background depth | +| `--surface` | `#160D12` | Cards and dialogs | +| `--surface-alt` | `#24151C` | Inputs and secondary regions | +| `--surface-strong` | `#35212B` | Selected and elevated elements | +| `--text` | `#F8EFF3` | Main text | +| `--muted` | `#CBBCC3` | Secondary text | +| `--border` | `#513B45` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#5A3F4C` | Secondary action | +| `--secondary-hover` | `#715061` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for friendly primary actions and brand emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for quiet optional actions and mauve structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A88FA0` | `#B29BAA` | +| Accent 2 | `#77949A` | `#7E9DA1` | +| Accent 3 | `#C8A575` | `#D0B27F` | +| Success | `#6A8C73` | `#92B09A` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8FA; + --surface: #FFFFFF; + --surface-alt: #FCEEF3; + --text: #38272F; + --muted: #74656C; + --border: #E1CBD4; + --primary: #D35F87; + --secondary: #E9DFE4; +} + +html[data-theme="dark"] { + --page: #050204; + --surface: #160D12; + --surface-alt: #24151C; + --text: #F8EFF3; + --muted: #CBBCC3; + --border: #513B45; + --primary: #EE7DA4; + --secondary: #5A3F4C; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html b/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html new file mode 100644 index 0000000..2c53db8 --- /dev/null +++ b/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html @@ -0,0 +1,738 @@ + + + + + + + Turquoise Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Current +
+ +
+

Turquoise Blue

+

Fresh focus. Clear movement.

+

A fresh turquoise system anchored by deep navy and restrained warm accents.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md b/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md new file mode 100644 index 0000000..3ae8fc3 --- /dev/null +++ b/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md @@ -0,0 +1,286 @@ +# Turquoise Blue UI Style Guide + +A fresh turquoise system anchored by deep navy and restrained warm accents. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F4FAFA` | Main page background | +| `--page-accent` | `#E2F0F1` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F6` | Inputs and secondary regions | +| `--surface-strong` | `#D6E9E9` | Selected and elevated elements | +| `--text` | `#20363A` | Main text | +| `--muted` | `#62777B` | Secondary text | +| `--border` | `#C4DADB` | Borders and dividers | +| `--primary` | `#238C91` | Main action and brand colour | +| `--primary-hover` | `#176D72` | Primary hover and active state | +| `--secondary` | `#DDE5EE` | Secondary action | +| `--secondary-hover` | `#CCD8E5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#041014` | Background depth | +| `--surface` | `#0A181B` | Cards and dialogs | +| `--surface-alt` | `#10262A` | Inputs and secondary regions | +| `--surface-strong` | `#1A3B40` | Selected and elevated elements | +| `--text` | `#EDF7F7` | Main text | +| `--muted` | `#B3C6C7` | Secondary text | +| `--border` | `#31545A` | Borders and dividers | +| `--primary` | `#45B8BC` | Main action and brand colour | +| `--primary-hover` | `#2E999E` | Primary hover and active state | +| `--secondary` | `#354E69` | Secondary action | +| `--secondary-hover` | `#45627F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for fresh primary actions, progress and active navigation. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for navy-blue structure and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#5CA5A6` | `#72C0C1` | +| Accent 2 | `#6F83A1` | `#8296B5` | +| Accent 3 | `#C39A68` | `#D0AD7C` | +| Success | `#63886F` | `#8EB39A` | +| Danger | `#A86062` | `#D48E90` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F4FAFA; + --surface: #FFFFFF; + --surface-alt: #EBF6F6; + --text: #20363A; + --muted: #62777B; + --border: #C4DADB; + --primary: #238C91; + --secondary: #DDE5EE; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0A181B; + --surface-alt: #10262A; + --text: #EDF7F7; + --muted: #B3C6C7; + --border: #31545A; + --primary: #45B8BC; + --secondary: #354E69; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html b/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html new file mode 100644 index 0000000..fbe2e84 --- /dev/null +++ b/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html @@ -0,0 +1,738 @@ + + + + + + + Warm Brown — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Cocoa +
+ +
+

Warm Brown

+

Grounded focus. Warm clarity.

+

A grounded brown system with clay warmth and muted blue-grey balance.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md b/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md new file mode 100644 index 0000000..0aacdb9 --- /dev/null +++ b/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md @@ -0,0 +1,286 @@ +# Warm Brown UI Style Guide + +A grounded brown system with clay warmth and muted blue-grey balance. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF7F3` | Main page background | +| `--page-accent` | `#EFE6DD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F6EFE8` | Inputs and secondary regions | +| `--surface-strong` | `#E8D9CC` | Selected and elevated elements | +| `--text` | `#392E28` | Main text | +| `--muted` | `#756961` | Secondary text | +| `--border` | `#DCCFC5` | Borders and dividers | +| `--primary` | `#8B5E3C` | Main action and brand colour | +| `--primary-hover` | `#6D452A` | Primary hover and active state | +| `--secondary` | `#DDE5E7` | Secondary action | +| `--secondary-hover` | `#CCD9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0A0705` | Background depth | +| `--surface` | `#17110D` | Cards and dialogs | +| `--surface-alt` | `#251A14` | Inputs and secondary regions | +| `--surface-strong` | `#39291F` | Selected and elevated elements | +| `--text` | `#F7F1EC` | Main text | +| `--muted` | `#C7BBB2` | Secondary text | +| `--border` | `#59483D` | Borders and dividers | +| `--primary` | `#B77A4D` | Main action and brand colour | +| `--primary-hover` | `#975F38` | Primary hover and active state | +| `--secondary` | `#3D555B` | Secondary action | +| `--secondary-hover` | `#4E6971` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions, selected states and brand marks. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue-grey balance and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A47758` | `#C08E67` | +| Accent 2 | `#6E8A8F` | `#7E9EA3` | +| Accent 3 | `#C49E69` | `#D2AF78` | +| Success | `#6D896F` | `#92AF96` | +| Danger | `#A65F4F` | `#D58D7C` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF7F3; + --surface: #FFFFFF; + --surface-alt: #F6EFE8; + --text: #392E28; + --muted: #756961; + --border: #DCCFC5; + --primary: #8B5E3C; + --secondary: #DDE5E7; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #17110D; + --surface-alt: #251A14; + --text: #F7F1EC; + --muted: #C7BBB2; + --border: #59483D; + --primary: #B77A4D; + --secondary: #3D555B; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. diff --git a/adhd-friendly-dashboard-variants-v2 (1).zip b/adhd-friendly-dashboard-variants-v2 (1).zip new file mode 100644 index 0000000..d986aff Binary files /dev/null and b/adhd-friendly-dashboard-variants-v2 (1).zip differ diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-dashboard.html new file mode 100644 index 0000000..395d8b1 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Black White — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Black White system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Black White palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-login.html new file mode 100644 index 0000000..19882c1 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-login.html @@ -0,0 +1,829 @@ + + + + + + + Black & White — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Mono +
+ +
+

Black & White

+

Nothing extra. Everything clear.

+

A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-style-guide.md new file mode 100644 index 0000000..5e4488f --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/black-white/black-white-style-guide.md @@ -0,0 +1,300 @@ +# Black & White UI Style Guide + +A strict monochrome system with layered greys to reduce harshness while keeping the hierarchy unmistakable. + +Pure black and white can feel harsh. Layered grey surfaces and off-white content areas preserve the monochrome look while lowering visual strain. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECECEC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F1F1` | Inputs and secondary regions | +| `--surface-strong` | `#DEDEDE` | Selected and elevated elements | +| `--text` | `#111111` | Main text | +| `--muted` | `#626262` | Secondary text | +| `--border` | `#CDCDCD` | Borders and dividers | +| `--primary` | `#111111` | Main action and brand colour | +| `--primary-hover` | `#000000` | Primary hover and active state | +| `--secondary` | `#E1E1E1` | Secondary action | +| `--secondary-hover` | `#D2D2D2` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#000000` | Main dark background | +| `--page-accent` | `#050505` | Background depth | +| `--surface` | `#101010` | Cards and dialogs | +| `--surface-alt` | `#1A1A1A` | Inputs and secondary regions | +| `--surface-strong` | `#2B2B2B` | Selected and elevated elements | +| `--text` | `#FFFFFF` | Main text | +| `--muted` | `#BEBEBE` | Secondary text | +| `--border` | `#444444` | Borders and dividers | +| `--primary` | `#FFFFFF` | Main action and brand colour | +| `--primary-hover` | `#E8E8E8` | Primary hover and active state | +| `--secondary` | `#353535` | Secondary action | +| `--secondary-hover` | `#494949` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strongest action, active navigation and unmistakable selection. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls and optional actions without introducing colour. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#777777` | `#D0D0D0` | +| Accent 2 | `#A0A0A0` | `#9A9A9A` | +| Accent 3 | `#C5C5C5` | `#6E6E6E` | +| Success | `#666666` | `#B8B8B8` | +| Danger | `#4A4A4A` | `#D8D8D8` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F1F1; + --text: #111111; + --muted: #626262; + --border: #CDCDCD; + --primary: #111111; + --secondary: #E1E1E1; +} + +html[data-theme="dark"] { + --page: #000000; + --surface: #101010; + --surface-alt: #1A1A1A; + --text: #FFFFFF; + --muted: #BEBEBE; + --border: #444444; + --primary: #FFFFFF; + --secondary: #353535; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html new file mode 100644 index 0000000..97b3edb --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Burgundy Rose — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Burgundy Rose system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Burgundy Rose palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html new file mode 100644 index 0000000..3c52ab1 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-login.html @@ -0,0 +1,829 @@ + + + + + + + Burgundy & Dusty Rose — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Merlot +
+ +
+

Burgundy & Dusty Rose

+

Quiet confidence. Rich clarity.

+

A mature burgundy system softened by dusty rose and warm neutral surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md new file mode 100644 index 0000000..d8e06ed --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/burgundy-rose/burgundy-rose-style-guide.md @@ -0,0 +1,321 @@ +# Burgundy & Dusty Rose UI Style Guide + +A mature burgundy system softened by dusty rose and warm neutral surfaces. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF7F8` | Main page background | +| `--page-accent` | `#F2E6E9` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEF1` | Inputs and secondary regions | +| `--surface-strong` | `#EBDADF` | Selected and elevated elements | +| `--text` | `#38272D` | Main text | +| `--muted` | `#75656B` | Secondary text | +| `--border` | `#DFC9D0` | Borders and dividers | +| `--primary` | `#7E374D` | Main action and brand colour | +| `--primary-hover` | `#61263A` | Primary hover and active state | +| `--secondary` | `#E7D8DE` | Secondary action | +| `--secondary-hover` | `#D9C5CD` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050203` | Main dark background | +| `--page-accent` | `#0C0608` | Background depth | +| `--surface` | `#170D11` | Cards and dialogs | +| `--surface-alt` | `#24151B` | Inputs and secondary regions | +| `--surface-strong` | `#38202A` | Selected and elevated elements | +| `--text` | `#F8EFF2` | Main text | +| `--muted` | `#CABAC0` | Secondary text | +| `--border` | `#583B46` | Borders and dividers | +| `--primary` | `#B85F7A` | Main action and brand colour | +| `--primary-hover` | `#99445F` | Primary hover and active state | +| `--secondary` | `#624754` | Secondary action | +| `--secondary-hover` | `#765867` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for luxurious primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for dusty rose structure, optional actions and calm support. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B07D8D` | `#C78DA0` | +| Accent 2 | `#718B92` | `#7D9BA1` | +| Accent 3 | `#C0A06F` | `#D0B17B` | +| Success | `#698873` | `#90B098` | +| Danger | `#A64E5D` | `#DA8795` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF7F8; + --surface: #FFFFFF; + --surface-alt: #F8EEF1; + --text: #38272D; + --muted: #75656B; + --border: #DFC9D0; + --primary: #7E374D; + --secondary: #E7D8DE; +} + +html[data-theme="dark"] { + --page: #050203; + --surface: #170D11; + --surface-alt: #24151B; + --text: #F8EFF2; + --muted: #CABAC0; + --border: #583B46; + --primary: #B85F7A; + --secondary: #624754; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html new file mode 100644 index 0000000..ebfe3ea --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Calm Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Calm Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Calm Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html new file mode 100644 index 0000000..8b0c7e9 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Calm Denim Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Harbor +
+ +
+

Calm Denim Blue

+

Steady focus. Clear progress.

+

A trustworthy denim-blue system for dashboards, administration and focused work.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md new file mode 100644 index 0000000..8bcda94 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/calm-blue/calm-blue-style-guide.md @@ -0,0 +1,321 @@ +# Calm Denim Blue UI Style Guide + +A trustworthy denim-blue system for dashboards, administration and focused work. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F8FB` | Main page background | +| `--page-accent` | `#E8EEF6` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EEF3F8` | Inputs and secondary regions | +| `--surface-strong` | `#DCE6F0` | Selected and elevated elements | +| `--text` | `#243142` | Main text | +| `--muted` | `#687486` | Secondary text | +| `--border` | `#CBD6E2` | Borders and dividers | +| `--primary` | `#4D6F98` | Main action and brand colour | +| `--primary-hover` | `#385777` | Primary hover and active state | +| `--secondary` | `#E2E8EF` | Secondary action | +| `--secondary-hover` | `#D2DCE6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020509` | Main dark background | +| `--page-accent` | `#07101A` | Background depth | +| `--surface` | `#0D1824` | Cards and dialogs | +| `--surface-alt` | `#142333` | Inputs and secondary regions | +| `--surface-strong` | `#21384E` | Selected and elevated elements | +| `--text` | `#F1F5FA` | Main text | +| `--muted` | `#B9C4D0` | Secondary text | +| `--border` | `#344D66` | Borders and dividers | +| `--primary` | `#7598C2` | Main action and brand colour | +| `--primary-hover` | `#5F83AF` | Primary hover and active state | +| `--secondary` | `#405A73` | Secondary action | +| `--secondary-hover` | `#526F8A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for main actions, active navigation and trustworthy emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for supporting controls, toolbars and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7F8FB5` | `#9A9FC6` | +| Accent 2 | `#6F9697` | `#81A7A7` | +| Accent 3 | `#C6A66E` | `#D0B17B` | +| Success | `#668A73` | `#90B29A` | +| Danger | `#A8646E` | `#D3929A` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F8FB; + --surface: #FFFFFF; + --surface-alt: #EEF3F8; + --text: #243142; + --muted: #687486; + --border: #CBD6E2; + --primary: #4D6F98; + --secondary: #E2E8EF; +} + +html[data-theme="dark"] { + --page: #020509; + --surface: #0D1824; + --surface-alt: #142333; + --text: #F1F5FA; + --muted: #B9C4D0; + --border: #344D66; + --primary: #7598C2; + --secondary: #405A73; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html new file mode 100644 index 0000000..929e9a8 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Coral Red — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Coral Red system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Coral Red palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-login.html new file mode 100644 index 0000000..24f8765 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-login.html @@ -0,0 +1,829 @@ + + + + + + + Coral Red — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Common +
+ +
+

Coral Red

+

Human warmth. Clear action.

+

A social, warm coral system balanced by slate blue so it stays calm and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md new file mode 100644 index 0000000..f6489c0 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/coral-red/coral-red-style-guide.md @@ -0,0 +1,321 @@ +# Coral Red UI Style Guide + +A social, warm coral system balanced by slate blue so it stays calm and readable. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8F6` | Main page background | +| `--page-accent` | `#F7E8E3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FBEFEB` | Inputs and secondary regions | +| `--surface-strong` | `#F1DDD6` | Selected and elevated elements | +| `--text` | `#3B2926` | Main text | +| `--muted` | `#776761` | Secondary text | +| `--border` | `#E2CEC7` | Borders and dividers | +| `--primary` | `#C86457` | Main action and brand colour | +| `--primary-hover` | `#A84D42` | Primary hover and active state | +| `--secondary` | `#DDE6EA` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050202` | Main dark background | +| `--page-accent` | `#0D0807` | Background depth | +| `--surface` | `#18100E` | Cards and dialogs | +| `--surface-alt` | `#261917` | Inputs and secondary regions | +| `--surface-strong` | `#392824` | Selected and elevated elements | +| `--text` | `#FAF1EF` | Main text | +| `--muted` | `#CABCB8` | Secondary text | +| `--border` | `#5A403B` | Borders and dividers | +| `--primary` | `#E58678` | Main action and brand colour | +| `--primary-hover` | `#CB6A5D` | Primary hover and active state | +| `--secondary` | `#3C5962` | Secondary action | +| `--secondary-hover` | `#4C6D78` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for human, confident primary actions and social emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate balance for supporting actions and structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#B17C72` | `#C89A91` | +| Accent 2 | `#6C8D95` | `#7FA2AA` | +| Accent 3 | `#C4A06B` | `#D3B17B` | +| Success | `#66886E` | `#90B096` | +| Danger | `#9E4C48` | `#DF9189` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8F6; + --surface: #FFFFFF; + --surface-alt: #FBEFEB; + --text: #3B2926; + --muted: #776761; + --border: #E2CEC7; + --primary: #C86457; + --secondary: #DDE6EA; +} + +html[data-theme="dark"] { + --page: #050202; + --surface: #18100E; + --surface-alt: #261917; + --text: #FAF1EF; + --muted: #CABCB8; + --border: #5A403B; + --primary: #E58678; + --secondary: #3C5962; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html new file mode 100644 index 0000000..65ace72 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Dusty Lilac — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Dusty Lilac system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Dusty Lilac palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html new file mode 100644 index 0000000..85993ff --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-login.html @@ -0,0 +1,829 @@ + + + + + + + Dusty Lilac — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Hush +
+ +
+

Dusty Lilac

+

Gentle structure. Clear thought.

+

A quiet lilac system with slate support, separated from the brighter purple and pink families.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md new file mode 100644 index 0000000..dbea156 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/dusty-lilac/dusty-lilac-style-guide.md @@ -0,0 +1,300 @@ +# Dusty Lilac UI Style Guide + +A quiet lilac system with slate support, separated from the brighter purple and pink families. + +Dusty Lilac is deliberately muted. Avoid bright violet additions, which would undermine its calm character. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7FB` | Main page background | +| `--page-accent` | `#EEEAF3` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F3EFF7` | Inputs and secondary regions | +| `--surface-strong` | `#E4DDEB` | Selected and elevated elements | +| `--text` | `#302B38` | Main text | +| `--muted` | `#706A79` | Secondary text | +| `--border` | `#D6CFDE` | Borders and dividers | +| `--primary` | `#88769A` | Main action and brand colour | +| `--primary-hover` | `#6D5B80` | Primary hover and active state | +| `--secondary` | `#DEE6E9` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030205` | Main dark background | +| `--page-accent` | `#0A0710` | Background depth | +| `--surface` | `#141019` | Cards and dialogs | +| `--surface-alt` | `#201827` | Inputs and secondary regions | +| `--surface-strong` | `#32263B` | Selected and elevated elements | +| `--text` | `#F6F1F8` | Main text | +| `--muted` | `#C5BBCB` | Secondary text | +| `--border` | `#4C4056` | Borders and dividers | +| `--primary` | `#B09BC3` | Main action and brand colour | +| `--primary-hover` | `#947DAA` | Primary hover and active state | +| `--secondary` | `#40575E` | Secondary action | +| `--secondary-hover` | `#526D75` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for gentle primary actions, selected states and quiet brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for slate structure, secondary actions and informational controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A594B6` | `#C1AED1` | +| Accent 2 | `#718F96` | `#82A1A8` | +| Accent 3 | `#C2A475` | `#D0B27F` | +| Success | `#6C8973` | `#94B09A` | +| Danger | `#A76470` | `#D4939D` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7FB; + --surface: #FFFFFF; + --surface-alt: #F3EFF7; + --text: #302B38; + --muted: #706A79; + --border: #D6CFDE; + --primary: #88769A; + --secondary: #DEE6E9; +} + +html[data-theme="dark"] { + --page: #030205; + --surface: #141019; + --surface-alt: #201827; + --text: #F6F1F8; + --muted: #C5BBCB; + --border: #4C4056; + --primary: #B09BC3; + --secondary: #40575E; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html new file mode 100644 index 0000000..c42277f --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Graphite Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Graphite Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Graphite Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html new file mode 100644 index 0000000..d9eece3 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Graphite + Pink Accent — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Signal +
+ +
+

Graphite + Pink Accent

+

Less noise. One clear signal.

+

An ultra-calm graphite system with one simple pink accent for primary actions.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md new file mode 100644 index 0000000..48f234a --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/graphite-pink/graphite-pink-style-guide.md @@ -0,0 +1,321 @@ +# Graphite + Pink Accent UI Style Guide + +An ultra-calm graphite system with one simple pink accent for primary actions. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F7F7` | Main page background | +| `--page-accent` | `#ECEEEF` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F1F2F3` | Inputs and secondary regions | +| `--surface-strong` | `#E1E4E6` | Selected and elevated elements | +| `--text` | `#292D30` | Main text | +| `--muted` | `#6C7378` | Secondary text | +| `--border` | `#D1D5D8` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E3E6E8` | Secondary action | +| `--secondary-hover` | `#D4D9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020303` | Main dark background | +| `--page-accent` | `#080A0B` | Background depth | +| `--surface` | `#121516` | Cards and dialogs | +| `--surface-alt` | `#1B2022` | Inputs and secondary regions | +| `--surface-strong` | `#2B3235` | Selected and elevated elements | +| `--text` | `#F3F5F5` | Main text | +| `--muted` | `#BAC0C2` | Secondary text | +| `--border` | `#424B4F` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#3A4347` | Secondary action | +| `--secondary-hover` | `#4C575C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for the single strong accent for main actions and active states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for neutral graphite structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#7D858A` | `#929A9E` | +| Accent 2 | `#8A9499` | `#7F979C` | +| Accent 3 | `#B79A70` | `#C8AA78` | +| Success | `#6B8872` | `#91AF98` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F7F7; + --surface: #FFFFFF; + --surface-alt: #F1F2F3; + --text: #292D30; + --muted: #6C7378; + --border: #D1D5D8; + --primary: #D35F87; + --secondary: #E3E6E8; +} + +html[data-theme="dark"] { + --page: #020303; + --surface: #121516; + --surface-alt: #1B2022; + --text: #F3F5F5; + --muted: #BAC0C2; + --border: #424B4F; + --primary: #EE7DA4; + --secondary: #3A4347; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html new file mode 100644 index 0000000..4e66506 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory Ink Lavender — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory Ink Lavender system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory Ink Lavender palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html new file mode 100644 index 0000000..0fd2f33 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-login.html @@ -0,0 +1,840 @@ + + + + + + + Ivory & Ink + Lavender — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper Lavender +
+ +
+

Ivory & Ink + Lavender

+

Soft calm. Clear focus.

+

+ This version keeps the warm Ivory & Ink foundation but extends it + with a soft lavender for primary actions, emphasis and a more elegant, + quiet personality. +

+ +
    +
  • + + Warm neutral surfaces with one clear lavender action colour +
    • +
  • + + Balanced by grey-green and soft sand supporting accents +
    • +
  • + + Lexend and Atkinson Hyperlegible through the Google Fonts CSS API +
    • +
+
+ +
+ Editorial calm + Readable + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md new file mode 100644 index 0000000..d4d3a40 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-lavender/ivory-ink-lavender-style-guide.md @@ -0,0 +1,179 @@ +# Ivory & Ink + Lavender UI Style Guide + +A warm editorial UI system based on the Ivory & Ink palette, extended with a refined lavender accent. + +The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a restrained lavender used for the primary action. The result is elegant, soft and readable without becoming overly decorative. + +--- + +## 1. Core idea + +Use **Ivory & Ink** as the foundation and **lavender** as the signal. + +That means: + +- the page and cards stay mostly neutral +- lavender identifies the next important action +- grey-green and sand provide soft balance +- the interface should feel editorial, calm and slightly elegant + +Lavender should not take over the whole page. It should guide attention. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F3` | Main page background | +| `--page-accent` | `#F2ECE4` | Subtle background depth | +| `--surface` | `#FFFEFB` | Cards and dialogs | +| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections | +| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces | +| `--text` | `#262320` | Main text | +| `--muted` | `#6F6963` | Secondary text | +| `--border` | `#DCCFC4` | Borders and dividers | +| `--primary` | `#9682B4` | Lavender primary action | +| `--primary-hover` | `#7A6697` | Primary hover state | +| `--secondary` | `#E7DED3` | Neutral secondary actions | +| `--secondary-hover` | `#D9CEC1` | Secondary hover state | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090705` | Background depth | +| `--surface` | `#171411` | Main cards and dialogs | +| `--surface-alt` | `#231D1A` | Inputs and secondary sections | +| `--surface-strong` | `#35302B` | Selected and raised surfaces | +| `--text` | `#FAF6F0` | Main text | +| `--muted` | `#C9C1B7` | Secondary text | +| `--border` | `#554D46` | Borders and dividers | +| `--primary` | `#B8A7D2` | Lavender primary action | +| `--primary-hover` | `#A08FC0` | Primary hover state | +| `--secondary` | `#4F4840` | Neutral secondary actions | +| `--secondary-hover` | `#655D54` | Secondary hover state | + +--- + +## 4. Supporting accents + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Soft lavender | `#C7B8DE` | `#D9CDEA` | Highlights and personality | +| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support | +| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis | +| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action | +| Success | `#6E816E` | `#9CAE99` | Positive confirmation | + +Recommended balance: + +- **70%** ivory / ink / neutral surfaces +- **20%** lavender and neutral secondary structure +- **10%** supporting accents + +--- + +## 5. Usage rules + +### Use lavender for: + +- the main button +- active links +- selected controls +- one compact accent line +- small brand highlights + +### Do not use lavender for: + +- large page backgrounds +- long paragraphs +- every badge +- multiple competing cards +- error messaging if a danger colour already exists + +### Use the neutral secondary for: + +- secondary buttons +- optional actions +- toolbars +- filters +- supporting cards + +### Use grey-green and sand for: + +- quiet icon accents +- status support +- visual balance +- warmth without more lavender + +--- + +## 6. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading content + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 7. Typography sample card + +The demo includes a sample content card so you can test the fonts in a more editorial surface. + +```html +
+

Typography sample

+

A calm editorial card heading

+

+ A concise subheading demonstrates Lexend in a refined ivory-and-lavender interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +Recommended use: + +- eyebrow + heading + subheading in **Lexend** +- paragraph in **Atkinson Hyperlegible** + +--- + +## 8. ADHD-friendly notes + +- Keep the lavender limited to primary focus points. +- Let the ivory background do most of the visual calming. +- Use strong spacing rather than extra decoration. +- Preserve clear contrast between background, surface and action. +- Avoid placing too many coloured chips near the main button. +- Keep one obvious next step visible. + +--- + +## 9. Final rule + +If the design starts to feel too decorative, remove lavender rather than adding more neutral styling. + +The warm neutral base should carry the interface. Lavender should simply guide attention. diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html new file mode 100644 index 0000000..ab4f303 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory Ink Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory Ink Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory Ink Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html new file mode 100644 index 0000000..b464a90 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-login.html @@ -0,0 +1,839 @@ + + + + + + + Ivory & Ink + Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper Rose +
+ +
+

Ivory & Ink + Pink

+

Soft warmth. Clear focus.

+

+ This version keeps the warm ivory-and-ink foundation but extends it + with a polished pink for primary actions, emphasis and a touch of personality. +

+ +
    +
  • + + Warm neutral surfaces with one clear pink action colour +
    • +
  • + + Balanced by grey-green and soft sand supporting accents +
    • +
  • + + Lexend and Atkinson Hyperlegible through the Google Fonts CSS API +
    • +
+
+ +
+ Editorial calm + Readable + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md new file mode 100644 index 0000000..fbbcc44 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink-pink/ivory-ink-pink-style-guide.md @@ -0,0 +1,179 @@ +# Ivory & Ink + Pink UI Style Guide + +A warm editorial UI system based on the Ivory & Ink palette, extended with a refined pink accent. + +The foundation remains calm: ivory surfaces, ink text, taupe-neutral structure and a very restrained pink used for the primary action. The result is warmer and more personal than pure monochrome, but still clean, grown-up and readable. + +--- + +## 1. Core idea + +Use **Ivory & Ink** as the foundation and **pink** as the signal. + +That means: + +- the page and cards stay mostly neutral +- pink identifies the next important action +- grey-green and sand provide soft balance +- the interface should feel editorial, calm and slightly warm + +Pink should not take over the whole page. It should guide attention. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F3` | Main page background | +| `--page-accent` | `#F2ECE4` | Subtle background depth | +| `--surface` | `#FFFEFB` | Cards and dialogs | +| `--surface-alt` | `#F8F1EA` | Inputs and secondary sections | +| `--surface-strong` | `#EDE2D7` | Selected and raised surfaces | +| `--text` | `#262320` | Main text | +| `--muted` | `#6F6963` | Secondary text | +| `--border` | `#DCCFC4` | Borders and dividers | +| `--primary` | `#D8739A` | Pink primary action | +| `--primary-hover` | `#BC5A80` | Primary hover state | +| `--secondary` | `#E7DED3` | Neutral secondary actions | +| `--secondary-hover` | `#D9CEC1` | Secondary hover state | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090705` | Background depth | +| `--surface` | `#171411` | Main cards and dialogs | +| `--surface-alt` | `#231D1A` | Inputs and secondary sections | +| `--surface-strong` | `#35302B` | Selected and raised surfaces | +| `--text` | `#FAF6F0` | Main text | +| `--muted` | `#C9C1B7` | Secondary text | +| `--border` | `#554D46` | Borders and dividers | +| `--primary` | `#EB97B7` | Pink primary action | +| `--primary-hover` | `#D97DA1` | Primary hover state | +| `--secondary` | `#4F4840` | Neutral secondary actions | +| `--secondary-hover` | `#655D54` | Secondary hover state | + +--- + +## 4. Supporting accents + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Soft pink | `#E8A9C2` | `#F0BFD2` | Highlights and brand personality | +| Grey-green | `#8A9795` | `#92A19D` | Cool balance and support | +| Sand | `#C8A97A` | `#CFB27F` | Warm guidance and emphasis | +| Danger | `#B96B74` | `#DA98A0` | Errors and destructive action | +| Success | `#6E816E` | `#9CAE99` | Positive confirmation | + +Recommended balance: + +- **70%** ivory / ink / neutral surfaces +- **20%** pink and neutral secondary structure +- **10%** supporting accents + +--- + +## 5. Usage rules + +### Use pink for: + +- the main button +- active links +- selected controls +- one compact accent line +- small brand highlights + +### Do not use pink for: + +- large page backgrounds +- long paragraphs +- every badge +- multiple competing cards +- error messaging if a danger colour already exists + +### Use the neutral secondary for: + +- secondary buttons +- optional actions +- toolbars +- filters +- supporting cards + +### Use grey-green and sand for: + +- quiet icon accents +- status support +- visual balance +- warmth without more pink + +--- + +## 6. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading content + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 7. Typography sample card + +The demo includes a sample content card so you can test the fonts in a more editorial surface. + +```html +
+

Typography sample

+

A warm editorial card heading

+

+ A concise subheading demonstrates Lexend in a refined ivory-and-pink interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +Recommended use: + +- eyebrow + heading + subheading in **Lexend** +- paragraph in **Atkinson Hyperlegible** + +--- + +## 8. ADHD-friendly notes + +- Keep the pink limited to primary focus points. +- Let the ivory background do most of the visual calming. +- Use strong spacing rather than extra decoration. +- Preserve clear contrast between background, surface and action. +- Avoid placing too many coloured chips near the main button. +- Keep one obvious next step visible. + +--- + +## 9. Final rule + +If the design starts to feel too sweet or decorative, remove pink rather than adding more neutral styling. + +The warm neutral base should carry the interface. Pink should simply guide attention. diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html new file mode 100644 index 0000000..157145d --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Ivory & Ink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Ivory & Ink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Ivory & Ink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html new file mode 100644 index 0000000..b6959ee --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-login.html @@ -0,0 +1,829 @@ + + + + + + + Ivory & Ink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Paper +
+ +
+

Ivory & Ink

+

Quiet contrast. Thoughtful focus.

+

A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md new file mode 100644 index 0000000..140fffa --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/ivory-ink/ivory-ink-style-guide.md @@ -0,0 +1,300 @@ +# Ivory & Ink UI Style Guide + +A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white. + +Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF8F2` | Main page background | +| `--page-accent` | `#F0ECE2` | Subtle page depth | +| `--surface` | `#FFFEFA` | Cards and dialogs | +| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions | +| `--surface-strong` | `#E8E1D4` | Selected and elevated elements | +| `--text` | `#242321` | Main text | +| `--muted` | `#6E6A63` | Secondary text | +| `--border` | `#D8D1C5` | Borders and dividers | +| `--primary` | `#2D2B28` | Main action and brand colour | +| `--primary-hover` | `#171614` | Primary hover and active state | +| `--secondary` | `#E8E2D8` | Secondary action | +| `--secondary-hover` | `#DAD2C5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020202` | Main dark background | +| `--page-accent` | `#090806` | Background depth | +| `--surface` | `#151411` | Cards and dialogs | +| `--surface-alt` | `#201E1A` | Inputs and secondary regions | +| `--surface-strong` | `#322F28` | Selected and elevated elements | +| `--text` | `#FAF7EF` | Main text | +| `--muted` | `#C7C1B5` | Secondary text | +| `--border` | `#4D4941` | Borders and dividers | +| `--primary` | `#E8E1D4` | Main action and brand colour | +| `--primary-hover` | `#FFF9ED` | Primary hover and active state | +| `--secondary` | `#4C4840` | Secondary action | +| `--secondary-hover` | `#625D53` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for strong actions and editorial emphasis without saturated colour. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for warm neutral controls, filters and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#817A70` | `#B6ADA0` | +| Accent 2 | `#8C9795` | `#8EA09C` | +| Accent 3 | `#B49B73` | `#C8AD7C` | +| Success | `#6F806F` | `#9BAE99` | +| Danger | `#8A5D54` | `#C89084` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF8F2; + --surface: #FFFEFA; + --surface-alt: #F6F2E9; + --text: #242321; + --muted: #6E6A63; + --border: #D8D1C5; + --primary: #2D2B28; + --secondary: #E8E2D8; +} + +html[data-theme="dark"] { + --page: #020202; + --surface: #151411; + --surface-alt: #201E1A; + --text: #FAF7EF; + --muted: #C7C1B5; + --border: #4D4941; + --primary: #E8E1D4; + --secondary: #4C4840; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html new file mode 100644 index 0000000..7e9468a --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Mist Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Mist Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Mist Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html new file mode 100644 index 0000000..f3048f0 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Mist Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Drift +
+ +
+

Mist Blue

+

Open space. Steady attention.

+

A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md new file mode 100644 index 0000000..ef03598 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mist-blue/mist-blue-style-guide.md @@ -0,0 +1,300 @@ +# Mist Blue UI Style Guide + +A pale blue-grey system that feels lighter and quieter than denim blue while retaining strong UI clarity. + +Mist Blue is suitable for information-heavy interfaces because it creates separation without strong saturation. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F9FA` | Main page background | +| `--page-accent` | `#E7EFF2` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EDF4F6` | Inputs and secondary regions | +| `--surface-strong` | `#DAE6EA` | Selected and elevated elements | +| `--text` | `#28363D` | Main text | +| `--muted` | `#68777E` | Secondary text | +| `--border` | `#C9D7DC` | Borders and dividers | +| `--primary` | `#63889A` | Main action and brand colour | +| `--primary-hover` | `#496C7D` | Primary hover and active state | +| `--secondary` | `#E3E4ED` | Secondary action | +| `--secondary-hover` | `#D4D6E3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#061014` | Background depth | +| `--surface` | `#0D181D` | Cards and dialogs | +| `--surface-alt` | `#15252C` | Inputs and secondary regions | +| `--surface-strong` | `#233943` | Selected and elevated elements | +| `--text` | `#EFF5F7` | Main text | +| `--muted` | `#B7C5CB` | Secondary text | +| `--border` | `#38535E` | Borders and dividers | +| `--primary` | `#88AEC0` | Main action and brand colour | +| `--primary-hover` | `#6E94A7` | Primary hover and active state | +| `--secondary` | `#4B4F69` | Secondary action | +| `--secondary-hover` | `#606681` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm primary actions, active navigation and focused progress. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for soft violet-grey controls and supporting actions. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#85A3B0` | `#A1C0CD` | +| Accent 2 | `#898DAA` | `#A0A4C2` | +| Accent 3 | `#C4A36F` | `#D0B17D` | +| Success | `#688A73` | `#91B29A` | +| Danger | `#A56569` | `#D29195` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F6F9FA; + --surface: #FFFFFF; + --surface-alt: #EDF4F6; + --text: #28363D; + --muted: #68777E; + --border: #C9D7DC; + --primary: #63889A; + --secondary: #E3E4ED; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0D181D; + --surface-alt: #15252C; + --text: #EFF5F7; + --muted: #B7C5CB; + --border: #38535E; + --primary: #88AEC0; + --secondary: #4B4F69; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html new file mode 100644 index 0000000..fd4ada7 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Mustard Yellow — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Mustard Yellow system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Mustard Yellow palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html new file mode 100644 index 0000000..668364f --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-login.html @@ -0,0 +1,829 @@ + + + + + + + Mustard Yellow — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Beacon +
+ +
+

Mustard Yellow

+

Bright thinking. Calm structure.

+

An editorial mustard system balanced by deep blue-grey for usable contrast.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md new file mode 100644 index 0000000..a7d9f41 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/mustard-yellow/mustard-yellow-style-guide.md @@ -0,0 +1,321 @@ +# Mustard Yellow UI Style Guide + +An editorial mustard system balanced by deep blue-grey for usable contrast. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FBF9F3` | Main page background | +| `--page-accent` | `#F0E9D7` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F7F1E3` | Inputs and secondary regions | +| `--surface-strong` | `#EBDDCA` | Selected and elevated elements | +| `--text` | `#373128` | Main text | +| `--muted` | `#756E61` | Secondary text | +| `--border` | `#DDD2BE` | Borders and dividers | +| `--primary` | `#B58A2F` | Main action and brand colour | +| `--primary-hover` | `#916B1E` | Primary hover and active state | +| `--secondary` | `#DCE5E9` | Secondary action | +| `--secondary-hover` | `#CCD9DF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020405` | Main dark background | +| `--page-accent` | `#080B0D` | Background depth | +| `--surface` | `#111719` | Cards and dialogs | +| `--surface-alt` | `#1B2427` | Inputs and secondary regions | +| `--surface-strong` | `#2C383C` | Selected and elevated elements | +| `--text` | `#F7F3E9` | Main text | +| `--muted` | `#C8C1B2` | Secondary text | +| `--border` | `#4A565A` | Borders and dividers | +| `--primary` | `#D5AA4D` | Main action and brand colour | +| `--primary-hover` | `#B88C35` | Primary hover and active state | +| `--secondary` | `#3B5965` | Secondary action | +| `--secondary-hover` | `#4C6D7A` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for high-value actions, selected states and editorial highlights. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for deep blue-grey structure and optional actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#C19D4E` | `#E0BC67` | +| Accent 2 | `#657F8C` | `#7C9AA7` | +| Accent 3 | `#A27B78` | `#C28B87` | +| Success | `#6D896B` | `#95B096` | +| Danger | `#A65F55` | `#D58E82` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FBF9F3; + --surface: #FFFFFF; + --surface-alt: #F7F1E3; + --text: #373128; + --muted: #756E61; + --border: #DDD2BE; + --primary: #B58A2F; + --secondary: #DCE5E9; +} + +html[data-theme="dark"] { + --page: #020405; + --surface: #111719; + --surface-alt: #1B2427; + --text: #F7F3E9; + --muted: #C8C1B2; + --border: #4A565A; + --primary: #D5AA4D; + --secondary: #3B5965; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html new file mode 100644 index 0000000..538ccf7 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Olive Oat — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Olive Oat system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Olive Oat palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html new file mode 100644 index 0000000..73c3f3f --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-login.html @@ -0,0 +1,829 @@ + + + + + + + Olive & Oat — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Meadow +
+ +
+

Olive & Oat

+

Grounded calm. Practical focus.

+

A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md new file mode 100644 index 0000000..fd4a022 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/olive-oat/olive-oat-style-guide.md @@ -0,0 +1,300 @@ +# Olive & Oat UI Style Guide + +A muted olive system with oat-coloured surfaces, offering an earthy but cleaner alternative to brown. + +Olive & Oat is calm and practical. Keep the olive muted; brighter yellow-green shades quickly become visually demanding. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F9F7F0` | Main page background | +| `--page-accent` | `#ECE8D9` | Subtle page depth | +| `--surface` | `#FFFDF8` | Cards and dialogs | +| `--surface-alt` | `#F4F1E5` | Inputs and secondary regions | +| `--surface-strong` | `#E3DFCD` | Selected and elevated elements | +| `--text` | `#35362B` | Main text | +| `--muted` | `#737363` | Secondary text | +| `--border` | `#D7D3C1` | Borders and dividers | +| `--primary` | `#777B4F` | Main action and brand colour | +| `--primary-hover` | `#5D623A` | Primary hover and active state | +| `--secondary` | `#DDE6E2` | Secondary action | +| `--secondary-hover` | `#CEDBD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030401` | Main dark background | +| `--page-accent` | `#0A0C05` | Background depth | +| `--surface` | `#15170E` | Cards and dialogs | +| `--surface-alt` | `#212418` | Inputs and secondary regions | +| `--surface-strong` | `#343827` | Selected and elevated elements | +| `--text` | `#F5F4EA` | Main text | +| `--muted` | `#C4C3B4` | Secondary text | +| `--border` | `#505443` | Borders and dividers | +| `--primary` | `#A9AD75` | Main action and brand colour | +| `--primary-hover` | `#8F945D` | Primary hover and active state | +| `--secondary` | `#3E5A57` | Secondary action | +| `--secondary-hover` | `#50706C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool green-grey controls that prevent the palette becoming too earthy. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#96966D` | `#BCBD8D` | +| Accent 2 | `#6E8B88` | `#82A09D` | +| Accent 3 | `#C29A64` | `#CFAD76` | +| Success | `#6F8464` | `#9BAF8F` | +| Danger | `#A36558` | `#D18E7E` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F9F7F0; + --surface: #FFFDF8; + --surface-alt: #F4F1E5; + --text: #35362B; + --muted: #737363; + --border: #D7D3C1; + --primary: #777B4F; + --secondary: #DDE6E2; +} + +html[data-theme="dark"] { + --page: #030401; + --surface: #15170E; + --surface-alt: #212418; + --text: #F5F4EA; + --muted: #C4C3B4; + --border: #505443; + --primary: #A9AD75; + --secondary: #3E5A57; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html new file mode 100644 index 0000000..3268de7 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Orchid Pop — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Orchid Pop system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Orchid Pop palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html new file mode 100644 index 0000000..efc2d05 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-login.html @@ -0,0 +1,829 @@ + + + + + + + Orchid Pop — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Bloom +
+ +
+

Orchid Pop

+

Bold accent. Calm structure.

+

A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md new file mode 100644 index 0000000..2b3bcb7 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/orchid-pop/orchid-pop-style-guide.md @@ -0,0 +1,300 @@ +# Orchid Pop UI Style Guide + +A rich orchid-violet system built around your exact colour #B744C4. It uses softened plum surfaces and cool grey-blue secondary support to keep the interface clean and readable. + +The exact anchor colour is `#B744C4`. Because it is already visually assertive, the supporting palette is intentionally softer and more neutral. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FCF7FD` | Main page background | +| `--page-accent` | `#F2E6F5` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F8EEFA` | Inputs and secondary regions | +| `--surface-strong` | `#EDD8F0` | Selected and elevated elements | +| `--text` | `#33273A` | Main text | +| `--muted` | `#766A7D` | Secondary text | +| `--border` | `#E0CEE4` | Borders and dividers | +| `--primary` | `#B744C4` | Main action and brand colour | +| `--primary-hover` | `#972FA3` | Primary hover and active state | +| `--secondary` | `#E0E5EB` | Secondary action | +| `--secondary-hover` | `#D1D9E1` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#040105` | Main dark background | +| `--page-accent` | `#0B0610` | Background depth | +| `--surface` | `#180F1A` | Cards and dialogs | +| `--surface-alt` | `#25172A` | Inputs and secondary regions | +| `--surface-strong` | `#39253F` | Selected and elevated elements | +| `--text` | `#F8EFFA` | Main text | +| `--muted` | `#CCBFCE` | Secondary text | +| `--border` | `#5A4060` | Borders and dividers | +| `--primary` | `#C865D3` | Main action and brand colour | +| `--primary-hover` | `#B744C4` | Primary hover and active state | +| `--secondary` | `#455B68` | Secondary action | +| `--secondary-hover` | `#587180` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for distinct primary actions, selected states and confident brand emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool grey-blue controls and supporting actions that keep the palette calm. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#D38ADC` | `#DEA7E4` | +| Accent 2 | `#758FA0` | `#8CA3B2` | +| Accent 3 | `#C3A06D` | `#D0B07B` | +| Success | `#6C8974` | `#94AF9B` | +| Danger | `#AF5F7B` | `#DA93AB` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FCF7FD; + --surface: #FFFFFF; + --surface-alt: #F8EEFA; + --text: #33273A; + --muted: #766A7D; + --border: #E0CEE4; + --primary: #B744C4; + --secondary: #E0E5EB; +} + +html[data-theme="dark"] { + --page: #040105; + --surface: #180F1A; + --surface-alt: #25172A; + --text: #F8EFFA; + --muted: #CCBFCE; + --border: #5A4060; + --primary: #C865D3; + --secondary: #455B68; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html new file mode 100644 index 0000000..8aa7e08 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Sage Green — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Sage Green system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Sage Green palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-login.html new file mode 100644 index 0000000..5bad7e5 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-login.html @@ -0,0 +1,829 @@ + + + + + + + Sage Green — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Stillleaf +
+ +
+

Sage Green

+

Calm structure. Natural rhythm.

+

A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md new file mode 100644 index 0000000..0387090 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sage-green/sage-green-style-guide.md @@ -0,0 +1,321 @@ +# Sage Green UI Style Guide + +A quiet sage system with eucalyptus support and a deep forest-charcoal dark mode. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F7F8F4` | Main page background | +| `--page-accent` | `#EAEDE4` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F0F3EB` | Inputs and secondary regions | +| `--surface-strong` | `#DFE5D8` | Selected and elevated elements | +| `--text` | `#2C352C` | Main text | +| `--muted` | `#6D786B` | Secondary text | +| `--border` | `#CED7C8` | Borders and dividers | +| `--primary` | `#71866C` | Main action and brand colour | +| `--primary-hover` | `#586D54` | Primary hover and active state | +| `--secondary` | `#DDE6E1` | Secondary action | +| `--secondary-hover` | `#CEDCD5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#020503` | Main dark background | +| `--page-accent` | `#08100A` | Background depth | +| `--surface` | `#101812` | Cards and dialogs | +| `--surface-alt` | `#19231B` | Inputs and secondary regions | +| `--surface-strong` | `#2A382D` | Selected and elevated elements | +| `--text` | `#F1F5EF` | Main text | +| `--muted` | `#BCC6B9` | Secondary text | +| `--border` | `#435246` | Borders and dividers | +| `--primary` | `#9BB094` | Main action and brand colour | +| `--primary-hover` | `#829A7C` | Primary hover and active state | +| `--secondary` | `#3F5B57` | Secondary action | +| `--secondary-hover` | `#53716C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm confirmation, primary actions and selected states. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool eucalyptus structure and supporting actions. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#8D9F8B` | `#A9B6A7` | +| Accent 2 | `#66888A` | `#7FA4A4` | +| Accent 3 | `#C2A36F` | `#CFB37F` | +| Success | `#64806A` | `#92B09A` | +| Danger | `#A9655D` | `#D38E83` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F7F8F4; + --surface: #FFFFFF; + --surface-alt: #F0F3EB; + --text: #2C352C; + --muted: #6D786B; + --border: #CED7C8; + --primary: #71866C; + --secondary: #DDE6E1; +} + +html[data-theme="dark"] { + --page: #020503; + --surface: #101812; + --surface-alt: #19231B; + --text: #F1F5EF; + --muted: #BCC6B9; + --border: #435246; + --primary: #9BB094; + --secondary: #3F5B57; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html new file mode 100644 index 0000000..a457005 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Seafoam — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Seafoam system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Seafoam palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-login.html new file mode 100644 index 0000000..a53a909 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-login.html @@ -0,0 +1,829 @@ + + + + + + + Seafoam — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Tide +
+ +
+

Seafoam

+

Soft clarity. Easy momentum.

+

A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md new file mode 100644 index 0000000..131c830 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/seafoam/seafoam-style-guide.md @@ -0,0 +1,300 @@ +# Seafoam UI Style Guide + +A pale seafoam system with blue-green structure, designed to feel fresh without the energy of bright turquoise. + +Seafoam is softer than turquoise and less earthy than sage. It works well for wellbeing, planning and service interfaces. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F5FAF8` | Main page background | +| `--page-accent` | `#E3F1EC` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F2` | Inputs and secondary regions | +| `--surface-strong` | `#D5EAE2` | Selected and elevated elements | +| `--text` | `#263A37` | Main text | +| `--muted` | `#667A76` | Secondary text | +| `--border` | `#C5DCD5` | Borders and dividers | +| `--primary` | `#4F8F82` | Main action and brand colour | +| `--primary-hover` | `#397166` | Primary hover and active state | +| `--secondary` | `#DDE9EE` | Secondary action | +| `--secondary-hover` | `#CCDCE3` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010504` | Main dark background | +| `--page-accent` | `#05100D` | Background depth | +| `--surface` | `#0D1916` | Cards and dialogs | +| `--surface-alt` | `#14251F` | Inputs and secondary regions | +| `--surface-strong` | `#213A32` | Selected and elevated elements | +| `--text` | `#EFF7F4` | Main text | +| `--muted` | `#B7C8C3` | Secondary text | +| `--border` | `#35564C` | Borders and dividers | +| `--primary` | `#7AB7A8` | Main action and brand colour | +| `--primary-hover` | `#61A091` | Primary hover and active state | +| `--secondary` | `#3B5666` | Secondary action | +| `--secondary-hover` | `#4C6C7F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for calm actions, progress and selected states. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue structure and optional controls. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#82ADA2` | `#98C6BA` | +| Accent 2 | `#718DA0` | `#819DB0` | +| Accent 3 | `#C5A576` | `#D0B17E` | +| Success | `#668B73` | `#91B39B` | +| Danger | `#A56561` | `#D3908C` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F5FAF8; + --surface: #FFFFFF; + --surface-alt: #EBF6F2; + --text: #263A37; + --muted: #667A76; + --border: #C5DCD5; + --primary: #4F8F82; + --secondary: #DDE9EE; +} + +html[data-theme="dark"] { + --page: #010504; + --surface: #0D1916; + --surface-alt: #14251F; + --text: #EFF7F4; + --muted: #B7C8C3; + --border: #35564C; + --primary: #7AB7A8; + --secondary: #3B5666; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html new file mode 100644 index 0000000..82c82e2 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Simple Pink — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Simple Pink system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Simple Pink palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html new file mode 100644 index 0000000..97111d5 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-login.html @@ -0,0 +1,829 @@ + + + + + + + Simple Pink — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Roseline +
+ +
+

Simple Pink

+

Clear space. Gentle focus.

+

A grown-up pink system with warm neutrals and a muted mauve secondary.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md new file mode 100644 index 0000000..1dca5e8 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/simple-pink/simple-pink-style-guide.md @@ -0,0 +1,321 @@ +# Simple Pink UI Style Guide + +A grown-up pink system with warm neutrals and a muted mauve secondary. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF8FA` | Main page background | +| `--page-accent` | `#F7E8EE` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FCEEF3` | Inputs and secondary regions | +| `--surface-strong` | `#F2DCE5` | Selected and elevated elements | +| `--text` | `#38272F` | Main text | +| `--muted` | `#74656C` | Secondary text | +| `--border` | `#E1CBD4` | Borders and dividers | +| `--primary` | `#D35F87` | Main action and brand colour | +| `--primary-hover` | `#B4476E` | Primary hover and active state | +| `--secondary` | `#E9DFE4` | Secondary action | +| `--secondary-hover` | `#DCCFD6` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#050204` | Main dark background | +| `--page-accent` | `#0C0709` | Background depth | +| `--surface` | `#160D12` | Cards and dialogs | +| `--surface-alt` | `#24151C` | Inputs and secondary regions | +| `--surface-strong` | `#35212B` | Selected and elevated elements | +| `--text` | `#F8EFF3` | Main text | +| `--muted` | `#CBBCC3` | Secondary text | +| `--border` | `#513B45` | Borders and dividers | +| `--primary` | `#EE7DA4` | Main action and brand colour | +| `--primary-hover` | `#D45F8B` | Primary hover and active state | +| `--secondary` | `#5A3F4C` | Secondary action | +| `--secondary-hover` | `#715061` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for friendly primary actions and brand emphasis. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for quiet optional actions and mauve structure. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A88FA0` | `#B29BAA` | +| Accent 2 | `#77949A` | `#7E9DA1` | +| Accent 3 | `#C8A575` | `#D0B27F` | +| Success | `#6A8C73` | `#92B09A` | +| Danger | `#A75C68` | `#DD97A1` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF8FA; + --surface: #FFFFFF; + --surface-alt: #FCEEF3; + --text: #38272F; + --muted: #74656C; + --border: #E1CBD4; + --primary: #D35F87; + --secondary: #E9DFE4; +} + +html[data-theme="dark"] { + --page: #050204; + --surface: #160D12; + --surface-alt: #24151C; + --text: #F8EFF3; + --muted: #CBBCC3; + --border: #513B45; + --primary: #EE7DA4; + --secondary: #5A3F4C; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-dashboard.html new file mode 100644 index 0000000..25e18a6 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-dashboard.html @@ -0,0 +1,588 @@ + + + + + + + Smoky Teal Signal — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Smoky Teal Signal system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Alerts waiting +
3
+
Needs review
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ +
+
+
+
+

Weekly progress

+

Testing surfaces, chart accents and typography hierarchy.

+
+ Updated today +
+ +
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+ +
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+ +
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for longer body text

+
+
+ +
+
+
+ Palette mapped +

The four source colours were converted into a balanced interface system with smoky neutrals, teal actions and restrained signal red.

+
+ 10 min ago +
+
+
+ Accessibility review +

Contrast, focus states and readable surface layering were checked in both light and dark mode.

+
+ 45 min ago +
+
+
+ Typography sample approved +

Lexend and Atkinson Hyperlegible remain the pairing for interface structure and reading text.

+
+ 2 h ago +
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+ +
+
AJ
+
PM
+
KM
+
LV
+
+ +

+ Four collaborators currently active in this workspace. +

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+ +
+

Typography sample

+

A modern high-clarity dashboard card heading

+

+ A concise subheading shows how Lexend behaves within the smoky neutral and teal interface. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-login.html new file mode 100644 index 0000000..34b6d7c --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-login.html @@ -0,0 +1,801 @@ + + + + + + + Smoky Teal Signal — ADHD-Friendly Login Demo + + + + +
+
+
+ + Signal Panel +
+ +
+

Smoky Teal Signal

+

Calm structure. Clear signals.

+

+ This palette is based on a smoky mauve foundation with teal as the + main action colour, a restrained red signal accent, and soft white highlights. +

+ +
    +
  • Muted smoky neutrals for calm structure
    • +
  • Teal primary actions for focus and readability
    • +
  • Red reserved only for alerts, urgency and destructive actions
    • +
+
+ +
+ Balanced + Readable + ADHD-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-style-guide.md new file mode 100644 index 0000000..41cb135 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/smoky-teal-signal/smoky-teal-signal-style-guide.md @@ -0,0 +1,162 @@ +# Smoky Teal Signal UI Style Guide + +This palette is based on the following four colours and their approximate visual weights: + +- `#7A676F` — **71.28%** — dominant smoky mauve / neutral foundation +- `#10B3BB` — **23.59%** — teal action and emphasis +- `#E51A22` — **3.77%** — strong signal / alert accent +- `#FFFEFE` — **0.76%** — clean light highlight + +The system is designed to feel calm, structured and modern, while still providing clear focus and alert states. + +--- + +## 1. Core design logic + +Use the colours in this order of importance: + +1. **Smoky mauve** for the emotional base and most of the personality +2. **Teal** for primary actions and selected states +3. **Red** only for alerts, destructive actions and very small accents +4. **White / off-white** for highlight surfaces and clean breathing room + +This keeps the design ADHD-friendly by avoiding too many competing high-energy colours. + +--- + +## 2. Light mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F6F2F4` | Main page background | +| `--page-accent` | `#ECE5E8` | Background depth | +| `--surface` | `#FFFEFE` | Cards and dialogs | +| `--surface-alt` | `#F2ECEF` | Inputs and secondary sections | +| `--surface-strong` | `#E1D7DC` | Selected surfaces | +| `--text` | `#2F2529` | Main text | +| `--muted` | `#6E5C63` | Secondary text | +| `--border` | `#D4C8CD` | Borders and dividers | +| `--primary` | `#10B3BB` | Main primary action | +| `--primary-hover` | `#0B99A0` | Primary hover | +| `--secondary` | `#E4DCE0` | Neutral secondary action | +| `--secondary-hover` | `#D8CDD2` | Secondary hover | + +--- + +## 3. Dark mode tokens + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#0F0C0D` | Main background | +| `--page-accent` | `#171214` | Dark depth | +| `--surface` | `#1B1618` | Main card surface | +| `--surface-alt` | `#272023` | Inputs and support areas | +| `--surface-strong` | `#383034` | Selected areas | +| `--text` | `#FFFDFD` | Main text | +| `--muted` | `#CBBEC4` | Secondary text | +| `--border` | `#51464B` | Borders | +| `--primary` | `#22C2CA` | Main teal action | +| `--primary-hover` | `#10B3BB` | Hover teal | +| `--secondary` | `#433A3E` | Neutral secondary action | +| `--secondary-hover` | `#584D52` | Secondary hover | + +--- + +## 4. Supporting colours + +| Role | Light | Dark | Use | +|---|---:|---:|---| +| Smoky accent | `#7A676F` | `#9B8A91` | visual identity and soft structure | +| Teal support | `#10B3BB` | `#22C2CA` | action and focused guidance | +| Signal red | `#E51A22` | `#F06066` | alerts and destructive action | +| Success | `#5B827F` | `#8CB1AE` | confirmation and positive states | + +--- + +## 5. Colour usage rules + +### Use smoky mauve for: +- large backgrounds +- structural surfaces +- chips, panels and neutral framing +- establishing mood + +### Use teal for: +- primary buttons +- active links +- selected controls +- focused components +- positive forward motion + +### Use red only for: +- danger +- errors +- critical status +- highly limited emphasis + +Do **not** use red as a second primary colour. + +### Use white / off-white for: +- cards +- breathing room +- clean contrast +- clarity inside dense layouts + +--- + +## 6. ADHD-friendly guidance + +- Let the mauve foundation do most of the visual work. +- Use teal to show the next important action. +- Keep red scarce so it remains meaningful. +- Avoid placing teal and red together unless the component truly needs both. +- Prefer calm spacing and clear layout over extra decoration. +- Keep one visual priority per region. + +--- + +## 7. Typography + +Fonts are loaded through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Use: + +- **Lexend** for headings, labels, buttons and subheadings +- **Atkinson Hyperlegible** for paragraph text and longer reading + +Recommended sizes: + +- body: `18px` +- labels: `16–17px` +- buttons: `16–18px` +- subheadings: `15–17px` +- card heading: `20–24px` + +--- + +## 8. Typography sample card + +```html +
+

Typography sample

+

A calm but high-clarity card heading

+

+ A concise subheading demonstrates Lexend with the smoky neutral and teal palette. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + +--- + +## 9. Final rule + +If the interface starts to feel noisy, reduce red first and then simplify teal accents. The smoky neutral base should remain the calm dominant layer. diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html new file mode 100644 index 0000000..931a79c --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Sunset Apricot — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Sunset Apricot system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Sunset Apricot palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html new file mode 100644 index 0000000..22b42ad --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-login.html @@ -0,0 +1,829 @@ + + + + + + + Sunset Apricot — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Glow +
+ +
+

Sunset Apricot

+

Warm focus. Friendly clarity.

+

A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md new file mode 100644 index 0000000..9cd2a2c --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/sunset-apricot/sunset-apricot-style-guide.md @@ -0,0 +1,300 @@ +# Sunset Apricot UI Style Guide + +A fresh apricot-orange system built around your exact colour #FF8C4F. It stays calm by pairing the warm primary with cool slate-blue secondary surfaces. + +The exact anchor colour is `#FF8C4F`. Because it is lively, the rest of the interface stays quieter and cooler so the primary action remains clear without becoming overstimulating. + +This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core rules + +- Use neutral backgrounds and surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding colour. +- Keep one main task visible at a time. +- Avoid decorative motion and unexpected layout changes. +- Never communicate status using colour alone. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FFF9F4` | Main page background | +| `--page-accent` | `#F8EBDD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#FFF2E7` | Inputs and secondary regions | +| `--surface-strong` | `#F6DEC9` | Selected and elevated elements | +| `--text` | `#382920` | Main text | +| `--muted` | `#79695F` | Secondary text | +| `--border` | `#E6D2C3` | Borders and dividers | +| `--primary` | `#FF8C4F` | Main action and brand colour | +| `--primary-hover` | `#E86F2F` | Primary hover and active state | +| `--secondary` | `#DDE7EA` | Secondary action | +| `--secondary-hover` | `#CDDADF` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0C0705` | Background depth | +| `--surface` | `#18110D` | Cards and dialogs | +| `--surface-alt` | `#251A15` | Inputs and secondary regions | +| `--surface-strong` | `#3A291F` | Selected and elevated elements | +| `--text` | `#FBF2EC` | Main text | +| `--muted` | `#D0BFB5` | Secondary text | +| `--border` | `#62493B` | Borders and dividers | +| `--primary` | `#FF9A63` | Main action and brand colour | +| `--primary-hover` | `#FF8C4F` | Primary hover and active state | +| `--secondary` | `#425C66` | Secondary action | +| `--secondary-hover` | `#55717C` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for warm primary actions, active states and friendly emphasis. + +Use it on: + +- the main button +- active navigation +- selected controls +- important links +- compact brand marks + +The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool slate structure, optional actions and visual balance. + +Use it on: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#FFB285` | `#FFC5A4` | +| Accent 2 | `#6E8E98` | `#89A4AE` | +| Accent 3 | `#C79A67` | `#D2AE7B` | +| Success | `#6D8A72` | `#95B09A` | +| Danger | `#B86354` | `#DE9383` | + +Use one supporting accent per component whenever possible. + +Recommended page balance: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended settings: + +- body text: `18px` +- body line-height: `1.6` +- paragraphs: no wider than `70ch` +- labels and buttons: `16–18px` +- left-aligned body text +- concise headings +- no long all-caps passages + +--- + +## 6. Layout and spacing + +Use an 8-pixel spacing rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary button per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Place the error beside the affected field. +- Explain how to fix the problem. +- Preserve the user’s entered data. +- Use text or an icon as well as colour. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary action. +- Keep related controls close together. +- Use consistent button placement. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. + +--- + +## 9. Accessibility checks + +Before release: + +- test keyboard navigation +- verify visible focus states +- check text and button contrast +- test at 200% zoom +- connect labels to controls +- test light and dark modes separately +- use semantic HTML before ARIA + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FFF9F4; + --surface: #FFFFFF; + --surface-alt: #FFF2E7; + --text: #382920; + --muted: #79695F; + --border: #E6D2C3; + --primary: #FF8C4F; + --secondary: #DDE7EA; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #18110D; + --surface-alt: #251A15; + --text: #FBF2EC; + --muted: #D0BFB5; + --border: #62493B; + --primary: #FF9A63; + --secondary: #425C66; +} +``` + +--- + +## 11. Final rule + +When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html new file mode 100644 index 0000000..5e3683c --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Turquoise Blue — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Turquoise Blue system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Turquoise Blue palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html new file mode 100644 index 0000000..c70c9b7 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-login.html @@ -0,0 +1,829 @@ + + + + + + + Turquoise Blue — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Current +
+ +
+

Turquoise Blue

+

Fresh focus. Clear movement.

+

A fresh turquoise system anchored by deep navy and restrained warm accents.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md new file mode 100644 index 0000000..e2083d1 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/turquoise-blue/turquoise-blue-style-guide.md @@ -0,0 +1,321 @@ +# Turquoise Blue UI Style Guide + +A fresh turquoise system anchored by deep navy and restrained warm accents. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#F4FAFA` | Main page background | +| `--page-accent` | `#E2F0F1` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#EBF6F6` | Inputs and secondary regions | +| `--surface-strong` | `#D6E9E9` | Selected and elevated elements | +| `--text` | `#20363A` | Main text | +| `--muted` | `#62777B` | Secondary text | +| `--border` | `#C4DADB` | Borders and dividers | +| `--primary` | `#238C91` | Main action and brand colour | +| `--primary-hover` | `#176D72` | Primary hover and active state | +| `--secondary` | `#DDE5EE` | Secondary action | +| `--secondary-hover` | `#CCD8E5` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#010405` | Main dark background | +| `--page-accent` | `#041014` | Background depth | +| `--surface` | `#0A181B` | Cards and dialogs | +| `--surface-alt` | `#10262A` | Inputs and secondary regions | +| `--surface-strong` | `#1A3B40` | Selected and elevated elements | +| `--text` | `#EDF7F7` | Main text | +| `--muted` | `#B3C6C7` | Secondary text | +| `--border` | `#31545A` | Borders and dividers | +| `--primary` | `#45B8BC` | Main action and brand colour | +| `--primary-hover` | `#2E999E` | Primary hover and active state | +| `--secondary` | `#354E69` | Secondary action | +| `--secondary-hover` | `#45627F` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for fresh primary actions, progress and active navigation. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for navy-blue structure and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#5CA5A6` | `#72C0C1` | +| Accent 2 | `#6F83A1` | `#8296B5` | +| Accent 3 | `#C39A68` | `#D0AD7C` | +| Success | `#63886F` | `#8EB39A` | +| Danger | `#A86062` | `#D48E90` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #F4FAFA; + --surface: #FFFFFF; + --surface-alt: #EBF6F6; + --text: #20363A; + --muted: #62777B; + --border: #C4DADB; + --primary: #238C91; + --secondary: #DDE5EE; +} + +html[data-theme="dark"] { + --page: #010405; + --surface: #0A181B; + --surface-alt: #10262A; + --text: #EDF7F7; + --muted: #B3C6C7; + --border: #31545A; + --primary: #45B8BC; + --secondary: #354E69; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html new file mode 100644 index 0000000..2758638 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-dashboard.html @@ -0,0 +1,804 @@ + + + + + + + Warm Brown — Dashboard Demo + + + +
+ + +
+
+
+

Dashboard overview

+

A modern application example using the Warm Brown system.

+
+ +
+ + + +
+
+ +
+
+ Active projects +
12
+
+2 this week
+
+
+ Tasks completed +
84%
+
On track
+
+
+ Focus hours +
26.4
+
Compared with 22.8 last week
+
+
+ Messages waiting +
7
+
2 marked important
+
+
+ +
+
+
+
+

Weekly progress

+

Mock analytics card for testing surfaces, typography and chart colours.

+
+ Updated today +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
+
+
+

Project status

+

Simple progress indicators

+
+
+
+
+
Website refresh72%
+
+
+
+
Volunteer onboarding48%
+
+
+
+
Event planning86%
+
+
+
+
+ +
+
+
+

Today’s priorities

+

One section for focused next steps

+
+ 3 urgent +
+
+ + + +
+
+ +
+
+
+

Recent activity

+

Readable event feed for testing longer text lines

+
+
+
+
Design system updated

The Warm Brown palette was applied to buttons, cards and dashboards.

10 min ago
+
New accessibility review

Contrast and keyboard focus were checked in both light and dark mode.

45 min ago
+
Typography sample approved

Lexend and Atkinson Hyperlegible remain the chosen pairing for UI and reading text.

2 h ago
+
+
+ +
+
+
+

Team snapshot

+

Compact people module

+
+
+
+
AJ
+
PM
+
KM
+
LV
+
+

Four collaborators currently active in this workspace.

+
+ +
+
+
+

Typography sample card

+

To test the dashboard with headings, subheadings and paragraph text.

+
+
+
+

Typography sample

+

A modern editorial dashboard card heading

+

+ A concise subheading shows how Lexend behaves inside a polished application dashboard. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, + neque vitae facilisis luctus, justo sapien posuere lorem, sed cursus mauris + erat vel sem. Donec vitae lectus at mi tincidunt suscipit. Suspendisse + potenti. Sed porttitor, libero ac faucibus suscipit, mauris turpis pharetra + quam, ac consequat nisl ligula non justo. +

+
+
+
+
+
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html new file mode 100644 index 0000000..9c23e1c --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-login.html @@ -0,0 +1,829 @@ + + + + + + + Warm Brown — ADHD-Friendly Login Demo + + + + + +
+
+
+ + Cocoa +
+ +
+

Warm Brown

+

Grounded focus. Warm clarity.

+

A grounded brown system with clay warmth and muted blue-grey balance.

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md new file mode 100644 index 0000000..1fea16a --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/adhd-friendly-colour-variants/warm-brown/warm-brown-style-guide.md @@ -0,0 +1,321 @@ +# Warm Brown UI Style Guide + +A grounded brown system with clay warmth and muted blue-grey balance. + +This system keeps the interface ADHD-friendly by using calm surfaces, one clear primary colour, one quieter secondary colour and restrained supporting accents. + +--- + +## 1. Core principles + +- Use neutral surfaces for most of the page. +- Reserve the primary colour for the next important action. +- Use the secondary colour for optional or supporting actions. +- Use spacing and typography before adding more colour. +- Present one main task at a time. +- Avoid animation unless it communicates useful state. +- Never use colour as the only status signal. + +--- + +## 2. Light mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#FAF7F3` | Main page background | +| `--page-accent` | `#EFE6DD` | Subtle page depth | +| `--surface` | `#FFFFFF` | Cards and dialogs | +| `--surface-alt` | `#F6EFE8` | Inputs and secondary regions | +| `--surface-strong` | `#E8D9CC` | Selected and elevated elements | +| `--text` | `#392E28` | Main text | +| `--muted` | `#756961` | Secondary text | +| `--border` | `#DCCFC5` | Borders and dividers | +| `--primary` | `#8B5E3C` | Main action and brand colour | +| `--primary-hover` | `#6D452A` | Primary hover and active state | +| `--secondary` | `#DDE5E7` | Secondary action | +| `--secondary-hover` | `#CCD9DC` | Secondary hover state | + +--- + +## 3. Dark mode + +| Token | Value | Purpose | +|---|---:|---| +| `--page` | `#030201` | Main dark background | +| `--page-accent` | `#0A0705` | Background depth | +| `--surface` | `#17110D` | Cards and dialogs | +| `--surface-alt` | `#251A14` | Inputs and secondary regions | +| `--surface-strong` | `#39291F` | Selected and elevated elements | +| `--text` | `#F7F1EC` | Main text | +| `--muted` | `#C7BBB2` | Secondary text | +| `--border` | `#59483D` | Borders and dividers | +| `--primary` | `#B77A4D` | Main action and brand colour | +| `--primary-hover` | `#975F38` | Primary hover and active state | +| `--secondary` | `#3D555B` | Secondary action | +| `--secondary-hover` | `#4E6971` | Secondary hover state | + +--- + +## 4. Colour roles + +### Primary + +Use the primary colour for grounded primary actions, selected states and brand marks. + +Good uses: + +- main button +- active navigation +- selected controls +- important links +- compact brand details + +Do not use it on every surface. The primary colour should answer: + +> What should I do next? + +### Secondary + +Use the secondary colour for cool blue-grey balance and supporting controls. + +Good uses: + +- secondary buttons +- optional actions +- toolbars +- supporting cards +- inactive navigation + +The secondary colour should answer: + +> What else can I do? + +### Supporting accents + +| Role | Light | Dark | +|---|---:|---:| +| Accent 1 | `#A47758` | `#C08E67` | +| Accent 2 | `#6E8A8F` | `#7E9EA3` | +| Accent 3 | `#C49E69` | `#D2AF78` | +| Success | `#6D896F` | `#92AF96` | +| Danger | `#A65F4F` | `#D58D7C` | + +Use only one supporting accent inside a component unless there is a strong reason to use more. + +A useful page-level balance is: + +- **70%** neutral backgrounds and surfaces +- **20%** primary and secondary structure +- **10%** supporting accents and status colours + +--- + +## 5. Typography + +```css +--font-body: + "Atkinson Hyperlegible", + "Segoe UI", + Arial, + sans-serif; + +--font-ui: + "Lexend", + "Segoe UI", + Arial, + sans-serif; +``` + +Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help. + +Use **Lexend** for headings, buttons, navigation and labels. + +Recommended sizes: + +| Element | Size | +|---|---:| +| Body text | `18px` | +| Small text | `14–15px` | +| Form labels | `16–17px` | +| Buttons | `16–18px` | +| H1 | `42–64px` | +| H2 | `28–38px` | +| H3 | `21–26px` | + +Reading rules: + +- body line-height around `1.6` +- paragraphs below roughly `70ch` +- left-aligned body text +- no long all-caps passages +- bold used selectively +- short, concrete headings + +--- + +## 6. Layout and spacing + +Use an 8-pixel rhythm. + +```text +4px tiny adjustment +8px closely related elements +16px normal component spacing +24px groups inside a section +32px separation between sections +48px+ major page regions +``` + +Recommended widths: + +- forms: `400–480px` +- reading content: `680–760px` +- application layouts: `1040–1200px` + +Keep one clear purpose per card. Avoid deeply nested cards and heavy borders. + +--- + +## 7. Components + +### Primary button + +```css +background: var(--primary); +color: var(--on-primary); +``` + +Use one obvious primary action per task area. + +### Secondary button + +```css +background: var(--secondary); +color: var(--on-secondary); +``` + +Use for optional or reversible actions. + +### Inputs + +```css +background: var(--surface-alt); +border: 1px solid var(--border); +color: var(--text); +``` + +On focus: + +```css +border-color: var(--primary); +outline: 3px solid var(--focus); +``` + +### Validation + +- Put errors beside the affected field. +- Explain how to fix the problem. +- Preserve entered information. +- Use text or icons as well as colour. +- Reserve the danger colour for genuine errors or destructive actions. + +--- + +## 8. ADHD-friendly interaction rules + +- Present one main task at a time. +- Reduce optional decisions near the primary button. +- Keep related controls physically close. +- Use consistent action placement. +- Preserve entered data after errors. +- Avoid unexpected layout movement. +- Respect `prefers-reduced-motion`. +- Keep notifications short and actionable. +- Use progressive disclosure for advanced options. +- Do not hide critical actions behind unlabeled icons. + +--- + +## 9. Accessibility checks + +Before release: + +- Test keyboard navigation. +- Verify visible focus states. +- Check text and button contrast. +- Test at 200% zoom. +- Connect labels to form controls. +- Use semantic HTML before ARIA. +- Test light and dark modes separately. +- Check error messages with assistive technology when possible. + +--- + +## 10. Quick tokens + +```css +:root { + --page: #FAF7F3; + --surface: #FFFFFF; + --surface-alt: #F6EFE8; + --text: #392E28; + --muted: #756961; + --border: #DCCFC5; + --primary: #8B5E3C; + --secondary: #DDE5E7; +} + +html[data-theme="dark"] { + --page: #030201; + --surface: #17110D; + --surface-alt: #251A14; + --text: #F7F1EC; + --muted: #C7BBB2; + --border: #59483D; + --primary: #B77A4D; + --secondary: #3D555B; +} +``` + +--- + +## 11. Final rule + +When the design starts to feel busy, remove emphasis before adding another colour. + +The primary colour should identify the next action. The secondary should support it. Neutral surfaces should make the interface feel calm, stable and readable. + +--- + +## Typography sample card + +Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface. + +The demos load the fonts through the Google Fonts CSS API: + +```css +@import url( + "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" +); +``` + +Recommended use: + +- **Lexend** for the card heading, subheading, labels and badges +- **Atkinson Hyperlegible** for the paragraph and longer reading text + +Example structure: + +```html +
+

Typography sample

+

A calm and readable card heading

+

+ A concise subheading demonstrates Lexend at a smaller interface size. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+
+``` + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/dashboard-index.html b/adhd-friendly-dashboard-variants-v2 (1)/dashboard-index.html new file mode 100644 index 0000000..0b969de --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/dashboard-index.html @@ -0,0 +1,404 @@ + + + + + + ADHD-Friendly Dashboard Variants + + + +
+

Dashboard library

+

ADHD-Friendly Dashboard Variants

+

+ This overview contains dashboard demos for all colour schemes created so far, including the pure Ivory & Ink version and the new Smoky Teal Signal palette. + Every dashboard includes sidebar navigation, a top bar, stats cards, progress and activity sections, and a typography sample card. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + +
+

Smoky Teal Signal

+

Modern dashboard demo based on the supplied four-colour palette with a smoky neutral base, teal action colour and restrained red alerts.

+
+ Open dashboard + Open login + Open style guide +
+
+ +
+
+ + diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.css b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.css new file mode 100644 index 0000000..e1f630e --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.css @@ -0,0 +1,560 @@ +:root { + color-scheme: light; + + --font-body: "Atkinson Hyperlegible", + system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Arial, sans-serif; + --font-ui: "Lexend", + system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Arial, sans-serif; + + /* neutrals */ + --page: #F4F7F8; + --page-accent: #E6EDF0; + --surface: #FFFFFF; + --surface-alt: #F0F5F6; + --surface-strong: #D8E3E6; + + --text: #20272A; + --muted: #69757B; + --border: #C4D0D5; + + /* main / primary */ + --primary: #10B3BB; + --primary-hover: #0E9BA2; + --on-primary: #FDFEFE; + + /* secondary / structure */ + --secondary: #D8F2F3; + --secondary-hover: #C7E6E8; + --on-secondary: #1E2528; + + /* accents */ + --accent-1: #0C8E95; + --accent-2: #73D3D8; + --accent-3: #7BA38C; + + /* status */ + --success: #2F9B5C; + --danger: #E51A22; + --danger-soft: #FCE6E7; + + /* focus & shadows */ + --focus: rgba(16, 179, 187, 0.35); + --shadow-lg: 0 28px 70px rgba(8, 40, 46, 0.22); + --shadow-sm: 0 10px 24px rgba(8, 40, 46, 0.12); + + --radius-sm: 0.55rem; + --radius-md: 0.9rem; + --radius-lg: 1.5rem; +} + +html[data-theme="dark"] { + color-scheme: dark; + + --page: #050708; + --page-accent: #0A1114; + --surface: #10171A; + --surface-alt: #182126; + --surface-strong: #223238; + + --text: #F4F7F8; + --muted: #B0BEC5; + --border: #3A4A52; + + --primary: #10B3BB; + --primary-hover: #0C8E95; + --on-primary: #031416; + + --secondary: #13333A; + --secondary-hover: #18434C; + --on-secondary: #F4F7F8; + + --accent-1: #26C5CD; + --accent-2: #0A7177; + --accent-3: #66C49E; + + --success: #40B879; + --danger: #E51A22; + --danger-soft: #3E1416; + + --focus: rgba(16, 179, 187, 0.55); + --shadow-lg: 0 38px 96px rgba(0, 0, 0, 0.58); + --shadow-sm: 0 16px 38px rgba(0, 0, 0, 0.42); +} + +/* reset / base */ + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--font-body); + background: radial-gradient(circle at top left, + var(--page-accent), var(--page)); + color: var(--text); + display: flex; + align-items: center; + justify-content: center; + padding: 32px 16px; +} + +button, +input { + font: inherit; +} + +a { + color: var(--primary); + text-decoration-thickness: 0.08em; + text-underline-offset: 0.18em; +} + +a:hover { + color: var(--primary-hover); +} + +:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 3px; +} + +/* layout */ + +.shell { + max-width: 1080px; + width: 100%; + display: grid; + grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); + gap: 40px; + background: linear-gradient(135deg, + rgba(255,255,255,0.24), + rgba(255,255,255,0)); + backdrop-filter: blur(20px); + padding: 32px; + border-radius: 28px; + box-shadow: var(--shadow-lg); + border: 1px solid rgba(255,255,255,0.28); +} + +@media (max-width: 880px) { + .shell { + grid-template-columns: minmax(0, 1fr); + padding: 24px; + gap: 24px; + } +} + +/* brand column */ + +.brand { + display: flex; + flex-direction: column; + gap: 24px; +} + +.brand-mark { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.brand-sigil { + width: 32px; + height: 32px; + border-radius: 18px; + background: radial-gradient(circle at 30% 0%, + var(--primary), var(--accent-2)); + box-shadow: + 0 0 0 1px rgba(255,255,255,0.45), + 0 16px 32px rgba(8, 40, 46, 0.55); + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.brand-sigil::after { + content: ""; + position: absolute; + inset: 8px 9px; + border-radius: 999px; + border: 1px solid rgba(0, 0, 0, 0.22); + opacity: 0.9; +} + +.brand-sigil span { + width: 14px; + height: 14px; + border-radius: 6px; + border: 2px solid rgba(255,255,255,0.75); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); +} + +.brand-name { + font-family: var(--font-ui); + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 13px; + color: var(--muted); +} + +.brand-system { + font-family: var(--font-ui); + font-size: 13px; + color: var(--muted); +} + +.headline { + font-family: var(--font-ui); + font-weight: 500; + font-size: clamp(32px, 3.2vw, 40px); + letter-spacing: -0.03em; +} + +.headline span { + color: var(--primary); +} + +.lede { + margin-top: 8px; + max-width: 520px; + font-size: 17px; + line-height: 1.6; + color: var(--muted); +} + +.pill-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 18px; +} + +.pill { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 12px; + border-radius: 999px; + background: rgba(255,255,255,0.75); + border: 1px solid rgba(255,255,255,0.9); + font-size: 13px; + color: var(--muted); + backdrop-filter: blur(10px); +} + +.pill-dot { + width: 8px; + height: 8px; + border-radius: 999px; + background: var(--primary); +} + +.points { + margin-top: 18px; + display: grid; + gap: 8px; + font-size: 14px; + color: var(--muted); + padding: 0; +} + +.points li { + list-style: none; + display: flex; + gap: 8px; + align-items: flex-start; +} + +.points li span { + margin-top: 4px; + width: 14px; + height: 14px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,0.9); + background: linear-gradient(135deg, + var(--secondary), var(--primary)); +} + +.notice { + margin-top: 18px; + font-size: 13px; + color: var(--muted); +} + +.notice strong { + color: var(--accent-1); + font-weight: 500; +} + +/* form column */ + +.form-card { + background: radial-gradient(circle at 0% 0%, + rgba(255,255,255,0.2), rgba(255,255,255,0)); + border-radius: 24px; + padding: 20px 20px 18px; + border: 1px solid rgba(255,255,255,0.9); + box-shadow: var(--shadow-lg); + backdrop-filter: blur(18px); + position: relative; + display: flex; + flex-direction: column; + gap: 14px; +} + +.form-card::before { + content: ""; + position: absolute; + inset: -1px; + border-radius: inherit; + border: 1px solid rgba(16, 179, 187, 0.3); + opacity: 0; + pointer-events: none; + transition: opacity 160ms ease-out; +} + +.form-card:focus-within::before { + opacity: 1; +} + +.form-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; +} + +.form-title { + font-family: var(--font-ui); + font-size: 19px; + letter-spacing: -0.02em; +} + +.form-subtitle { + font-size: 13px; + color: var(--muted); +} + +.state-pill { + padding: 5px 10px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,0.85); + background: linear-gradient(135deg, + rgba(255,255,255,0.95), + rgba(255,255,255,0.8)); + font-size: 11px; + text-transform: uppercase; + letter-spacing: 0.09em; + color: var(--muted); +} + +.field-grid { + display: grid; + gap: 12px; +} + +.field { + display: grid; + gap: 4px; +} + +.field-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.field-label { + font-family: var(--font-ui); + font-size: 13px; + color: var(--muted); +} + +.input-shell { + display: flex; + align-items: center; + border-radius: 999px; + background: rgba(255,255,255,0.9); + border: 1px solid rgba(196, 208, 213, 0.9); + padding: 7px 12px; + gap: 8px; +} + +.input-shell:focus-within { + border-color: var(--primary); + box-shadow: + 0 0 0 1px var(--primary), + 0 0 0 4px var(--focus); +} + +.input-icon { + width: 16px; + height: 16px; + border-radius: 5px; + background: linear-gradient(135deg, + var(--secondary), var(--primary)); + opacity: 0.85; +} + +input[type="email"], +input[type="password"] { + border: none; + outline: none; + background: transparent; + font: inherit; + color: var(--text); + width: 100%; +} + +input::placeholder { + color: rgba(105,117,123,0.8); +} + +.field-hint { + font-size: 12px; + color: var(--muted); +} + +.helper-message { + display: none; + margin: 6px 0 0; + padding: 6px 10px; + color: var(--danger); + background: var(--danger-soft); + border-left: 3px solid var(--danger); + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; + font-size: 12px; +} + +.helper-message.visible { + display: block; +} + +.actions-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + margin-top: 8px; +} + +.primary-btn { + border: none; + border-radius: 999px; + padding: 9px 20px; + font-family: var(--font-ui); + font-size: 14px; + font-weight: 500; + letter-spacing: 0.04em; + text-transform: uppercase; + background: radial-gradient(circle at 0% 0%, + #E8FBFC, var(--primary)); + color: var(--on-primary); + box-shadow: 0 14px 28px rgba(8, 40, 46, 0.6); + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + transition: + transform 120ms ease-out, + box-shadow 120ms ease-out, + background 120ms ease-out; +} + +.primary-btn span:first-child { + width: 18px; + height: 18px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,0.85); + background: linear-gradient(135deg, + rgba(255,255,255,0.95), + rgba(255,255,255,0.7)); +} + +.primary-btn:hover { + background: radial-gradient(circle at 0% 0%, + #DFF7F8, var(--primary-hover)); + transform: translateY(-1px); + box-shadow: 0 18px 36px rgba(8, 40, 46, 0.7); +} + +.primary-btn:active { + transform: translateY(0); + box-shadow: 0 10px 20px rgba(8, 40, 46, 0.7); +} + +.ghost-link { + border: none; + background: transparent; + font-family: var(--font-ui); + font-size: 13px; + color: var(--muted); + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 3px; + cursor: pointer; +} + +.meta-row { + margin-top: 8px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 10px; + font-size: 11px; + color: var(--muted); +} + +/* theme toggle */ + +.toggle-row { + margin-top: 12px; + display: flex; + justify-content: flex-end; + gap: 8px; + align-items: center; + font-size: 12px; + color: var(--muted); +} + +.theme-toggle { + border-radius: 999px; + padding: 4px; + border: 1px solid var(--border); + background: rgba(255,255,255,0.9); + display: inline-flex; + align-items: center; + gap: 4px; +} + +.theme-button { + border: none; + border-radius: 999px; + padding: 4px 10px; + font-size: 11px; + background: transparent; + color: var(--muted); + cursor: pointer; +} + +.theme-button[data-active="true"] { + background: var(--secondary); + color: var(--on-secondary); +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} \ No newline at end of file diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.html b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.html new file mode 100644 index 0000000..eed6a9f --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.html @@ -0,0 +1,174 @@ + + + + + Signal – Cyan & Red Accent Login + + + + + +
+
+
+
+ +
+
Signal
+
Cyan & Red Accent
+
+
+
+ +
+

+ Less noise. One clear signal. +

+

+ A cyan-led system tuned for longer, focused sessions, + with red reserved for clear, honest error states. +

+ +
+
+ Private by design +
+
+ Accessible +
+
+ Distraction-aware +
+
+ +
    +
  • + +
    Clear visual hierarchy and predictable navigation.
    +
    • +
  • + +
    Cyan primary used only for the next main action.
    +
    • +
  • + +
    Red reserved for genuine errors and urgent states.
    +
    • +
+ +

+ Signal avoids surplus decisions near the main action + to reduce cognitive load. +

+
+
+ +
+
+
+

Sign in

+

+ Continue to your focused workspace. +

+
+ +
+ +
+
+
+ +
+
+ + +
+

+ Use the address you registered with this space. +

+

+ Enter a valid email address. +

+
+ +
+
+ +
+
+ + +
+

+ We never show passwords in plain text. +

+

+ Your password must contain at least eight characters. +

+
+ +
+ + +
+ +
+
+ By signing in, you agree to the terms and privacy policy. +
+ +
+
+ +
+ Appearance +
+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.js b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.js new file mode 100644 index 0000000..3cac83e --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-cyan-red.js @@ -0,0 +1,79 @@ +(() => { + const root = document.documentElement; + const themeButtons = document.querySelectorAll('.theme-button'); + const loginForm = document.getElementById('login-form'); + const emailInput = document.getElementById('email'); + const passwordInput = document.getElementById('password'); + const emailError = document.getElementById('email-error'); + const passwordError = document.getElementById('password-error'); + + const STORAGE_KEY = 'signal-cyan-red-theme'; + + function setTheme(theme) { + root.setAttribute('data-theme', theme); + themeButtons.forEach((button) => { + const active = button.dataset.theme === theme; + button.dataset.active = active ? 'true' : 'false'; + button.setAttribute('aria-checked', active ? 'true' : 'false'); + }); + try { + localStorage.setItem(STORAGE_KEY, theme); + } catch { + // ignore storage errors + } + } + + function initTheme() { + let theme = 'light'; + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'light' || stored === 'dark') { + theme = stored; + } else if (window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches) { + theme = 'dark'; + } + } catch { + // keep default + } + setTheme(theme); + } + + themeButtons.forEach((button) => { + button.addEventListener('click', () => { + const nextTheme = button.dataset.theme || 'light'; + setTheme(nextTheme); + }); + }); + + function validateEmail() { + const invalid = !emailInput.validity.valid; + emailInput.setAttribute('aria-invalid', String(invalid)); + emailError.classList.toggle('visible', invalid); + return !invalid; + } + + function validatePassword() { + const invalid = !passwordInput.validity.valid; + passwordInput.setAttribute('aria-invalid', String(invalid)); + passwordError.classList.toggle('visible', invalid); + return !invalid; + } + + loginForm.addEventListener('submit', (event) => { + event.preventDefault(); + + const okEmail = validateEmail(); + const okPassword = validatePassword(); + + if (okEmail && okPassword) { + // Demo only: no backend connection + alert('Demo only – this login form is not connected to a backend.'); + } + }); + + emailInput.addEventListener('blur', validateEmail); + passwordInput.addEventListener('blur', validatePassword); + + initTheme(); +})(); \ No newline at end of file diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.css b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.css new file mode 100644 index 0000000..12080a9 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.css @@ -0,0 +1,472 @@ +/* paste the same token block used in signal-admin.css here */ + +/* base */ + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + font-family: var(--font-body); + background: radial-gradient(circle at top left, + var(--page-accent), var(--page)); + color: var(--text); +} + +button, +input, +select { + font: inherit; +} + +:focus-visible { + outline: 3px solid var(--focus); + outline-offset: 3px; +} + +/* layout shell */ + +.app-shell { + display: grid; + grid-template-columns: 240px minmax(0, 1fr); + min-height: 100vh; +} + +/* sidebar (same as sessions) */ + +.sidebar { + background: #0B171B; + color: #F4F7F8; + padding: 18px 16px; + display: flex; + flex-direction: column; +} + +.sidebar-brand { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.sidebar-sigil { + width: 28px; + height: 28px; + border-radius: 16px; + background: radial-gradient(circle at 20% 0%, + var(--primary), var(--accent-1)); + box-shadow: + 0 0 0 1px rgba(255,255,255,0.3), + 0 12px 24px rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; +} + +.sidebar-sigil span { + width: 12px; + height: 12px; + border-radius: 6px; + border: 2px solid rgba(255,255,255,0.8); +} + +.sidebar-title { + display: flex; + flex-direction: column; +} + +.sidebar-name { + font-family: var(--font-ui); + font-size: 13px; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.sidebar-sub { + font-size: 11px; + color: #B0BEC5; +} + +.sidebar-nav { + display: flex; + flex-direction: column; + gap: 4px; +} + +.nav-item { + border: none; + border-radius: 6px; + padding: 7px 10px; + text-align: left; + font-family: var(--font-ui); + font-size: 13px; + color: #CFD8DC; + background: transparent; + cursor: pointer; +} + +.nav-item--active { + background: rgba(16, 179, 187, 0.18); + color: #E0F7FA; +} + +/* main area */ + +.main-area { + padding: 20px 22px 26px; + display: flex; + flex-direction: column; + gap: 18px; +} + +/* top bar */ + +.top-bar { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 16px; +} + +.page-title { + margin: 0; + font-family: var(--font-ui); + font-size: 22px; + letter-spacing: -0.02em; +} + +.page-subtitle { + margin: 6px 0 0; + font-size: 13px; + color: var(--muted); +} + +.top-bar-right { + display: flex; + align-items: center; + gap: 10px; +} + +.theme-toggle { + border-radius: 999px; + padding: 4px; + border: 1px solid var(--border); + background: var(--surface-alt); + display: inline-flex; + gap: 4px; +} + +.theme-button { + border: none; + border-radius: 999px; + padding: 4px 10px; + font-size: 11px; + background: transparent; + color: var(--muted); + cursor: pointer; +} + +.theme-button[data-active="true"] { + background: var(--secondary); + color: var(--on-secondary); +} + +.profile-chip { + border-radius: 999px; + border: 1px solid var(--border); + padding: 4px 10px; + background: var(--surface); + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; +} + +.profile-initials { + width: 18px; + height: 18px; + border-radius: 999px; + background: var(--primary); + color: var(--on-primary); + font-size: 10px; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.profile-name { + font-size: 13px; +} + +/* toolbar */ + +.toolbar { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 16px; +} + +.toolbar-left { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.field-inline { + display: flex; + flex-direction: column; + gap: 4px; +} + +.field-label { + font-size: 11px; + font-family: var(--font-ui); + color: var(--muted); +} + +.field-inline input, +.field-inline select { + min-width: 180px; + padding: 6px 10px; + border-radius: 6px; + border: 1px solid var(--border); + background: var(--surface-alt); + color: var(--text); +} + +.toolbar-right { + display: flex; + gap: 8px; +} + +/* buttons */ + +.primary-btn { + border: none; + border-radius: 999px; + padding: 7px 14px; + font-family: var(--font-ui); + font-size: 13px; + font-weight: 500; + letter-spacing: 0.04em; + text-transform: uppercase; + background: radial-gradient(circle at 0% 0%, + #E8FBFC, var(--primary)); + color: var(--on-primary); + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; +} + +.primary-btn span:first-child { + width: 14px; + height: 14px; + border-radius: 999px; + border: 1px solid rgba(255,255,255,0.85); + background: linear-gradient(135deg, + rgba(255,255,255,0.95), + rgba(255,255,255,0.7)); +} + +.primary-btn--small { + padding: 5px 10px; + font-size: 12px; +} + +.secondary-btn { + border-radius: 999px; + border: 1px solid var(--border); + padding: 7px 12px; + font-size: 13px; + background: var(--surface-alt); + color: var(--text); + cursor: pointer; +} + +.danger-btn { + border-radius: 999px; + border: 1px solid var(--danger); + padding: 7px 12px; + font-size: 13px; + background: var(--danger); + color: #FDF2F3; + cursor: pointer; +} + +/* main layout grid */ + +.layout-grid { + display: grid; + grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); + gap: 16px; +} + +/* panels */ + +.panel { + background: var(--surface); + border-radius: 10px; + padding: 14px 14px 16px; + border: 1px solid var(--border); + box-shadow: var(--shadow-sm); +} + +.panel-header { + margin-bottom: 10px; +} + +.panel-title { + margin: 0; + font-family: var(--font-ui); + font-size: 15px; +} + +.panel-subtitle { + margin: 4px 0 0; + font-size: 12px; + color: var(--muted); +} + +/* table */ + +.table-shell { + margin-top: 6px; + border-radius: 8px; + border: 1px solid var(--border); + background: var(--surface-alt); + overflow: hidden; +} + +.data-table { + width: 100%; + border-collapse: collapse; + font-size: 12px; +} + +.data-table th, +.data-table td { + padding: 7px 10px; + text-align: left; +} + +.data-table thead { + background: var(--surface-strong); +} + +.data-table tbody tr:nth-child(even) { + background: var(--surface); +} + +.status { + display: inline-flex; + border-radius: 999px; + padding: 2px 8px; + font-size: 11px; +} + +.status--ok { + background: rgba(47, 155, 92, 0.12); + color: var(--success); +} + +.status--warn { + background: rgba(209, 138, 46, 0.12); + color: var(--warn); +} + +.status--error { + background: rgba(229, 26, 34, 0.12); + color: var(--danger); +} + +.table-footer { + margin-top: 8px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: var(--muted); +} + +/* detail panel */ + +.detail-empty[data-state="empty"] { + font-size: 13px; + color: var(--muted); +} + +.detail-body[data-state="active"] { + display: none; +} + +.detail-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + margin: 8px 0 12px; + font-size: 12px; +} + +.detail-list dt { + font-family: var(--font-ui); + font-size: 11px; + color: var(--muted); +} + +.detail-list dd { + margin: 2px 0 0; +} + +.detail-preferences h3 { + margin: 0 0 4px; + font-size: 13px; + font-family: var(--font-ui); +} + +.detail-flags { + list-style: none; + padding: 0; + margin: 6px 0 10px; + font-size: 12px; + color: var(--muted); + display: grid; + gap: 4px; +} + +.flag-dot { + display: inline-block; + width: 8px; + height: 8px; + border-radius: 999px; + margin-right: 6px; +} + +.flag-dot--enabled { + background: var(--primary); +} + +.flag-dot--disabled { + background: var(--border); +} + +.detail-actions { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} \ No newline at end of file diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.html b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.html new file mode 100644 index 0000000..825c8b8 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.html @@ -0,0 +1,258 @@ + + + + + Signal Admin – Users + + + + + +
+ + +
+
+
+

Users

+

+ Manage access, roles and distraction-aware preferences per user. +

+
+
+
+ + +
+ +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
+
+

User list

+

+ Cyan marks primary admin actions. Red is reserved for destructive updates. +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + NameEmailRoleStatusSessions
Alex Riveraalex@example.orgAdminActive42
Lee Chenlee@example.orgMaintainerActive18
Sam K.sam@example.orgMemberInvited0
Jules Hartjules@example.orgMemberSuspended7
+
+
+
+ Showing 4 of 128 users. +
+
+ + +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.js b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.js new file mode 100644 index 0000000..90f2105 --- /dev/null +++ b/adhd-friendly-dashboard-variants-v2 (1)/signal-dashboard.js @@ -0,0 +1,57 @@ +(() => { + const root = document.documentElement; + const themeButtons = document.querySelectorAll('.theme-button'); + const STORAGE_KEY = 'signal-admin-theme'; + + function setTheme(theme) { + root.setAttribute('data-theme', theme); + themeButtons.forEach((button) => { + const active = button.dataset.theme === theme; + button.dataset.active = active ? 'true' : 'false'; + button.setAttribute('aria-checked', active ? 'true' : 'false'); + }); + try { + localStorage.setItem(STORAGE_KEY, theme); + } catch { + // ignore + } + } + + function initTheme() { + let theme = 'light'; + try { + const stored = localStorage.getItem(STORAGE_KEY); + if (stored === 'light' || stored === 'dark') { + theme = stored; + } else if (window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches) { + theme = 'dark'; + } + } catch { + // keep default + } + setTheme(theme); + } + + themeButtons.forEach((button) => { + button.addEventListener('click', () => { + const nextTheme = button.dataset.theme || 'light'; + setTheme(nextTheme); + }); + }); + + // Simple detail binding: in a real app you’d map row cells to detail fields + const rows = document.querySelectorAll('#user-table tbody tr'); + const detailEmpty = document.querySelector('.detail-empty'); + const detailBody = document.querySelector('.detail-body'); + + rows.forEach((row) => { + row.addEventListener('click', () => { + detailEmpty.style.display = 'none'; + detailBody.style.display = 'block'; + // You can read row.cells here and update #detail-* elements. + }); + }); + + initTheme(); +})(); \ No newline at end of file diff --git a/ai-first-version-instructions.md b/ai-first-version-instructions.md new file mode 100644 index 0000000..d473366 --- /dev/null +++ b/ai-first-version-instructions.md @@ -0,0 +1 @@ +Hey I want to create a template for a flask app. It has to have a login and a template index page and a login page. It only uses sqlite. I need a .md file that my cli AI can read to help understand the bulding of that template. So I need it to be in a step/by/step mentor like document. \ No newline at end of file diff --git a/anthracite-variants.png b/anthracite-variants.png new file mode 100644 index 0000000..4e896cd Binary files /dev/null and b/anthracite-variants.png differ diff --git a/artifact-5323f130-05e0-4e34-9d47-a6285c2c0be6-0.html b/artifact-5323f130-05e0-4e34-9d47-a6285c2c0be6-0.html new file mode 100644 index 0000000..f6cb085 --- /dev/null +++ b/artifact-5323f130-05e0-4e34-9d47-a6285c2c0be6-0.html @@ -0,0 +1,205 @@ + + + + + + + + + + + + + + + ADHS-freundliche Todos Liste + + + +

ADHS-freundliche Todos Liste

+
    +
  • +
    + Fenster aufmachen +
    • +
  • +
    + Schlüssel holen +
    • +
  • +
    + Wäsche sammeln +
    • +
  • +
    + Aufbietungsgeschichte recherchieren +
    • +
  • +
    + Resultat von Aufbietungsgeschichte an Florian schicken +
    • +
  • +
    + Anrufen bei der Ergotherapie +
    • +
  • +
    + EMAIL? +
    • +
  • +
    + Fliegending holen kombi mit Fenster +
    • +
  • +
    + Hammer mitnehmen +
    • +
  • +
    + Sachen für die Vor Ort Arbeit vorbereiten +
    • +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/artifact-5b3e5cc0-3473-4278-ac25-cbd563776f80-0.html b/artifact-5b3e5cc0-3473-4278-ac25-cbd563776f80-0.html new file mode 100644 index 0000000..32f9bb0 --- /dev/null +++ b/artifact-5b3e5cc0-3473-4278-ac25-cbd563776f80-0.html @@ -0,0 +1,257 @@ + + + + + + + + + + + + + + Signal UI – Orange Accent + + + + +
+
+ +
+
+ +
+
Signal
+
Orange Accent
+
+
+
+
+

Less noise. One clear signal.

+

+ A calm system with a single orange accent for next actions. + Designed for longer sessions, focused work and distraction‑aware sign‑in. +

+
+
Private by design
+
Accessible
+
Distraction‑aware
+
+
    +
  • Clear visual hierarchy and predictable navigation.
    • +
  • Low‑noise colours tuned for longer, calmer sessions.
    • +
  • Readable typography with generous spacing and line height.
    • +
+

+ Signal keeps one primary path per screen and avoids surplus decisions near the main action. +

+
+
+ +
+
+
+

Sign in

+

Continue to your distraction‑aware workspace.

+
+ +
+ +
+
+ +
+ + +
+

Use the address you registered with this space.

+
+ +
+ +
+ + +
+

We never show passwords in plain text.

+
+
+ +
+ + +
+ +
+
By signing in, you agree to the terms and privacy policy.
+ +
+ +
+ Appearance +
+ + +
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/artifact-d3978d29-7d27-4ce8-b60b-e85223b2308f-8.html b/artifact-d3978d29-7d27-4ce8-b60b-e85223b2308f-8.html new file mode 100644 index 0000000..a9487ab --- /dev/null +++ b/artifact-d3978d29-7d27-4ce8-b60b-e85223b2308f-8.html @@ -0,0 +1,325 @@ + + + + + + + + + + + + + +Light / Dark Demo – Portfolio / Product Page + + + + + + + + +
+
+

Welcome to Our Portfolio

+

Showcasing our best work and creative solutions.

+ +
+
+ + +
+

Featured Projects

+
+
+ Project 1 +
+

Project One

+

Short description of the project, highlighting key features.

+ +
+
+
+ Project 2 +
+

Project Two

+

A brief overview of what this project achieved.

+ +
+
+
+ Project 3 +
+

Project Three

+

Highlights, challenges, and outcomes.

+ +
+
+
+
+ + +
+

Image Gallery

+
+ Gallery 1 + Gallery 2 + Gallery 3 + Gallery 4 +
+
+ + +
+
+

About

+

We create web experiences that are beautiful, functional, and inclusive.

+
+
+

Links

+ +
+
+

Social

+
+ 🐦 + 💼 + 📸 +
+
+
+

© 2026 MySite. All rights reserved.

+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/artifact-dd189d6b-9192-4a35-8beb-2760b91b8644-0.html b/artifact-dd189d6b-9192-4a35-8beb-2760b91b8644-0.html new file mode 100644 index 0000000..dff0260 --- /dev/null +++ b/artifact-dd189d6b-9192-4a35-8beb-2760b91b8644-0.html @@ -0,0 +1,361 @@ + + + + + + + + + + + + + + + Color Palette Comparison + + + + + +
+
+

Regular (Option A – Lavender)

+ +
+ +
+
+

UI Elements Showcase

+

Soft pastel palette optimized for low cognitive load and ADHD-friendly readability.

+
+ +
+

Buttons

+
+ + +
+
+ +
+

Status Alerts / Toasts

+
✓ Task completed successfully.
+
⚠ Please review your configuration.
+
✕ Failed to sync data.
+
+ +
+

Form Field

+
+ + +
+
+ +
+

Data Table

+
+ + + + + + + + + +
IDProject NameStatusPriority
001Q3 MarketingActiveHigh
002App RefactorIn ReviewMedium
003AnalyticsPausedLow
+
+
+ +
+

Interactive List

+
    +
  • 📄 Q4_Budget_Draft.docx
    • +
  • 📄 Design_System_v2.pdf
    • +
  • 📄 User_Research_Findings.pptx
    • +
+
+ +
+

Links & Typography

+

Explore the knowledge base for detailed documentation.

+

Secondary text maintains readability while visually receding from primary content.

+
+
+ + +
+ + +
+
+

High-Contrast (Complementary)

+ +
+ +
+
+

UI Elements Showcase

+

Deepened saturation & lightness for WCAG AA compliance. Maintains calming hue family.

+
+ +
+

Buttons

+
+ + +
+
+ +
+

Status Alerts / Toasts

+
✓ Task completed successfully.
+
⚠ Please review your configuration.
+
✕ Failed to sync data.
+
+ +
+

Form Field

+
+ + +
+
+ +
+

Data Table

+
+ + + + + + + + + +
IDProject NameStatusPriority
001Q3 MarketingActiveHigh
002App RefactorIn ReviewMedium
003AnalyticsPausedLow
+
+
+ +
+

Interactive List

+
    +
  • 📄 Q4_Budget_Draft.docx
    • +
  • 📄 Design_System_v2.pdf
    • +
  • 📄 User_Research_Findings.pptx
    • +
+
+ +
+

Links & Typography

+

Explore the knowledge base for detailed documentation.

+

Secondary text maintains readability while visually receding from primary content.

+
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/aufgebotsverfahren-fahrzeugbrief.md b/aufgebotsverfahren-fahrzeugbrief.md new file mode 100644 index 0000000..e57b293 --- /dev/null +++ b/aufgebotsverfahren-fahrzeugbrief.md @@ -0,0 +1,46 @@ +# Aufgebotsverfahren — Zulassungsbescheinigung Teil II (Fahrzeugbrief) + +## Ausgangslage + +Die Freundin hat vor 1,5 Jahren ein Auto gekauft und nie die Zulassungsbescheinigung Teil II (den "Brief", der das Eigentum belegt) erhalten. Bisher wurde nur der Verkäufer kontaktiert — die Zulassungsstelle noch nicht. Das ist der entscheidende nächste Schritt, denn das Aufgebotsverfahren läuft unabhängig vom Verkäufer über die Behörde. + +## Benötigte Unterlagen + +- Personalausweis oder Reisepass +- Kaufvertrag (falls vorhanden) — ersatzweise: Zahlungsnachweis, Rechnung, Schriftverkehr mit dem Verkäufer +- Zulassungsbescheinigung Teil I (falls das Auto schon zugelassen ist) +- Eidesstattliche Versicherung, dass sie den Teil II nicht besitzt (wird meist vor Ort abgegeben) +- Falls Diebstahl statt "nie erhalten": Diebstahlanzeige der Polizei +- Bei Fahrzeugen älter als 3 Jahre: ggf. aktueller HU-Bericht (TÜV) + +## Schritte — vorher + +1. Klären, ob das Auto überhaupt schon zugelassen ist (Kennzeichen, Fahrzeugschein vorhanden?) +2. Alle vorhandenen Nachweise sammeln: Kaufvertrag, Kontoauszüge, Nachrichten mit dem Verkäufer +3. Nicht länger auf den Verkäufer warten — direkt zur Behörde + +## Schritte — während (bei der Zulassungsstelle) + +1. Termin bei der zuständigen Zulassungsstelle vereinbaren — zuständig ist die Stelle, die dem Fahrzeug **zuletzt** ein Kennzeichen zugeteilt hat (kann die des Vorbesitzers sein) +2. Vor Ort: Verlust/Nichterhalt melden, eidesstattliche Versicherung abgeben, Unterlagen vorlegen +3. Zulassungsstelle beantragt beim Kraftfahrt-Bundesamt die Aufbietung — Seriennummer wird im Verkehrsblatt veröffentlicht +4. Wartefrist: ca. 14 Tage nach Veröffentlichung, insgesamt meist **3–6 Wochen** +5. Zweiter Termin nach Fristablauf: neue Zulassungsbescheinigung Teil II wird ausgestellt (ggf. auch neuer Teil I, da beide nur zusammen ausgegeben werden) + +## Kosten + +Insgesamt meist **70–100 €** (Aufbietung + Ausstellung) + +## Wichtig währenddessen + +- Das Auto darf ganz normal weitergefahren werden +- Nur Verkauf, Ab- oder Ummeldung sind ohne Teil II blockiert + +## Konkreter nächster Schritt + +Anruf oder Online-Terminbuchung bei der zuständigen Zulassungsstelle mit der Frage: *"Ich habe beim Kauf vor 1,5 Jahren die Zulassungsbescheinigung Teil II nie erhalten, wie leite ich das Aufgebotsverfahren ein?"* Kaufvertrag und Personalausweis reichen als erste Grundausstattung zum Termin. + +--- + +> **Getan:** Klärung der Ausgangslage — fehlendes Dokument identifiziert (ZB Teil II), Ablauf und Unterlagen für das Aufgebotsverfahren zusammengestellt. +> **Gelernt:** Das Verfahren läuft über die Zulassungsstelle, unabhängig vom Verkäufer — der bisherige Kontaktversuch mit ihm war nicht der entscheidende Hebel. diff --git a/chatgpt versuch/Chrystal_Math_CI_Package.zip b/chatgpt versuch/Chrystal_Math_CI_Package.zip new file mode 100644 index 0000000..d69e4b5 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package.zip differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.docx b/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.docx new file mode 100644 index 0000000..3d9ac27 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.docx differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.pdf b/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.pdf new file mode 100644 index 0000000..ef4ba32 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/Chrystal_Math_CI_Design_Guide.pdf @@ -0,0 +1,540 @@ +%PDF-1.4 +% ReportLab Generated PDF document (opensource) +1 0 obj +<< +/F1 2 0 R /F2+0 19 0 R /F3+0 23 0 R /F4+0 27 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/Contents 31 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +4 0 obj +<< +/Contents 32 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +5 0 obj +<< +/BitsPerComponent 8 /ColorSpace /DeviceRGB /Filter [ /ASCII85Decode /DCTDecode ] /Height 650 /Length 156651 /Subtype /Image + /Type /XObject /Width 1488 +>> +stream +s4IA0!"_al8O`[\!<<*#!!*'"s4[N@!!<9(!WiE*!WiE*!s8W."p>&3"9\u7"pG2;#RUnF#RLeE$kEaR$P!ON#n7IU%M'*^&J,9X&eblh'+YWc&HCJb6NI8k!sA]/#Qt89&.8dP&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.fBa&.nlW!"fJ10ZOeE%*6F"?A;UOtZ1LbBV#mqFa(`=5<-7:2j.Ps"@2`NfY6UX@47n?3D;cHat='/U/@q9._B4u!oF*)PJGBeCZK7nr5LPUeEP*;,qQC!u,R\HRQV5C/hWN*81['d?O\@K2f_o0O6a2lBFdaQ^rf%8R-g>V&OjQ5OekiqC&o(2MHp@n@XqZ"J6*ru?D!%;)SAnPdkC3+K>G'A1VH@gd&KnbA=M2II[Pa.Q$R$jD;USO``Vl6SpZEppG[^WcW]#)A'`Q#s>ai`&\eCE.%f\,!]J/?pjRSL6(oDjLX]_'/[#*6cS$rKJW.)lKq!'Nlt+6T(R$7Go#V']lPj48_kF%oqS^:-ig$+72b*8'>G6UJOaNQ!KigXTqo[5#(]#E4XgWaNjQKu!9/rWOD)K&V!gPQH)8e8.7SZA!!b>gdDdRSF$KuD'R/\l5R2[68(NVq!C\!"P]Z.T!#Y#kBV_:)i1;@cksg*b*;e(`erQpZ/H?%.;+K2rF3bO#"%mR[dSc*soEg7,epqEtoQ9Oe>Y_3YV8mU*#@8iE,+&AH*U,TQ99-lLfHu+LNhVjC;W)2i-dmn[iXc8?1X.ApV$H7B/3AYW3ms'qP[NMgU[(H'-XN%Oi6l,FV'@#VTE>;JMF%IKV(ZX]!`G5N:4E:03:/uKU%b>;;3GUc"+iZa39-G^PM6ci!'-kB70\8YhMuT536*kCTE+ul.UKJ#:8\d+U6:c2oq]h4#Gi,XTMPYX+'MnLBE9hV'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mnl0.-J8k)='p\#6p2M;=-XnJ.DM)O[UD;!!8B^RKcP[!'Q;Hd[**->#,'kJ.KMS.)lGt`;gSc`tW$Te6lhJciK?^3MMICoVM"A_\r-?p#PX9NqIb@d!b*uKYYl-"Cn8]De`Nseq)Q80QY[G'Hbu%9HX',,cB4;n2*,*J2`TFB0K*9*$*.4>aU.-K0J*qWk#V#V3XBEEaVZiGGN@[EU-ids2bTEN4OV<3dd!&RU&H;F\84AjOa6gHu@/LO.FhLHE4i6XGHGSCX$"2ARN%g%Upc_U^a`;gpX#fRc\e5-5G'Vh?9T3=!)5R'G6-pH-W!D$p!!e:c-d6YmL[O;-N1n5&1M?$g?oV79I!%&..:=L@q70"?AUSS+`blAc_'FHR`!!g1Sj49.r4&>o*k*,%&oUl;_"0WD[70"$mo1FIr%!p8$`co<'U66;#GiOOOj,Kg4fJoT[(WuH+h5Y53"Ff0/i2(1%Q_r;T2A*cC'HIe_'Y'G6,tf(ED*Z:JW:1$!7?hdJ2>PMOe+]a"19WZ;?=nY4/WsmlV&ofEcY"=36#XIV,=dRTL0(W%VQuVPl,MmO+*;s`c=&X/j2WPk*#c`!(4do8pT\Mpb?i)"aKJ!UiOl#FYm$!'='3QeI;s1X_;jQkU$p!2*4e70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"$!70"d4qU;tC84T>G"$&2IP*UV*:@u5FU4<_B*0/MgAr^O)k*I-rSS:@03M9c*rfdC;RT8G<%2e)UfLuB?aJ87"h\t%pB3GlV#ij8dA.,>R\tZL=+>L4(t:dTI`#C[%qbnBVjtBXT;i15*WdlUE!a-"58=YBHEG=:k->9YHskg"rk>EOQ*T5qpprQpnedL[Qh,*h2X_M%R.8ZG$uV,49#:2r=#b9d=[HngM%2+,EC=opsT+S'VGd:@D%VbGGW?X'V5&mH?jEmC*;\'uUQ2\]F%]*sV9cOL*.c.VB^:Oq"OZ(f=DpsF1idn?JWYo=O$c16+>aUM999(c*)H]HT!WKp?@=7cF$PAe[0N;q@Y'C:0qZ=??YW153R9O8;Z"l-RK,D?5bM"tl=^3=%4BSj!fTqU1I8i6%p[N$!#0Q9UD]_^!'[-@MERq/#(Qa'#*3LZc_V+tMC>\:`W[4oK<6TcT]VVpk)ZVdSJ`9?!p@%-:2+^>9do8T'Z/cfr+PrSJ_)^u:a$*)ifn&7_Nu/+5W/_9#c/L^BZIe8rFdP:N)B]D97]`gd[70b:6]8S:>:D^C'+=hBFBV1O/4lObc3gU_Mu+k1KH@-N0gdr54LkYeB-B%/!YWAR)_gD*"Skh#Ho+I!b3rU=!p-[gJ%p5.1YADaJ@uUiW(qpR,W_#*n8UI02KTKH4]Kk7hgAc0PO\/H^[m^MG+UI`1YPB^uga>O*V!Ya'@)>;h3mgUr=GeV&Y\f1$qFY!!h5Bi6l6CM?Z/h!KTiF?J)$e-ij0YcWWq%:]]%63qGc[:]P1'M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?$s2aj):so1'Xj"1Q^;:^n*=I;%h(1q:L03QLALlm47n00O!hV(pUg99+EKmFI?#"0eF2BK2jQc`JQ4ido_^,EYWMgU.lp*RChk,UN_DBg3Mb"U.U&jVe:T%X=lPm7IRQ8d\E5\!gQDVrJcVJ2kSWBIfGs\IMDIi4C%]@ad)&:W9;'8(Np=t<&3R?C1]f<.?7fu(U<@%;"J"b&q`uTk'F48^3mEQ6E4uc]V.3mJESn!gCZ6@8'%Vg3ILK,SgW(?8D"Nh^ZH-Ie9"]@.i5OY:;N-/_3!5=-ifP0Lc'U80ap<=aY3f4*`2#Sig8jUI20h@c=]dV0G8WG4d5Ze<2*n4&U"sHd_J7$33hL-p2T3V'D#MR2DS`N-\ACZtIgRN/i.U"RS`o8]ftUP<]I'ae[t1-jMR/;+P^U-@cRtktB8'ksn[k!$V3cBlWH/DC>NF'XXKd+'JY"BViZq1]X;I-X'kNMC8KSBYYYPm6Cus04+8]EBuD]JsR/Y-ii7ZaeJir-opNW!&Pb1BH;.eT@SN+#M+pbE_Ror?l[VABHLCX1X-.]ECBjJ"Vc$H.=cWXUVAWtQe+%oges^I(o0k!;]N?\YK:g%56)T3<&sc?G1'1iBYH3N!s^WS[\2)&fktSpsS(374@o,a0c&Y-3Ye=fV\nNXEj9R"M"t@j#F.o&)3M[RokG-R>:c$eQOqQ0Lnb"HimboHsrm*Ja6(IUrP^eL';E\69Qc@Nh*.7-^.,>mna$M1cumaOcErfYRr;iFD>$NB=E$:g-n&&4+9CbP($ki;p][d,aHCe+;2\2*j"O\g2!0f!O29:$3p6#>;CYLfM++["mgTk8RZY`DrnTGB`+omjR,>)0;X5`Qo>t-dsVl:[h[0065bIrjB5B@iU(m+(U+5`DUs28=jV3tA60iolt&qM:R*P^eI?Q=_r20`(n7[H"!A\_W8K&=h2HM!$ja`]!hB`ISk5@"PDsZ8\eK%$B0JfRO0G40he(q7t@d>1?k,@RthLXb@C4d2;jeP[oUXL)jsQ!LR=F;&:Z]d`H<-a/)bQ5cBq?NZJFupQJR!Y>K3XG5n70I=9Rb"sY+hS%r>K+VrqU@Km!Lb^a%Wp2WNe/+Fs_TrUF9`(F%f\k:.6@-THarE"L>Zi+qYMGOF#rO$p$1h;FV/J0OSP)?#oQTm!>r(QhSt:$m62DXWW>tbS?X^+%DBW[GU(]jpk#kYEj3WFtEuNZGhZmr5RN!\tRtg/ZU%rcu)<:;,%hATaVh(<323"K'o")tZq..$ChQEKsPkg(Pmn(eTeN?e-4o!>l&mXY[/S`sa`P9MS?W.R&rr<'H][#ZfimMJJ]!mtCUGurJ6EI*?*bu'K;#$1KDJd;eQ:4a*Ai+'noX`HH4eKj%\>.Y4&W-d=e=JA/KdJ6ibpVO:#8Cd/;M"6a!BB_E%+3SQO%KCGdGKg@UV.c\F%/;@c[%Y$&=iBfNqB')$3VNI*g@XS,g\82!VF>2H;W+WhMVA3GG@!C1I-KN[0I__TR^uIUT"rX9RB\,#>_0:qb`C'!.L0)N!&)jM!UWK?B0Oh5a*I_?97`%c8Y"5eoc:#^S`o'j%P^3TbqJ*I*jfR;!%=S#df?04UUFj/","Q7>!JPXEQnJ*V&X\9]MY99:a%96drHnohR!\dB_S>*MF0W:oVC_D%OgC\TL%&sUY:YJK;BPd!@`#K9`TK`V8o\>\=F-e!KkM%.8Qu87iBC@/h2g$r91r]:/(ho2!f3IL4R\%Q_D4Z8%gND!%'-[U[t5plmmrI:H`F0Y=%u[W#_l0M-pKM7X@r9,HXZQB,ji>EcrHC=Zn7Y2T:\7N-6SV:N(*[N"3P7l_;ib$*M#-S=aPm(G1\0&WD\aGr$)i_F!3R&9H*B0>]@P4Pp`-'QlBuBp\i"-)EiS\mL0+"8lHp-X-NMKPSHY*S-p1'K;EuJJGB%`/!H6&#hQ0JZl`#%=Z3D+8B>W2i9_A3pZbo[F4NA[7CZONh7c/E"$OVVK&6Bgj0=cbTQ#$X\MZYh3P8B0CM#[k>\E^VN\WVU9(bK].nN:s'f-D0UaPgU!ETsQMOG0M/K"X0NW#p,=TcUn[n?cJ;55sPT%V!UhMciM8NP)f/UZiErl'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'ED!!'EGZ>dc9&6704>$Q6I$ggTIrrCW%e3fa`?J+^=TP#.=a#j\:;%js5.73(bVZDG:.Hqo53:BPh0Y"or4D(EXc?&5J,Wh#NrH1.iK>?_;f1L[AM&io\5#Nm'L5W!FGL>[OD3Xcr;Of!dTm(FjF<9V&mJ\)Q/_>An;XA$kdK"pqIGWYg@b$XSAu'[*\_,Ug.XQQ/UC"ZjW1<;L9f49-+)34tQVBpego=]UB%[*gcC=ik;hE0luL@*ZLTrJH#V1bEY<0pD!;bMUhSb$dAQR(Q@=&$ui\/03PCietfudfo>qTff,V6(W/HJpd;r]Hq*nQiu;>*peGc&o:GM/-DRO[B4[?qrT'dS!.9c,\9@"1*%\&T:1"l`]&V@pt_S0j]NU]fb^D6ZDFlP-2?7OVFu15%!)_ucMb70`-T=8Gr""ZI6I'hNR[n2RSJS[n4"Gf+mjIG!A;ra%`I9'%:9efBGahpPe[7K:0/_ka_p:GuSFZ)>n+b='iU=l?g)&`J[lL55D:7+EClU_cBPNBI4-G'DY00L@[#7tRE'%scUoV<5t^)E#aWCpqYnV&tp#G\!OLXr`:P8q"U26`?U>(iDY*E,_X5:3d.efP9K2Y^4j@Qb[K!Z`4_CaoX*>2;-33W"bb]%hTMoiX-"=N2T>_"%cn^HU0-e+)[/rrDOQp5/eLKR-j@$iEGbCV:O?i7'GkT#>d\3m/>KhHnn"?1]i`IdKqGr6O7[0?(rm*#B04.]ZAC%57Z/I+M<\7+,5I$oUTuSoa@'SgF/7iL_(D#Wt\S7r[Nt/dKKZ+804brWb=FYh7XNCBaBbbSOH0ZUq%/,N>n_hm37^MnC_ieGLX=f6$)s(m-Os&s$!33$,-r$Lq2Wj(=Jj?:"G>Rf$.`S%L-=3ndg5@N&"V[$^Ll,Ke/U$.+1'+70T+He0Q;\]\/\p-/rEcO/l-9,E^P5.'(nrnVL27s3sTJ4T,pj0a#:&3_$-^YtcmF?^Q*9l2+dTUARM/lOu\2sA06W9sh0`)i?T\@u"Fcbf2hHFR.aUL#Q.=u=cu'=AtUV=-k[)6#>)HM=65H)8@G5YU_s*Ngc=.1[0@GUL9J0DLI.8)`>1BNI6clgdq"_Sj.E7mAP>4]m8@B?*f")NV\i?U<$rNH3WK^=BT([97W"aC8dN;7g4``jm5?]f1745Jd#Lq/rdHufi5_REGkTA*&bpV(m'OlZ-"58sR'EDdoQTXo7N^m7Q1#Fg1if*It!#VG^IAnuJ:]g>)E%#H,TE:('7sr^A!)38frFm^#5RGN.4ETgRU4<`%nO?'E*)L;K*I+F+"X'WDN7B$`M@VNPH;FXe'Rr/Mfq8KG.&/bpqO1e68kdW&'S'?l]c!J>!M=*iW9S@mH2ms68kr),)"3=b*7Bmo:(8l:5RF&T:btT^W#50(!h=EjSU8c8P9BPXJI_Wlr$aF_V*Bobci\:6,+%tua$")q#D&HJ>!2ca@DTVk_*[\1d*dMG3fq4s_/DX)AD;rkN.@%ao)s/d>:C=,%=J&tOm@SseY\/j$.3R/i->I^-2NgDJQF>(gMgY;!s7]C%"=C/qT2OCjn/C7Y?goQXJ,Vkusf;Y*E@lZJ/Q[PsMVLEm2fnM,D@]<8eK@?:cr0L2+r`3TKLS#$g/)Y7[%h2h,8CQ(!Mkk0_i".jP%o3Vc&!1FS.A2*sVNn6MRn(Edu[mAJfnH^q%fc7$$`;'p#A%.o^^J*QR;,SPjYWj!XH%d:q%0(%4ot!$c_Gd0VCeO!F%8NW/:[eRsdFrG5!feFme5bsKIBr7=80FZ5>T&-k['psVd[Vr:0nN7"4%W2=6]`],ef'YSh@*k;te@UbaW39HfYnOQ0H,*:ZL'PAGcGje063:/uK3VlW`d[eC(;Ic;_$pd<%@u=-@Obl@_aq(Cb!Tu:L'G"A9+b$en3>?Onk(/Ii.3Wr6D&D`d1_+6XEC)9+!;<5h:^?5[jl`4&_F=`*WU3t-Kmk'-5!%9^r&pcDL3`A8b:aH3_S:P6:Lm>EpVKj59ZML]&]6tJh-dY97cB)NfGpN>/oEek,bF.nQ:>B8TOoRd>4\5#h4Mmcm!X8(BjreqF/^O1hZ!T-i0K9d-R@]H4<05V:J,OHPp_nGEADrXHTCRNTDFJTreVADJ`nVWgQ)=bH#N]_+dO(Wg]!jcorE]"mE=q2YP9F?*:`+<)I>5JPJ'9EYqnmB>`(h-e.N"HP_\+dJgh5Z'E\npB^\U5#M+H.9QDl.TG241W:%qpho?SQ?*^tNOWS2.PT@k%SN)'FgC%10&p\T=gWm@/=M,,$igQ4AWZn?;;FuXKgf;jGAE]$Ie_r%s$"8'kFj*KBPUR1!%H7rn0_uB_tIj=?sV$)U;St+?#I53M:j;;3PQ.&k"%@%=BUQW8-YsF5GbL/]G]P[$+3?Q]aid-(1-``1BOJ2=pV09fhb!>BN.7inWu/Smn5S/)*KE^Iu>0SX^U`(Ot8<8I=[q3nLE[0)_Di9B/_uHtVGEF%GdRJsD58i_L0/@()7(Q*lE[CWSX8Yc@ao-#:as]oS,M)*(mP4N/kS-^m,A+aG?$JjtQmRFn#0TQ3UeKmbuNJ+b,W7_8aLN0A#;*)Z(cQ;tsr$*,1iecgVn5*g>W&*8=[[pQt`8D$I.Q:j8C%Gn^No"-_haHudF9(#%R0d7H?C!h>h:Im<7*emEs(=aN`Pq1"h/0*h!d$T"!bj!DpEp/gPVGqZhGn-?l"#5Aj&Mo4B[cu$/5,fX>J:1[l3;DJ!;`pV'2aLg68W?&sNqUp,!*V0h38ZT]Uh%clk)h;;RWaG%j,'&=C]pEScoT;4_G4HVm9IEJd!]':L:r\S)E1IWDsH9%b6#9BdoA"G*oB^bA$%TRkOBdZ=Y]V54*t!+>ZOMFo>a+l%]F#ItPqHhpX$9F;(?*n9\p;b&[>hL\nQ4[+amlg=X8FaC7tU3tSlgA!X[bO;Z-S[Egh!#md[X2=UGj:gd_-('G-;j7=s#Q>F;7KXWdQGtkp,gE#Mah?cAcjC%u3$!#'-/4l[Dn*)Jg"sis1)a%hhUB_Ku*/G=L'mr^t:=Y%(1%%oPRMrr=;8baNJ91n;=L5FOeK4B^Z*Mn^^p]EL>kqGOt*8fH]1q00k6DD2@8We=mOO;)T:Ym`r,)a#Ii`^DL'Re6+Rn'[5@Ggc.#/t]0fi2Pdf)(VF314U&<-;J8-/@Z!;.\';Ae7^idssP58jjLj.u`'8lP1MoV::XL(mPUps<^`:Vr,$*+PfLJ.?p&IH`2/o0A)!hA)=L*MHIK*H^6I#:!!B*>:*0A5!$pV4G>9PD9#C+U;9p+";I_khas])=j-+HF*@\o/a$o;Zj;rU6MI0+=4Q_9,['8WlSqlm9'aa\M,!s>#GVs[$h3d4)ntqH$'O=5&)Fq"FciK?%K"dlUSph&*Sb?D1po_e!nc:A4B.ELfKQ/fIrrA@(bl1TMtlrSg46AKJW!?(@P5D<=jr&Lcl)NDJ#Vc_&\Fa#=Q">PkBNlQkMqt:c"BkjU3c(C>m[P@c0lbi"sgX8D>bkb'Gca/:$YQ3]2%hWiS'eT+&f2Kk6EAY!p/$tI2,8PKH,dT3fQ6_VhWN%Mbo3X^23B&C)cfR?53kdMZnJI[#F*DR!mBU"5JhbU&RX0)jXi\U#VI6"O.ShZm;)-=t&V%d!&cr"41E.rrmF3'*RbuK[bMOhLrWsR$`bD?a.2XmNZ979&a.]@.-lD3;&([0aK]fLP3q,_;qU-F3:e5]$+%&ME;GmKSoqaL#es)U+!,(/K73/_'#:>"q5rbd;i:GF28"XcdkDBJ3qJZB6"S2?D(W>bO^VWb[??r+hnC>:CV9:]G4oUn_'eE-6#BG=URE>?']VG2]rNoeKQWLp)ILte!0*PM#jD-fIZOkt9\3nCC*;u!:@8q4i)k/&R^-V6ANV2aqSgUf5?\`P@$d0<)2RWaN8;9-65O?%!b"&/,]jYc3r2.Cd[!"3/Joe@UEYn60pfC`p<9d>?2YK;(7Vdq$?t2NE]OL9kDP!o,h;&h-PfUe7o[r`T)h8$i4U!W%l=^FV\PF:Ch!+GA&nrC+,4=2O[+.#GbZ!e(q6oc7mk)*GA7=-4Q2^hleNXdnYJd"geBY>YNH4bn]IFIcFYRom3[,&iTPtW2!,r*N%/ps7Z.>nr[;L`J`(Hg?2koZGrr@h'DX?Td+*c[Mpj(nJ&'%i_r7:_!JUJ!o&gLh97Ko,BN4DhJJjk.*gYU]MJ8,k)Ln_K"bXpJc5TDH9],u`U/YE8OkWbVedF&X$g4=gkrQ9H<\WSJRY><[H'>pfLEl9=8DjOeo4^j%:*Y4#lO;lM_[%XtbnA!'>U5_Sj+MHl\7'U\$5?o(;8RLL?u!YCetMFo9.LTal81P8:h3MRJSJQPMnEM!))4_OjNa%AC5-mu,2KJ.68S0!n'k;3\H;ZQ!YC-$^hhL^+$!Zo#%8q$5",k4D.mnWd0U6P.mTE(Tf$.%%W3#'/#;+XENFJK!0S77\\TOcCuJ7FVHGG@!-1r*?;e==sJk=ON\$7M\+Qj_Ms8V-Za7hbrM%+1$^SpO@3!K;)g4n1i4UU:(9;+G@$-ifIOH2o5K=/Ys;pa:FY+8\FDHM4gdiGSjDGV#<`!/YWh/Hq5S\I<.3\@Rk@NWf0Fnogr`8.9EjrrSiig6qKK^1MO*(C%'RVjDrn!J1iXsSm`OBgiT3"[4,1):0(\@T(nQlg8f8)[4s>S6e[j-,O-AolOq-f8fgdrKN":`qn^;3?eZb)k'0J.=We+[J*--lgX+`fP<.9Eu'7V^L&WHW'D"5_S=&-p1m8As?d>!57SZH;U9NNh"H=5>"^f;3'>q98W^*kt^Qo*;\-1IPd^XSBupO@ub9?UZ43$T%(hkQQi$75W$8&!G'Z^bXWb\F;4gHSEU-/k21W_(K8q[DETthkd[E>o'Gc@>:IFqV>6gUB5),N]Ss4t_r9:+>c8nkN8>IW132/r_sSc?ZT!CFf$SS:E32j@YY!0.)o$aJ2>rf3C1t*bn:amoVDr[eq&C45Pk$>V"=_@AIoiR9_$(q'-f?`6:OI=eX4g98L'[I3b_O,jHf:ta>pFlpdsti(kaO_\d/Dj0M7<-Me7%<0nGKc)lQY&!Z6p0@AWrru+Pil5B8rr@SKgr'$8m9R4A0@m/%]p>kuo01WYZH2'AW(hW>=6]_b#@k(/mtJ-p%;C!S*fFP\XE20=4Qk1D6`s0Z)S@4VkRO\(7V+EB102XI!t%UQ*p+RKP]CEen%(d)KLomX2rpuGH]0(g'?YFM1.VcNplEDu%jkp,['O[]>Y%Aa:O;s0RJ/d%F'g5RYP!dugFX$4LD+;81RqgZDqp)0o]lEon@)jE(m&JbHQ5u+aN:=Qaf[G]-LU:YN.Jr&LG\VO#+ET+TZ0>im7kFs!;4gN)5cRZRLGQkNn)po`80XRkK(1jpe:p%>(,Z8k:e8k,T2d@NBq9+YaeNjO3>'E`n[OZW/#*h:ZMRAB*(JHm(TJn\$3P<#E>e9.S`de:Wo!/?_dBdi#j_72>&QVt#^mZpdr:^,tqjZO0+YSWC^%(Z0/J%hG9)LK#P`Qt_lX.@)'[r@"%nak[e#`QL+7sgDgrWiu5F:Y`V[-At1T\3erh\@""i4#j(^D2AMYtKo!.prDO5o)R)#bT`fmi5=C\:TZcsSRF`u+f@q-j:'"]8!dZmLeeJ)jP55PYpqh`$hb-0B'`(#;J:?@S_60f4Zf4.`h,mpA&%21pt0JaPc!eA#0Z65P[3R6=7^lfgn[l%"11)"jQu;3T^b#I1"^o1!C&"0EqGe@Fs8a^;,#M,8oOAi@g,*No-(o:YC6Ut#)O2?bS#'&4\OD-dgK8fPt"X*N7!7@BOqG8=#9:R!MF%bjg!$:cc;:DWIqG74f;:p)f*jcu[PQ5k+!"(d7e5;8o5QIYGBdh:A!)_=5P9$WQBASM#K1Flc"t2=A73sW(kU7]d'U07r#8Ch!Nk(m7%.W^XN/f=j/H?q6FJSu#!$'JINMLEk3Nmf)J+.*erWhqPO2fN"'lILMrTH$3Do.h2q&5TWfmer%[akHJpEX=\=MZ@-H3'N)LYu0eXl6ba^%$/F\F@PVCC>c4Ddn]0rr?<8?;6HJ'7[-OoQa7#iYa:f!h;K758nYTLsjq#B1())n@sOe41R0i$s:SShT-`VBj\!]e+JlJb:tsn:]Si:YOSC,h\LT/Ra/Rs[^NV&il=Us(0jgCm/LsQX0mkN!?,a2J$BI@2\Ed5X,2'-[5>kS]]&)fYN!#pE$:B^S[Q3NOK]@hrRX,Z6Y#[F;=bF7[2B*dHh1,qb:r[f&^OY*Le]\US3?,0;NGQX`?RM=UDX8f$)8@%5_&lm?DE]SnT$?UT&"&[1q>f7QoQP%02][g-m0RcJ^6/MhjS!fK2/6:U4XTPjr-Q$maK5_%k$f'ethCRjqV_#FCf2oKGqkR"3f!9l&"moe>Mo..kM/%\@M#JY]76\GC=/=6051tg1V[-eke68ruI0->m[c&C9"<'OW^\TB?n:KhBKktXB_bqt(;=L5C>&"odYbF3YT!32L+&V)?#L?=TGr@'hh;Cr>?ngM?@Bh6%8`^L%S0R@r=cY?^3dW_KD(rpAYes)acV!llr`50_n*.^V-;R]=r"%XG&C'!ZL`d+AU;@5I+9?5VF*)[U^RQ/S@cQ#g:31pE7[/bO#9DDJ-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J0c1]:bh9-O%M)e@[X593VdAc&9C@a#C97eIH[r16b(-%V#uab_3:CXO`?um!/34"l8T9@,\!!JO]m/RR^B\$t--K)QUh-GApCKCiGZi\ubq>mnKW''iWAg^/A5R%aAhRoZU"5NNLdN#kcBf?E.A;D3ldi4jmc(\g"ggj+,C3kB0T<`M+fVd$UaGgE_>o6]g\Ai9O@#1i61c-PuA:r5(aqpNl@^PCiZo<[FXO#?q;M4Qc[^**3BjepWk7=R4jFN"./Obj?,!fSNJJ?DkWPLS+2P$"0*mgRgi+.#^TfO2h^dN!_+e:\o=C*t*g#<\95LBJN(*WH+#GLUV,.KQ>U`gfkFeq;S7Zt"t_6&q5o>9EhY(m?$inWOCYrIe7E$tl%$iY6jdC><@pm>([>`G#QmRaRNKr6aWhkt0X3.g)59@p,0Q1h3%c#*b-2N?B;7`5FYU)JJfA+0@KUOXr\\GG+XIUPs7fOSYD"^9jL(FJL(+E[[T<31qfMZ(p+&nX;P2e,Tmu[!'7_Bff-_TEROSUUET=[OHHo"lgZ2!'P$"0@H:--@gKHI>@D/r062^'F-1K0QrkQrd"._KorrD,mFmEU:jd_BY,,sqoc$:LKHVdM\VtsKV0DlQ5!e/NX3Wo,(-"HrTUF!+pphekDJj-U<-iX/MAf1KB['0f5b#TV\10W9cT/9G)cKb#@/'mj#`2%Cl2\c8he;8!P>_3/?qH&SjT0/k0Z!WI[8uc(.2rS]AdIFj/9Yc$8piWY&f"6HJnJ@C%+1k;q'*HmUqJX3"n4IVV>(gZ=NIE2K;aFpfTs[J")&MR7"T;&/:5)m/"C!LE*joYX\@-c=:l\7/O';K*^Ae1b8nkQ`Q\4>a[-BXaG\r%Fl6O^??:X%*pa/MMh%Vuc%In(d4A$;#Yi\Rrh"iMC2O".@!j7UNlr-tbg!fnbNG6NlRn(M$1n<^>cQ7Hbpk/(J=8p#1KAeCT6,"Ra7sPD<..p+-Y!(:'jbf2M5KpIO4cCiiP#Q?4YKA;:]lH`O1u20NOK+#mq%O#6=FpDS^+UFHuJsJ&+@aCJOm0#OhM%r]b9"!;O,nrr@Y"rmm%_8&>Z3TDEuFrrD'E?`V`V=8*Y^?F/>rmUsh_3Mek0>mH@:%H9$r^*qMo)<0I4X>PtUl)a>jRFR6oXtmOo%oLcZ(gu@0[>\s2327>gBF;]<+8osHrr@]oZU`$mNY@!5hr4"$WnON@P>Gf\/>D>&VgKj5`0s7Um"$N3A9ipbp7roR:GqlQO8f1_Wq_qS7@1uc'7;1(:;`GN@CX$_p+2jhCHG`"!.na+]&#G3Z$n4e2mTXB8bCc,E6%qD&3h**.HO[Sb4):]ku,X.e^`p4D"s>A1qi5=*t\Fg?aQ/TB=MY<&Jb#/CDi^\>16<#lnLs8)l/bOCug0=A$%A;q[.f$*[O0,L;"balR8NL*C!f6\10X48P("hER'hA;K/TNRQ,%YX%I9#8@6uA+$OeBmpAUYrr<2urN&uVr$8jO4`B`f!;O.,hlnKqh\GR7C1h,9J5:fbCqrgg8mjGEcKh\]M!#@aMgS?2(6(3/UEgbTiQeC="j(ciTH*4'_n9g^g8tJRnVG@_OkbRGno$LFUkEDOu'Ls,IVAV%sODT7r+WfkH,RX!(l1H=<2rS:E5S_8LDM%UBe$,9))on3IGZ<`AZV/?O_/&B&=Qap,d=1UhVrsge!=P7rh=M49!>c)"^D)..QC*$aEH,nlM]C=SS$2*eSiqb35%DQ`*"mZu,_V'ELb72R3:FXpV5"8rWmkJ[R23/]7PK)Bj2=sQ+*Z4j=+bFVE=m;M%ps)lOMbBI9k>(MV&X8ICGtX\rE)mX>i&EC#r_Y1O&HuMOp]J@iZc7u5nH7gCM$CBJ$htA3_g`3b8I1H_h%fXf"r]H3%$nOt.)Bc!H1E&5IhOqMnPdDNhD=]I\N['q?]jKs-jlo10Teh_KoRDq$Q=Pq!!$%iM"U.B`>ZGaLjVRjht]2up9.3hSULk>YN,)j>nc2+L*J,CN198h#Wjm?1aC;VF4_u**irpC;,&$B3)-A;fl@>S^o_TU@7_a\$+>o5Fs+'1XYAAUc2RbHg&85b&j?\1J5?+H/\h(lH@NagIr*-cr"m!Jhb^c]!93=1q?k9dlFcbgUPQ/=?VEEV'5RJ&FgMC(*dEsDp-ZsW#Z4flX*BaJ,PMD-i=>j=8X>T$d&,@4ssJbYp=#@+#-oLqs$]TIT`kE2%(A(B.GjOTcHK-j1o7`EREsFm^E#"H>Y*Q\Y$lUV#"#G3Pbo`**8k2H^\;fElQAF*-X9kpb1Sj`(qJ]2hZQ#W9Op:ba1sEQY_<)VL0NalJYK\--HI9jE'=#F>-\MCeW>&[rQ19^$'J]l-1U]4Y,?)5@qH_$4e&&A,('&V^!ht]#ri&T#G-ZcaIW9Ho(X:r&+!o#k[$.?U2>qn`AG-`l+KWdK4nJoI4>gb-'-H^25O>[*OoTpk-KZ#eAKggj@&38Ord\!fS+K'BGZrRPC9.=&AnsJo].o5I8'T8%aicer7`^ii['PnIPO2rrD(SR'OuqqsP']nY"%+(Im7_p'E,er\_)gK/01).So/=q)33M]Mmc/FHe67@[m@.."3q/?]"@d'Q*KFX2_m`I!>)Jph@H%n=HJN:/2@+^f;KTfDD]F)WmJ8?D*5qo&ibEI'Qddqj]i"N[gL"6>BAE1t,7JXVi4bV&rl=.5@@TT\AFjj0_RV$AD84ocpA,BSdPm=I0*(8,iSIPIXn)M=$lsh&H/]?^m@`L)DlF3WB'^W43/2r(tN8!1/Zaq+4lE29f/Pbk^W)?I&^S?=0]s6KO^]&e?@Ik.G+P9At;J14JqTWHA.?Y=WKJeaLeV0s"Z0@kNP=+?[)jWT4!Y!9LDaX$OaYjlHFA,Op^V@2c\1$=2fupW4M0ZQIu?rr?;jq,I`'jSDlu8FdqeT-Z^e;3::EK-?gn(mtX<,mL13bXCqGMl1Uem^`J9kk^RR%qBp@bA#'IX3`#M,JtHLQ1?MFCl]#JE[.1QjF?2hZ'?&0-c9ESdQmaMoZkY93ksXi2(6#7!@k*fUMEH4RAL++]#jj,\N[&)$R5l[2M'U#E`j8-u]<]iMiiEjh)4,j51%6DN@jH%i)gB-$q$mSEU*:W(McCE=r"MfB4C::,pLZsl)@3V+Q;\;_2P^oO4<:YO?X4O:+PE:/VGOnMF^LsNbE$E_V((^`>*limG2K!3n_.\40gmGf%c't"@Wk2>j[]h#TMn=uUZqZXF+cqbC!B#V4-,epj@_?;%MV+=[Jlu?BqrrBNP`AI@jqb;=U;R*_EkrKO%iOp`H.P7akg$GI8%DfmIqoDA%q8-f+lFN&\D?cb1\cZO9ik+14/)"hNOP(,8p4.Fa^Wi>]!RIStT=]VVtdOXj6reSg_,j.9hA0/NqV/c+e*+ks*3?VCcF6@0Wis=RURU[ug5EMct4QiW=27d1UL4bp^3;b383o^pf5,+7U'T?365fRLDoZ]AURS7eA"B]OqIB1kTBD,q-o^V7.r20nmrd?5&B:>W>!8h)]`a+.Bfl1=r2;FX?>2kX1R$'#m6JT1Bm@rNORR2tqa3^eJ5Lq$lfX7obm!OrSrrotNLP@oAUY]b>[]);kfi_IrA=@dGiDC;09ms;)O+k?S^[,n#CHo4%TUuf[-:AV_]EP#D\[9dhJd(M/&\Ol$X#AAN"8/i]nTMSflqM2:nC-@YTkSTPrPb&CZ(KHlVX1Kr)RC>"*ch[jECA0cXM)9Cr:r4X9q5Z16u-n'0I3+5i,Rhm?$j26e.o%'G)FHq(8Y8ks]$g,OtO?L4b96PWXjpE\/_dI;)R$9Ra4iiUJ?LV.,,2hABKP-IJojqDIXaEZFJ!!=9<:GG,q%+isj8*1o*SGjXljnRI!ob_Q$2qG`>rrCuF^U0QXN7G[U^E;_fj&3+gH_1^QbkZOdj5sPmA'5QnShnu9jm4MRbO_,lpNU(;UM>gVA%.c4T,\0!&Y*g`L)^kfg^B)]A7GaO\3GqEZi5OGj5H<5nD@N*=8Pl8f\DV\=l1i+]]shTrr=M@cB62pqX]i6hOA\iE/1\UAY(^b,[)6a!&I7[d:.JaYoW;5i!C7gjRUEOdBgV.d"s;.)]@nl=F7*=6aP5AF/H)p1J&>'0;.-&H`DLj"rUX>iiK"F`hD!Pt4?)5i)Xg\V2*'7Ab0JE[,hE[6^dM&A5Q87f?eYfX]@DCGrr@n%At*Kle]lEuY&3*O'JC`;YshVl*0qk#!:O8kkn]isrr@X]r%b_4Fkngj`*]lYN3qUr()(-7nBI2f%l52WIu>.X(_m/r,lEW#-gH(1r\rQo9CPmR"o'>>48nHIa&Xs/O5^)\o\_P=!LcG?l7/UgHB8bfR\"6.XaDL>m_&&f@=m]UZL[DgX`o%108KB7pp5c=Ytaqo9_Z)q\KAVYZ_pGTqKkCo6[.ppO![I>""-1H-=Fi^f^H1;6b:qr?hm+['A\#"G*L/8c&i&RuOco_YQprIR7Pld(Acg3aD*e#Xh/,%V@")XQf*[3>hk[g/h'O1?Y.j(\=n:VTDU.`r*_P#&YQRh*HfVZfO]7D>_s;te\gFNlc<2YaU!Q*b:UYZ!-\(1Jn)`_Cn#l$b284<^jpXa">R\C'sg=TcQa@4?e1fGoJMA+dpHg]%9.??p,\OhN@i"9G0I5ou@HfAT0Z>HUOFK3fl^9A?o2gHKs>;co@?]6^*O5Hum/GlIcN/q\B+h]/+rn_],(`:D4m.OM?3OJ_(](g0\#&cofW*+S+5l.m?]k"!(1HU03]2@7r^@_&1Ss@pZJ'%O;-_l27ds1e+=e^4V-OB!.S0JQnGDp7pe.Q5'DT9#?\^RTjp`s1R_i+On*HkGi/eW(-pT00)ZA>kUdNo>?OD;!;n`[\X*?kHrr=![Ro4,\)-98X$83aS@TqVXp.9J*:M2sjSl9d2.\1)F)=[k@DadZ1a7;GLaJ0X=dZr;`5c4/j2=bSYVB$1N3:B="B`2WN3`>rVSI[Q$Vf3>u.`Io04R!JHo!>Q#72]]HE"mY_JP[K4@+X";n4eC_9C\MFL=>g$C<0',^B1G$qNg6c9/k`,&f>ZXB_^pD8")U'Rml'fA_:?4BJZ[gVm@*MgS*>DREb^p2*.iA(B_,b;oE0i-PK3UAk5_=5T'gC">*_g"T!2b%\\7mh'h^pTC:p>=.!AiYIW:='GOI=QGS,"G+\k;O:=p!!N#j7Jf/o4hCF]qdNg`C3M]jYP*Y'41CWTl%"33O9>KME*.f#pGX&lh.g'tSbNg@HLQ?]FebgBpg5&DfDEQ!JoG$2jGlET7UD`,B2!5Vr)2/@8J*Xqf[VHpiX:tZ?llH"_g1sYJ/Z8]'54(G-m*nAXf&qqW0:NL_Ge#'-/VpE,cQgN>n'D@$kIggR;c1$5#]//P_hAXk16B\!$=1e%m,`mt4KB-?h'9[fOqa?`qAKbq%9q2Lh!&*@2<9&#(/mu_e7l#Rfe6J4)YM#!9$>8ljiEZ)*(\kQor-dN@p;X:U0`KV,6/EL6rG$o`!%d1oYSh6?YDpB[Kip]+7.JR9R,msB)$onNI2BKS\u2][X+gAEu6F+g2>]n)),5PmN$;"N.Nepn>t("QH#NI$Fd[k:NJepPk3S_HKi:;&$WVGZU$)*[=sbe+d+1"a>XdTZS;-We'ET[(46ko6@:rFIO0A*e/mXD^BGs9;?b%!b(8\Z:8%Nj+[8F!0ZYHP55tV7a]V%;_U!tHiuTJZ"T<0Bpf5r,j\@GqNbU"VIRU\h($gL0:mgD`WFcJWj4:&d&idVS/dU\[Ish+k#QFd-\bS=Sh";215I>XS07fj%Dh[%#rr@^pY@L_EQJ043jdVm-,^2T!RHJ1%?b*qXho6+$j'V0Ki,=KV[Cs8fV6B-TAboVjZ&>"*UQDG@$SLdhc7A_L\!;X3`8p=k5E1-UrrBktpJ:Z*r&7[?[eI]>!%-R60^3pP%CUZsB7DaY!a(uif?9fU;f@X['0Zs),Og/mnC,CGLPN'Or((YlB=$:*8:Je/YjPCDO:?V>%B:Q[=<)M'HnYL""c?3M!rNI+n2t#Qr^jM9NcB5V'!Gg'gTTALp9ks%O.IaA7tcBZ3iDuX%I*apF8l4Vo>Q34Z%)9Yi)7Wf_)2f^__i5%5d%R[JR@0Hp:58E!%%N]K-0a>0E*0(oH2i*p8PKf?/L$OnMSJ/Ej3^5Z:KB_1&]i%O?P]DQ"P*o!uS1e[++-Y%o_0\1AlLhVo='NdoQ"2Lb?)>e#-D;4L76^l+\b`@8rf8T^42KY%:b+YWo+a9fpJ+/Y"FC"se9U>kgE%4;C(n8QcFcPp%c)Y1)?2_4QP`!#dt"(PD]+G[B]=e/K(V-b&1>9.g#>NKFE+2U>Oh[$a`jc1)u^G?-=PFVU#EBc'_RVUZ"Kf=H!cOp/c7m/JVs)^L-_:BSscVYeoDZA`$eZ@+s>bT9uCWEE\F_+LHU9jOslrr=^pfB[HE./jrYoMJ"oaPoY(?ud*'62HUV1!M-,RZ5V4QH-9..K-1D0Dm<2Kf#D6af=Sr_p$Q:Ao!<;?K"I;j$)`sI['iWT,[bNIaGY/[pC(Ue+Llieb*2Xl,-/3$-/MQkq"+L*"7J;!,M,`-/$Ys@IV=sO,JH$GhYj\kCTn+f2^7r&kC9i1*.JS#Ot:LQ!eqYo`Dh.]0+$iIGSSpg&@P'c1nW_CnHO4Y8U99?_l\E^Qbk8Y3Whip63F%&%!Dlku28arf(QiC%hs891uc_YqZ1XFh3#=2>R.H;Z=Q-^'V3\n`Rb>4,_?)gbecZ.4.XR,94(P*jS6?,n='J4H?&/T*d]#TmU;DFeF+SnB,UPfBiaWKXU$PP^KdPa42.bqhuThd9UEW-p*ceU[)8_M3]5>V>J64g%A_(A+D1C&"2p!1!9^RZhL-l)1&HH[$IcA8,W-A#F4?gBumK^^MeVTHILgpN%P#QpdW%biI;TflSZ=JM"LX9mkec@7j.WWFutJUI#0sO8JUaIN'+?9E0irg7k;gIk*TgkBl,0*<;NNVrrC9G35n!$SPCWH;M37bC?I_q>dq`>k.a:`!8s0+H$W9)p;m76O,Y!*P#pgg#FbSkrr@X\>SqR$M1B_aSK%Ar?D^jHHrW0%T-_K7<=G?/;=mNQ8)A;lmqdX)WF&m8e$X8S2"^*):3`VUV'ZWpTfG:##k[@VqN&XZON..o;2jM$,*T4E1Z9f$-)*PSMVZIms*\_jEO2A:UPNM[kldHj`;UkG['O.#Zq(,J47N0^G3*?I)PU&jdRB@:SiN_peSe[_O_\8rr@aM!j7HVfP1*_JB;\urrDTKe`u6M]mak?qeDAG.Q#T>GP?U)UMQirNN*1CkGbGU6DH*(/p`Pc,VWf9f!HR(B2HBRqH)$(,^Ioj.'#/e:YY?V6c5P%Y-4_A-^R&UFh8Y7ES_Q(4JV03XaWcH`YI-9^InG[rr@YGlQ]3pQbu#o?t+ES9k$EVTcme*C\'acM0$K/f?%L"m41q9>k08"e>HaiDu$f]*goBubf+cP4jS*jcoM)Vsr`!8"+.-`oAg5N`a-2g%84)*LA4f:!1hRTp?bOGn@UM[2<-CXhETrrT!]_KH9s:i3M];83M\#CqbscFJ'"RrH00]"K1X1\p8'U<>"3l4Q;]E(n`E:RQ..>r$WkAk*-cMNqD:_bl^B(J#\k6gAZrA45sB/HnhFb,udjlm.W4o!"3K28[%;d*SeX=94:?B,/6o9=n/QP\&Q[::]6o7"DNo#VGMR30?_]]kGD\F,G!=>o31`H,`$Jl,JZ,a[nW2n(#.UnldZTr;QcIYHB`5\Z[Zh-+LIV7[@b"@a?Ta8S;LYYp>K\8Z_(N<0G<>S5ad;24l`aS'X@+B]8upWt,jBcef2E75U`12%L#XF$&D"DmQB)I78@#13=A:FuB6*'!_(J`%(E-[YNk'r"Ro%&GS3XYON*rASBIpGe2&D`(?PT=ej_85OGI.I$DOYYL(&Z/2!P'58J\hhP0rB*Yk7o5,(-lEV_PAHBF6\iQk(P[Q\GLk%S[P!@+Ffcg3DQrN6&6#3\0>#QB>Ji9T!PpWqK8+Q'T!_Q7bW!#6InrrBhULo[hT)sVn7X.lP#I]<3i`fZ,3T*%Q9dRiqSr3/&f7<]PFSCpW"2RRZ=eXgpP\g_\7XBU+$!T;2&!i"TVWWJ+-IAMUqCs7.Agpp#172lo[)nlUca-"s+sm\Y:#Z",#]#&I0=ZO*^RIJG$+6T'+&;pN@,>es#>gC-ba1EH6A*Ri@c3Xs:NdSk(2^ek"k]MRkj=L/L#7&-sMSWnGW74XgQ^qU'$S9A=pD?gpd^MHYbDE>e;ML,9%]]L&+mSc&8A2h63HMKA#+5@Q/6K(uR\@_VO!*shis\&7#HiX^gJQ?b=U*I(KF6(0ct*)5Qc28"\iE3_keHJsj/h"1?e>9/!iEcZG98ks9mE?^g5_f!9p^KeP3R3*BsiZGuuYD.@oc^Ck^5F#W01&7Wnk:Ft%IkAU$q[Y@2^ENs.Hf+0gnZVp+=7$%I^D(#"@aMM#5I#@X3ZBT($=&YgB)Z%fh(*k)G=JU!6`1$BG\YBL3hNnofl-\:`bV4AL%++gpn-J/&:?P/!eXq@4Z[F@Ag8WHj5cGOUk'L-<>F.X)-//e#Tq!_+HKCd7mB@>6Xh;DSqhr*8NNC2BtYDWeLIT+g2BH13PIKBNjmqB(2Fs#nK"=4eFX^E[-PfS,8.rV8K$l7OF)Qg@!BkEK)Yhe>(-VS!5^8V(I\&SUY>q#r+?Pm2.E<]2*5m[3VSg[LYST,ca#6RQ1C-"/=JaHUj6M2fLEh,1JTda_P*BUN,aeRMFpaeT`HDEY5!1WN_.9+rN,sV]G]\sf[ogL^%el&'%C.ClF&;(rF''pP@7b*2M3CG'e.2tV6A,C!8*Ln1qt+25%m+pe1HT'InY@Z]m5nS9mup*:S30"qKd.1F^*/LX'aY_`[5dNRqnbMEW@rI_[&kBZo@r8[`"*FW;XsIqnI*="H.o``DroJ$R%/kC4@VIK(MX!'.'B39B)#pR`Xe+O"SchRo3,q`e.CIFEV>#?P0he%"M,9uCBRmI#W?ZTq1WQV7:-R*2X)>!]S=TKuZbNlFm>^U&p2RI38[uHl>k''O#jo8fV+S;,5W6V7-06`.-rGV`j+X\VrrCb'j3NU4BO?VJrr:Ur=tPW=*d8T-PRCq.Dk3kuo1:2sf!'QghI[nNVUf3ut+\&8;?BD/Bg-Co&BNm!eR%EWN\?OKY7-^8DX+@V;"M(mUj:PPCU8DmG]&HCZp!>)LnY*u&T<@%'dKT-Ski'e2`)RDjQ%T2U\BMGQ,(;2e@;!BL/[4XnHJ']5_ei+"SEo`sh8qci>MZL>al0(g`ojmZ$Zn_/5Ja`>3r3(pVcqVoWPU9i3A`IY-%2WiI7Juh8=AJH*:K.gK[(]URER:;N@Pl5uItPp%^$U"CT.L/)7dKqaOh8oCcP\=2@*5c#l4Li"$B(c)"+OE]01>":.Y53JpLa+5Cf?h4]DZ/W?!ZmXs!>R.@o7\[h&,kQdq=S@Ko66.`4smNTWY%*?Q[&*I<3TC>UC_>T>,*4Pl$^]+;^Vm!rfDC/+CLjqJaiVrn0FV)fC-IpY*KqOhGGBQ1oT;fW)Z>*N;=O_^#?@+(dSq<3!=upc$4E3ms%WFj.)MUI3me.A,,]i9TrY=&6_]C#N]Kk1^^7o`8KXsflSmmjN3C)X"PV<6DHt0iIB([s\.7+Z420P:DCVJEl5)Sn!MIHISIK`%74nr<94u;`A0P_aBDrGM*"hU^[4VThO'c9Rtrq(b:E,4SO/Bg[CDd1fc?P2St])K6g/`rb*gduX2E?WLu/$W_smR]9(kLPJmb44-1%182n'j7FrCMg9+hHbmMNg,(WP=O)j6,4?+8DJV5dUO<^EQ&2W?87uA;o46K0ia8LHGQBA8-!c[TW=*U`cW4mkl!aG!.muD6'G18-]WWl?HDKe*UUSS@]e$d\HXLJJ*j%?^Yi,crhXrE$I[*A`eZCo`rHWTp92^Opa0mFj,XXs<5%fEnDoM$G_a2'RX>b(grF(]B1X>54GAmcS1#"fB[rAhafj&!m/m#fS58.&aQAEmb@>=Q[o<:R5;\/NnR#Rb;l6l+DGZTXgIlh+VlAX7Hq\$VN[B/*C.cXjDOOpQh"05$:><1E$ud7LQ2Nb1^*^)#W^n7$-m3I#o&79blHc\Fl^s)-BQ1O*U0Ib.*hn/rj3j*ToZh-h+c4p5e@a4N5Qrfe8ihh0>kZ,SoUo)oJ.H+&U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Aq!U5Ar;YA/4i!HX2,G2.T?WLYb/5F"28:qZP#L&V-c'[a9s-4&m24:fT"6-i/JO,WJl6.$N-+!K8$MuWeq_c:Qt\Q+GQ.XN1deBicbnI0.kn]fXR12ul5k%SlX.!mOaX!(^+4^teL2KS0a%%L^FF_E>m7VhN]mHNF:=/gD)gPr0fkrk?`c(c(h\u9o,/O?qrlY:Q-C[(k^>X?&#f@B91IpuhU;?0Z!*D1c9^^8ku[8-Pi8hHmuQd.$j#N/kt`OMZ!Y;uV^]*M5%:>CoOm?Br"W"+1Ak#=IZCR'f_@ob_Y+1\M$a1^cp`<_Gg%+coD2PDhsaQH/ggAf!Hhucpese@%r=ddR5OLteY@_?.HdRDjeo.l78,:/WD`*BTAQVub&VM`<(qrb%PuhB9*WDYWN**T8E=hiI)Thq02ebhpSJRI6,iB2]eL9W(q]iLuLN::gH+WChgniguc:dgSas)jD0cO`*#+orlZ&=E*148b_U>qHMc=Wjt&XM7>[hW/NhH9Isl\Vuh"SC#LMfI)Ds.^NdCdgsl]*1BRt;RtgZpCPeFVc"U1;DVbV;L6dbl,=tR1I33t[4ZO>"CmlTgmS3s:MOh_00EjCNAhbe_Dbsk+%gL.P?2TP*oX=.*jt\X_B8P"5KDZ;hB'/r:9_<2KBt7"=m]-j1:>obYfaMcN#%CDjDQ058u3K=,JK`]aXK@bnW/jcku"bE*\6N*O$Bk0`a=8M/D_`(m&W(h!o!p-:IgPC>@f/_VMW*O2:!62=4E-'RX7q;Wet[H4-s:Wl,>JlA"Jo"XXu1kehuhi/K[=-me%O`NnE`8i-FI+kRdi*q,aHn!5gekLVqK@pVh%`BH@/_,Bo?Q?&:ED>^lpA)l:leD5&k`5D:(VnC;;]O^?eVMq.0T+2R.W2.K>/2*G::3t3[VipuA5[Q#kuBk2;K'gX52^[IK=[g59n)F*nS&AW%VB"Al5I.B@Ujm-:]0H8.W+LG@)&s>g^Z1U0Y[qlT$_tgI?j".:5PUq;:J]9fGg%hHtL"@b)HV25sM\d9$6f?ZTkpr!EB'JpD`gppGGWqONV$KJ]K(T&Sp5\rEl@14JfI7`K9:rr?.4B9ei5@S*cFhtS]Q$Q&1FUO2c&a8Z-/b?F%*8dQ_9i\=ElQ[dBWNrkNA.E*TXkKbk=l7#6OPM"9SGbcKO9l7hKIHhf4od!$9\Fl_V9`=qgPO?SBb5VGIiXS6q%b#`Rf.-FGB76J=Z]W\KHhLU07Jeif-4J]0!5]bQi.'Jn?D,oTPD210Q1UG95IsQ6lYnh5gdS#fBE%tJ?eq@68&JWioISjkr19(d4I@3_r_C@uiF^O#hPEUt+EqT@>7l?o^Ig8rnq(q:T%gco8[`jPcFIMbkm$Q"UAI/OfG_cRmu?CgsLCNc9gq!$`8HVh;6g=oB9CT1p.Yc+N7P"o`Mj3Lm?HT&Von8S*RMKE(.P`kpt8*dAG1]'r%Hnt1f[d`[bC7Zp+jr.iaVF0rn/+J6GnY)i9Yp`A;oINQmQY?e<+j.@%@NEaAjOZT"IfB:4UrrAX1DCR^`ghZ)Vfe^HGrrUW1=4R)jNX>4*gRM5+Y9u@VA]Z8l#uq./ZKc4Ld+<-nU"?4>KRReH4))F5b<2t9?5mdX$9rDpQsN_cL!V"AKu8ZOb&k)f(R9?eh*Pm0K.bq=G/3!6);7L*0p+=-e]SC/(%dZA+mJ/!EH=Ib#M4?!N0;$&14_$&4*5Bd&,?uLtHn^$oJd'Z#3oM;Z8?iDM1>aEPh^n]#9rrBe?N9A\/q@7-L!?.O?V1(LU_(Io5+,6C/^YrMaGGZr*i[)+`89VisV&isjrJM=7?N+F1=6oUMk8i_0]poe-=SpESk]5sOXU@_eGt77+n8*R#If]IGnDPKkeE+.\$$`q$D36ppq+K:I)n.i`sA^Nu3$2JIncC9h"b0U(d9\Yg$jMG.Kl[WoSOPs)cD@uTn=e0@!>?GlXkHl8F6YJu&%r&^31Dl2@9DY8pr@&[q=5Wm5X=cWnJ%CnT4WhQXQY'kfs+8F/PrKi"GNtV@ed_$ZMiia&38=H-R2V,=c[!b+bgM(GEFQ3Qs>aP"j%**C@MYJjaDo<.ur)<.R^[ViSG=$.N`&H+O?#8`+a+Reg<=5CB$7kNdpaHa@C[h?(a1`YBrW2p-eYB_FVM0,02+d/0fk5:M.O2?Q(;TNONBq%P$Y('nIX9(aA+*\\rR@gVg>@7+B!j".TTuT\L@T"D93a^m<_pGZi*Cg^p5dkTi\$km_tKJe#E#o^OUZik"blT%n0#8?$PIjgE(Tc,$f#gB8IMg_)!AZ3d^dmtRdr75BrBV_Ks.j6)5V+_m8Naq=+SBQ36;#t(@\2d.hHQ-E6?S>3X/Yd">[9S(_B4\n3O6"rIM^s>rVJ8pe_6ZXm/cU*;DSK.kP3G@HLkMW!NXuNo?3*F4o.mmgAoK/KQn+!BD4Op/H*E3_:^JA)F1jSE"^?BE$CFn4X9pF*H[E!856,m;PU"CTe%,J5$8hCgFQ55O"(;bL&m$=6FJ7iQZ;Y>-5f$Y3?akG,&fk-a^LpG\2efAk)lWj^6H;&U>i[1&+f^nR(4(_Cpp-+5+CDINN8&+]VgQ>g4(OG6ml%i@uPKoco@ibXNUJ:/oOp]`fd.+3o$93'Cpt%QU`BIuRh)7u/OQI:Mu#n`V7[f0o-P!<3&2*SLpOheW#=^u#tnB4$U)"*GC.r[3(Weash>f^<@,IAGZV)"&%lYW]N%g:2DHgu<R]?D'E8&`DdBjkIb))eSOmij[XB4KD(B"8m9^M+!5Vkbo7(E1$$5igAtSoheb0$87:E`^kDh(QDtkg[M^RliiG9*gj!aO!!.[dMVIrD^L!E:*3N$BX?2C2EUZ^5QSD:BcVYB)aI@[)Emmkrik<\?r87M-NoVBg@*J[6@.0p7$V<8[UU`Dt=3$)daPe#^MoebVH2aC0eJQtlpe!4(]!9UrsiFfrEME_q1KRO6s^!5*-[b8%p8!R]l>je#o?H7cAY=-qu:Oo&R7-6'._GT#V+#V.Fpd)r1?'K;..RVq5h1p3`bH$)Y5'J^?9I:Dbobn.f`.-+C=ii;fD5b9rc,T]7oK;0L*sK;inHREYC<#,b:!bIVj6p:(Aeqt*".\LSqsDGZ5gqmdfMg8T&)j6:kfFKi-53*+;eH1"*gBrm`(*fcGm_)8BYUK)X7a%NKuFA,cOGk-*B\^*nXJ?Ur$+k?8O`S_a;G6hnr)`r\Qrn`L@p9OINTO[p]eGaWR;8fi4-rTYToFDoT!,R5;us9'u.X>ae-Wo(Ou+9"9/@.WIO0RT8Kpem-o)r!%aK4q%,5EuBJpSeN&*]`AP5rb\6V9l"]l,=qtl-c"]dO>PpF%b!1K9'1?-Q+&UE_*%PH,Up0)FFRQAr^Of\>;/-"%ZlBgPm*=..>IrT1T)>73@L'L)^O[UQ4tC!`@%5Q@KX^"-^NsV!)IlU5m`"!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!#*N-E'90!3rA7mOWIM7W$/-.Gj#kPXj&A#;lMacQZjboC.]]/*B2>OWHN+!+9a&otSO$B;jF>KtrrWac.Xe.'rqqusX>)qkfrrB'TJhbCX5>%us\+TJ:hA[8t7;GY*p`+eZ=l7n[0C`#e'Nj#hd!s!ZfRN895jeZ]OJbK"X&V1p\i_dd^ku*>qj"27EYW1dkUhB.<#07^cp3i`9!)NB&`f,5KY]Em/<)r"o+9Uppo?hEoJ)k/Mu9Y)l[3A'C5G9t2\#`!%?/2-oaY\q)d>4u%!=LhonHmAPNPaZu29P0jP)EAJSaZ#/]m%rPX"B=PErJnW4euHTWF3-D&'Bk2!5:0ji$jll"qS+V=hH4Ri1,-qW@$$^of8\Wr4h0^'n5&T#s;#Cc\luC`h.$[n4DU)#f2]'#ahn8!BXSnTFPLr"RI8r\X,)[ZSR1qnk`Cb^ecn3s%5WO1cIR!<4(/i"@CDef&I=LgklgDN:^U(u")$WQqV1\6?f`FD/,tPeWGK"bFUXHMmqKRb8rrA'\T%rU.bAt'BV?N4`I59.23T2Xla'hnWrrB7t#+0,D8Obq*rrB?Q8aogT2u&0grrlh+[]b2")+<\c%nQ\kT2e;=Arr<&oN;fq>f5cncNo,JGl;.:0Hs1NTde#31`3pccEiVe/0DnpGQEnk=roQiqr]+:ch]lR(6/RnKiC;ns)LpWHr$]3>IR!<4QZC!cqpBog')qsm:JH>lZf6XFHJ:ac!5aW6rrA'Y0Ddm07mWJs5lcDa_e&iJa",EV6dZSHq%XiYTN2!l^-smCp4%Si!aMt7q\&o/^mG'$+F!Rp!rRO\(RlZg6]C("HJP?ga?F2##I8i/quQ\"$X^c9rrC'Rq#`rH)YKp\Q%s>ERF<7LCIZL_g?tg[luC^N/:cLDTjGK7k./@APE%(k-p6P\UmgS-ku>PJqq+KD.4+uo[^3,4Kmk_!>KFKZ$BXof40XRrdIB;_;hq:LoVmP!WN8D.&L@MAb!VkVhlF2N&H64Q2b:]CE38*JRkDu0oef1#K#iVrlhr*7Zt0%pM]-.Q>U*t_X_]u@o_qh6`Bm*(&J)6u!fN7ZLm[/U-ED.WWRIGt!Ef=051U_,t0D/`"8gHg*qg2^CFU$+H;^FOeG?]CC:!WFhKJ)WjSD/j?$,MVKAnR5b`b%96].K9#pbPoq@hS2Rn=5]\Zrm4Pm_U/':j4t4=/QaQj;9LBqdU3O.(G?3,^j+[]N/I9``=?TS>G%beF^G.hfBX<5P#7-7]"1Z&?S*n6Dn*.N4a]N/\FJ&j&%/I)eiYsr_/jNXNT1n=#`Q*,h3&B%E]Wh8K@EuB^DT-Mq^m9C*tpb>iB,?qGe;rNYGCHI_[`(tb3:rMJePg@GuJk)cG77f)Z^#Sb4*uMi;Wf1@mnm3/c88mT[`WD-IdkI974<9H#["3`p$)@sNc$.&l<3qd*4i_k\XlHpR@[QX@a?Ta=kSj6=Ro8;dR`&-e3rK5H'4AWm/3Tc7lRKYDWZo=dnWU>RY)!3_K-^2lX/!lKI:G\2kd3u!MjGi*R66HYNP=,ol>'M2>bq_buIi_qG,I7r(AS2"$cAF*IE&_3N"MuI8:6tFfSKNA9o91VMYI68G\:&r29PpK!A([+1*YU.PN+H&IU4`p"F0Z/58d_[LNghc?TW/00eBmZaB`4*HW)FTD1h@a8SMn\heY;Pa&i+^*LPl$5'99l[B9;mlcXN]?o=O:MT^Sin/?5'GK>Umn)n4,)Ubbo8_?ucnEH=:Ha(Bc]cqog]%8*SR6fO`h!/jjYSL<5PQ0DHptF8YCOiil!l21ZTg%dl+/kNd-W/.Cj*!frLa&q`UQmG=u8Dhe/q@g!1pKE[qC7\g^>!;Y6$FIN_@:fZ&L^;[!84PS&@1Ssp&J"-:fSu294lV]c$gbdEF?#nV+PX&dZR1GeQr$#Df)&[=St7!A)Z6!b=0fqA$aXkkRuIlhC]EX@iJ8ZH2p/B8afjMY2]aIjF95NX`^JoX1R)X/aGH+)#`FcYLOZp-"`4lB9jgR>\oJC&),lM2shLQ-;j\i,eJ!n#/#$C?EsB*1H3AS!/N2^:P^WET>J72Rf&Wi*a8/ADt?1'`^c4);CeQ8jsL4f#H\4Oc!YPtHI88UTV"hC#AQR>FR)DC;A$l#3U8p13:/ulifio/)#WS"91%/^oNbAD0i-32a+,p4"#s:*82URUXXBC1(&teh5dJT=CqdMf]*fMW='j-*MC\//:$#T3BbLHG[n39sf5$k!+p@aTLh'\-b\W(WZMER#Orr>16f;Y$7N,,@fApW-!B[X&Y4dl.P(%U00_=,ASCAUSM$5!>:bfL"tA8'4NqT(cT3VUD5:;ZDN[K3t__^N3*:=&"IU;j.^Td]Ot+f@b(KH0`dmH[eq'S\-[iO<:D/;th"FO)&+._#WOMYt>@(GA_H-,"t<=:Ubf?ZQ.fJ$[UKF5[&uM1.\eC=[:0Itosd9UA[kp/60;^*9k79WSk!3JQ*f_C!h/V'Gl3^1dJ9rX1psfge<+t`Z+Fl^;p6RJt%-edX3L:G[L/Yn2+olVqKeYC-%oe7fjW#dq54e^jiR,Afe)aFQ%^iV-W`JeXOsF<+Ss55;mm4nH[(#SiZCRVrG>#>>$p)mM]ZDZ\V$RXF2=F1gUn/!iR0nl>)j1UaIF[=ucet*9APn4\g1hW.#HB4%2&b5^$KA^+B'>i6RE?hhXK-Fm69(CJ9,p4FF3'iSp+5&k9cn6bsiAfBf-rQi@$h"o(mj6<[RfDoHp$?4HGX:p6d&c4\G$L[eNkr#GD#S;&&@!l#5FBVoI_<9'L0A*[2&aq$sH-R`e\9_ZN.LflJD:`GEXCG]@AhiXE/3nN?r_%6;h2sh(D?7UF@Gan[FY7AC&)Etm[EeqGl9qOrI:;kQ8H/\^cL$'W5O4tLXa7L)9dqSg7WlSTAA$6m,h0(?2rbp0kuh2TeX!+A2Nt4Fg0\RG!3Fb5'H,dAn4oFNLLZ,^fFX^]"Q$q_`amqaR:<>peUjk-6O2c_:@3ad`9u=h2a".Ke<4gleue2JU=^'#*6aGXG!mWYI0eu?`+2iD$e*No$_"X(n\)$/4!U^.8Q3YPNl6*)eAA`p)Z?u?U-E/FJc>_W<#7Ttk*6I1]Nl_F(PoGf@&?L[l13YLPHV#8=U/3#r1*QRn.4M#m.]N"i@c;;8K"'-qKAWKhJJRVDk)+(o)A\$lr;r.nA&,Ni\5L/Y16Obq?]_VO"N9"j:OpR-`$pIESRij:[_@LhB1%XC;41k+9!-2iQ!#i>$gC@r]]2R(%'WId>WPdrcS)Sq\O#sD>PZ-5.5(]>@%q*rm^mpCYQpDb-!A?ZT,4r:o/>`+#^;07RB]R*!=iCNI517!!PX$2dZTu4M/]AiqQ(-rgb+EMg]ESY,_9Qe"/@&.K9Ca7rM*$!!>&;R.Tob"D=q9H8U+GH[tf,$-Ufh7ur;@oAX7%lXkT\0cPqGSiN]/)i1@(0ojf[o0.stNk^Q&+SMQ4\YD/B,7ntZJWIg'P&]'C!$/!=#?/T'%!tnC4'1"jZ\RmAH/i#.]OUJSY-a`,F]khgLl[mNIi7?Rao;@%G_kDn2mDKG+P0p1"^<'Ifhd[coss2Hfu=OK_n8`"I'Mql^<(MIe'RpFiP36j+8f3ke&2.enBKgjFBEgc28h1%pSF,PZ)ICSpG^")fV@Bf_649jnIP>HnJ.q.qJ9VfQsJDt-Ih`e#Oa:8Sc\Bun,_i^9ki`?6hQkj.lh?3OWCu,fo7Aqn/"fa/epQ:I?nK%ffTD@Wan01SS`*3H\h8^?ZN0@U-LrEB5:S+W%jLgZ>O3t8'QNr]#p)#c0XkV[RpQOFJ2u*g64GjqqSgcF/i1/C^O&>U6^\0\#q`jHqnG60Fo(?JFrrBNRX7^@)=3NpNOdt%aYO%d&rm8@_@E8:>ci/`d^JZ8cq/B+IYL5BcJuOKpht);Qr`AX90WBcO.+*dpP(39irrC-h\@lL37F+qLF5$o61I#f%cg>H:%-N7gBqP;*L;-78>fQ^7r[@[,k#H2dl192sR:X"q+mLu\J;.K(`k[lCS/gHWGNe8IL(2]ZU-IgU,FTpgnnRX"'ie#bKg4Am(24CHMrldNNMMG/RlT__OCV$<.VTO:%0+mIRE[RD>ag5s8:3Mat@:ikF>e#9&rcSQ^@o_+q!H;I?G+c$F=\NM>dRSNL0+&b\q7XZ]2[/_4]449!7!6lm?9c[qrNt_Sb75#@Bmn,>!5RGQ,Pl3$Z!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!2>?!!cE>HS3;ig!Uic#,Gd2n,Jb(f\]0+kBKR2>igI)_MSsWXC.()IfbFejn7kA;V$>:mQ6U5+k5=M]@"Q<-@oWbOHCCBBLaN:UOj,_,;O+^J@$$*J,Q.;YEd+PX"X`))(q3SV#ar7U(q"ZN\:r\*cdHqo:Yugn',.O$,)I$]"hEYpYh`q]L=Bgq>5/Nq)q*;bAWQAZJ9MS<2Zi8X,++G&TbC1kM[SZ]>)8kjgWUtb#K?bUc`?-1DUBjB]roVQfR1lj81^4KnYN)?3G89tgXdZYetUgn`a#9EgErDbs9"SoN,0R1_(5]_m1;n5`)i9lSLog`BKk.Mf'V471#-ZS=iV#LGV2S=ti7sahfT-(C_oD\eXiVro,FZ$/G/6tlI7ScFu3I?J\WuTYM+*Ta)P"@Sej/kdF/"H:53U(P"a<@m[EJEY6N9rVcg3X6=:f!d\,*C%t>Xf-l0^:VXifK\ZUN2@(@,nL0#*"G]c+GJFKg#EiMj_='LXqZfj0^)lmu_6%!!`#>522qiAu9('u60P%W%GZao:&8M[q3n'A8k,CE_<:LG;*hi)Dij\h14t`#a`KK'BH5=2./rejMAXTBXk>.HFj;0).NIo=km)Up4\PF=B@e7EB._bE>c-fogDSb^Y,Q@aFH#2M_1SO6>Kj3h5m9J82gfJqO:E99n&BXNZILVA48,2L/Q>TdRQt1#op)Nd0edL1Z*iiZ>rr>:YF/kb,Mi=X5mk%V3[pO#@gOo1mW)Tb<2ZLlK4BYM1-%C<^t]h'o.9O^Vuciubd,9)M@Vm!kj\`-;daYD4si1M?SKeG[fcqNUI&^5F-/WdMQ[oY1nb/4?a%kb7gnop*->)'%ZVoDX5#r7:lJJsER(j(/O8OnfFQZEk5%edQiLMM,D/CTp1Z[+,dsiie,`6GdWVJX2%VVM4hLP^*-X9R[I;/6MiUriUqU>=*CJNaj49lh84$5N2SN@+-Y=X.Fg)qEGkY?@H]IVnUU*KFpi5ifDN=O0])_9@4eK\$QaXT:qYl=\1rV$DKMo*okm)T,+8OrG3?'hand<=@YrrCJEn^m[Q??%o_]G//FN>h8hrI)A,I!I[llg"KMg\1"e]N=%>V`T!YY(!i3?RHN@^E2AoHT]``I/a17Im3C=4dL5HL\JPO9\1OZ[dfkWVfD_:Bt[5e:[HJRf)G^k4;B:D%8BCn!59Aa\FOF_rr?\3-f]]/rrDC2^\S=>-"niA28OKn["b`g=5Z$Fu#&*pKJ0)(Q*)_r@cSSGu1-UuTHn"iIX8FIBL#N%3LftIr^!L]W]L<'^&0+7Zrr?WWZCba38'kk?)`"X/l9!P5:+\HnMN"'/B`6KNpQ%.\)!SIiesCWBVs8Gel5#C^@A&lQ00Z-m:Ui:Oa6iiqMo48/X`*^l_)Fk]e`.T+3FMZG%nO4r-`A,/Flp?OiA^-?YN^N@?fC.>IaRH79^a!TmeGID/m[sm.#l+aSeYHlS-mO97IXO"h\bgRp;Uh=^C84G/cPg,ArQQ[krkX-f:r'^r[/]U<9$T6eaNHcVh31PX]959\rPK;KX!smeq,fB/JXaiR9`;4al$_&j/l,`#mp\5G4/eC4q79-n?Tsj?EN]u6dY5mm2s:cHg/#k%J*:>dLY-g9da"UjUo78!,\B@^G5^-qulPNN]oGTr"+4![FM)(-.;H5AcDak'S2>!VJPl:`iduYhR2kk^/I.oZDR<+4IfFf=D!c^IAQfAGZVf?!^6j6VtQAFa=tlA=jFHe`YpuUe\?FRmrNF`-14*i=2@*:^*N$Z(ArZcHq*WWrar"d$gB;k*CO=r&iK;\5cP'sI?"7,"Uk+9VN*J8W*)!5T\F^%Lj-!#NJI>N)F.*;GhBQ%65\E#7ZXb'ceafepon"iJ5JR!/nSsY(XP"r->=,&Jbg%U.aWPbK/!(+#0;GXo\:#[=/Yd!5VM(ah40+j(Eo?V][L)rZ2s?qp/s=rr><&_S8)s`Aq1\l_0NC\H_.1b_,JMfIu4%>bbaN-j-phQ[6qKe/mX;dY3(#Dr-2$gOs3^)kiYFNm;*K>DbE4$ti;e2i\,mE^<4[iO@ajgOYc`]M@g2*$Q5A`<]a../)E'(&.'(nLl1!h=eVIHp\VWUWF3r1D;VlDRaD,+>JOR3Zf^73H(C=6c^MLT!63Rlh:!?NN<9X9%5W+jGI88!>&#\J=sfq^5YEJ$ZnBEW?.KXIhfPL9IN5R!W)T9Dbpa8"#poP([27kg+"S^@I%Kkm-]2e]g:n+^5sa"M=ob<]gelC-5fL`gmnQOiMJ1pLT_o;pD(!:uM&K0CjAoJ$F*4G(]jnF1k)ec24=Kr4>@H_k'36r(/':R4lHW(H16,^rSgq@Z+Inql9'lCAp,N#=ln>JX4tq6Y9oe0Q]\a7af+Eas[[_cOtK#\u6IaDs%m[?]aYpGgkZ:fBepGJ#/4>p#)CMRi.(@X_R`pGjENnP^#N1]g6,(ID/p?WQ!6\d?ip/dICm'ZinJcT/saIV,E7mjDde;*&WuN22psrr8WL.-@LoK!E-.*g_q$'P`,/@-n;>VkFhG8@eIr_jY"D35(*9X.?5\koDJ5b'^_5;9L63f?oRHrb9Rq)/Dn2>W.7/m8J$#B1u)8T1pIUIWJ0=U!9Jt)b6%K?F&-*PaaDa5Fb?`J&p^'^Y7pZW@e6cXLJH0l.=o"Xh-Rk6TJfPLJFr/H/Hrn\p0m8`2d4\YQ>rr==-)UYlkG:E,7"glMH!c_"8^\>^;n!3^liLXMsYo9th&FqPX0KpVZ-WDYE"Kn+9jC!b-j?lo@gpprI_gY,KD22SoiBV4aeC[0DJSEoD\g==o#girq?b/=.MSS3U+3'[!=eIFh2b%fr]\Cs2Fq,^YUWPk-LL.M=EO=mPXo_T?QqL3D`!8&fOL0p-/Q2"C8/q&>$o_+pVQP8o#B`'8^C"(Vi$+"%aV76T5$+$1l'M06@7//G3_b7'Hu^4oqgkllTs^9!u!]YGbcGa9:dQ-!d:I$Ss8Y'j#Eh;ifMNZPqI*&UqnFUBlWH0?jBL6V#$NYoq\5lGMlqoV(O/?OM`naK>e_$"!+?G]e(B':]]:#.&H+?!$LE]3MM$2.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5!.&)5='V^fJQd[%Y1SG.=l2??$qXhV>l&'`M`9&<[5n&LSG+n!)>UP^Ds/*^m]ChQVeND][oY=9:nV4.R%+2?5Qfg23A_u2bN@nCOkTRcl6O*PNLDiZ\6[NB70=ctHNDpqYLJ'Tj2V'9eG]_BiVrlc?//4?LMu$2gUWP%S1^.WkZ@3u4-6BGjuC[)`I:e?l=S&mD$_:[RNZn<8TtSiSmnI0Kokof%']e?0ftD?YH7a(@rI1mBtbjV_Ug^c/\FSgC^sYMDA;o4mJd07WDED*?'lOf(#^TYF7m2C;9\Uqi8jQbV\S%.Ip[3UEu#Oi23K"aE`])J#r9cqDVd+Jau7Ub/>?Seo[g[kGJBgD]<[XZ&j;.eng*hT]ocE4qAM/k)g#U*=X_%,,?\Mp8H*P#E_.RSFa]VJ`pgeJ^511kHCPSAD!D^MCB(aORkc-A%1'brM6(=fNXAk`pE^*q&fidYL(moWW)sV%'-#rS/D8+jH-Es\+DMPn$hN+!KVPE8(Nr]cR84Zk8c'/#/t$P`?FB*o141+\Li@l)")*!da=TYidqJ!dcce88OPZP#3?l@p@b;lM'A%_;QQgBfB6_a9,He\BIA1?l9QXkeZDGJO-T53p@`FZ"r5f4!Y(H+[FU>^06bc."T"QN$qY+2m@Il/3X[4N/AAhR1Iig,&P):+P=abj39rO#"XO?=PF5dN/oDP3rFt5]&--Y;=K:m*Z`\YFDEsW8H/[m94%<]g6DSDWV[3ZoG)Z2e*R\E]_'s,95G6L'sOKp5^htin+Q[k2]ifWAga5G7dZQB!$Y!ACjisl/qBR]@iiD`HMD"Djd5?V'D+f`rr<>t\3K`]9'jgYnG`JFHbLh84cW:7^RdZR5&o_GCsq7i=3@.cKdV1M6U;lHN[`+r)"j[+PrN3@BG((qn4N)'_S6AW&f!6-9Ol[cH4T_&Ka@nBSE'P?Y9is*INnPsiCL<(8@@pc`Hi94cm(Lt+<5%/pt,-r>qbnT?f@(,O6h6%:s6*C!;5b%qFWqQrO1iDpliR*Ssis2rfoWob"[:7qeA^bGa$"HOoGD(bE9jDI(apU:Gqq!'n=<]^T.;6dS]qa`ujk:`4n20!2RO;He5%lcL+Wk=+jh%e,fRL`u;VK=+B]SjH&=#!/6jo*+'*rp]FS-9:/D$?cC9,%t'JKg+.5#k#k"i`5$rr?B?*>-)'[nL9HqEb!4HpYF7n%pXlGEC!tU6"YfdT[uaJF]*-!507Irr<)'d5$2q/aN'#8>S'iSbbN9k@,W?FqNTHMU($(s7tAPda0%58-/'X8GW\^9Q^XDGkA[H^:%rITWB0*,7PbTN)*J\SP34bEBoZ-YiR&UubWPEn.j+iCZj?lq1(T32ED,Ne3r1mQM,.0%N3>r'f!s+)$\>:TN7RQJpFGCBBLDbhgKmT6#Qi_>AER1=3`PHr9D%LO:2?$SN#$#\hP]!e!EoX"+UXV!3]5d''nP[Rdhqmf,bC8`uYKk2*E=G.5@Qhu3Y'f(&GhjXV-\Goo^O!AU`;r+8bD77l(%Ino8["pSD1<:MBR'8Cn;&H9LNMnqbRbB\e;\<"f18["Wp#/;eMlHlZ'f6#isBmn)Npn(3Ae!)OCeG"0:HYj7R!S_r[F=k&hj.*nn54%Gelr[:ZKEAjnil>o6`@A_e4sW:]="UpQqFA_-rl(cP>AF[X\VANg#*d]'9nk1BA6eXn+"mch(kh#O`^\dN%83^@@lSpTNaYol15fP^65LlUhHIRK.B2:Gqh>lm\Z5_eJ,f(Hr8)95Q.'N`C%0I!otEqH(`@*Q%u>p%DJR;^lX?gAE?Z?$Rfud&J,(TZ47Q(Il#=mb7r,U^l-@&bqO$P?EOC>;VknE`+8elU+5)G/IEVu:D+;C[7og_IZeia;o2N\FVoh%%4Y$ct7Z]_uq_NV"dN_ZA2VM0&[0hJTMbD^V:WXTK^t7kA=JbtU?^5a35^'Vo6)/GP;%:)`rL5M>L]gU*9>1k>1?g3,hT?-ORW`;l,!4J*AN^kJ\?W>W%=1]g)HU"7#+3!.YCMk.;-(Y&?0l]g&a/E^0$t>4_OW5Z.,cqU]<:$g10b9sMb4%^'mQ!,aSokukX4!jZ1V0?Kj1r%gpb4Mef/HVaYA98WHP0?jnF*[4tQ<>^1MDErT:J*W9t!%P#.^Ct8RdbKe6hODm@RuT9rT3@FH#HfHlmLC[,G,)GI"4s@SSgaLbUbjG(^GMI3bo*9:UbR2q!;3<$Hd[j^OO+))H=i+pGGWDDk*$ZGBbVqD%52%pHW!`BHZZ([dJ2*S#JD-kTR5*(KOTRmqb]sLPQ6r]3mlN=fUrB598rI6aIm-q(Q(gkq8FW['N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!'N%:!8Y#FN"3sD?6]BE]B$$&Irr@MU+1>n!nP%=bi/D\jb/:\&^dnD)>*KWR)#']S/5G$VI5Z.o?@j@%+>/FZXu0.2at%WHEQjrZC#0dPhd'?NCXIHg*E1n2D:Dg0U2PI!u0ldK]sl*1]F,`kN$Fft`E^`F]3dPVDZMgL298DRfG;hD*H&:X`^Y;1i1h+hrq%Z>Vn309YI4F]u5]/uWf_tfhl\>[nQAq$WP0?,p,2Xn_Wib2R!I3.X;J'0k%i^NkI^9U88$KqZG<`L"\\n@meBAU?grK]Vr#W3KI$`Hf'>+,!KG9=G;MopObd!fd!?VcYMQkQt??h4;+,BFe!/%rTU/I)/Xr@jb%96SqLps'+B$5-qTTf[^I,i`ZDli&Z;fGg[9fo3c!>_C`bX'IaMgte3U,2JWrCB&#rOAf?P\#\nCpcL.VT\ef\BtpX!n8MH&&>3fh^3Wjc]91oWOHC)9!nKO>u9Z4;BREZlcj%)ree>G:cOGjMP@r&bZ+7Q$`GQ.Yr\=`\_XpaLJ]8aUR'i`L,`CtdP:f`hWqA\B.h#@Akrr>EA3?Link(7m!V&@6_EXBcpRPDWCV#\op]eKuW;3OKa)FOdX./0D6=ek4HM.!p)[::MqXVl70`D9JY"jYs^OnmIGOA/LbEa2)]LX23^7:0D,Il`QY;3,.:8Nqd7aRRuSW5N<_WeHf@c@9#gYT--B4*mNFGLjZh=4HZP"8G+#^+oDpi=?EG5EC#E0D16:lj3fp3,m+1rr>aC!uCn:B/Sr2[l<[80>JZh(Y5$348^Vg4o2=6E/TOrA[+&od)@Wr\,37loY:;;_r5)&0_!lt!$+0n@\^kj,dqJQ%RhN9XE;HAQLKOSjs+>ZfWmj6e4G5e[`6h,l*A^5"_'ABVS0c4]3[K3ONPJG";$$I>8?=(+#MuKW(#ZPl!L;/&_%OPM[7AG(=LuNe9O\oRO9$k%ncd@cl>QOfU23$ZG8]q)V;B\]/ff(;tiK[.4Nif-eb3U1XKUB8Rl5X"B%;\!)K_E8c*:crrE=Sd,;2jZ#Vl>ZIq5^`c/+*K+%>2F%qC_Lrr>h>q(q43o13QgTSiQ?q3XcObpIl&qAKpJ.*a9Z"G<.OaJ1#CMICSomtC`PLOL%!)#hR_r!pmA91b7@ec^q>&qA6j??u%N5koK\Ja&r`J*6sF[(9mjWo#5b,JVja^S(/DpNfF2!%`UFIph4lbOFisS\tI-8OnI5gA5;Ih>u1C'!^>.qODp01W=[uO2)?7/d+A'pK-`4i7n83LjoJ6e9%(HD+ERAV0/e6!i]gr8\>OX/*N[qm>%dLeF]Iqj^gW\^W!7g8ONcAA!^pO+AMm;6H5Nh81!9gko%#\B:%);&f5P1ar\Kh+SKe,I`iVrnS,ORW$[@("#'7n!G:+KN(@%&tS:.jRcjRh2n:c`*"j7'04>Q4[M7S+lG:dFE>^Qj:P\FW22rdr1u;GQDrhmKqGAahqO"63/fb$,Hb7lhFNaYXUNVuH`*^=8C/VgKcf\QQ1T-,0)N)u*GPf:[*71KZJ6P":2(P1`DD^cU1l]2KmZFARlWT:VQ).VZH[C#f6#U[[)3S-u@tdqUl<`3*NSNI'E/-[$$[5ddou"G/ZE1Vn01*H);X/$KR@1=D+/`N:TOrSZ)m>!1mujce)mi..Gj,RJ[_scaQ^?>TQjQO34r:!mr*,bIquhYF%ZhcrWs2lGpki[uNR6Vg'[?,hHok4)"95SUT!t?S)-VjHIRacP>[*GhHIZE5Y+crrn/?PmV(5=#R+Lb^D.*&Wd;.!RWg]%6errBBQ2/V8'.cj^k=^n]C>jY`4>7=#L9fQYNW%6i9jb`[&YH-]2HC]<=WVrB!r[,!Zp?MQ[3jI3g5#aIu1[.=LeaS>"tLtHhLf"#o]tlSr08TW.DN0,6a1AmD$Yd(6')QL%@qQZmDGgXIW9.oemSj6T%D@:q>jsuF+n5*D&B/FYCLYlk5Qb,'"@5"3m$%!3rr<'[p938W/Cu;jd#J/b("24*QBtfiI3&2(@W>*m7q?jgm2S'nhMP8sGu%7,bcCmq"BWZ/*5?'`m>^:frWsOg=%,j4??gp2o6!bRH]aBaqmRTB;7mAZGhd`eMKgK`PKI"/1gK6.g:7"TG(4f#d`"PJja6u>b]KJ28L-(287a"N#MAkp6VJ^FCZ(57'Q_ieoqNCt"j]$d!4LcgB7+1#DhXej4B:oU`(?YIEWhA3!aFFFK&J)#c6:T!+:?UT.bib!i4S&;_,2qM28CcJf0ccpfW8+*#P^.?Fn+C]YSk3b?/nC.)Zpj]2dIVhsL1bBn#50"%OSldraYkbAA+ZZQJ4i\1IUR!rr@/W]Y\n%*>(A[.,raBmlK*ImqhenifptQ?/#Ya]apTpU>'>POW":oq*+HO&PRULbDs#;V!Ir]t9]IN`T[onE0dt<^2&?A=g/0jUuH+m/"Z%X=+75>5M+h7.C\3LVkX5#VbkW>tr.3h"amIF[,WI@JEpCRHKJ"hgf&JfAV4=j1a#H6_`io/N#p^P-L49PRd&>o6ZJ7]mVO>k0V5V>'9-.%e5m\lgf43M8U5[j00/M/S)7^c#ic^U[R^iFiMdPJ"5,\Iac"<]C?]Qh/`A31G$6]QIf3#Hhe$mMH1fp0a[QW,.Jlr7D]S#j*YkR)$ClJH(]#b>W90#7=R*nV^bS`W3%A@:NY"]D(;fk'iLO6?E(&p>U_c;=rJH5Wq_KRZd?'P$1G8B7cHL&4'3'$PKtHW8CS-FYlIf(!![Z]`Vr!NmCYU?cOT5$k,!7[,.,hdg3FO-A`+&EOoV\2RS>U36FOG6Z.-/J?fO;o[$In8B.D\?GV1umCn=n,.lO3G9(#r\\0hEi"_C0n\><@`R\tR@6d>Tipc$$]%K'si*r'XNl;q:3["cJ'^KH5Oh!4/\Fs/!d72qjEA#YHWS;Qt=!8,K6p@^P^LqFZXMPj:&4\!qIaU'H^4\j#Ci+qI(k*C9#9-Z/:P$$e/orYD&G_];gGDNX+!#0+QM!oHMep+Oq>9-SSP)lo-n6qqKT&T(U'U]rXA;+V^,F=;d09NA@0,C-D_fLd_Cq@B-$5uK=IOIe2-7*+Y?LA!L@k.a\U3.)kN&9t&LHf5Y5shDbY2<[>R@#Yi9BjZ+ES^Cu&+r(6ZJiX'uinJf>KNe;YGfInJf;m5rTP\)pPp17\BIKc6Q=H&j`kZ1l/I2_OgH8$QSa$.>uU=.cXr1koUl5H9j*A/Q/(_YlJqeXCVq1onSaE["Oaq)iS4<;l1s"H"#s0Cc1b0IjH'OjZ)9%XU9<2;f#6"S_:>Y6(p2P99@^]cHmpG#k\n*_5DSkmD.?rQ!(XTLO@uKR0Z:7`J*#ZUeK[;pSmSGl7SdM?LP($bSbfGaDi6_j(.)a)Yb+S:U`[QC<(cA14_EhB1VpB0$EkuFD6]UF-q9UfYO*@0CXOOPnLfNilP@]*1,YLif_R^*5778(Bq#u6j;ohorr?j7!/8"N`@lmj5K&$]g9o58nELOe:+Fg."1(%=A7*hT!a-c+SL4.n?^o?ORq<8G_ZIFM-EO0JWalW<52:/(YOW?h^fOhf>\pLfJ`bE(K#lhCs>&RSE7`64,n`^`!1B[_acn(5e;N4/I:.U!$\=9ci6IH!&GmJbQU:Z*bfhq4dQFKZRT4T20Q,N"9[UZ%H'D+QDLJ*AN^pV_nKE5j(rC>D,Q36Cr/If'mQ(g?q3[b[#`F3<1SI'l!N1@i<]3WnWR#m?))nd1#cmmnHXh%K)Y1B3S:Z+&,2c^]PP8N'_ET`DO!Ir44iJ7@ER;:p8/b8CI(pX\pC6^C$aH8.lKu`8:Hr(T5d`"[=R%`O2@'?SDoZ&!VW9KUY!qXMAY[si6XOV7raD@erTmV+S7g1`b.mgN?"gnM:VEi`]@:B*0Q)ar;@$;?UPWr`7leVj&m1ade1/L%H2_pr0qNZgTfLDEd<96kAN='m;VV`--]ISHc"PkU;]*=njE&[K;QpD9#-:12__6hs^C`RWVtcA]--UnYI1#He\l&'L4Ush4ZO]\+k-_iOI5`-VFrfo$^'K*e?NGD5/tk?9+&gntnr?*`E0Gk<\KLaJ5*arU`-WBU>[Bl5>^NJoeuWhsdd8%>4)4:2):YgrCLe#2^#>p]T8.7d/W9[=GqGl[3Wa+caP\QOCZ5DX.iR^5MYi1-M+HE,F/ZO%Ur$t%eBi=0^E4>D@V%hks%[fm3,DK7c<:E3?5o##Yb'_BF^7B@;hrSMAeQ=\hV+=/f(_Qg2mH]f-r$pLQIT\$i*_kZUA+HG"9H?Y-_FoMFHBGR%KTBBNdla,j&Poo<"+u6.k;G#2CT1[EA>u9XHftYqLd,$KTeDb>IN&GUQb.&D'QpL^#0p7!C5>j#d5@o=pOSi&I0Dm*P0"7*n+/6uVm![?]g^[B0&#&;6IgU2GKgXeu!.q\P'msBeNMFYi^(g)&MbD;o-:8M.PKOsfBcB#P'lZq`p,7]'Btb;0Cj\C==s]K"VSjUc[R6.7S]l/d"f+a\OIFC1C4+$C.^3#@.HEHN@2!2*`Ki'='S@K.5nQ3=IXhJcQVJ@oAUH@l!I4,QN*I>3!VPfhfk74jq4N#\9*$)eqj;WtX+r>5FWGDQJG[B)`[/U+DaO"_L6D,X%[YbI,#6A]U&s)b)K=uY1=HgS)T`5"*Dq]hKplfW=i*Qq.'#WZtOuKoS@-TMefguH6FVO"Plcr:2=3kCi8N$(KPm(%^2kg/E`&)FT1E*Xkq=@K[7^hotFIn?^6^&lB4_sAS$hg7gEMi!)>?s.injOH?gLnMmJ8t1-=3/2El'_tnhlSpVRGmVVeFY_5Mt7Dmp9+M?HBu<$^VbD&3EjIA&Foa<`7RM1a)Z2ISrp@jq680^URF0;5*a-83+NNK'1`X=cutZ3ktT,L#H\%tdbYi>T_o%gpg6Y?k'^C.Yd&f5b$'CnOYCeHFNnRSrmMr"UQbG-=PNiU?>K@bmZm@@,*s&;PdnmmU6:9`P"T]M1\<*jQ^tu*KR#-`P4s8KA^pTM7fBL(*GCX,I;*](a)MlPGZ`73>0LHnC/`;;I,KsV%ZeuLN)!A#Gn2TQih"qdsTHcC:*-3SqknjrrBF(_\aR;lPkB7r=Wpo=-kHP(jDS=\lWdQT$kY]j?Ep^d99h5eQKSQC$YpOC"C][8rYrr<18d,.sDFZZW5;BN5[3dpFbPM0A2SG@4oc%Z5h%h,A$+P3(W^&J(DNtbhjW-E?4)#-9q,difgY+]L#qIImg<+#?$S9ieB!l4@&crlDIY7EPNS5+>_BoSra;X_cWqpSV/S47^$)(p;*3(`kNr6n/+iXI][(9O2>pnn&_J(&g%a?QGgb-d:*@u7B8;ksTso%3PNo'04RT/):19)emlB2temIKm?+)TR]B.oZXZ`MNC@+8=.$I5h$BpikZhYJrYP?c*p>eoa,o9[U6ugK8AN7CJ3m8.K34&ehrXZ!KKCaH8/$S6)ch1Y+*@%ESjo9i2sM&gTpD0r5X8]@[kqD;I;D'GIc)ZF2R[".r3k=tm&ccC3jQ:%,B:[e.r=YS`0pW>W9eC+V@:ffr\eBRZ4NC,SmV&DdHu*%:)sqo![!p%m:crrDObC[D@)peBZsMqJ-^XYp&Hg<'35p&f4PbbN\k`ZshPqO6s/0ABCd/XB*u^kjB5+2)H<7A>B(mb:?sUHIoK"1H03B8W`1E;].Sq=]:ME$A@a5Br;*1Wn[HD\6%rrCF?o=X5oMo5ES41frGIHM1e7+oM;I]83Xm2ZN2W+$(mS(bV3PcqXf:#&JS>g`Un`B1QB*;/Q!Op[kNqRcGOn27qEFmk;ne#ftq4hTKlP<>W%MWNhElKE`L)h$B=!,>=kikAsmeq^8MQX/)<5GHmMn$O[Em4G+4oWH#3nB%l55A4sNBjV8I'58NkHl[7>B".X_ZR62>\j$"Zcb/uSO8;+4rhr:i#Y!+')hbru#mmnde6Y-WFq)5MUYp]M@14;_@\GlQ.V.M8M,G+OuH<5fV`)O]UQ"mJmPAS&m@4=2uYTq_V.',fO25T+%;m"NW_>\Qd*GV>s(7O"Y1$OloXNF!=i:62+dXt($61C5]5D_Q4N@f7u&l!@XSLj5bg*+M0%Eaa*Y=d3WC?0/dDKW](gf[oN_34+V\fdbtGUmgLJZkUm,/0*iip>hW8iUSSQhb"$^?:!]_PS6:?"B"sDu=hV1Ak6ph[krf4&MCCg=:nlf^D>CWIkWZ!/LdSf,*FbfuLrgBQ(U$IaB,;nMRSn>>*_WV!8:K!u/YrA*R(a?4Ij.7Ps'ImuPCg5%C'[bpDa,iSt7;E4f-BNiN)8)H2^'UG_Xl9itlM_U32O_Q\,Ant>2_iUU*fV$[es:mVrr?6SeK38JlZcNBc$?8*DLd&(a$6D@X@YRi$3<-M57s@Tj#SoaI'2;/qV1Wnod^OSr$V!hT5*or!5usd(PLl6Sels\A="CTDHn_amQb]*l0lB%"6&VN4=Tc\_)<>PdpkJ*8Xo*'Zf<*BBBe`>R^)9Oq&\USu,oesne^dLM\Ar$dJo`UI[:QgrD=-q91$Q`Tt,\TZE)=RCs+p_16QJf,/$]^CekZ,[0$Kf!:qa1;"qGPLdW-AukSgi0D==/sb//_[K7O\uKG+YU[Eg``C1JneR`qCY+2-IC&^Z79]T]Dq2O.bYh"mV_"Zj;ZZ'=48RNPZ.3W\-\D=?poEBIZF]LYF[rjL`lV&:d8(g4jG8&'qXj04qNnu^[HE*`8WljEI`>sS.=D2($t%Mp,a^HTg*bs?E=&1b/_Zp%gM,X8@c!e[/*NY9CLCq/nF@rr@$%l0`33H'MAtTrrA`i716&O[^P*6h4ck\491C6!m3QT?N^4'rMY/kr'6-f(>`h6$i"mC5gf3@KrbcUOtu!lpW:I`H.Ra4ET3Slpkm,2IM(1M1n@uKO@sA7D';IqDZ'56Ti7%C"BW01Uj*jPXGT[N!".FoSe1\,l=@HQ;f!@ZMB!&3Q=Tp%f4V(Y4)"@V".;&fqIC^[RCIWVKa#]m0g/e!5r/WsO]dJZ>bIQ)'I&29N.kef%XaF;3[dO76kc;dC26tia,`gqN/S<;r%K?f(r#4.Qg]^ZqNW*LP/rr>EiK$nfEWN2>O/.I":4tan5m/>i2:P-N08!)"J2cK_V!akk^pP4YkCKnA]N.%SRbBFpgD=T[Pc4,0inb`$0nCPR[,=D"i_VZHWnHZj5mC:0NDd]e$S`\o@S]kN!Jl".?i+G/b(#jFXDN(+W]"0PMh\5ofnE0T0I1GNkXL0Ijc)PK%OnmR3PTAbnM"'HP^@Ij]#.uL!/`Z@Bg9O;`g0]b>fC1uU/'2-.AW$e[b#;0g0rZ\VIk$Ub0%WfFfc7*X'(?;/!8fY5m2T33l^n\M/+F-BT>f[k;HW@hU,2)K%ChnP]s:HidoeV6]4'nfGouPX3NjHi,D%sX*Em?Mf5COOYK+3Ai+kGT'ii7NkgYldCN\>,VUO?ZRU^A0jF1'TOiO:#363r7RHc:;WS\PLN]8+aC#JJ1;M8Iu9Ia^hV\+UF(o'+fHdG5V+i\qF8?fctV'3lo4fCIM!=.+P@jA*)p8%b5'SBfu5l/rrK:Gh]ltOYlV$KbBEL&U"@4bd*b,"(E<;JbRfCr+p>2..]o>n1*'Or^>YlRf7;FgoU?Y;%-n(HapH1881WIE32ET/VblA/_&McP%^,!PS<'P%sbITD`Z$Y09ESdR3C0f_\!'t\A*+">,j;ha3+;km5GWE,d/']C*Ib1a:iMT`&;,^`SBN.^7j4YeJn,:Y51X`r\n_%2PI#1^@tq_q)jV/(AqR;VpcGg$;`.;bauP8c90Z.,%J2Omji(GPs3#9JP+d>Z93KXWa34dpRje+F1lif#N%Wf!$P$C'AE:3#Bc)cp*Ekgl`1dp"uZik0K4e?6IS;362Vb\6j_Z)3CbB_k\m+O)Q!TMeSeeqsI%J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J-m^!J03?nf+_*-I^I94'1rctEBkV"+l\*;(F#A4WL2\8#(+]pA?ahD?-]nPO@_:4d3DQ5E&)YZfem\I^5#OtH^edVCnW"Q3$QYtEEQ_`^6HpWAPSC[r*$eFBY;gNl._ub6;UHF:L6,?KG0m9RWs:OS5:WTPoDjJV2b)c<=R7pNCY!Np#:UK<3^`u%Rp`>l'#9dQUOFFrYV_]g`?uEC:+JH)+`p1MPSQo$]/hcB_odCD"u!3-,7?i&DVa*0t0Z_G5K'qD2CEr,sAQIKmaL*_T+YAfPiA4B%$BTR9_+\FC==r9!YZ]";0"5a>NY:_-`..n=A5bNNZ*P`"oW>M)bBK@"5:UrUKeX5Md@uo^KA]4e1E-q&d0:2\SOoUR'p$msTrerr@3;p@#Heqi.`*Bm-XTI_BNkepJY"DiT;X07F:R_Wi'X/uLYB)qCb#)HNuL$b63:cPa5a#Ilp4L.g?V874Ht13.lj[63`[6jb.?8Do->FB"36a-K6NB/p,XlO>Bs9eWj'i2s3MF5VjmFCgG\0)/>bb-H475N*sd?S]ZcnmRQ/^t\`@FPFF'T^TI6Qh+RP@U31]j0uRu7)c+&DC&O]W8o*1WUcRI`3.F:"]sJCt?anDg59p-."GOb$EN/&Fk_&DT%Fb-:UT.(+frB$IbWrr>/$rU9J"^X2TFVFRt81kttDbJ0qRV'FF"?-WBL$JA7,JZ^`QJ*G`i3q9dANR4^T_,_Bqf0hnH%hg=n[bQAe!EB<6^&fq[Du>ds%VgVd8oHQlSAdXj.*WG=oae/F3282lP:j%7H)W>qnhUB`o#V-hNoI%=83%0tk\EscI9u40)]^dh/oIP*YsS`hOkB:5X3(8h-D]1SX)*Qmc1X;_Yt]:diG^KfkHUED:nJ,EVmiU<#gpnd_>)CBDW88n&'VU='"iKX'8pOEoQN?PBfR+ZQ//7/m7(\Fe*>q^Qa!&lR*UNh`"Rq.:4=7N5mO@F@_q(]12dWTLa`M'!K1?h"d/!7'.J`"l1[CO6>DnmV:m!,_9(8+=K:misbiRYpm<;r*2Ki>d""2,*[9!LDRZI]mH]r1iAcle%$`7VH;t:#u&O6h4h']fMTB`W[F5#W'LAkqI0Ep7d.@LX;Pg6)6_K"><'c*ndiq,tqP_4WMgumA:3t@X3ms-a6Ul?t#E44!"F$^9TEG_i60Xh!:hU[ZgGEkD!.3/m-kMkCED7[HGU&n>YA\7nPoNt^UMR5-,5IPudLI+;P!T&m62Y(^et!UWp.KV^dM1L8$Q<7c=p;9ZhQq*`gdjBV=NE8$kqo17H&g)GBDmp5S#P\^R_@dnL&K5^(GiMq,`q,TrrDo*!,qo<IFT^gTm`fm5B-TJ2FB5g'4;ArGI#k([5$5=7!8$*c_A+6tdhP9TW`=V8Lje/o8$1I=;O`(4^T6EMB7s7(HOgYo2>8pm.H4f;(RRo-6N\PQt8$r9!!/n?02C#]!4hct,*0U":]]..C'>HI"-1l?N)BGu!RdJ=Uu^"SA.6g3_ulHKJc>`8W?[A4^_JW?;j+X.l>"gBV)5P%fQ!IiDar,s?$B/$8^VXlX8CY;$OsMN9dI"dAR8)Z&+E*_1\cgs4tD&&`-1_H=2U51f'`)1DQZph#S%.GqsT72c$d:pe)5.p^(+jT=nj@1>C!$#V9Yhro.P!+kBss.5M]Qtf"R=uiN,d_C!5:eGJ!KSYNC:@`SN'*S2@'/K(daHfoO#mnOm6"?2(ejjd3nmLV>85?/h?W"o-PA>sDJs86Y0.9X5LoObjfE;F^&T1-6O-PVr(lmH''#W4ZlG^^js?nkpt5mBUu?SZNAoN[pl;kr9%@`8R]HP-^BOqpJtE]c;@GM?'`IgkI8YD?2j'_/p`E?:_JdCELe.L-%lTjor>NdE:I4sRZ!$1u!rM;?l4;[P*ac",Om;CYDg10poD>jlkdIqc&[tJ86B\NA/G,aH"%n;D:10`r17!$CE9(H^qXd?e:6$#uj*imRNr/][:O3^d:Jpc'JiRU0)j8T,#rSOY\icM$8WgKa6N[(^^=i_;E.QW+Ck5b1Tr:Qt]"/Sn+8iK0/aglEBX0dO"MH=<6PE4B9dh.7gd7NAJ.._pWFAhCQ2!3]5gDoD#n>g_ne++.YJmkru2faf`3^U.SOf?fcT2Ng9;_qa!TL?l-ao<[lOs0Jj3uNMYkSH[Q)JH1qKhf0r`^H_SN9KAk+)r_%\GV?k)&F]"og&D%pBeT1UlI3l%"T(l.'Wb)!";BM';#'eS9>pi1"$COM/$?Cq[_,DCBm9*c;/[W6[/>]EO^$pXm!<1RC@N,Yd>,*VXff5U(qd"N.=5W=*LfgtIV4kUD=,S9F6R"lD=CoP9jnO>i`gb:$L)Vkn_NN;Ma8Q``tA:2T%d;LfI+Hf#s-2.5.T_.W6S'PkPI$MT0h]rYkeB*mfQE;e7oBgcJOBFjGXjELf!fQghB4Dk3V!$IQ-PddH4IjAbMm@Q7#?.0N*Y1D(qkOJ"m/3gI)#^@#u^C9MJAj8LLd?8kM"Cj$-53Lbi0j[6-^Q.1g4sjOBhiBrIGaD^$L(E#r.2al,J;#)1F!XF2dVZ0>5;USX%gcEVaa%UrSMm8?1AI3RZC$#Rj*q+)H'="VY7O,RMsOIba#0JJ_gd@YA577hO'5Q%ao;>l[*9BSj)Od9V'l'uSQ.Ch2%EelI='+7Dt)jqJ_nSIr"ue:q&6nGW'C57d\25A2isZ[YVfR2)u[V\o7XqR1X3UWkE(-g?$i;#!WAO,*]Qn\9j%NFTh,1IYlT>>6E^g6i+,'2O6p#VW-:+%uc"LbC3`RY.N8Z7-Rn?PCT=ZJpTd86*2Lq4?-dL'SdNL.Z`$(G0X"RQ\,05(9),fial2&F9-#6HRr=p/V^mh8D)kU^7jXQ(k?u0iPFD#%VVFc+r+eF8(IhAtLS3C\Dl_=RgS[K6^C+S?NBDY?3mD.O4i1t+Y'pegRaho?"k5-j]_lg`$<&!\dJlLBnZh35$^`Hm6Od$,W>A$7ccq.k7,1IjP`4E2NB>;m+%uIJH9=Sp,DP#_E#m?C6)f9\>3=HF1buXWXQ\AuPCI_OlBX6ZhHA(L>[(H$A!S!3iK;NuTYf&TWa_Y"g9/m+qYr27WL*`TMh_rlNF'#?GYZAP##1,^b/!o5WQ.oWD-8/:5t.>MoG\_@>XsLAN+DMYU?nI*X0%Ze%1rWBTL=K!-Y]U9,4XaRrS0VdA5Zq&#=3EG[3lEt"1%V[S_;SiD53i;IKTdnZD4!/[cMIgQ*&?V%/3nE7a\mch2O\B!dA'g/dM%TS,![q/Cc7qfUZ^C>Xm+$Fpm7Nh<7bGA1K_=PR3;b''Ql6tDF@TN),`qQiNeP^E_4a<]>ZX\W,/r#cAL:VIWd&bq7VY7,).)XrHdl/!?*m'Q!%'udOG=kEVMjkKb;9lD!cg:Wu;dB[Zq1Q61KQqB2FgZ"RT^#/aWjF"Z!?eKYC>1:H7isD'iekLbD[O&LnkR`-@rr<*\*gQD2_Z'UjSceb1'#W\!*]S&.G0PFomk1CVo&l*!fj#&iBkeQiL\,poT3^">rAb//DXJ,WO/!89+^SU:0A9pp=,%TY_cOG$-<%j/F9c]3ja8KQJ89:&PngL^I[,Q,3(niPo@BlU;15FNjo5T?"FiJ7-*4QcY7`WJbSP#G8TWMbaX$K[\_RuuVmNS,o04YI0po&b]>W^+jX8UXMe'JdKkme[k2_^WJb/0$Wj+*17jm$&rrqGZ-s_BF:6Xe8H/Zj7R7W7o8m'&lbLSER'RHi>u7iS.i`]1O%6@Rmokj9RR/aJ56UP%U`uo'BPr1E`]9m9-BM^Smm8A<@u^-mF^n5aW0<#c"Rq4n6sektGP+&$6goV)Umkg\K'2@KtJMe:E+&lU%h\X]%&If-^[29S"IkiQ=Iu9!Sl3p&t;aU]4R/$.[!V[]6bf4@u=)m5&\dO1`p]`_JNsDMC-#>!Tl*XIk.N/$rrBi!)#2XV^U^e$-V$BW?JNOf8AFf>1P4]an@nSOJ]fcnSRk.n:!QP/rHg1VTi$K?m1aR>%.J/Bj.13"$UV;nB9VJ?f]";((u6Hsr$jMEq>laEYHke]i6Ml10^u,WQ8=3%[uIRK4[q`Fk%$eb;pU]>)I*G?SB!Cmh21J@k1.*(FA0qW1\8dE$Xa'(NNciT)D$uc93MORAI]@?9nZ*K;3RV(9HYYk1Y5Qff'"a\4EfAPi0R"h@dMciZoD"8;:cdd4JlL%F"-pDM[?IEGSC\E]WFj3@gkb^+'h/WS+gGMdMt;Q^_]2glLAPm-F1Wj4:F-5DT4ORd/$5!a]Wn!5k_gHMNa:K%T6qDKFHSYL9%phls#r?\CI\G_Z(6HroYG06`[n%$/tq46Q>Zd8fLE^GGOQQO/6n=\.OT..=SXZRK-.p?mt%pTO`/?l-1odmXqnp3R&G]EBrG[&>S%0eV]KApsV$]RK:aB!.1'JJ(dNdiN8*s_uB]VBJB5%iO6,JF^GU7[T.D"HWEArAfX/S"Ss0TBB+L.c),2]'-A2X"7)-F_r6=(r:=dMre2N]"mf`\'V'H9oZp?0cGSsSS+%s%K(sod$cM46n:fqEf\S9DX(_6ck#lGBkCXJrSdtsSh*uaMKAkj2qXc7"Am8h2[25WOlhn'U09hZ)@-M^TSt;M)8,iPlo+JPm1n\p%V1!4@YCQWQ%_l\\%:=KirK;!Nhbpb@m62ikG3f\"JNU=5,Q:l`:4>LXpi6%DjN6DIhH,;Bg,UBeNiiY!?uSC:O?r5KY:e&`Ah\V3`c9F(H:fis?^"PcC7@\m=!K]Goe_G]3m_mX2I+66j_ZBiDg;(+#RZ6\$VenNh5+aBrE@P(;o!Y]jgJ)g=(Rae.`0a&-EWV6>ZdToT+&UWIpRgh=iu]"\F7s>CA`C6X0rOfpq@,X>md9D9P4SFV!_Ki5MTlg)7a0&1gj4k?Zqg]$_S6Oue&H^+`43H\/DOK6=C,`8Gn0N/F)Pt6Bui9NaAkh/^lBq\Iqg(Z,6%Z'c\l5C[C;aN_tl?T1s9U#H."O)10dP6"HS'7NYOf!o3G8V^sedCQSc'@48ea*aR57X=[o3b29dt@;0V?M+^[*m#KNHO7*q?Cmif-2"6c8c%=&8lZc%fhlJ$U=@R1Io%f[n(caQlna]k^Tp09];][0c3&U\h@6j\@rLW:i>SYc?`Y5>0s2'Ckl$@tqt+CI)WtIe6_9>MXdOl-VJ_Dm$J:6in"S(u*^C!1umN;o`2WpljZ-^)-]qnFW;&nAHIL!,(.6JTZq]O8QAj\SRh3N5GBW#!K$JT*]mmKp=5P@qa7R5l5DuAIlDleUFR>[=C.H\$8XNCCI;dW+kOFP$+7Y*Wh`^+oW*?8M(gPB$*piD-+2,^9J&k1);e(uFMmSeD%HAk6$JFUX&.5d-Vg[b,icFs,ifTs)"S)t@^_T+6"bHpQ^cDX1'36+>+JP8f__XuTQjp/hlA>K:noZ_-Ue45Tm,n;R>HnP.*KSh';qZC?2t&,`fIdnULs4I:`%'D07Qj4O9>M#8dCi*<;D&)5RjQYMH?[(l"a?h0h]Ku+g1e*6Ir!Y&Z,F89HM2Z?5EZJFSrhu<=/qH(<(rrDa%pr24J2LcJ>55rh%S)JUCOQsOnR,#dr!M%JLEBHW!^F:&a9mH'WL8NGt%VED+iX<9(kq-3J6Qo14iK!-V"]%:s24Jc'1\1qjC9X[cb8g5\(crrBNtr9epe?a]Wd,@.G1>p594Rje9D(!#]Yiu,REHnh=orr?lXrrDpMY6Lg1I44sBBD.ACpk[^(/O$]u\j-+Lm!$4P=2c,kXh8s#Q@Fc"*0L7$IBs:Boq.4N'm8/fGMY@0@meg/;RXLC!$MNK([dm%n8m$OeXX*bo'nhBS`>oo,8X6Lo]MLRjQoGqh8RU?2<==(.ibnt/CBThq.g8J=;U3>0.*3k+W'";/^@rWP4B5'0CJ2cq_W1TME=_kj/=S%p'-4;2'V'B,l@TAOmCqGH/e!(f:6Nnop`G:Q!RfZ>Kk"ScbMc%IOE`#+MP(<8@,b7A\$_BDCOWdFJSXF*:>%4d[s:A\>5dU#Y2$H3Z:r_61iDG=qK%?UD`=l:e.Vh@WUCj:hUp"`#WOb!eZN$URt-Z"usjA"%Hr@i$hW<[32F[B8WLfBU-[`NDCgM!6HUrIJNaqHkr@5Qc&Ur8$,tj*[:,b1#:':$pCJZIV9lgN;inD=F+d)[GYDt&&=t1;oc$"/UGC5n=PB&/)<`.o%i(7rf(MQ9T1nhU+7;XpU7PR/]pG?Yc#Ii.M=;Q6s='rOVBFamlf!gSs\nNo-?Y?U`sI:G/Icn,A:>Hq=8;OaT4h!.Y"KD3=EcZ(V%En*2?oNIE;+O2YFUI[$3`[(3!Qj\!H1SdFo8Gf.M3085_^D%1ZQ@$13>M&e_gGV?j\TCBA'&\Ft7rKmMC(&,b)[<4s-"R9N]rr>AMkO>\(]KY<0#'R%?),HgBX(p5[m*DKM0R.?bC"9=)[.N7\j;K,X:PYMFD`9rNV6aGo_enf2qcr(UK#;'p'i9>EZA2P-UK4#LAf*NgW`LtaL11Ds:Y-Z\Q)eY#RKf7$XD8WW=kHlSq<)1WX4RUT-9W)6;sfcU]&E,q*3+XN(e0cMX1MLb0!G3+Q$u^"'U&?N^CgB4L5^t%`!6)("<(WplhY(7FsuhJk.`a5g`\;1[agqSlq,")lk'R*!';Q3U:%t]Q(ntlP:pIT\luOnG0f(CX8nik1SbERZk&08ifi(hLI@3iJ`Hu];9q&rr<2?DmOoB>"lR1\e_Mkgj\11lGJgKS#b.Vr-+s4H/j;UR0PrD15Q%['d?"mA.I4rC$UZ]Ku7@JA+6^,[%tQ[\>ZR"Gk+@a!us#iCX?W+eTer.jM9(`!c]4oV]_Y?7CQU%Op`pG:\S0E(t\?ls,Mlm6C+&6o`JqO3S&I_@VeaCY\pi@l_m52!;c,J*8`(qC4d:3*1FR^NK@D7X1BFYnm=1rrD:7rGRE;&HRoEYGF[/)"JrnrW`?k[A(.f(s(mJ2L@5*DLm'_ho`]9p;nQSm\Ub?]oU87!8G%H^Y4=[MuNcOD*RZY3r/?SuOjc2MAL:/+O:jn("qKNHtD2qp0adiE-V.8EB:_">EpSC,BR,m2_K%eO@j:^/`,QjM>pf:",,+;>e()H"Pg2]:n+V&W;I(HnaD;ai>[8>&ICi(kHi\)FfR/3IM%NI'n\ehl"M/ai"u%)/aZUFGD+j:TtW[Cjuf)#iC#&#sl'hb*B.a/GXaFf0s*l(0K\3I$D\!*=,)c4<+NLWhq1ihs$106GCIDtNq;XfcN:=eV9%$:to1b.=h=83DJSaNS[iMk"cD-1'qfBeJ;d-2+)0Vs9^sP1B50RN=!KT8:,nY?uNe`>UVrQ)a)SQu;9Yi\AUaNl3$`&]#H=7:Tu]^<#g$`K,e([Q]PGHo1erFZXLOr(+/I=nm't!C^,Z&+Ecf5[YS'P'WYfF1^U2N*cb&+FF[hKu\fE+m;gTbj[s&j`ZK$JZH#r2L\RKmcCYh9l:D!;F_R!o?ZYt@H][%,d3eU"M.ZahrXQu:MCiq8%NB?>gYe[4qb_,EnK/BZ?>kUH$#MHYq5c;6jq$s[#G4F8rr=W$jh(Ido23,gqYKVaX,EAaBr70=4H_K9B4?-;8L0p+CXR>hXbZ!7;r>_\(XIS(*m:PU9Ict6l>Pc*Mrs\]<[EdnOU,2%4&dt1=QGpSjr[bnh1]gZNn->WlJi`2#Sj.*GKfD"OrAYU5E=r4X`G>.&6m9C+4+A89gd1bo!2i]mT5sPYZMC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,$UHLT3ME1,j#I\=+1i_bK!';.3$F^2hZs%Us[$l)Wbqm@L\7RaS.3sF)I,=jf:Sh_nEN0HTHYDB_K3cLf8`bS]6829K[fs:=NiXb_?S;X!s?]m!\_;+!0Qerp<(Ob-sO2"&lAEbTs$NA5H5UQ0qiNh36_Gce$T?.%Kqe\0'nIVE:$cLfe7V\b[2'oS(c$D1q1`q_2Q*=A<8#A_(K<4e6jN[I\\DNCO9^qMi?\eL%.r.>ZrLZ%HZ8tqnb*>1rNj\I"m!#4GQ,#L^F0r#tK9Q)(Sn2V&Um5Vsk?@lci(9n4qg#O8/I0;0,4M2(R`C,)bM=rM('SSl/m:24e9o>_+'oD&p&>$3XV]uhJl>AEGAY/VQ`,b,5`I@l)Oc*&p=C;\a'3WKn8t/Gah:Wl_;oEPncQL!R*"-b4.4[un/)CnG-`QKZhsAP`-$\OC?OVAbYinRVl^\7AB*\72Q5A8@J+e)j6,NC;!K5L4Sdba+1I@_IpO)\KKWH^A@RRTcGiLO/rNhYOMBScZg^5uFEH7/)EU?P@dfcE*B-BjJ;8T>#C_&jEE>CP;;gi9E4n\8=o(P%i*/AQbm`+fu"qa[2@!Qs[lp2&lDrr<^0rrCfAnK4(M+L2&.+Kus5O!sac5PseKgS=JYZZg&npk<34A!Sl`0HBd^QUcS#g-;q?6&(>nfUrr@b6MtGg1<7PRN[,!e.nc&U$Df6o!nl7R#pj:q3`Qo7/O2Ltt%(oSf7oL1e0OO_A_M\1YIr4'OC!GdSnbAPS5C'B)\$O0PY;MI%+8@5g[4DM&#Ji&:rrAXZ`j7PLqY=f(jT7+[XgT=-,fD.2)LpnA3()a>[5@iPU^5i`aZF'`55*uOdF`HMOX`?$2PoneOOR=BE+jF&s"#N.&?L6'3@p!`Io9%(iF[IndiU[$pi=5=h1`:iX;GZ4;X"uaDqU,a=edQY50]NsK;FD`H,LDC%orAji)1XH>b""YGVeN&mnur)oG5hPrHSC2cT=!T.V\^3mT0FF3&l%l)`UZB/'-.H\06pY>)HXnM"lB#I;ItF@!db<\\SFj7#@sH&iF1P6oWQON'_k=%n>W;N))6(d4ie16CTqCKn\_*S,U8YA*tUcn$HUe?qr:m;4H8)/3Z'KjW0*liF+%pad4!cV"-Nrr@XnIa.E9l&pMB?7^[f,eB"OD[q2jj]F+!&TaljoEPO2q?J4Un@3tLe50L:6d`_Xrjc&dPM^j9eG;,_:VbdBi/d6ZVYF'7.&OP1=BTbSoGl^p4C>jNpJp30oMtXgF&95*RRoi"qUa-O/_0b`X*bG_\FAf7ftjY`@Cs8Zk<>BHO).nD3huMc-ldBU]me)?EcK">$!A]7pK7C;Kg!X*W@7>9c:ZEZXn_QCdPP=f`YU11O%`WnrrBP+KDl[_"9,-6(a&YGeb8Q!gUt&J-QTdJqYdJS0DHqX-81F"7ut:@N>MTp6lP[p7@!@a^W$%*_=9$L%2]!C!7@DnT(KorDOaWefAnL\C-lB]5TEYi8]dc?G5hOG$STJk"Z#cN!/,sErr>P@IC#t[#Lr0OPjg:O?F]tjhmIhhn@MlQr&sQ\_clK1E\6YMh,`8#GtOCW*,ZU`%Soibl5pW3m9MBGie_'m%)kQDFK*&SFm6^PF\sE4j]:.mAB&+`=3HoQ4:F<-6^=D96:EAK*NI(r7B1Mbun,,tbVV\LTcbs:h>=>QG,J=;?RQB';>iZNhK/f`ZcW[ep'!j"PaJt2:acj"oZ2K6'A=HAUr[khRIu^VkPJKEsOth.^3E)p638GUPiQ+\%dLjd[.)tQLfCjjqWI>D-b8P8ji@Fj^9C6/)(%gr&kc#O.Bl29WOIq]m1QRc.ZN6S?WINip\fQEurlMkfPZi?ql^H+oHZ\QspAY-2=5/Ce8W=?]*-(iY79'Go($SW74=)92XPZt/YIIS,k)U5DQ?[ZIr+ctU3U9._B^J7m+bj\!5Wspuks,X6)5@2'.6n?jPnKKD(E"6/G/hB^01Qr:gCL[IQ:hLqKH*QDp)L+/[SQDB3_#M>_^;Lc!kNf\!;JNfjQ[maF56cq$KV%bU41Gf!Rs:pHu\YrKJ)3mAUShD\q7qT7g>LhcROH/l3Q!LpL2k/9dj/Imm[5*jo5;\j2BN-+Xp":1"K.BCN&h8e#E1`q_,.he9[.RFF1,_BDkGVS=)5i#qYs=79b0Yqp8;>9'O6-<\M^HB9eu>C^#(`!-2HC90Zo/[bDWD-aEBET5CpS7>C\6$(EW5sQ\_/]Z@A-gLFTKmT?QfA,rErgYP9MK%Js=Rpj-1JJbWD=?T#8dI4,$p"U^6Qp9j[HfD[t9&,o2A?T'!Pr8OWmcg!&&PT[W*j>WZpVq=l[73TodFWj;Oifs;%%O_>'*IeDPSo]cUEcPk[p(RMgE]O1jEF2dp+8r'a*TOm=>COou!4?sFg?4,f&SRa_?^k!`gmGs_ITbVLB;kub)0d5O%t%<oqkqj@%qfuPU8G$N7\fZd9r&pnC:!/28+uqCU,iJ\&#rU^h0u4(.KDhB+C7RlRI[tQLcf-"+ShTqLXV.(_K6@@qS2];jfUo\0p2C1(>/PU*iGPA`WHA\WlUN>((J4@O;K9@.O5fgpQs#;&Ql-=oJJ:C4g\A7s3cBe>j6Z#UE2btpaFXi_8Ir,*-h+46LqS!*Wr<.j"M19R4_r$a[C)W=K1uUFZB%@'%>4V@hR27-i1X>LST!K'F%ans]k$LFk3d"PQ^p.=(B4Bro/_BTCZ?1snL);%IYH^UHX?mM0#]Y3%GHqqp3=RuiJ70h?s'$p=,c\!j-j`r:/*)Vld)\6Hu)7$-/kb36jT^:DKGEDB[-f6-!^L)*Q5;!65eb^#L\3LUF.9Kci=LhFen1W!5)3X.,pKar?.iYaIagFpo+;F_l-FCt@DKFB\8(NdkB^^REk8Z6Q8i,1j`d1PR:D=;uN-\;a[%)d*JP:8-..2AVUD+3sbq=(gPNnO'#c[%lsHd[P:qpKY_nXqL-*8:uHA'jtRXLpR`Hf&e=YS_$Rp^JsiR6;hZ'lsfaN_Yt_*mUg<>_JQ#4516H;))mPtb:";H0]Wdj'pO9b`[fWQ5Oi^Yrr&-h3=Ikk]du7Fir-/SVkpu-O37F4H(>nT:gcZ/+?G?u9n[e.!aQ.``kDK2Tp`&au<;8E4]0?t`,L<:2Md9N.:DYpJIUGCp?bWGC*qfApiVcDEnI:2daQq]dEf.kq2MQEtLXl(%cXNVVXA5alBl1!*IiIV+FCp3T.ANc&;B=PE5qcCn^%LpE^U[gNZ(/\r$cJ-BCAj&j^l&ML524=IH"0nSehq!nL[0Vn/!;3,WV=qk6!u3"L>CfKdkunuWNS^_8>A8D+XLD8TEhjK?7(]%)*J1:>mR\OM2+pta"L"fj?a?m%rI+5-ie=jsD@DVOG>1B%pk&0gjc,_;2C\Y+Ss#_.8%Cd`lG)*>p4dJeG]MF0Fng;EBsPut!7he(m2Bl4W]n\*Tc\EF6G/lZJ:@$l;"01BK"k^n!83h4<7_o:pVa?O\A(I?J$emh6f_CDl=#3cm=f`_+^^V.-h.\Kj%g5$?7>=RT_I0;YB;/Qjhm[$RRZ)QfOWnM^^BcT*Y+79>#&88l#o5c6mrrBl+TbdY.ZttgP^eYC&KDtotc$k<0=46R.5&8)?N`9]3qK"mBq'EA=BtVrT_9GJWR^;R.K+s^FU[Y$@As&Ika*L&=erUrk;UPRV1n<"k@Y-c,!9T.eU]HOrT,asN(c9X/Q5G"h!j,h&Us`G=VVgl:ce9=3rr@akWVd18h`$A`rCTd[_j6tUm;U>OR5]U&_Wg2;ro#,5f:Muq5Ho(EMf0AG58V$NBpW-Zde294:tBITlZ)X!$eONB96'Pd]:YK`jK]l>-up[%XQGi8@Xie1LTX.i8GK*@itW9Nmjk(d$"q1;W5i[EF@6h7I%VlbB0([[3aHoF?drm@;Fe25@L,IdXbcOJU9`g_+2P0!ct2V(7FW6/bM3`j\T^sp;1<9G?G2t&>8DZ,onh:_;-gsVd$R`[HuH*k9*V=4>cX4p(HQ*ih2r$D5#Huec&ZC2kh^(^:=lKkt1&o!NF*.FaFPU`=IUt=m5m.^!Mch:K9/t,87X4^3oE7/NN/^tuS!ZPhh0JJ3c^)3UJDB+rfNhW]AJ$sR=>DkocpYIt$"OjZsD..5=X7Gut0Zp'['i5S/`u*sL*t[ZX2uTEaBjVFYhFu'm3OK`7q%4er3np>m0[#Z==*@Z2-rb8`q;qVVP-7sc1ZLI0MJ%g>YdN)fVVU/$b2"9_)uHc8bp2gep5o'^rr"7]^&i9b\'O&43lVQdR2)#<3$1\;n#4c$7WVCUaY3g,tspLihP.Wf@_iD,0FP"X6W%*9aY60.TNHI?r;:;E\gob

U4J&G:aj:2^a#9N4]J&c>q^mo#Hdcub?3>go'H"0&)/\eV5RW>Ys>C6`>Ch[/<05@)!-cR$EQ^X_EWag,P\n2$Z?=GE80.8N_@"_6LhKfBpLI_e)"=on3n8VPLQ*NaWOXa!6-+:Seo(lbMeN!Q(B'!pi:"_H"Tj<3o0R<:qFghg"OI%/Uk\]ZC\]*9`.5;)s^^d?NfS5,lT";PS'/*7@YsVbqDld(NUXJ+5.QR$QU;2gJ$&^@C*5FJidaP=;3<*_MT'Q5WUBn!.,(GZJ'%n]sP?m1W398eQrl\g>CBY$fCpic>2-MEVO`YgQ"+m6`9m.c!SeV`c+,,r=8U_#>YhF7#jL;FWCD]i#L;Fn]Tdjrd)/YE>Mf;cr8s+3.E$D*^cY\ZA*\"Z8`GqsH)L"Fj9e2h,gZYCF;=6dYsP)XC2\i^f3;,P!0F"[#$)TVn%Z+O)*_kCL-U78EI[USQ-kAr[#_6bcSIIRi2X!KbPqQ6BC+H]AP`KF,EI/:6<4melo4L2N\[OIp8G-N&BME.aOpEkmpE_gk?_^(dJ3V=!!Nn"GO9>="!@.+Aj7e:lfOM:V#LGQTlH4l>57lQpGQ[U[#Vk;2>Qo>)aC.fNq?`WQfL!pf[>0O.A15EXNmN8A$%b:m7J&p8egt5"ig3%7j&^ia%R(?&[QL^ZgWa2WSuN.qaS:D4_$gjCt`VXoIA"((%=s<%QYSgMXf*]MLP4\(*=9FWsghKWk*/SYY:@ODb@OC.e2qGftpe"DhED.tW>Eu@jlE'&+/],SaR*1k]FS;r&`io=]R_I;"1/L8iBkA.$N\k;FtDZ,Q0.+`/.)cE=[2CsEV#Ubb7jk,Z0-dA/!"AfSUsEd^-iiL&Bn!FR!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!5/jja:t6g`!nXE?%?SNCcDjmnUQf_Z&?,EGm'l/8R";J`I`P8^.Hu.#P(X(CrVgRjkocNrdHZT+"hR.f-nQY7?mJDBlq,f2lN=Na"X49NS(@ir(X.tpj1E,)Ou^KNh#[`A5$e$>F@0J6fW0FOe%oU3?nZsj@]2(`F;V#e`:PH3d6NhqA(`klg6H-LAKT^Bd6bZE8f3!H'$%UL6')Ek";`e5`-IK9p(:A?O(h/Vl$oWPop_F]e%mGU'lu3J5UJ`mnuYnq.%8h=db,g,_AT8l^I[2p@Je)M*;_/Vo&rPA,ZOFU5J$+j61XElDW(/'shoY:RP01,8Kp]lj<3e/bM[6#C*!;r>tf)S&9;9]$>1%B9ArX(nY6g1BZo^A*dGL6&(\AJh)NNTH%CnFjP?`Q@]rNEpsbOLqY#M?CV\Y$`f*8bD)K%LkmTANq:lQZm&&1F^fNoB$`H)Jo,k4=*b!U3H2q1f^.?G,eC?!082S/@bj9N?@>S%PQbI>@h&"QHt+4t(Z]1,9rgOq7JYN7[8"MCmHeJ9mA>rrD`*CZ$l@-G?j:/,6/h7IZhKJ++dGr=9JX%fF6$97?B.8N`3%WalEbp]<:57.C7?8GW!pc7MtEU3!l[[^F6I`)0c#?Tqem1nSU%-eVJ>pE+SrnQ'[!E3QC7#[o_U#4%S*fb!pSa;0%8R7sd5I4_6H]NgZ!!@Tji(L+h02_Top:dg&i1'Vf9'Y9sSm6d7'3DmsHp+q.A:tmMk4><*dmhNGS2\SfLN#Pqr9N7:ZF@E.9:8XX8XR'/WU9$0CWY!EC7do$_rXTJcQM?^aJ8V&$ef\$(:or.g*6)S+Y$)#R/(eU.)mf&DhQ&TPgZJ"T7VfGobAGRhFF!\B"2Z#*5C3&`1^bf>4Lj[mbRMYr\:L-@DC_PHu,!2QcuG[o-K<^3g2GhkanaD1X6f1P[f!sY3)(`pMDE=r7ficIU7N?9`>t1!5^V`;bHhM@;WI%`gVA2[T1*]NM[qbT6H76p$kD>PK,QX4o9GN,@?:7Z[[d7cJ2-ppeu*f/207s+WG;qJ%Z.9+7'@4At9".gWH*Ro`i-318jL/&kcl@hL;<-1Roqnrk/R,hl.==3WHCDW[Jp5YF85Jsp`C$`^C,EYd!RotYH1f32UiejCPfGjdC2PROs^WK$0Q7)[?,aLH62),icS(6i7mAZ1lAb&?:n7Oc2lNJ@+,JUfY.LWk*nQST!:a(@)O+/rP5bM@X]`PKjFSKmfR7EL*e?Pt4o94Z-g'qTAmu@.`[=2gsrrBkU4B2FXIQ?Yq(P2Sd'^`s5HMo#WD;.S>X^&g+EMhW6#m=_g;q-4Gq=/rj?8BO@nTM[fA#il7!:b3p@iTosp58\fL0Y/7V'Ukg0"nE9ZMspo8=pR8E8MW,b^\7Lj8T+:Wj@2k-2^1s^Z!j"c,FC=`Cbn7=ia!#Jo*VA_PFDuSVn!.\ob".[^4Gbi+B)ZKdnmWa6>P27R.gts"AdQcF3k9p906E_s=TKcl@#PN<0TDTtK2u(pA/GG+MBmOp1LF8^B3e0i*kJEsF$T[-U%S6`9E*nDb1Jr__h/n/%;WIcWMlaU%`#@LIjW.i5^V98[jo)4E8[`972j93t!h@kP8UA/^Z?7ELPA_&XW0;UE/5"rV,h18oe,;;+'(%6XW%"S?-?OZQ+!("$m!7J^R>aaHrD7\b`.0Z7tQ1-Gj"'EU&C25Igb0"2^A9/[YlRGoliVM&#laMpfmVLBNbmu(W?p=7pKC.php4b$fscq0tZfB*3ntD7jRq4UPI#A;i7Q8WU/*u]V!BAo4Q,+HtePYeWp`"YeOA@(MQieQAco'H`hWHZ&@)EoJ4&err<2qnQqk4](h!>D*(*c)/Dr15IT>X@ej-BqA-8Kd=5PbJ@]m'Y,sX?Fc#Y[8LC>U\t>]e)8Q/cjXjj5eGZ(`40L[e)*t1'G`'[>L,9t,JktBA6UUg\rr?^a-+@3*T#Xrho$HY?ChsWdA.$6D2='5+Hp(-YFCd*arrDG88GK:0,4SSNqrNj7&+2`ngW;ZmJ%e_.qL\V<)#^&o^NXOjG_4g:j0pN;-adSsAt.>d#BrWH6F<\!>EK]hc_UIP('pK^js2R:7X4>HVjH7SC=0348"[>u/V8N$#Aj`D;-p-DRa-l$oE3g:G"e`bT#Ik&IsWm,1s.Lg(`@^MMlUA\Hn-_Q=fXA!(:eb3F;R!\cq43>M(&m>q,`6f>X%kMlLA_[S!9dG[1[m32]qCdT1jXo[$>OoqW[ZQq7#8_`gHh[RU,qqOh$K&;;bed[n\li"pSfu8cu\'-(c5)\!)pH#V#&QMrpT/I!rt)F9cm_W@c6jaorGZ9SU[Zb/TeZaippU-4*5+RcrWpfG@e:@D.GX,Sd/3]?Wd)4#X/duc\^Ykm?+e^;VF92N//"4F`9rVU&P+)36(<2Z*+2UrZ3@?H1[C(rX87jOAM(guMarBH1.%q)jIQ/BpVf2>L1X8S7]-L/;n[FG0cpqg+_[.uQCk-Gjlb/2o0e[#m/d?J,bKD/LY3nMY!&c=#)i(k3UILX%moCQZAQoD8uAMVl;.(FSb'hhO&U6J"QPVhE$0N+/)gbX!4]#H8.!O$mL3\6ms&ia.9-,NF!.4C+h/=%e:s;V(8B'-#-d,*7BTp+gf%i*sAnA7o*tU?D$D,oOG/?8g\9qfFc\]et7oLWG%PEDS]Yc?e',`:hk1FSH[9n,>1AjbTK[OFP'7^+-NMVt#4cjC=l_NbIA#N9Y^Y5;Ptt9&s[dPe#*aP9a&tSCE?gMGZsnPS'KKdMSKOO[8]9#8D[l00%m05URBmNcFGO$/a72bMJ1)o*)hF^Y(<6'C=;VrL0I0Kj1$NQngh$?%Noqf^se%CNJ+Vm?lRo;Lf,Q^S&>Xi'O/)0,9R*!;5NbpO?"F48mPm=$"'?$j):"/R"d`d6'`:D=Zi.;;>J*=9so=9gu<7i[rt1n\p2oP`k:Fp=lLko[KcZ3M6!CI\o5C+-e#(JH#W,-GEDQgEb,>:\(]i^MfTi^+&hb%tB=;.K']u_ch*V*Am`k<>YF[1Z_$co2fe+g."%:;9GlRTk)1fZe2ifp.Y1Pg$@[iX7/414bnu5"I&*<50'a-.rfcBjDS:QI=D#6beEcHo:Tk;=,=5A*IgE*,/)I596fnVY#+4lKuR,JiRE#oLMH`8L/oQ>pTM2Yi1Ick(pf`[#OtgY&7%j$*Z:D9i?piH[TP`qrUg*iCbYiZL%E8C?rN'kE#DeL_$iE)"G/^f=_&*\S.8$V:J=_#?\jSig!2l.\%R2'Vp)\Sorek+7E3riq6g*=rm)/R)tC_q]J!g]i856]QPrmg@:M:ZCDK+4:?;)-Qi![&-eq5`&4\VT=7INore'a=_)ed;D\Te!B<%]6^!dCuT6cq&4kfo9\Ao!_hMp?,ng!.D_nQc\1@\t[i1Cd!k0$lSDP#;I&on`=\t@tO">[H/?u+jY\4;4QbL,[(Q?.VJ3HE<;qq(ZW#2TB[NZg4l>3/K/BdaZhAUVnc&TL+][-:-t1VJ\-W4>,p8XfPekc,8`+>lE=%G"#XcNkc"rrrCf7p5P9qf8i/T$Ln%ikP/E$;p,eGN-=J)J`:I?lD#:3rK'hF)YnO.[&&h<\(WHu=AKQueA$=5nR9\]H;u,&-rrDBfFRXZNnLLJUrYouEp^i_e&Z=OJIUVu_fBJeSLMnhg43@JWll6[oElsqZnpd@\>MU-V&\@&dfBHY4+7N3:)tol85P6VlL]7?#X7T<;ela]G[Xm48kBHhN0N*`/bjN?3'KE#$k0G>(df2U4@KOit%(!56uACZMIXQ+^oU-ZEe5oJC9YH@ni*_*Q#Qdr\T"#d_6+e1\!EC%<7Kaphmq9iebtph&hs>&aE\#K-#TEq=X8Q];kY0?.:u.Y?a<2V5i@rIOS8k$Y0=^SZ;it-7RH@tlFIAjIV\o`q4<$!LQd9f8cWZ7Lk/k_50YgsN?.hi)!sh>P/kNd_W",AX/X7Gl49hhG:n(P8NfYBk(D*?MTYZ7UZk]I0#B(5g\3<'!OfCUNO;s3A5R`7oH:;%Jdp$4Jb4Yr$0Vm_)GF69^gXM#+X)Q;ggI_VR\SFt,UCj)J&RSNP:T1g[oU^c%A*gD,\%`?-TYB9`"o"VRk_fmIFej9<9a>-hNO/72Yltml'p6k]!i;MJ:+8ga;FCCI"`HeZ2noMA=4LYndd$t%8a]\K4qN@WVC&4#q>*c3;L0P^;77-`b?l1m@c"5_Vo)A*LGfFOmRM]"iVsq]7SB]0SZh""eagdXDg,m;00u7S+f]<&4dfci:iQ$^9(]-)b:=%r"!6+=K2*W#EYke84n@YE3KlP)na?OaK7RfZ,2]b%f&nrEt00V&e62d^/@4H"U&+I"!\^@M-gjB9CYBh>*"X?;0HQde0HS3T9:&3gkc8I;8E,+Rf(>Ej-Ni=-/$RAQQk63GOIcp\*r[5:Lo?t($2rARQT*hoVkbkM(?SDQR#qBMqqNOW)X?d:FQA7Q?^;XEao;?B&p..P:Jsce4"!/=P#!G^dW&VWN%BBBn,3*=N)WiNU[*KN477Z:hJoGep;7#l7LcrFs'"or1XKBX8]A)!lJifABs):Z'kQlbltcIfd9.HIk)^90\07Ao,)Z%)%i)_?Gi_r17TBT3.-/t&bIs]D85aGb9aFHqAjS%i#6(nU4n"NIF[7\bipKU+XE(K,EUOc)"Rug<4,UCCSK$7e"Y*WZ!mm?rc6+HE/JE8"la*r't2T>mF*o/saXront4U)fcH1>g\B.+&1Dc.c01*K3rBZ9+`,VRJd'b7fc+3WQ>en*K_W16kc-(pUZ<"[Y'gpX(P^4SN1F(+.ZnO>;bMm;E?("V3l+#%AX[mG&'TYQQXu:W.)333GRq!ObPO(NRT!nbGqj7p:mkEOH=tSNR)&*b-NKCCJj#H'`>-esGWWI)ldQALcM1!?.:5eu!=f7^0R:U%-Sd44OkM!%11$O0pp`JW6B#8:d/YDrdkiV!CiU:=4^\>V'IUpuuNuN>(iWEg7VY6=W0Q$0,[u>hu&=Cf(Rch$+RU#BOeRE8>BY,oL5:ukE=rLGnIRqV31X@%B[sSDT`FY\K4EiA!86t_HJFV.X6Y'aO_#ml-e_#E_ul'`(qF8N%*Ca!M9rs`Gh^-%b@RJoQL5]&(gD7kQ6dX>X+Rd+$rc9_U#WVhq[@p$\q1BfG2%_,i;WeaUNc$26Te]`e\bA\d'"bC+hqe3SPRIi=WkCg$>-mVb!+Db)WP:F"$&S)b5:6>1EWK0fKX#@O-^pp[EIAJ`:f1nGSe<^D*1CbbPT8I2B,?R&,`h3HN*sVi:\C[ppK'$1W!HFQ2EE/h"YY`/U*mp84+9^$2Hq#r+jZ>]e`uDEK@/k;N;rS3@N9I.LTo:h4L;qhG:;8Trc\,<0uBZZ8R'Z/ARb_=$+"dVAf7Jb3[2*Oj]DRV&B$/`Y;:h(o[M.!.3*^+:aWa"YU(AN,tEf.7"fr.6gua!6#uTdG(*ZERECU^bV9`X:#t5P)!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!n%uj-ij@F3:00a0PCK8W6$CgNc@Q]!7B2:BsajW<]`BiQ+XPgdGpf]_[\E3I2Eq87r_MrXfcL.,dt=9iL2)Cn[ausDW$0(U@29sKsn1`f`(rg;1EZ\OZgOiP#df(^0j2qn^j&iHgO"]cFCF:U$U=e-EFFJiq)$`>O5nJ9@l"?8E:+;UH,'!$8Fse*g?X30gN`-E,j@/!%3.koVLhn.6Y"&$-8qWL6Nb/!53WM%%7E"Pc@mt"c\WS,l9+Dl5@k5`HT'3>l!1p'!P)t68b$V(#2UcfKDlI$pe#VBO#Qr+m!V$?q-J#=>hdct_aFJ40ihFK$:@Yk@Y]3P-l?rmYp"pWlXi:cl4X_no'L*k+!7,(FJ]1Fh=LPoS[u,NGAh+V=Kp=^"J]Pq*#GLE4\YgmlTX[S0hCd$[GAD%$L0Im$SL'4N%D,e%m]8Uc#jNnL!-P8WY,&D698MVg9t:EQ?-9sA&4`FlMeQfqmbkPu"C\eEc^#NIHfMPKUSF)RpRnq\YHhC*oCO.JHI@K0V*$-59cSC&MKTsgo+geU8>HZei:j9(!H-G'8asHpXJV\8D&d$:9!pUEF%Z=,,6TD4m``U!W8sSEU$,FM;X$JPcs(d;*t?,h=EoqDW,!H&S@X#N]"##^rq+9\;R.u+!qYt&nQb'A<:e@OpnPg;r\)i7f(DRN@?slM,_FSZ'G*\O"A$oFh,RGsN_/<_0p#APS!NX#R<#[Bg\Uh@#T(UHO83DFq?a@)5B!%TmQ=#/_4r7:ph-?FqLEAC<04J-&,'6')Z"CGmaH&1rrSWAcmVp1L&QkV*:Go%IL"9QIco#,gadLD0VjS$G)hI&-t/>UOgaf=GC8p!UJ!6B0*3f^nJIN0$9TV>-6Mf!N&+6VY7SmaCYCmOdU\r3F>X'QNdNVr?@D_^i]SC6bF0\,QFaokk_f__Ik,p>`oc7Wl/kb6[\Wo@oJ\hS*t-]`&6KM`qFh(VDJ:^Vq6&ZO*_P)#:Q[)*1KPXX1E$mU7C@!6[Fs[Ce'/2`ldkHiF*=lW;!XK@jJ+`'me%3E[/=\rhR]*X]39(j?+?gDtm+.[,eJU"c)JON1ej^=(^7!*pK;X`J;g,V].rKStjF?VCCOIfXEc%=%\+*t)7-pc$/5D=3:,5@en$^T_eXkZNYt=P4.2ffC,FYDShr9t8AgIQ*:^m%iRiRaIk'l^C1:AbN!1T^lWp0[MWN;tr2M&S$\,RQI-nrrDP:O;d#d/M2)7F1b:(]FLYo7,?3em`T=a=n3K1rNEr[ogQ?DuBJP8U\jR@!'@?F4-2c8d?B;kL&iN6.r(TH;cVgH?I5I<4*Wg5+__*-#!9)CY8*K5(E%l=6KjYiIP:rR6_r(INV_TrrDC*!Vhq`0g#mGrr=.uV1$oI6m$C+%o2"SrJQ:WF6+i(k)oP5!NY:!932@6!H2pbt`]9rkj/J^V9j<>PIV)L#3?Sf-rr?B..?`BYYP]#;i6g0U.-mKEFW4n-*s:2EQVMa0K;r4V:flL52kTt\/+nfp^Q9$AX@OD1[=%69*W.7Ji&C#Ui;Wcbl8GBk>1R,#&aLQj\Sa#b.#mYW"C*"',/&0o`YpLcFKIpK](P(;BmN4DqM"jcrQBF^]SGg(JaQ%1HT57^Yg0:RSk^pRb?7+oO+I<2i33.\)<-"X%K$:S0#GVc^*D6p)lp1lB+'+mR3k/P#/;m(-[/hITR:YPXfVG6pn?\sM>H8)[J5e[P40VT&B"6NLjLCU'R_LX96,)[9]&p^l9[C4%SS;Sf4"0li\%A&^W2ofpjqE"))Vp7l7hKW@,l6dZH.H^G:EC?)T:]HN/Z6QpB^ru*7QE$JLDkQ5GLFLGf*#@[tF=F)u+aN73E,@Rk7@*HFB@7l,8/Dhnf3B#gYh?9)en,X6.b'-:c)+u*44L'kFM@JCC&<+R,A/*ZNWpYc7)$9r5(!"m8Kg).2('^bEKQ[j78mR]1,mIEpr)!hO3R,f)3(%ZI,/r]`mNE'"/ES9VFF.,F@VfU>#2]Pjg64A_Obo!3=W;r]G:I6fcSU+4b?q)W-RJJ*,!!J^\@D2H1gTXl-7N_FEHMn&:q"jMfS%nGc44tb+rZjt$q<`9dq+W_qKsfnG^jL)WRer&!&']c+mb.D3']Q6_:7?MXr`:t?i3o2WXI.)W2&BNp>"`5KXl(/(47i=#n%H*o26NgTa)TP8&:a0ZCA\7G,X0],BDL/;T>T@AddmD<1[6q`Ia\^5;L.^qHs>V94"aSaFgYP1dGcgS8g=6nPA>-4kI'mn22]r`A_NU4AtU&8WB3"-i@q;uTG;iBb8(9c%^f=P+<>Y%)lb!G3fj'OUN#=6U_3WB'_'%TO[qcJ*spOYWh?P7]8g)q.%'+C?-K-+,oX3+@Al#+UVQcT0MiJ\3c^FQ'KN1A@%c;/`.Ie9N8jP,/=1S+b,jE")`N)O`b>\DD,5s;25kEAK0C)M8`#f(@*jWGlm]`/@[_N4s#^)16G`Hn@=n,9lI4)pYXJbDg^Ol2DuV3:TMUT,DCX"S%b4felJND^n`lE_;"&N`b(Un[]HW@DPtK\SRI9k6I(?T8`dM$`lN3Ghg(3-U&0$aRFYegmdU>Vb"@.akCddnfPG7N:=_++$<=-XV@_TaM]j<_$"l`Fu@T[EiCphQ26W*gsO(GlUF;dJ.uIE0h[H49Ea`PHP)]?col(C]mEVsdZ]eZ'EFmK`>"R*]0H[k3#kfAC&jn0kL,W<8)Z]<'QMiiJNsHHPb`BF*N7oe-il<%N[UP%MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,$bnO#?"XcoIM?ojXqGQs]V)/0^f8@8:VO'1*_lV[!>M;-Hkoi=YNO8(7:JmWp^'Ue[Gbr\61o3'%C2G>9O([Om?o*@.Xil9Fi`fctg1aURrK1Y0>s5KI/K11S='k'O)2GISM*[ta%ZR9fb:QZ!='KD&m[opXEQ:["i:WlMK:H8]"Wb=A;>+2HT![JdBXUif598!$@p>(M4>/d,uK'afEQ6-!tP"eP7<*$^?;mj.@EB4SK#6]bKt)-M-;B\6^qGoOeB?+kPr\N*/*S]r%"m_)Q`\EA^liCXrr>s&5jDnC+"/A*8EjI9B,B'ePs5UU);nNGd<0-k;br`S]1]+-;?jUM,7\u,N1Pg6C/LgB#2n0m)j>66QA`k%huTEN)V's#U21utC.]VL0_(:\2@s1aLX(/`4T_aOAZ/-_DNG1Rh)knBPAjP^pI)G2E(:RXaq_-VM'*4^Yb&,f2!-]<\\iOR&Y>*25D$60h1c#>G`3GGZ6gO0"G"N"0u9ujd@GQ_FOf,0T.8%a!44*lC-M7:0)kp#SJud%SWD(+o]rJf&DP"laWkXjLi-jCaoL^&V-WUABGUUJB%),jF*BAkZq!r];me!alIuuZBq;;pP!O!YqO?LUKAR4=+PP_NK=hZPNsPO;pJ8?,d<3\PaP+>@b=$@:#DM(!'+AN*\g\J'r,6M>9heN@-!N*-eFBDbg26JP\"H$(`lqLla=KiYHL1KUG/)5?gt)uLA4oFOb*MRYE:EaMFpkcr/KA*)Z(3I$:,l>MuFDD9tq&-1&;fem)9.'^=jYKQ,2Xc+=Ga*gHHD)1`='#U18'D=-T`9KSG:\]P5+Rbr?njqU4Bl,ZpbFnO`]u>A9$XpQIbnjBkdk;in/?WNm]![eMJnWFJ3>CRW+&G3[f7V#b$WU2fr&R$:+O"JbihKfjD>`!crH1>/D<4ZR_Ld)r`dK<9!8:3ORn7"/_W&4li?-'D5DibR[b$P\FZ;q"eSU'_?-!m7#PTJc3rN0(Y0F?i,d^fiH^YrO@:8DYk<0#3%JAP3=5(mni[>^BuU%'ACq?P$T!:#%C4@sRZ@fHFF`gqT'jCu2g![,!9p2XZ-%^EWi_m&QP%e\f;&b)*ej$+/jrYNs+%sb*I,!t10#?H$?0PKDkOLIGR,gUBqa]N3E.?HMY@6qXX'&57?QekNt'ACB"9HTr\1b^(se%d:u;^=$h]u]cu'6V;b$Re]gQBb"F]?h,tDF`c_Z$?>b3`IQ&Dnj@a%CiM9.-pT3@/5p#b:SPqghN?EWbdnighHbj4ED\`5CThNRi'7(eZuRW1ujFlnmqEh7%Tp8=f&b&[AX5drqBrJ.Nb\&:FXJ`Q#JrrAgW^>*QoA;rpG#0B),?OD8%PBhUihDr^"gpk.c63rr6aqE&==0MCni.1qtfsXa\4q=2tGrmH\*mrn80\CA?'9m`oo+.=W`rleOo!c3On68N@j+[ILHfH:.U9Cid'Udt.N!^IGR"15@2R8cJd=J*A^PIu`j+Qq59pbOUeT3;03j[.6Hre'Fk>'[Op(e*'LR'HE-HlV_h3_6D$5DQ+t6nU=gIr#`?AA#3FpeG^Ra7DMiRRT6\KPOOlTX7V5Ef@]eC`&EX:(I`$D9Y%rDpHHKuct:$/rr?l]N:pU!IQ_q6`Hkh\5(faokdh,sKDmuMZAThCrrA@G^/+M8YBMge_,+6FV>gN?kO;>NgeYA)W9a'=GUlBlZ>iG*(0mdpXGBUdd!ribFC#1@^8L"P'PT`>d1f6PlZ\HTp?J8)h^\j>J_1$+r@?tZer;(gMpNKmZ8HB%)Nk1g@XQl?[OjSYt0TDkCf!-97FC(^#EX=[@oAVlbBnrr<3Bp]VIa-MVrIN>b.;/:%K/KHtb(7r`"1]-O$Ek_5)J9mfq6(@WqNbTHTPH*8;4cDfuo$@(9O9)elA2QS9(03!9?lu2E+?\8:X*dfp+X6Yq;4m^'Wed(]6.tSA#rrBRJ+8u@L[aIi$Q'Ijo6aq$uhZ!RC_>J*EjgVdS(rl+h7KlB=3Z@sRrKFrQ8b%/c-\h;P]gX=!["uK$[;r>VIA5OaUS%DI(<4[J)Z/lY8u18Nq4F/Hj;o)$Et2RF\+m/WIE.u[!5VEZ+3!7NKA',>>=_btr"5lUT&Gr+A#EWQ2LUa27d$Z6r26/;+]8RgikKWKCZ2rgiX^aNY5mkB9p^]Yq=LXZ%"pC=,CfIsJK+*^`"*H)ErQ-WSflO15H\JQ:t"dnZFYc[$HXho;8F9`;d!bC0_]8l"rQmIGS,eU3<0ZnSP!$n=GD@R'?:O#0#;6.4aI$Lq^6Hc#hF/-7bDSZrrBeHMYq5#-dI59S,&NKc8NOf?PQ=aj7tq7-eJ-%R7eEP`))fQP(36>J,G-0r$fC7.E6ThG/nq(PP$1@IP_)N9c;1UPKmhY*_&SE?gQZt\pqaB#@>VnOD69j*h3@Jo2RbfRE^&m^`S:,T>\J_=htlZ1d*`'j+d#%@tK[g@'Ds^Nd1VDMq\Dr!kWL'2iFQtX0j5?hTk;<`76R6Z@#I!Vo]0=8\Wf7>:j1X-*)>D:Ts[(V-JCqpkjH?W^J-%7t[uPC!apW*il:gnWE`H6eB\n"aq6:aGAg-Z##RpjHJou>ec'dXY7P;/WY[73G+R\?C)#R>!SU6d!D>D@WGV`P"f;3:k3b[N-)8Y0R,NC/ld%a[?L4K]U$b=cf'9K*:mu7<=&0BVR^E][!TNWdXLh\G@dL=kF9p467IpItO5<4b7Y2f[Kj#dNTe:ngG_&cp"gVP?rP,U3>cn4fAL-U`F+d+N6t[.dN-m:]\lhUka_1HIYIL7$Z0rO8C)+]RR8sK$ftD>?p4g!!8uSm-A\ocL-#WCVrAJ-P?@(?41&S+0nXknn)(u@stVnpAJe$9V.FHc_1:<\KAp8kMI(SPtiLC2#dR;oj@YM7u;]NF#j"*fPV24Vs!R@C\*^5,bAfD-hc?0=agNFRH3\FH2T%mcRG?HC\+,P>a^LWh-[/[6/[]*iMXs#!'b,l5_PZV:SfL"i)12'jB;@()E@oRN;bYGNhB@;"D3kOQ_cVtR)PgW;*k9GXV;[;ZiHZn;Z8MC;+89**9:"h[$6"R^iXJA3k@%H;@8[K+SHr0U0_P(icg.GHsNVD[tuq$4T00J"rd3b@"#^&F_0K)#H3j`f^kQ`n@sf;NsP';INd'Uc+We/Sn(WUK>nd2FC\r/=\f/5%:!X?0lXjcC"l*gCuZ5AI0WC;cPQL!ehpfiBD-lFYoq0(3359=,hdp8Za7*Op'.V@`D9`:Ccs9,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!MC>,!QPfSIIPePTVuWVGZpmnsECS`B#oQVNGo/LdF4.K@2jC-f[H!BZ2+78mLFe'EE7@7m<0I,]G1fH?Z"giK8]MM#)*s#DI"Pm9Od45rc4k?A4B4t#9r`\Q8)a>ZR^(B]8sQ5Y1n)+b]DhjVqqKLSkoYL!)r'W/3c&3+?5LWm]b]&Y]L2BncT1NG]P,Q5>?%nZ89rZo,@!pVl)m(`Y"]Pg/?9Ve\Gp^0>pW),EQU6nQM;kXKF?(2EBnH=mBM!'ZR!3BD^`K%lXP;!#Br,DpS\kjH7NV5l1Ekk+Ik(;R#$4.u9gM'ZDOn65\et#p7o8_OMD\*Le&0n#M7$!i0#3*T@l<&&"9],7Od!1J#ojHIm8(`N0\1,X0/\e*lPJ%7Gl%oY(XgCu\0-h`ZP&dYGfLq-0dF(D)"1e4E:fo;U:Tu&GPh72$RTf:j0'?VCTr&Pn&=#)g;U&ti7'$eQ*+RnS->.cjW?9t&+L`F@.BkH`j7U[Qc.UXlF.&@/b$E:m1Lp%edWsM&6FGil,@'5m7X%heOGf`.n1t0gS\sWBN13[(LpPG&s!\$g3(4$%]1Q#'?ek^m;KS`1/?J^Is*S=_W.b#\+)D6cE@-hIhCt$;KNMahqHu6AH2]#%a67Ld2[&V8(;K@)!\_-.Q/(Uhk?S>Wu:UE^V9G6UAc&hU1kN4/Ao3\4VZcC*N%/?1IGD6#6r'g-.T:ktS7sX4cqeDI(9'VjMNKLp/Ltk2PKualTaPsrmo]UBBdB;rG$b9iu)#6(5EI=I)"fIWA`mN11ElTH`%UqJqgpfF@^/9>&F@V]gHpF3?^k-2.FtA>C%Y]=G9to;bVI,":,D00;f,HT9c62.cQPOq6hRP&jN/e?`GLOQ<5m1PAsrZ!'&k]NWjao>QEnnBod%&]\Xe\=G<':#9SXsp.nYcQQ,`5r%!h]t(@3J+Snj;[g6GrHF%PY%\%B5')-.]EO>8^\\Ja>uYH0tHU:3j@ikL1'1D7aeDMbleP"lI6OKo%H`]C(@Ts(9l!,bMShd#[^_io!]@;56.9!fjiVK+2#`q6)[f)8>%8u5cM9"MD8+-l8Ab"3t4Bh!D\P(?`*.rjM,Sud?T0oU4N#Drs7lrZb&pl.t614@]8JG(ip:H@f;gVQMO/f#]PA:`4H`:3?RW>4?rNWCk9<>:hi.KNgEWDq^9"_%0Aq_7CQt+k3`kDWtC`I1?NC=5=\`8DkDRuGnHh"[*,TD1Wfn<:mQnGG%k_C=IJHgME8Q7s^HQHe0r^uoT]Z5D?,Y78&oVfF6*I\6E(iT>^]T>4Ws_jstHHY][p>j0mp\,sQH;2D#[m2M,AbPoD[Ig(5-q_!?A3k*$\M\h\O&A1)GBqY56lZ\2&DNLQTju+A>o>f^3;nj=t<]Tu0HtGSrSI@i_"f/U+]T;4c.,i>EAn:CQe)Zh!ISZlbo!:9iB5`Q+Igu;^5K*"."gbklXBOjpAbiF7YVud,pSGZDFn3TC=3Z40rZZ)a'>.n#i`ig(XfsDD/W%QW[Sh8reE!qWm)7N+^[P'\MqW%1\A&=I0"1;nCh('H1tLRgqaLU@`Gr[qQOLZZ&QSfC/)jVi33=u!>U)iX*'_7Kr8lK/!+2H[pldV5YZ,X:'"'2mao;?(:9F=ETCWQC;ihp!gu9?WPjQ,J?7P.2NRrG1I9g7%6OnQ'jDch;4+r1Z(A5-]ODRqP\(5prB!qH(e2[+fku'4(-fg1?*_pZeZq8Fki+jo5n]cA)XXn4m;mJb-+L;g.$K(kkP&e9m:4F@O]^G<:`DN?c$qft5<4[m?.Rr^(B,'HWR4C:Jb%1d=#A\7RR.6UBre.PDUI\j%=U6O57DDtXgHskpa]BN6:g0YY'>73p5GXe">Y"Jmc4kf*gPVMqd\sF+)(F"n7L_ZmfbtKq?pBN(n_jmXeUcP\sp_T=t(aEI6"5)g>?G'>3#-!(rX!fu?\F@i!#NHKq*r%U@4BnFVnN>^]lJYG1n"WJsDiB+4(p\j9soT$Xh5J(EcCW4Qi.[Z`*S/nB6gf@XDd6l*rtS/Cp/C5ApK$%SQ=J_LZrX\LYJZ!4nI^?0Ag6X#\ZRr"D'cYY^gNRF6r0l'UIQcA!#tL2Qp,11o'F.7?D=.3MHm<"m1t2d%nnZ^(B$]3J8,//83g?07hO/0fbMce?T^X7#c\`EoaT#+/+]gc,i^5[4=@>t?5)i5S)TDKEu",,G89eWK@3P)pXZ+_kI&;8-3"4OLeLd-L(LbnA^UM]c#Gg>2>]md08gIa3:/UIEI#(jBo@1K')ihn1O<8ZA6ZR]FAm=aMNI1XIKR!e.^+-1!,"FgAM[L_9Sn[lZE-O^%?[O!2%@1'7fZo1Q0ioTmsD7+i0p#"q-q-mrKb/.-@KuiJ,Q/n%WC+@SGqRBC%s=u5/%qlrrAM>b?#k)P]N?7<#[R6m9cAV'ijW#!!W?loOU3,bN#cV^\I!l!6H#?p3!oGjhP>lMQ`l"tY)8!'ci#P\^F$,ZObb6FJ";%dhd%+:Y##[NDfO78mNf!Yl`MOAI8BI?O!8N5I;=5kB+'ST^kO-n.!QSq]UZk+G3s8ED:&l?BX9PSWr',Db?!8g8e`2R2?d97h@]7VQ7iY[qQYBdlaBI@L5gkQP7R,r0VJB_$DY=_7J.b,C%%j"2AY5'GpkeuK97#N!+6jfh"#aumXJl=^FS>?KB2HhP-N@1O']P%;,Y?\MVZE6J+iH^r;6E"q(=&3b86LSX&Re0WcG:%#qflRD&6a?=/Y9s>*=^2a,s3ShCcfUr/o%qoWCIEN:MA%B0>5.VJSWC3-RLJ$4\lkIk(E6FY<$1*%\Rb=$@Z'XC'3HpYr.QqpRf[nd8H[FPtcOrm\5(r,_Bq%\@c%a8L!Mnn'cSPqCsg&7hc;78iD?hEWUrfDiR..&*6^,O"l*k$K)n'OV>EQmo:CPjg"YRq_haYQf'NKis5Qg,sV2]/UBALW@Hd[(uq(TDh)#HQ1.G_nM*%.))6dD!)F5/IJ36e.hW-DSCd2>>t\R=YO4pO8+@Z4jo"r"1/G#UTDDfR0`A8[>(;-eN1>B7=Ism021-IiT!e:4m:CA$HlJ5&5p+hS=iYD,ik?^J1Re6rN2:pErrCk^WVmRj%3K0!mQ^@7?^*r+#*=f:T]7$>f"O_JWJF&>BK\$u5:S)r+%e7Y%OlJ`87B:jFJFk\S7[\0[(54ZRS;.,E#+C0kgsPMX0uX3]$FM',4Z_%+GH2;VO:;YTp2AWVj5oaG58!0!I^u6b&GR'\G,J%(:4XhKQ^4]Yo+2rGac]WtjE_DNi]$6$W;'`=>''HShZ!SoSe:L42a.i'D(XUW^OVmu+[J;>H.qT#j#hCD0@D#"L7,k%2(a>=4EM>7[^\9aP\g-J!QKWa$LO[JAZ&YA;1"id61-J+f/;e!BPhK=[IO?,@h1C+%"ckE1sOICe$jpt*;&,4J(&2i#%EiU'9,eLeRNCpb3`\!^3e)f#FGS8c@gqU`+sgP>Ks\(6;C#K5aiZ3^]'kuN:E"$,&r(s1Oen)rTAI9WKA[nQf%Js:WseFYC-kVa>\`;]f@_nO]K8FX?0MG,hC=I*0:R2QrN@T?O*"45Y`rLoY@<+Us3PT2=kqn?^dG@os]d:mcW\WZ]Lq.Fnfd?4bqqGeCIG88M@&^7RD1I>N9->;M"og_nI0Ao,2K/*JCkM!YiPchDBWbB@#4S5<0d^C!afV?,'pS.e?(5udMdV"GD70"$RQg6rX9Mbe391_d8ciH[#1IW9[!Cu0?dY\#Zm6q^c!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!SWE07l14:B^JE?WBJK+"7&VTdSf,^J.i-JTV_CYTEWY).)G:B8j0*Sp7$PKC%de(dil@sRs0R6_F$ZQ"_C"2h?8&D+HT)R$%Jc-l1!D3>XkGVKa2#GL(-#U&[fQ!2Y?,-ndODQI<[KP,ZFQ3uQ/F]&K/KH?d_F]57XO]8@Fg%N&/p._sVe#-h[[2d`Kdnf[HlB'fU]OkX]7HP+@%PeD>?)P"=1'jm*@Y5!9Prj&0e6Il)d76?u+?@CT[$1Pgq\)FK:UA=,rM7=0/FjjXJb#h$JOaURRa!33Ss8k.go4`3TTYhWlXcs%9eCZsl.KmpVRj:JAS[.`PcBC7lqS7:"$HYVW/pg"RW4?9an;X_gR/Ir6]#`@r?Ihi0CT*"O%,7\&-):J?5FMIO^mn11.*E=)rr=+2UH^rjoU"`_G+)(Z>hm;:CD4rLm]f7u;^4!s0@Z-ij'K(^)r_m)_p;K+p:>::iK0!i2uEhSeN_o/C=r$rM!cg:8G+CT;AdLW.@5-ST`naO'`I*7,oKKY@pY^2/?r13/$tW!^Xr.OpmWV0S5YTHq.0^)?h_52Xf&4;f8;dD217tneZZ,u>u'ZhX1R&Vio55#ZV)gRAo`6]8MugOS=\:"T=&%B83RRZls0=+hIc7aM:M8P%a=`e.QuFQakOJ:mReSi-^Oc4`Ej'1J^@l@3ic"Tk2AJSkOQ&:K]p]\lJ5&aVOm%Sb4mfJQ*El/Q'(3":@nlc?Yn(SIPeE`QScMP+5'?J`Z!$=gPmAkoP3",YB]FSObRe=DB4QKo&oAR=aX5Nj8OTWnGVY(dgI9;,]12HO9\Y?(&]65WrE'P(dII^o06Iheq4%)KrrA4H5$VShYl=^N7_Y)9Q%Y('5ZghKS/*P^`-'AA@*&_akU^#l+OFIV;ELK7d\ERAG;N@&,(=j2XE">Q-GcR:KdY6iN)5R-k`>`ZX-'?=Zl^W$Nh1OsLUJe#6Xs%jViBX'qQjO%Ee?Hm:ra=s&Z1]2Q*i?WOp."gU(WIPX?52mPV&;<[u"R'X:d'?%J8foFm.h[E[T5J%N1O2W._Mo>AA3jbS(Had]e+b1e5iBTO@5Tb]/J,\=I'P4o,oT+Y$D9cP:&,)m%MVK/mLgFdm8&B.P0L>Bo5#Q=53rBRR/T7NUGjS3BX4%&NuOKG8%p074Vp6,?:"7u^TeSFfU(;=R.'WPdL\ZQ(p9)U25UFIZOsr,"+aGl5DQQf+A5!/FlBf=VWn0D\.lW)$gGg!ppm@Hn^gOF?GZF3Z<%5MON#W=OhJ2t9)S/^*,]&+%P4Jt=Ws^f=u01@R,&oeEk%PiLo0bOZ]!ZM[\kdbZRZo)'$_?6@F+kF$0,I6Y1Tr?#&1GUf#T%OkLJ*^gehi!L$rr>Noi-5.[f@+4#DDqZXT/"T>n%k8L1.kDnhZ!T(RJa2H9d`+N`&7M>rAPBZ>G^mC#4>.uNgtTuP.r[<:[]/#!476HI[!KG?"G>-I&XDCrrAoO=6?mi!:(JO[,9*Za`rY+H/\]JrrBL"ET#Y+B(;Mf&,uWM&Y<\toq6k$YK[U5K9K)3.E_VK0qV'V*gE%dinSLok.CWnJE;R*rr_WYpX'NLKXKriJR=7G^[K^f`@oK.eiYe"Ebls"!2jf9!7F^1j/jFAmn))s*qe]fk.j%V-j.#Q;=kP&Ts=&a7Xepf6ij3Z,`ME@27Y:8UYp:7hh5;L??ic*ilCu*P._&]Pq#k43QOG-][,Mj:Vn1]PDfl03r]33Gq6EsYbYfaaP)'Wc7AV4Z2Xg/dJj1TIjBLgkLsN9o0*`/J2l*G`dco%f>_Z7@/eX'[(cq/"ga1hbjoi/>57mNorl\$_;?sH!4Q%lceNn#O![ELrB-G.&IpkN8a!3/"2-PaikAOn+U9hB3`4V.jU"TPUTG@sPQ62:32D93'>ZCl&L8il(p8dAY!(5U6@q]Yt>)T)HH^MH[QlJ;SLJfb!j4oL#l"cr$%G=c`H:UF?oghlH;qoKec%$F3ZaYA_TP'fsL1W8fA*T`]<*j%A!b&a(u'I.aI?0a"SOtg("DRjJYT:3%Uf8FdXYA;jp[\scq)uH,C:c^.jZ]EIjj_)DI#clS/JlXlPI4I&,4IZ3]Kf)US,HVQd1QlIMlUo2ERVSR*&P=K#TEcH[r+Q\D*$4`n5R09f#IPSO-inSW7Qi1^;=-UUH?>pi+Jg.!J.D4Bkk`XS!9T.E1f+3A'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mng!'Mnl'oJC[Y7ia"N"R/SJRS$m7!@Z"%"59)Y!$LEiO2DZ.!T&\o1hM7gU'"0(sJ'AtN/27*fFe*P,Q?[%[k/U.SDOAfX-"#p,?B[OQ9HH7]'rZd%!se4Jg/99PlY0tV?tj,DO^D&6:'*JfbGKqTGc6d2-8?ZWbF*1ls%;CXM3>=rqBd95_:\(>CK2Ri"OPDTTOCB";-*i/M\[rC*tdG?t(&!Xo`R\qTP5Zk2"d7D6"nL*[d9I7PEW\a!qAgpPAs?JW\5P#j9hlHFSQ.LBa%>B0LIF97l+l_q^aQAMY*rU"NKC=d;lk,d9=hI"J"HRi63O=N=^e?R^38brJ02.h2`0$-p/^U?l_7V%8u/XXX!cR$2B0KJGn]@E=QDQYh+5I2KC:FOuPaP0*fI"[]Lc3A@>dlLJG;LcE1,jt[1^Dj6?2=5MXdZWqn97?/j(&KK!E05_Gg!:N`U4@L1,]oe\eZO%/+d1hE,?oDY(h/4BLkn(,"0'BfPK>/NkHUi/C'f%?.ti">f1PnoX1NlCjd7#8lIilt&gGG>EC,;;i-7G\7*n52\J@N._H4`a;RU50G#)P;fg%7MO]k@&!E8&'\6FM&^@`a*e?:k5Jf^'.>YA!m4r&(O"HX?2p3ikr5Hf4i\rZ/,2_^^hFqAq\!9fMs+Y;Q0K9:&YV*1%[@:Yq;3A_tk#ro:r3=t+XQn^`T[5%;;6V[bc:BlZ75.5BL9ifkMVbk"K!E+g[Tg$_S(o@fWr8>GK:8XO&]RL=3G9mFfq?,nV41(aK:fHQQKkS2_eXoap0N)rDX$P0M,^"QKP)g?nlR)=]B`j?.&@.*Q0bmbf2WlrPbRqf9ngZGJ:,c^/+4@]ja+*G+_>/\d2`*qhRC`8L1S81s904`!Vo!mI_RaMXsUMGf&(ORMDHNCud)]dU]%30ZZ4ucaZ)aN#qZ=VP"7N*"[,=VmUu7LT).;.(p\Bod)_K*(;heT^N14e*`g,r6I[[r$e=eC&!1Vr$1_he5h3"OBq'rS]BR7on?\Ub"l]I"@FhZXKDC8q7#@u%r6V,fC]X^G`te1e$X$>k"@f%8^hL;:E($j,M8(=?[UPm:Ct=X;Ds]nkDi"p.tml%rZ&,\D[-4A_WT<`oAZAL>=E>eR#i)392&S\Dl@[MUk^H/a/Mi`cUP)OM6`IG+((bW`VtALIOjE%$p!3-_61qT?\H0anpSi@cf[iF<:VBRaJ]VQpf;he-"40UMG/$@PR][H)2;j>1P7ri$(foK/eoEXejCJgP"5L?>5C9\OLdo>_'c5F,PbEcJ$Uj[if.N86DS<`i!uO,>5Bsd&h#M"3PZuVUO4tCaJ&S^IV7qn3@;%fHHYn)o0-X.+W0Oc?iI`dkPJ1cr(2^*q?#p=qCL7FGL%F?nH66G1AW)"Xa#'WF.ck'?PG)/n%]GuLNK#^!<3$%OHs8%Z11k7Gr7RjX/N/kN/n'srr@[aht1Q7daFXu!)jAKMZ.mI*uD1i7r$U-k!`L1j;:ci>mTiPKDb#=X.!>b=C$?LCIkV'.+,\*FC<6]?GpJ!qMJkHT6Xjaf!i)n>Kj+KA!'Bf%&&pGh+/d?&QpcE`0JB>)#U@(_5%3dbuVV>"1W;i?[mO@h@EB`Hn"S5`@K#QlUdZ8-'l6sqni6SSBP%-/-T$?m4AtYtVqRI_SnXlR8<+3*K>Fb=0A4,"1OML`7AS%L0U#G^L\@NO61n.if=VOlQVm50A]P"f:r&lrW@B,ifC-(3d;cp7JK1.:Cfl+Ro$>Eqf>Fr]:81G^pC!6GYF$&Rkk&IEL\(?e$XY'l1_L;hSF@ZhQ]%PN:_8VaF:-k+0C!"[r':4Pg>1gs^)>NV5@n&oYN49Ze6&opm/A+T?m!.mj\],pG<*_l?TNu&JVgXqSbMY6U[g(m&ki;+GFbs/L"GpVuqW8p_-&s1cQ2tbp5TifCo3GH`W#q71\n)i#VYk+&LY?(rrAi_Q/lLj$aqc(]R+p"?_&tQAUJUThp/u+`(&]s>TR=C"SG!jHMlp9?*ZHi!,2B43r.Vp9tCl5?i+R1rXq)9>3l(#rOdb(o\*6qO\)1r^H4Yo5Ub[&UY&G$6PO'n?A%_pr^u(%\c2Yrnc&T^20nrTd_-1L1'p,sGZ@?$IR!H/Y5G\7),'m)r6aQp"1D3drrB6DrrCJMp8,KCQJ`K&lU:08'9e"P$1"%I66cK'4$i2u;9oOu`"CJg(&MQ1cfEV%j`BGmg)L.`J&GIh!1qSfkbYI?,]kp.TJ.3_r.MK?KEK:Qpnhd)qcitrr7V$S_f#96(&n9_\:<`kDZYmFf;0K,/dG1W^]'7V]4[4j$jS#0O':QB%"nQ[$BN'c:Hr<d2,b8VkO%,6M4f"YnATDKWDrRh*?r_h$>H(H=sq>!8R.@siB9"AkoP846J<3mek8SdCAYHIm*BfHt--^n%1#,u7!p%)t[B*;Yl#[U#Eg8^$'1%YHdCUHfP/WH;089'(KV%BqM_&`_Z8h,39=eMLWkq0oKfo&Z:>eK#VLH/u>NBZJ6<^\;5]\tknB=&IAJFE?O.ARW.mt(4^LS&>--RPA/mRo8[PEJMZ5?_qflNpbk,LWHdU[Ph0]DDEAMC>GT0qParT]V+36Uu#CB^%be5.'E2VMo0=SW7c[!1>)qO#8J/m6,Gh6QGSEGOuV&2\DjPdicGkq!8ooP3B+rN_e6*DYKg<:,5W*;s_k5Hc`egC*kq/blm*?RUPh'BilnhAs;b]oq:=b$=a00pem/f:VqVl1X_5.RP@52'YKl,3M6G>N8fl)!0hJ\?BglOTEX>::c_JHTE?8-;Z"m=!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!C[]!!h'9>9dlY7ERp'\bld9%Hr'jj;4h#QdD;IY1id9s9:nfV%OhQ1bl\e-]`8+sQ_'Fi=4pG`mKh6i.rfN^JDToM\Yj)U`k4hmNl[,W+)<;:jMq%e)N8pq')gfV2-W5@K3E?(?"OFHb_r*K?$CpgSQo_839KsmfO+oK`2V6\@r_#t>&moa&VjA8W"2"#3V)d8RXK@2C:DQhpC7f$l.dpi9gRO@f7ia(40VE7smN<.1_.[21(BV]Ju,4Y32)g>;Z`GLKd\dq`^ETr`QoStBr%l.8Dt,@Mir&KF7>!/N^HiX(clcY-^%_c#s?!(b^/K)bdo'iDf1ikDF,Hg)[$W_7R(a^9n![$7,0ZSG]J@#Ie,ELGX/6'Y5%PR)WC\l,@Dkh>FB%dn@qm]4L;&>"_RRlVEPhe\9Xpo/o=8B:5o3GU+7iZSG,G[\CCQuYaqg#m;1mSdT!S[?V9]jD*U(HB0=cJ61@E6=%82;;T$kpuV"&?]CZXFh[ukO;jf*G]%Hp8j#0@)1.bqO)=!YpFRX8H@aV0]dR;reKn/=IE;:*0+ZR3_tEUH[ZjteN,GHi0)kqBltW_$SsAIpj/6\V#HnhoXW2MWH=E#(]OS-%\NGgLBmTEGj1(cF]fZ'hH?9j3djjF`OKIXV#[W&U4bWr,/7"X+:.[T?W6#9qcr$"R:g0EN:&$O)oASM9kSM_8e$V\G"cphAa$joShfSf_m9`:c>]+Rm;@an%EJ)`4a0g:r(]aKN^5D\Wj*1#GN,5\8$.Q?/Z-$:PZ#iQccPp*D"5^bq+Nu\=X[i@4eUG8Yq[\I09_goYEAH-I&'`/f?U#dd/aqLb*Jn3TI;?@^?]'o"2(1]Q,0+De@NOu_Aam!/P6DS6!$0n+;l'67-FQH-#]O[IFp3JO6Iqi>BY^@S`bZ":Dc+*7=MP+fj_\Z!j0X`N#QBE?cm;F=\EU9gTKm8aG?[>AB=F=WJ#BZVUps8oC"piqGPaSo/*5'_LWrarr?Z*j2AOPWPKKMrFK:ckX_P0LR?&3gf/pLI4N4MA\.tcWd'irTj\_-$phK,o+1$oHYfjNZ8/k/Go.S$]rUuW_ooqAVYeMcRJKrY;qU1Gn(#VQ1uYiV(F'&H=69/s1];+8^Ykb'#MK#NnCPWV'%(rViT?TJ],>I]Q3SL/JR,+4Xq*VIq60>;b'2>LqX;_'3s>.UG>E6?BMru3gGS!V"t/2f.Vuj>.CZ.(#ZHs1uFI1X8VbhcNcUtX&;j^cd+5!-`&Zk:7N&]PkI)6J2-M"J@EaMRh-'YQ.0;HnV35$"@4lY+0n>!(_aT]C^),cSmL=]l4Y1n*60)G9!Mg'hJ%1#m`+5EPs[1bCh6]`@It\(I>q`701e[n>CTsg,&hOR.Pdf#[trthL7m"??j^VbEe\\/)'`]e_=*5q%ETrnYW#M#KGK4N-,@hAuTh!XCqN87FF09TMu7_$Kc\WV`>0+.CJuZC9js>iN5DdnOa-6JO(%XZ-hhuq7piUG!C#QV(<]f!/\8Sb./B&oo&?^]WV[Q'97=C:.[3+cbq_IGg#iciAeo);J]O*(J<4'Tb5jYWR+F6$gX7UZ!<;;A&GWLo[nQa73gA_.1^TWdtpPd3EpijXjZ[)p/']uC.>NLh@hkJZ%\+$H3:X@-fZ]U,ENLQap5iI7oo?YjoF<:a'qY$2VG_4)g#+=H9Fh#pRVNaL`@G>U52RTo23$Gjc]W6eY1G5BRtjrP*4)]IHFPbX,[9:4]GK@n$qf)CA>-Rp\lYlf20/@(fD1q[C*Jo@Ol+:?)\_P^^be7,k>^k7VaI\2I.9Lr7Pa`[u\pXoACl=8!Ebi8]$BG,d(d':1J6B)*!MB'h[EG,GPeY0ZbnH^bPiAnH!']TG!2QshLpm+p\E=S8isP/bccT&J;aG+G+1rSRES@R!g;Pk10*%sOG:+KX^MTHVr^1fB*VV`RrN*A/oRDkSjh0pf8Hk*n5fXLA,74uUhQaf!s"2V=\PiK7cZGE6L1C33,9inNV-bR_:gQ7bW=fS@Ou!AT*c(486L"SKfL=!-f6PTkG@jM"O:q>mF'7e??#ZA2`#$).[gP'ln*<-1EjFrYRifMDr_ZCQ[S2L,=gb5$@Nj]3MFDn]/3=9%V_-_aXaR<43`9%-hrqgVGM:(Re8]c'k/YZ.TD\S=hu%QC^[T:04/V/"?P<.7`',d&Ut.XuX5%G+OoW4,c^h's.Lq90ZD[b(3QW8gT%&M*ALAjN41!_;7\'f7FJ>NFZ:`4l,R9c%U5VrIC)kX?*@RQ^Nh'kHXVfmBO9\B+`u(QVYb2&a,95-RTH80*5RYUues!!pkfFNLT"Il$jO0WidqHkC-kO$h;2eAk!tMtUNq+8bJi$nVR<+*#^nY88.kH!p;_X;91aSS`n;u07!om7X:bt!#Olp8D6eW7g_"ITV*aM@W2QU*Q)j,n42P*b^5J,r578O*:J&Zso'f:]aPgU[Y%;ci=TbI;$W6+&45]!oTLqpG?lY#(V%s1S0hCOIl9@#6JQQS[']eE-T>(5VRH(+'SDgJtK?@M`r8b*\6cNP5&7u!OmK[Gk$!V!-sUM#/PIG4N>Y'Ii*^%0*,I%?DaW1Upcup/;+(Cf+h>&;Ob%$VbZ(>YZN[o@k1"XU:a]n0t6M*@!&&XhoS`.m'BsDAu5*HN1ltiGF_BdE0RC^%ifk6E;b^0;qQ^Go=L&!Stg&ont@,K#Ne"K`p`VaprbWG-]W)8:LaN7r(T7VrMMh=pmXWX%eugY(&kV=7j"!9)OteQKMV$:8>Xg^!7g2^FCcuO\mO'Wq%e*(Nj^7ab<;XG-`gkr[(jK-mr'S_F3?=";;SHj)Pt`Rrailt5P359:ZYQf=$&ThU4d(,*S7.&<\=h$dL'7+AcV[+\`sE'B^:g97dbPpUrCG=nOq/I8Oe!'E4GR#27MO/&mb96?+&7b`qFtg,XgQ`)<&s>&c!CfeV0,T8Gg*cTf5_=EI+CT%uI9?W>`.7V&+7N1js.PX6KJ?N#J7@a.$je&=OC&8"oPtJdD#a&A9,n+bO<H>,_4fZ:R@lVf]?`ChosVIS:"_Q^)nA9h7X-0Ur`,Hb:3]Js,PZ8-2X+(q4@,d`"c&%H;=iU4JK:np5jHAk$.&PA<-/&E]FI/a^-7)L8)cOn%[`,2'':W017knf4p!aNPn[-2"YXK]dBA4@EPB$1):B.4nK(dJ`r+Vi.)8%U#7ZI>m24-*1CjAZMa;tWC7bI+gEPmG4Q>s`^JWMZk:NBaM)%-X/?r'RJCAEj<142I/%uB;e:\>>"!/31(N#rUhBDrN(8]F!F8,a8"r`dG=/m!e*KV;/=,SdbKX+(oPl?s[Ho*226N>3`VX!M?VIl;^0-,R\F.C84$F3og#n-?m[J&*0QK>`'Mn4[7$DfKQ5S*f[HU`3pSR6!0&.4W6E"EH$RX%-.cHq0_YdYu_FG4]/(I1>^^p-XbX%=.I[p0bA!>g['kGCADtiO-?%Sm;sRc/l/ifdqDV\-rBUYEa5L$_93@9.Sb2D6>%!Z:-Te*/I*oX8rRl?)=aF+,SP^6ZHVr9Da#%gdqq$m>a`-FC]LpPl$%_:Z;oP1%C=aNLdbT`#fg<&H/$+Ut>HkX3[;G-=IaRq#9k'r-pR&b]o^q[EVTt-C*2Je=HU>&"2J.<-c6%h7Z&2SlfsBk*UJb;dA,"FSk-$_>aLH!ri6MNCZ/Mn`=Q>*:Lu"coaa>UITfE/ZnHC2*5ktF)O,$:NU_BUY>b3Nn2F57J&L4IBmS4JET+TN5IKp_D&c1dYdaGrUEk9@=)XDGGms#kJp^gsccQQtXF:?._sgUuA+>>oSPOQH4tF8E_=6LoqfaN"c'^c$JW`%4X831fbA_I)N/p'^LW)D?b$Ua`YAVqLb],DU:i;T*G#A8>'@D6_qBINad.l8m54Ono$#pg+gf?So:nQe&>i@TBI_RbM]d+_``88`ro=gOdm!-0/P#1-X[^K=pphE6up3Wbl34h'3HFLln!.jn:O-OKl"$M#cm>+41!lbV:.Lp$2o3=_eXQKn#9.rd3!/6k#ZiJJ$D8Lb#d&o69O3d?4i0Dm'aT>g1M9=;=Yhu42e!"gK?DN[JJ$*@d'VucW%a!>%N#>prc`M-p-h5JQepVt@O?0Ssn.be<7hn%R=XNhjt`Ri%>'WL+WO%]4i5K=:W^\`?4bKZeXn)5*K/X)i&1"Mo&Mi%P=;ITHYopaa6g4n3`LT0=:c"mpo*P8mJLm>nguWVig/[/HkN,[%/Ca%*cepnlNi1&P".q`41A#9?=f@]?`+lZMscrr\P+RQ_b;Am52oYO+#?GCX%6@nK5d.&FY+U]P6BM='E*=.bD-]+A_`5m]YOPI'tWg0mCMa^K-Nr=nc'(Ge0[3bU#_5mZaP$]((j,n'Lch*W/k2.Iaq"j2/R:mZFJEIj@a,IH0.)+50Ym"?KZ'5$LE`Oh?)&*XJs>jdJ\[bYKTKSC/0j\]m(3m9WdbNbL).k^?JJ"\T:R<*IRJ]UnQGI$[7&Q/.b->j&58BC,'qDt0U=iQ_JRQRDb4`k9KkCA;_c]%;W.X%s;j(X6ZDAB!Jp<&$^=JoGtu9l#B`*'PP]B=)3Ags\%'nQ/7sSj2Im?i3Vm#ON>tINDS11O_7/TDb(j6C/PIk5H6&d=7SZ>^RpDWN@XKDu,M>Elr>C,N(/#7F_5sWa+c!hOASahqCV1T%`HS'X>15),DHi$=DLkj"l\0n=*)Piu_lgTDWlCrr<^[?h*TDkI8%m?FVk,D.,+bpNEf',\QmrD92mg8]PTA*8;'lip+,-IV?jlFKGE75>0sO^PHoV&]*Lu3gAX+(8WWo\h.?&]56)CZ,SL&PCZbGe0^QGaVR1tL_&TD1R@;Bn.jooF?\P6>u96:dDZfX$Bc)"^^mP'*R-'sV^cs,8=->@6iI)/BkQp"_=C2u=R",dSp@i0ou2&4)M:VkLJb[]5NeL1,=_J(nR"T0D#?Glpr_aU_bZ33[X^^W&Z/.8-$.S-[=1?o9B.Mpn\s,Z"2k-=`7O4_?7s(A_pbA/bMA%[/r;4DoBni[N8#)-YD\B4G+@Y?G:fXTA>fH^`e3[9FkC[KtA*\-bUkb44=N!XaGjJ'iu,&C9IR:P4Vs3Onsf8P[O'>DOq?,NV.46-f.aIan`Ba4EF%b`>Q]:W=L>dcV4_fV=pb+H;4nnJ9r2!$9j\tU]F!;ME>lK"TU!lXW@24UEY3u73-a'j<)7&*U!LsU_L2.=o__edW&%L`;fmadX'EFB.k)W\#5R/R]1Iui?nN[)LT"(MTHVabgNO]Q`"R[d=X[f3"M?sFT-B4!Qk6EXWoVVb>9q=qp.q:cup,K.&2Y&h8RVcB]>&BciT/9hN$CRP^ngG2K!e(iuN%'7U5*T<"_hl]36?>_j`)3&qH(^J@5(\il-f[ibXtG&.%5`&tmm+d^oXX_UP)P9+/pYD"9i!OC+=qDVo(!uV\'PlE@LGW[,lht#T)[f3PqpS0r&:SFGg4*n!)sJ/F.al$@GUi)-n;"mH'_)'j`d`2VH@QCHXuKn>"p"AtTAh`h^CL0cWVe^F1gVf]i4",,dM^KY8[,?B9s(7oPj:&L<8r(M3NYicnump/BUX.adQ;mSF6\poJSm%OgSXY&>G1o_&=*["4p_e@l(.N$he7=iR%E5+p7"#h2TGIG(Un%sE3G4@%WHB,<%pcJ#-[:Fm]E92`*.>XEGllQD%,s0OKtVi'kQTR-`F()HDZOATNQ!NiRi"T)ei*9W're3E=r0dM6aaEkf\uGa*O=lOD-Rph0Ntfr@d@QR,H@tFjG^49iK!]*ZslAMQQP>e07eS?UcmB'Z;!1+d%Y7Oau2jE[r=U#^DZtdo*red-n->FGJP!EGl4X'sYj_H`/EeOhiCMettF<10ViTB_6V_/KLFd5e3#r,sBVJ)jda#DE8ch5fCV`=t*HE&>0Y?J-Rn2@*gZT$WT4GKtB#la5$t_N8h'dW[gh[]/O<%Bl@OiG4P8?c:hd<3NN"#L\8nuf(/Q0dVeJi[.oU3;b%ES^k98.7Joks=R(>Gn@sde.:CPsnPtGs`MYnq,dp&8)eXD*Cq"nU[Q3F"*4k:5-D(&ne1OZqP2P,b1mN_8C#aZdj#Gs<\>f20C4?^O>&+!0dsJ8[C)WWYR5]it+*jaKgN;i9/a>fFt3P7gD_$Pj)E!D,:2*JIQGH^Z]YBhF8[gtQ\[YNOAP]tJ;!4_*DFU&DLX,PX?A0G`M,e,5\0m=gU$[jGlLp<0L)IAQY@0=fku@ru6hE6?'%:N1`uVeLIZk)H?#D"0Yl.boO\)7L7X4/d!#VN,lU:df;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1I!;+1Hi#(o2]coicXHAXkaURD0:7l5ZO+*n4U'EEJlN[Zra1]VWq!J-HdYb]&TIk",*c=d5M/:$PU-Bs$04fA@U'N0rQci?)l73SE_!4eok8gu.gkFna:g57n`!fBe<9@eV#%46L:`;gU^UDW;e=o^oZ4m?Yi!!aO(0>/AedX>d0HCcQM8lO&^#fQcj#H]HLUE"HP4S>?LS5ODu[2dNqLE-gI,ghcp7Q@%Eld4!63>@]jN)2Ti02Y;00XuK+;8jMQN#oL)!dDb_UciDbTEX9H1_4"ddYuWUI=\3lB^O%^TL$n=9U\jm,M%q]*jcEASLJ9'^Ih7IAr9B`TEWXuF6Q1l7o!auFJGrP:]]fNe!`hS4fJZ,BE<-%ldCgCL[.2/+%dq)\3(pSXkh*o>>/oXZ?\5?EZVd.iO=g96A"Cpa.-b=I48*;O3e9"23Ob(\$G8?D^ipPJ&\]dCAO^D-I'k=rS=2)*Hm&Zf#-$k^>:WfT\4[9c-!jQ-3h#&*Br3*Hkb7LMlD7A]afY?p0uBkomYfDJ&k\C\.#rC0W-iU3ii;Am"jDEMRFB'2<*-BQf_KPAJm$HpM6(VM.YB]Hc@5UiAt8Y"0n$\?`d7p7Y78X]WaF312G1Io+Y"FHRD1h<%0S5TCjB::u^iefuJ%3F$3$4Qt_IOHSO)*+N1TEGtfdhLS8r?q\kUqu8.qU*89$:54Y9Cro,;?6++UD.2pIMBR\W9/[91S/9Q"2+rC1j#Lp!#RnaLF/=O&:2\)@h]7\er3E+8P;YITEWBM-koP"bl@u3W5SkiM?#[E1IolN5Ud]$&:.688kpgc;=kR#NoH7_P^lQ+/LDopVuWUY8W$G3#B"61ktAu0!-@BrKBZ$fHdV:I$2($Z[n8Xp!"QR%PgX0)H2oXK.Sbp>%%5R'KLqY-_A!*UeHa1VHiU5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?!U5C?"Bg/nFpeV3t!!8KHUrFj.TE:'nRP@+$!/b$34_[*3N]YSfBVVCOC&hLK]cDFI$9c?.0-ZIoO2d%W1$M8e=ssD5;+bO,1Z!Wu)!a]?N;HJ@!)D%Vd76rQ5R1Htksno5bl@lm:c`"4*1C2\ciMaU8lL7bUE_SqB.',X9b_6gJ-#+)al8=o)5%)qBa#s^;2fp:!5Zo"pS40A.KBb#,(^*b8u%uJ;B0nR!sb9";Kh:iamVJ!1JUB\`?mZIa+SP;4AFg@0>im[aYbTiD*resHN6k"1K>:&2&3_\V+oL/V]FNtq4/marX=&#a-pkr^Sb:?=Ql%nS#oml\/*YXA$=28G`L`KWDhcBLMq'bQ_]"1n?pO4*N5-LU>@=@ZE2Is:4!U=YA*s?4@9X61nP)%-LfLmB;/R4S%!u5"IiN6&7OH8=jD?"'43>Jb`2384V(0W0m'AQ.XM<$f'gr.rXI2Oc>\"JM\PaF%r""-SkZW]1n.?7aX+@P29ibtY%p5O_c]9"q`fk4c^r0.3j13:?^",iI?s^];q#N*(Te]-cC(S9CDrJ8P@5;TS(Wt]'eC%8Fpan+^uY0lC=59Qr%bePTDU10=5kj1#E+8[An?lnpF8M\Z=_2X&4HnhcWf8qf95W`1,i8fdY4t_4-?\abWHN&o`.!=tgGbWjHBijO2L.5%"aWs9;Y.5Fd,HmspY':lWj!dQI2S/1W[FXR6C1TB)<2EVmphe6XY8ckO])=[]EQFsrdU;^L?Oc8rAcB)KBs$5s>$0$)a#riX-B^5rNQQp6fHbI!>d93V8KN7gk1!7rO(1_%l!D3roAGU`_+th[rZ.'pbA+Kc3^u4mgq;ljiEiBp.BrfEWUA]<"GLXd?1oF@f9(_eBX8MYJU#DoP4QG(2IqN!MrWm82)omp0C%UdT7i8P>&kR*+Z\<(ga9",jJa]&tpHjO`C[04L?A8?24E#+alTetG/2d!n8^GXf[V(>kL5d!D>FGmpe_KdOe>Z>FSMb3%2sNoZH;6UQ5bZGK:W'r"al6Y5C]=AJ4ADokQf29\cNU/p[asI#l?eAD#o$6I%fEpM#"MkgW6h)\E`6:o-+c/$dZmsU_tpY#@.TgJN*!B2Qf*(Bn,=/0r)NN!if-<&e$POUNDdYoZ!2ReIT15`KWD<#Vq21+f8LFm`-PIOS/lDjMQ3f&Y+FmUeHJQCUsbT,!,g=E[AD.'l#1?U,gsbQM&I.A5(F,7VP-h,C[3(pho"=[UpnrDG$=`un>p$GFRUVkfgTkUK0>sL&"h+H-[:$oP4#6==j&V?pSobHYfSn`&fWJ7A9:=#rL2Z%%]7Q_&/>GM4J,d_+V4[W$eRb@8gld?1tCMD5QRkZJ8_kb)emtCR:2S+]VKc,`jP3r*/YTiP34^/9DD\5!7BM`E0MpO:gT>_T+^`+#_#:,^/Mqt16fCe$Vs17T=!4W"c<+-t4U='fg!VhD4PdoK_YIJ6>$@=t[3eD-nVYIW:]XV=W=;:[(Bl:@7g"f;jtYRIOq-*XTPi[^qapMl[m3!Wqp@4c*/`nZ?KQQ"lGZ*SX6U3:dPq/@Q!c)-tr1ioL%^Rt$#IHl)ZAps[4='pltmoBC]@n>%E:>M!a%]sNPS`'=CpP'He%N7GU'i&6AMl]ols*W0I;Nk;C(OWL&KghH?7ao;?'i+^[dN-bUl2q.+_gO[/+(LX1'eCXYNCd.3O#gKd=`[eq07.G[0>Tl,-fZS6D1!"8iiP"*]=^+RhP?4q&.)o5JE;B7E5W95c1np/95fRB&U[%*MbQZ6kk$t"Z$q<@H]@guLiQZHA*_t4)%SfbSQ(o3go#BJ5Zr>@XCYdZLT/_&\8e+R>58cWuCOZQ$J#N,Y>I]FM9/)OHEsNpA+EI8eP5i\ffH`tJ^fm?`o8YBa(&j/884+A#j"2u[lV/)CD(g&RHjbe;C9Q!*TjFUBe"Cf#$f:6rZ;Oj`0Q:k.]-8L<:P-'M)j/VpW)JaHHAhuQrE[k%>S:I9(fH"bkh0\&j_>aLghsc\OA)j2@r)KY>UVp>83kV@[dUK_kd@ck=00%%hmMh+pM]6p]O^&`nD(HojB6N+tP&9HtMmrAY]V_FOI8?>Rkss=:hi3*pX?IAH7+JpbV>->u&6\8Wh4W9VN$NU]/1Vj*!%/+@n]lPuK(lD2,hZ*7,ib7iq;4#F\D$(qhr&;+^OZ!qrGabladqH9`>c`M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?#'!M?$O;.5=K9XV:c+qU5$nG,$(s!#b5qdXd?u85Et#?4RmJOjI!MT[3_'75%7]!;]T;UGTX1!PkFgd>rSR$)!^s0nJ&=e,XLQ8^F4IUSRr;9eX1-8mcsB!D2.4:jmE0!$@aR8l)Q0BE<*=qU/:3ge\$j'N.a/dFs.;TE#s/dZAe'of/TEqGGt1RQ=7HK1XLXnXu`lXF2<&I+`%drte#sq+$9s=kJk+pk`WqA8OE4D>341#I9!"u:2']\V?R+mog@rC(GgF9V*;IA/&p53D/GuQ8J8a+Z,B&HLO5U81)uHFP?R(prI)2-j\`1:=iLfKBnL*9q]BS/meY8O+Pd,WtqCb%bPP9l3b3-JK%rkcVL[>*NpOCo.=2I1WqJN0*n$YZ])$k`\.Q_o`kF]@mN[CVF(I)g!b22F8f?=.&O06cJR9kB!rm@!48u/T8(DeZ$[GoebD!gM,ReMKCNsoaV4nc6,Jb?'e]7SS#M:)jf;Fa+K3a4HGHC)91;B<;Zc*"8TQ!7YA*mS=iGTEG*Y$`f]M"pQLbGhT&k']+0=nH\W^d2<)YC.Yp6Y;uX/s.s*C%Hu)U`arGaa!F9-hHn]P;#f6P"%O&!+69:*kc?@3$u1UZ\;XPk6H+`IsX;<+N2[IAp*W'H!V/SUn+X"^88Yat1>hH(T=Dj!/#YTd%mNMg]m+Y-qYf97%Gf.=QVOiQlu9SC1bh('b\2;(H"%$.f;j.7p71YZS`)PU'B7mZpiFH$7A'_5/UGXc,QJ6$=VQVKE'**=ijb$ir(,DOGs/[O\'t!J5/CAQFM0H[D63+>Na$%0eXMN0'#t)%MY6QjQsJdDR,f97*C];*0#\QSS)!:@fPZ[>:4jN]H3_pPKhi#T,;Gr77pJ$iM[a?L$uY+p5H>o!_jQ!aqZ#7&`ur\_hiqcijQ;"1$IJZj<"_A^tuS;Ob$[\]h&`P`1X"dCNbSmVPGfYP?K'3NuWm4%'YJ)U@(_u3M+d-g;gifH=rmAJ[A*`lr*0R3s:[Mo<^i,l0)`9(/OPqc:6-i<,\.r=YjBD6>LopFOT"'W,[]I*XYHQA%%Su'\_7JbXU6s1NUk31L"+hUE#fd#f/'=EJSXUH6i-!"bfrcZ^-8ZGbITS#33j8="ZPQXWa*:Q1nY2*G1C&^*bYX'HrBO@M4(._;9+,@t>C4,)LBh+6d:'o\^nHI'Isg+UDe%=BmYi00mKRf7qcmiepcmFk[iS,hJTN2p>t:N;MLbskW5$VJ$Uc\Ie?9;O.Pg?Q>,_Fg%?HFm>7f?_P3^B//=5-+Q3r):,Qr%2WVg7q4J:dK(Hjh=:2kE\kK\]-lV9)/Ni>`_*q=1)^k[9nfuRpQ`kG9.4_L$k5/`uJlk5+H)eZr@kK*%4'$N_!ZG?l5&B`cY!BD-KlJe>J<0P3,f1Q3`d)e$_.4KhD#DbFfo0bkp20]dX3IO/6fqN(>$/hMMs\dclp4BPqQM/24hN:UA2n:0IOM>dqYJmE`@95-HC6nRinmc,r0`*p,-EInH@+brj5`F4p=l/6R.Y?OPuhVMtMeE;HV>+?6okE9oRSs756/%t_?nQ(,]aH>6P9>d>?Y`<>*q]:Z)+A!ngK-ZItcIaMS;3QMd>QZ]+k.#3HSN44/QSS#F$)F/JWW(-n\mBC9\t=[j5\(P0Hc]]`p2Rd,9InJB-9&Tq4K9n$;W93=WjQ'IW?>?Y/p%Ra,[T.Fc@8a].qP"oeX-RUe5@VX&n=&Mq:Dl_]\'kDX2m)+1Ig3e289_sj3aSs[$WKX!CUNMCm!8kY\pVh(MfD9s&Du2hFQLe".dQL"Qh,ufZ/)0kJUM2oG=uOhQr97^@q<1WdXN.=(Ul;N8l!\QkH/L'&XY*]"bakqc/CXP-C9XY;.^2uTZi:"]Yk\$3lh__#*tfeCH0^RP#6kAWKC*"m&VJ>TB8_7SNuN>eiVf[lc$r(LjmAVG7=Nd.A7`;-*03)sO<\-CckKjf#>4ME+HD2_c1)Kf25<2bl]s&:Cof`F3RWOY59"c]PP&Y"]EX]kSoZe>9CHm]B^\;uBK&BX36NHilV[-B*=VZlSe7+7B(>!>qJf^hlTpcDRH7\lIpLjYSt0=+)e4fU^1/PLe9MGa:,"klTA)h:'3=$/Mb.aFlh?L#"`l8jXS[l7AD1t0]"Q]ajKQ=aXK,a(_V;j1N]gj,MEa64@Rer;)Xm5`p%Q'M4!G4!&DmD#p#Z[U>/%1CZ[5Q6J%V"j!42si]dF9M3pjktI\M-OE(hhq0c#JXJ[b":KKB,/(/Z\A=_b)2)d[fL-M]'j>o;&RT#@*I!YOT6brjVFKma"r(:PSL'9ifLI,5/l6@sK6>5$J5#U]r+-Y;PD-ff?-T>4BJik?=@dPI]ps2HPgYG^g*fj($81S9\D/CI[tkFD"PApVAng`,?LVh?_L;Bmm)=V6!H9_BsP@Cib;,b]2lS5\iOupjMXIj4B'8)d6p!IOt"8^9+5#IBDgZDA19`8;`=PGf\iDJILmj*ABMLYJQk[f)-?D/N:X4*PQ;`91l`fX''tua&BuJ64Y3!i/q@!j$29?`ni8[\(@;BDhE/(&]Bf$Fk^1XIJ+5('co\hY]5[`_&s:>Hj+mL.P9/uV_WU+:5?1>UaFP3eVN?u*>[6J>s?oSTGP/.02+U/06k.HA-GclGF[6-o6V-6XaPJ>t#>S!0217fT)i%a^uWD3dP-Zu;Q]'m2qrrB?9esU7L6hg`C>'Q@_CQP^`8.)XV@2V)cLF`/Z]AMB'7b-ljC)qVIf]3EcB;a'ha$2C)"AV.>N2PGLq52m)X^,Ltfc:?0AN1fm5m29iYAD_'C2I1pqAu!!Ht)ReLHKj%TuH*Wg7G)&gYX9+o?Kp8Fn8PbL/2(;ROM:8/2P2gg"tukX_'-%/B-)`l":iHo>OXn3C`6p3@QCHm3ep?9s$9S5)Sl"YA^.b_(E#'2oMf4Ct?!/LIb!cnPO])WF'4n?_9g^YCZ*])4?TU9m;(%4uW2riq:TcSgM%VK1jTD`MScnC%)LW*BF0#faL6G!+h!\,mrZTQ!hBIF,Z"N%:Ah$ZghCYJ)NHY^VN,9CL/VrK%_FAf)MXB-0$Ij`AWKZ.tYBgPspOA]lLF9/PBqc`bM^e((Wn<41;XCMmb`et3*s4p(XmeGKEDlSf`JRNT)RYa44"10_u5=QC]YbK.c_N#M5[$TA%mkl)_&6h+g-rrZ_6(7[*7k,=I*CM)t5Zr9OC?du_GYA!Vf)O@@t?eS]KOdW:`\@-YB\r7UEM3n;$*\oNSQ0l=)rr?gFLd)ln*V_SPc\ee\GV"4a&4gB=[b2tE/7LGJm$L$=<5Oi^H*7h)/.G9Q>!1HI-r05!q3A.Y]p@s0aD9"+HVr4Md?8:L@7EdEFJ>-+!fB[u!p;CQe#a<\!qH7HRHN:VdZ^+P!n-8.-Z3T]e,U+03229q+JmNe9.DeV;dgHn=tpCM?$DBW:gpJUn@gd.AWg+hLH*C:hVru!'$Y2P;H);objEE`tX,lSGLS5oq9^hJ5$"kj%=e^46N^[!..T"NkOZ:]`8nBHI:3157.BPArch''QNA&#AR'!74pRc5R)J/'OmE;-ik_1ES?9M.%nsQ"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!"Vag!$i!OX1`?R>N6hW(MFq6P!$$0XmmRojZr2?P\Y'&pUnIDF9CG+OBlIc8:TXU6bp>"WB8QZhp7nMj1_+3^VJ#ud9:dQO./0A:n=UBX7328%!CRJSO'3q40McF47p]mpp7MWak)P\mEK68n4GjAP4fH=)1o,("!F\"5+,)0gJ8oYhk.5mej/1WG6)@7\\8lh9s(_g^#@h2`lgM(["`?;DB_MW;=441C_SV"b#kt1[!MO`]@Cd#`\%E0^udt/7P0:0&m!rsPj1q\"t:>;A7QY'#\9&d8"q\Z3sEW]3TliN?>'_<:'DC@NME=7Bk'DgM[J[/-`o%JG/KaU*la*Jk\*/nWI&c\U!>)R;b/MtT3>%-Ut@+SH;^uXOPd"3'`EcMB/E_76Z\8:1RaMG'[ik:"jih38bc6Xp;It!Y[%^W-7S%r`W;h;SjaD&NQsT4oJGR*dZ(&D7=sPp:MNXhlk@]k?+b9R_/Z*$./bULEQ')"Sg^gJ8ic5eEU"sm4XdO>D(d`Uk*#m,bn^\BC.rV?N#Y^i;.5$K@+!htYFqNkm6I=VM?#'neqtmV&`/SoME=W9K>f,Vj-hs#"MpkeP[r1ko0bl@jtXXCi&9A_mG!6l\-]brY>[V,Z9g5bf%!fi\DNmsK5UH_L%(o,r<4+Ja*]c#g['Q_u[0Jc60.*bU&"iW]s!-(T%F4us*eq)V"38i1U]@3kbco[oTa!.(*8-h3WOHOq=\Q;/'O\,gJ;2T7*^jpF@TVTs'0-_alM[H%?SO+=V)Y'#XdYRI8gSHl`4UTZc8E@k)qpN$<9&Lgs%sg^%7nT1g3AST=i(*\nAO\ZV6mM!;r$n1*NCLlq+!;*>S0H(m<5JcJK6_8sXP`qM8sZ_p-W%/L!5@@j!/[MIN076m(m0*`F%g8Pe"p`+JgOl#Xf!i'8,iSK.K9D$E&T.MdRJK]!*^iN!#qWW,AAqb7X4/jj`L7!\?mbA143#nYPZenrrC'=B`'Ysj.@98BP74kgi<>oOD?4E.*n4!&!ik0RJ&Is%XM2X++e<6BDrYgKG-T,]".h@itZIh^q+"rXmnKgamSniJ(!2J=K!nJBDt0D`=%0%#cZ7iGUFK_Tj.FMdNnmcN.2:uH9S0O5PE[2YJUeh/q;i$r%RmF!/[iHrr=7o%in5cqk*Zj,e#nRlruauFJ^!sSsASJn>c,;q#:>Jh=.fWqc^,krrCeGQ61^I1miIbTRIM$ZYJ+Lr/"S&0V]ZCqka9YQ+A#5/P4k1C;`#8%#ifC>Po6*l7YB/0>Z(VNcf^=rrBKlgQ-tJ&7?1FK(qE^@(BQXr8T0-50)*^rrBFj8_IJN!!/G^&.u%q,NosH>V9ImGqbPX=C[roKG%"8s)]feRNI&Je!.i^5_Y!^n2*MpV10Ug+VBkVdd/Xf<1JP8,F(i5?d3P^'An3E`kV?^Op=of!PV[!4I%E<3r#K=-`dcn/6_q!n8pD3qfPfZd^UNk8!:Ln3]UQ)?0\kL\O"2_cbJRq$rfG_MoZrs48n,E@gQh_;h4LZ.87]O0NFnhj@4iSL%2P!1Aj&cImdm%=5(XeV91I:)sU0Cfk430f+QoX>:`\qfcdKM@0qMr=l\Fh5-`!94e%G]q@b#E=*drrDKBgjej_l%U[Orr@e'j@$Pi(lN)L1.N[Yf'!VP>GFTp%>3Zd%j.Xlhu%5^P=^:8YDDgOo\2L+rr?cb6Ea,Nq(j:oI7uPTAG6eS&Ej=6:2Ma4*,@TDqF`49!"i'+OsN-fe$;20+9)=tUY8/*X4Vu?Pk%)Y%2T;LUBa[%YL2bJ_Z6Za%B`uA$0Okfegsk4:57-Y@5Zm*=be#VC4*d6?7?.Zl6H-F3b&LIU\8aB>#L>NbJjt:e_fElTi8Xa:t2Dh2Vp^'SZ_ARS43:k)B!JA0/*_@FNekXY+kZcjskV*;ATSF%OaJBYjA7!7BYU73RD,72a4B]`9&8N7+?n0N;?Ej3UK'>T&u&[;H!55!$;(ec:oSdJ/9&tN)<"D,npd85Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5Qqj!5R4Qjj#NnuH)$f.;b?YW*qXeU!QV#iXX5Hh"j\19erpdf:]L]5ks;)H!%=VG;b9L<5R[A8)EUje5R8f7=ob:I!&I+^31u^6ciWk6UY@V\*N=Lp!)dfo1X.O#!6l\ZV)Z8d!)N^A-m#aB;M.4@`>LKN>YkK"r\Sbm(c\/kqGR4=$3h#E!+(n%M@Zfh)=L>U8Z#s`(`AtMah]g,SFkg1M?dB_"+_YToBSurP:*#rX,bMTBiV.E]dUrb#;cl^`20EYV+(tZoY0"OY&SY(2dcu)H)'[k2e7Jjj0^rrY'SS_ddAq-Ue&glL7>q*PPET5if*RF$-7ST#6pEt4D(A64fNKh"X-7)Pl98pbsZ4MT"gft9U**P];J7qrrA$42'?gP!Q]HXl^E'^#F^Q2lTdG,/n/;^(X<1Q]8i+noVHR!1/.:sE.,:ZU##+\0'nU3(!6C9^_re=:O_s@m-m)7DW_n13K%A*a$Y_]3tq@pm8Z+*P%dprGsdt3ZK&\ZVgYt;E7I>"+SDN_:KiM]MWN<-m+ej'4;/grHH]I,i7*Z6(al^bU!Qk%CJ@e\Yh_k.Re+k+QKP%P-cY,h8:,QIM>SBl:WLX3SbUr@:+Wa*NhAa$$H_9h/Yr0)_o&"$!7@\SQ;7WiO=`#+3V_F&o#h@WOWoLA\$*B)_O.KUhY&2Z_d7+L*A_p7OK[r+[h=oVC<_C='%W,rt.j#&J@LJ=8g[eQe\68nH:nV"5'G/CK-!P[(@j9I)bWMI/;*:J-:Meq.SFS4BpKnYYb#:UgDK?bpV5.&aad@X*0E(\%=BgZC,7Sg]835EKL%T2?6>gdN9H=q]6'AkWO&g"1/S\LaG4SBJbd;Z=d]2BD-q4sf,Bb&&Wdn-Ek3Q[p+MCptmG"M!k\F_VGa(e4J*JMhQ!/&jlRSf#dk('[KRPW29[3!>L`S>OR)93Fg5RX/4%o/@R\\Oj<%.cqXGnbjs,LV)Pe#&bW'Mnh!>\$`Zde9=:)5;[OBE;ee1kpS4J/@!32?#:F4PpC31pE#4OHS3!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!)Z0!!-P$DO,)L(SQeef!5O`r'Ft_ZrrAFpRK!8<,Q&ql,^j@d5..OU3op;@aB)"Vp@LSdS3/^mraQjJrWNi%TF>7%c@'J9phiCt!&9H`rr<+S+n4QboG5mT!:VCdK`GY&.-`fG"V:*urr@^u:\kF_TD0$`_LOCk)IA]14?D[)@_-4O"V:+#J&42hkPJUYrrBj.rY,Bom6Jp3T+8u(q$UnDp_5s0O8)4Ua8CXuYP\_LiBS7pB;)G;iRpa!`H8HY\f]m*rr@_$;:AImJ++j_#$iNirrBo#-iF3*hLFeNIt\us$pWl)VZ-YS8H/Ys!6V,QX8`/*qu6ZC>>+tr^leU1^[R:J5NFJorrCtJTF?cVOt0Yu&,uVq>rVc`!_#'F#"/Cj0g.Vu!!5RhAbD]sYjh:\J&kP^+85=UJ)MGgrr=cZ0E2"RL\O[M9c\"KkRKi>.AhUQ8H/Ys#D_+7!6eM<+85=k_LOD?)>35trrDPKakKkErrDO:It\!BP'&goQi@&:6i8>7,O7qL[Jp6c*g8hZ("5D:-rL!E#iqQLD(knh!f-PI##8j6?hd-eli!l]J)F0'!"'6ljQlcDVLRMpTF@7uCQB"IJ*&>[IQ'Xl.=^:sEW6"nI4P1`cSKQ^,eY*].gJO5Fm8)t\5>qc3X!_<#^##A"mB^&^<_p2"A[C!^H#p8+sF9saam6*7dqKWbUPR406!jtgZUrWCeFO0jl+5o`f,P$?2=%rVo^leU1!L&s.NjYqf!!r2r!74e?rrBj.rY2!W&n`&XBCM?(i@c=q@g>(a_u+8Le.TD0*LJ)ME3rdq^grWNi%TFA!9jAL'Kn3#F]RRK!8<,Q'!?YTKM4Rq\Dm!7T$h!"&ei81';e>2Sh19E+uX>r2K\!f-PIHp&io;b[2k^nF#PS7eYu@^X73Ag@:A\let4\##bmE_nRjWMTUpi)lW\S];FWg9hEA./s:7VORScJKg1h&qA8(:&b4/O['eT%WTp\39/St^Yp5uTD8iYTD0*LXe89GrmT>G$_]g'I6SWHI;;Mi1*4#uS+tcr5HlEY5IC(?YM)MA:^1&cl#M->eK,frrdpSOrWNXCd%go;:JUoi^l^l"K_eQ/#=!oVrr?Ft7iItirr@ToO6e7>%]?4Si(3kJ$38?+4_QBmesH(%4&c$tW!0EeArr@UC6."^8o+BH4dc=<1'\Yp7%7FH_H*&ad)7+spC#A\".6k%I4<7?pp\t4b'I]a]Bk,rG]@O@8LS[6,'[o;9-rLQd8q5tPVLRN%e$)s!ch"!hOk-n[LSj5QSsfTYJSRdR,L[,tWMT4d!)IAq)4QCr6?1khc@IFO#C#jF;k<=No'(aQRD9G^`>9aBM=;!5O`r'Ft\sO80.I8,hAcpeV_]Zfl)K*n@=k!!qr+GPb<3rrBj>9E+ttguki@V%>j0E2"RL\O\.3?eD&R(epe!.dN8.9q$O7rE"d4aL/Dr$-5(q2=K%p_H*2PPu0I5NjVorrCtRrrIFjR\fD#Z/f$0^1Z")b#.MX)[74!9GGc!u@d%l5k4$(O\KY8$!KOqZ!909\`]YaqY%paR-Z4F@o\oJR'^tfeA3]Z"df0=:-rG!:aopjnG!2m&G]lu7j=@'fqg'@C:-K_=_:>orr!FP):?&O@PNbBs.pMubq$G+8[[7!oJOB>a=2PhKNLGTlg%;iiXqicR;J1mA:C5q"86an4T22hOCu,o?KEF+"StMTpEkQ1q1E2ri9%?*IP^gnU:&b4/Th"eZKOehDDuKls5\5/9ijB#Hjlu`AVZ-YS8>Z=dKRQ_n$0e)W&h!i3PHAUB&':>kC$ED-&h-&L-,tGB1uJ3;'EOQSOB/RY"69AIH>iccMEe=Un#>QHrn^'DAWb4A[7?#0rdq^orWJ;OV>gOKH*RAL+al$D!!7rN:^0]4UuJffLKbT6`g-Q(JOB>`rr@^lo>[u1rrCtRrrGHVf,J2')_Rb_g\IFd@C4:?IW%Ih?MKW$anNFdF=$EO2t$l03VoTDNmJp$d\4E%c>5!;m*:=b^^nj4$e\L<_0Dl+j\R/cn9,%=*53;MpT0-!Yh*)G#(P]Q,+851Q#DDPqMYg.GrmfGS/Blrl[!.H*R>4F>%H4isrrC,A9&ooBesLhL0`M-?QC;mp!)H6Y`6+aEeZ(_r.K9C8QC7aQJO5"Jl%-\#o\]QR=tU"R*;-FBiTY^SH>!3\$;od(:JFn`rrBj.5T(U,CK1(T>i=mnBDr&A;rQt2r5CM1rr?t(J20VOLDd4$lj6Gi;q"88]aB#Rgr*k&=%XQ=[@dqJ7;RIj3@B5Z9E,"-Tiq,uNFb,#bm^BJG=)2YT6^KhNg+s*TEM!A6(e::.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gX!.%gai]cW4]C3O)O$-af1*GD)Lc35*$kt!k`p7MO&]h_g(?ISsccne4=dFs*e-A",q,Dd*qTPl:J*c`!D,J^BASi["/2@kcP.&#*RD!DCedBda!X4O>".oq;&P""'6i+R;Gr07#G=835+DciVQhBdm]r1WCkX"TuF!Ig?hLH%)84iKNo_MG?:]Z`)UF)24#H[tIVN-Cq;BE1FT]#?5P=U!shsm?A-^m'91kVnE!46Br%3Y+)$9a@jN?nXV'[`@F>!((39@VBfSs04uUuHqjTE%h^r\Ti?B2Cq(9F1V45PXHBi8UqU?h+bXpET\:1tXrmmmM=dJQt.^ef$q*GHsL$31+I'Sie);?9&/8gpJ0WITWc738gZ'EG&"fC5a=!/[X;5BALWK38qoiP50orrCd[J+OXEFAV8d(aPU]K`;$ZnYp,P/!u,@1.FRU?[BReI)Y1?Xa>5#JVt.-p!;'R*58TXgWk!:WZgqQO2eT8n3#:^r8t7S>#k^H`kgOi)\JUhS,HVZIe<\#2pKW-X*4>mZ#HT\jEjl?erJ7qk\RXnK-cP!`[aLGD5L/Q3W1XYWRbiL^i5l9%2&oiOh1o%03\Y'*IoW!0SVY;p\N"ijn-N=P@mrScZ0f$1-8+Md0B?L#Ejk7uP6j!A;cF>D'(17ok8FkG\kCc0HYf\9`2]!MfF3TKqDHQM*l)WKp>OG1\)eh8&0.13<_.q8h<]VabR1lP1$,a)r$'a5ASHm]Ze@tODh&oKbaqR*bumHSfebITOc\]Tup<^]=U<7EhEm#V+qr`*Aug.lD24UaJ5nfi=:n-rV&,3@WHmEK21Enn8J4_d,L8J38Qfm)k'hM^%R=Hu3)g@dF8e8:mdT,@`o=989LMY:lVC]6L5Op``*75?c1[QH8m'B+n_pis;K"lcr@R&ciMuK!5Hm.G6(/O>$M0:[0qpFYoF'Xq.!!6Q/>h$PO*c$;O7S=duk?4lX-^3,ljQt/qPGpKdag8IBItcH.'sb(6(99',)WH"Ci]loH%,\1.qNe7\8MC!74?m[pK">;_6@!CM9P-)Gh@shb!2*8R,EKI!S7\h$39sdP+s`tcW3/($@@C'CeeXS6=[K%_;QNe1Q&3$=7<^[kp@1I3W$>&%Kg;eYjHAF6IdjCb&UeaUR@.0[#"NDpb^T)Vj8F@tmi"sO0m=u2E,M%"rr=__[1MP9(n=Ut=I-*MT0ALfEbSJ^]d^)5el$]/P^OuNC00UK!,oEBPgWA/72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q!72/Q's4I~>endstream +endobj +6 0 obj +<< +/Contents 33 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] /XObject << +/FormXob.f90d99e8fb8210321e5f0898298dffc3 5 0 R +>> +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +7 0 obj +<< +/Contents 34 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +8 0 obj +<< +/Contents 35 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +9 0 obj +<< +/Contents 36 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +10 0 obj +<< +/Contents 37 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +11 0 obj +<< +/Contents 38 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +12 0 obj +<< +/Contents 39 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +13 0 obj +<< +/Contents 40 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +14 0 obj +<< +/Contents 41 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +15 0 obj +<< +/Contents 42 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 30 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +16 0 obj +<< +/Filter [ /FlateDecode ] /Length 693 +>> +stream +x}jPṞBÖR}k$.Bpd95IJA޾giPh t}?׳]wzcw:^ƶ}_6C5ˇϧswwjg?y|]O_Vx\6j}v30> +stream +x}|cWW͖-[]$Kϒ-Ȳb}425l˶2X@*,YGe`a ,KB6RB +,dc;$L~[ydrνO30BHnD2$L4^wʇ}nq=.yeríH B/cK+?D'UP$#G$׬g.}_/+`R1Q Wc6ο B2?"=Jg?Fu!~&wOE@Uz~{p4WZ&#a( {6Gu=AM(EJfG7@_R %R"T v.TʑYPDVdCvT T#rT< VG PfԂZA +0jCԎ:P'BݨBm !4FEG(ChM)t M4qtDit]Yt5:bh-"n^0 +*u +]P?_~y{ +XȽ{<F~et¡`@%~bJRz=P[[0`1B2-` ҆k[l92>ݽ1~u3fﵮ㽮*2_kS#[8cj T,!k G`MnY;ԉ2NA8vs y'ɜɜ1T=%Ҙmos=ZQ][IpLsu3 meXxåַ;˂5ySe֑2\bc!3KRk{Ovk>GdK`̀׀63u+G;`@` y Y<mmn4;ֆ{C/he= Ѧ3o6`vG{[P\5m5yXU,i[ek;:V7(^#"^5| jXkQxo8RF QT q28HU9egδG\e鯬/XէJ̃~"X2fUVV۫zj۴c-=G*)*4&Ac¹)+1Vyr)O?6εuٱCho@=G*! ;FQqQU)U(*tTQBrmmkYAq)&յENOiGvމePBU E,Jx,ě^BuqgvKy0OKa.DM07eԌvjso4L8//@c4*Hd}^!)PKoLkPO1DSlÕ-*UU+JJ֪ժ/-2{Z1Ɩ#EJ]Zה yIiVgQzVTRqkd5E氅Gtv+52R,%*yɨYfѕ4M5͠Դڵ^RE3;`᠉lg?Om۹=} 7 +󃵵M +avUV|MfuWa0W٬H <iMa<0dvEM*Oj=V[m0xYeJȗ_xRN> VaZkXȆ6R3v}mm-RM^8Z/߄+^s+/վէVo*3n 'ւ>Amo痫?t:N~Ƕr$,x#)U&xhUg45jF;ZjDž~䓟Ԇ6pc5X "gOu8qfv rbKq/**̏pD"$$c#CvS]ՍVuW*ѹOw\v֣uu3g-U噿Qg.d)̏65aKzv Q4 j ?jZM虳8⇺o޿u?T=տ,ކܣAe!BO-,*1GfauL4#eZtb}s9scJ!R.ˇƛNծSZZnbQy/J Ma)f̤HbWKhk!֎:oizxtoKIIUte6ÝUlIkTdD*H~;?Yko֑RJ[ Pcykvj:>u{+b EÉEdw!ڛw%{hzvkxwg% +RC RBᵅ]^_od[c+ў_SuQ07C{Pw_z>)}-2Y*~aSCoE\VSwgmeg~9ɥDb"AOU.۹ƪm-u.=94ٲ\>srg |6l0СHT?|uC=~Qਅvy$-<~-%k6 h)e3F˵2 +#m7DQU;E2[m)O?`{+} $p]>+Ĝ}ZL>+e006aҼbV [#{~dCiQLnX@/aJIpGjd_1@Ϸ;fiXeH +m/t[} W$7CT)lF{ٙYVf&Z¯X58ylH%uκse&K%+55jOfWB[>NE{A8JC&RaSF=2bm=|xH\77*5"cלѥT1eQN֣T貉JBrd_;"=ٺsjiN5l)3rEu&2 ++Rb\>7uzJn9ܠsP%B׬^fYz!D 0O=KĩC5,NgOٽu:7CHBOɞo ^ " AOb@|܇,Z{|{:)3=7Y֜B1Ca&!:EC5u5b)dZ\.|M/R˱R)yiEi ?} +D%zҤ(6 9Mn8_~)8x!/pgKL-gWtn 4[$,hrx2 :v;4-teXBl sqQTa[Jso?ޥUAEe2ږ@ZTBsT*]SA6~7gǖyXԑ,ңEz$Z›,j׸`(Qaе}cC%yAA|r)hF0歗L!\'$T2T4tl`sl*gP~.YfliRtW#)Fg~oy|TSS6~>.t!ЩKp0jkpACA[rv[kƸP_,H>,19@sr+/鎊;Bn&׻? J7ż*0=[_ wRE9U%4#l0+LЂ<9eS^RE>}{ejّ>pH<`셰ޠi_O}(Vm=|0+DQ[zG}LY8z +ޥ)x>cB;Dx7CHlFvf%khN,1w!jsk:@ĀޏkW tڹ'(/g TrX|)z6뼂\z +S5d sF_?|;AWt3`6^[ۛՑ@? +m=4K>9C&thU^a3 oG aFGڎb˘n$\g UhK:ki˧mm²ޞTcljnvFKCuJG{z ?V:s2yR,'E+  vZ|Ut43ؗ\J+*U;Ax]sV̼e<<2|8XȌ2(nm22n-pF&\?^{ݜ +2XC +7 >ble6VC Eg:52C'Y2 XR/Yl v~}=@wQm z|7zhEFCʌR- +c'Y5\&@p56^m(wms#`Igk*((Y@ˍ/rqب(a 6ڎu~vu`fØhUzlɄٖFt>Dm,>SՂ<:ɧmaY :iZ^F G\KJyk\AMr_ADQ@%H2z u5i,:g.\n,}OZC[vržܕ<~ ֜MξЂbL{⚘<)]եWʄa:3?.Fs^.8qB+~ndek+eݑ#MǺe$f8O5NI m"`@#Dטf³8Pm7FV6IQZWԶ=jyr4P;nLMdGS6v}U6gS-𹜍?_|hyߎź#gT&”l,>6#VSVZCᦙΖö!_GA(89`UVdu\dջLLF[EUUB[WsZI[XNFTlCa +7o ׇ4v5|nTW;+HğJ +L.+;R_K\+P+ ޖ*]rlGIRn~XxBK[2.֘CQ Wf Ej1^ b k2nx[ bz+Wg[nTʲ_ŵr;k 0`gA2@@J׈w +Emӥn*3+ST +õ%u[[B2\W,**mm2\/me6[RNQ3Jck9Q{!FYDDJT,fЎfHaT;A xA |j׿\[4rƨ(>ΥKH垲bpB kR-}ej[QeEn(drciNi-/1|U^"6#&X&SFTr;.]\NKKj*oɪpYiD52- l!b/ͻmYWP3jԗɜ}*M"N+.lﲹ4ZG<GwtnpNrW/=r1)Jnjij\W/Ӈ[Zu@Es}SK~QSqY?nJyJ!1҇y"~5 @qu 7L3>3!hت51Y(un{9yuy/zWo f?.̞[0Gtg䏋߬Ϳ𳨗j#~ :TDGI1^dB[lۅB&X7ȇoC,7E3?A'I;w;F]; +Nxb7)2v7C/3˜_#' +|CFAj?WT06䓽h5o62ɷPy#rC:g˚iK@FREQ{Ǧ}hLV2_B%a^27┛huJ8\،(\J@Nly%nptd!rflCщltrbsڹ@e tʅ!rF 0)nᾜXR,+8"//,f΅PS:ٰpYڈ/Aq{1W 3/p5IW +`{w@oq i0y#Ms\Jx}f\0cK,Q2) ^gGZxl BST +jˢ9$cՆ? +ж@&N1P =NE!L%6ʬ6kN$i)8=\][Ǚjjf:$இzN1@d `jhz<:3 xɉA)+haNeHAE j5eZoW>Ip{j!K$`^^E{fmўbe g({ٷx\ۅ,S B}1K2K.͖4ӝ:DMfwPǬo1 +:e:/tis#2`ޞnW/'H++{fMBgUT PP%䒀^`  wљ4?2ės3ó'05=y<:84(fNDgL +0bob,(ShtbL=tVh33 `tbD臉t8lH+:!y_t,:{' Gg'(a'LMFIXyM ݉4h@ɩSё#>5 W}tx8 ZO l"!j#}cc܅G&ax(P.(Ff0F124147fecLFUf>LG ($%4;9=Dtf'MGg@fxz$)s`G Qdzm\(:,*Ⱦ+CB2D VQ -zE1tx3pB[h -c( Aq 4p6{`P 7->y),q`F3>  +qyK[(+rv2p,ІΏm38'8%aտ%󄜽 Kp;RhcAُFSǁ2p|Fp7,vcT${X|K>kX\K?/ ʴ7ϟC=iG]?/5xt튎s :LANj2ϱLq,[&pJj|NlL +5_e_g6H|J04-E.#hs"KcTG%YĪ`w.2ELVY s+I&_Y")*u*Q'Re7bhB be\YʲΖr^"nb]kXX}{w4/}T<{)>Xd7\* ԆJrޮu7O,&!M >muIb'2d~fB<1P +[3&ɛEY怈 +z8Jvg9WP7Müro,.bbW:-u!b;bVzh_~w]d^V];/s$_/F§4CBT-z-GhaI6XdFeCԱҢ=[ޘ&W=KYDxǯl-ʛ 6&^ iσQ^J[J|qG~];c b$"XFe<%ì mbQf廎v:|-~?<_p7xI:(V47=N5^WWo=w=òa^3d~~C&U?rq)o<˜&SHZ1 \|ʥ^6Hݲj- |,[PͰpR +yer RzY*8Mޯ di{br~p={5t^w,w磤/_?ט#-+gK(ź\촲? +;SS{:eCe"Oޛnr"qslۏFKa|Zul wLˏ׽]=ϭvJ!V۫#Ud.[ א|7'Į.>x?-Hk,)25|wJ}TF<##=ݩGRcNUړ[HU<y;lv`K{/=yM9: +b{8h?II1R7؊:%w7+ZJMA3)("Ie_5[Ҝ+w;:S/"1Qy |0J5+]Ek<)^vKGv]=_Ҟ!]6L8HiIFdXIXRsFAAq1,qAvwPU.t%.D4`/Ow}9k\/ٗ{OQuĝzg LTn'ɞҬXMxWvj]T3 +qQЃjå?žͰf5}5 epg.5'jc8iϢS?9=ez0p,0i3!6R`s&sL 4EM13ip=w\QƑZge>f-źK +@9($#L!f1g 0ZcX3قq?V`q/eCbOwksׄ[O='r~d12'X Q}'34,gED +9 +pdNV2GrӒx?ȞR,Ҕ!d/gHk1endstream +endobj +18 0 obj +<< +/Ascent 703 /CapHeight 689 /Descent -271 /Flags 4 /FontBBox [ -172 -336 1248 1145 ] /FontFile2 17 0 R + /FontName /AAAAAA+GFSDidot-Regular /ItalicAngle 0 /MissingWidth 499 /StemV 87 /Type /FontDescriptor +>> +endobj +19 0 obj +<< +/BaseFont /AAAAAA+GFSDidot-Regular /FirstChar 0 /FontDescriptor 18 0 R /LastChar 127 /Name /F2+0 /Subtype /TrueType + /ToUnicode 16 0 R /Type /Font /Widths [ 499 536 589 500 347 499 499 499 499 499 + 499 499 499 499 499 499 499 499 499 499 + 499 499 499 499 499 499 499 499 499 499 + 499 499 352 294 425 521 513 895 754 209 + 381 381 401 625 224 389 288 291 573 482 + 568 568 545 570 585 471 568 568 291 309 + 588 647 588 450 788 748 714 608 754 698 + 646 695 758 380 316 775 645 911 733 718 + 605 722 658 513 668 747 719 1010 744 684 + 658 347 587 347 499 483 323 500 548 432 + 605 465 323 526 602 284 241 578 285 881 + 595 536 590 557 407 414 319 603 530 790 + 512 536 461 500 209 500 629 499 ] +>> +endobj +20 0 obj +<< +/Filter [ /FlateDecode ] /Length 696 +>> +stream +xunPṟVUBJ 2EM_Ce o߳PrTH `V~g?cnot:]Ӿ6C5?pbQ~惧Z!7j}ܦq?axNԟy\۴?u3|R=e'zRN6MM|qRX^]{3^Ν2w3w+L}h96jܧ tyU)zUۢ޻)MSt[E[^to +S7)Moo?瑛8*<`ߣendstream +endobj +21 0 obj +<< +/Filter [ /FlateDecode ] /Length 8000 /Length1 12960 +>> +stream +x{W{U]թr=3==g:L JdIe%KVI6H{vs`==]` k`%al UuezaP(yŕҡ`=t/ߎg=~/L?Q=tpj~\_9S!;qn po8t ޡg*{7w8'7<$*!Tz+9|;N)rP Gв\~M[WJ+>";-Yr voC-PQ"{70䑀D$!)HEґLd!9(((PePE}(Q A4QPOF* +GhMi4h͡yVh Z֡Em@&]hmGWjB]ZtDa<0^6+UliGKYkoͤY?Cо;|tDҸN4e- aCb9 (ñɐQ&wR}@'EWa<>״|mo]0,:z""p T3ݺAOtٝϵES0HEG!ǁ3JFnGtchuu_e%e㦑`(ӎ<$IwziO߽(IXv&c[`e?A0M#t\XYpzrD)PD#! (/v{.\ zûv*n%"vXz*yvK$1r(jܾ)BE5n]*qGT[rdvO'v!ֻ`4ޑmR>ˉ~7M['?Ӡbr8etylDi"tee5L+ٙѾB-(\XKɐ*rLr\ڪo#C34&bsl\tpX|χ"8(GK*8̯{4 + $smOk'kI5^)I_dTK~̲4!% ( +2ig 17>P*X18:'{+_]uTEv"4LNV2 .j- '&zĕ UНlrSV#{SG?_s:<=ԡI9ql\ߨƍ>:e6Wm̈́|R&<==G^bFׯcpOVMmV| TyFߺtzb/nbhb뼮ëkш;8x~[R@eP*6h캉Lzbhr\Ohy@`~հ=?G\rvH-/mɁ.o8C,}MQ41sJ:ǟD$Vb׮c8'(s|h)Mk`Ze +/8En)|άڮ )S"f C8i톡I0p 5ټ}bv]?/P@f΢ IXVdZ'~)v&МS=epJ+< :GP}];ܕ#|o+݀|+mRsvi bA2pper.=7 +<>b~drH~trhVj33eiCփC6v_}gƳ +\*¦oQ@nF7Q-a dc )EPfXExxz + +<k]#t%BaY9SW88YXb +.ҁ]LGENW**X316단*YSg.Ű8{%w ?\i9?Llf$iBE$%QpFGVHV@+l=6;41}M#K [SF"jQj ՚,қWYk"#yT׎jS~r&je=h!K=y6i"B $6]a8?+Pcv_=*aauKvxBWI-GQď_wK _\tT[*s={c#3z:;W)B6Qͳ%u&n9evzzVY +rPH+E-z\hHĶ=ًkSK#S3&+sjzK`JdJkş?mzY@3׵jqOt9! _',_a7> Zi2\. +.+1@,4O_{^wjo+nxQ/ ᩧĴ 9_Ђ(>ޅߊGfF8fhwM+-MmUowZu4~g5J7*TawKjR0|dfD}a9znEJun9ᕁnyy5%]^I3LP>\*s9^W|餁əCjTxO!Q,+ +[15yd`nWs$>LPwdvS눈!PhFdI)&m5gO ѩ\o$'zFwO'z`ɡ9%i/mX򮹁di62{nm:{lt.K¨.߶/8$f@0Vb n}N$<LË,=BR_geȫ~ZaNizgXӸs?⫉uh'P+ 9cсwvBPyus{Wֆygl߼29Yy˙;8 CVԷ\vnTݴ7orNlMh-VEdڭ545udjҸ|L}oP8fD#RZNdL/23YIT"u2;PrӧIG/.6_&>0]-Oưx\ƇUIH hCi݇e%,D~դx vBK$ˍgeI3%++ 6Wry9P9TkY]\^ud" L!œ쒤(9Y +#m͑ň.NzyKKI|G/-IGr:;H iI&8x +,6:;:4d˷Wynl7>Ʀ.cIP{bQ<E*kIdӦ*S}UbbX?1%xAl1m yYOywZu!BrͮFOO# 7Yv/%+Tj~ތz@g@ 5; oal6 +|8$4"~ɺ+"Kw֋s-HC*eE2OuliRYԫPk /NjonIn!Fu  rpUYo8Mn +d۵Ke%9QQQ1ϛ١j>tB08Ёmg54T`Ҧ2/Ӽr..Y:֋nxaA=uDjpLo>S[XJԃҩ-thHm 27Wqycmu3^y3nq/:'=Tfr՚Lnն~{z/|r擙ի'3G}Ui&-WJGëǪ GPDSU-LbNi|p hiAfErHxuQK))?J1WUBkw땎z`xQm,Jjzvb|P m}I"v8іIXz'84F:x1G,(ԻXW!(5S>Vy:~GiNz/!qߞO{RfM߷i-0&#(J4q2 BQHdP<(R3R~z;| I ${Dz 10g22-XB(q 'MB0lps qJPtyFdZ{cC<6$E^H@-"?54ð= +i~S@YZ~R̒,q +&Y1*RQU˼l\|,.CS_2HbvVz/ClIJ+&*2eKa261eE~%M%uq!\3`p.r)zL֢Ԯ*C8 +QkIVW  cQ }Pkt!(352j)\a +r, wEMa}p`1ߺ !xRBH7uOT7Oa:o&~gТzI}rKqFRQ@D՝"xqKj|ȐA#ByWu؞5)|$Mz>p0&۲KJHNt_]w޵Yp!/YTS}fXù(vv)%h˒X+.dIBrſ^X6W5Wf x8/% 5&ncHH.RΏ-$ fҡhYj\d`' xWf,fB@+(4%ZC%Ft8 ooQr{{]uFRښd4xaw=6.LUYuu2+I ӒM%!1;ZŨp ?.l9wO=+TVf]#k|'scY5*v˨Ec%w-@FkjS-A{mN^_ t5*ϗWζ+J CODM0>"ig6# zbH~g;ў7==l.żcyeq#?6y8(XqTgzߪ̇XFJ`rOUdí<-ZʥUQPް$9Yo|Be]JgY&'WNj/ɛ ȦMl؊_&t@G`Anag]h{f*10Zi47Xm_g1 I4O;|?G<_`*G|cL!>s'qMQ1P8?L|CP9&k\"(Y z5Hl)o?e N#7\h1WPPԝ>SL>; )Do`M Kx\ k|SM.7ÝzES^;r3<#1KG%M[h`}'hO] 0B|a[b˲l`/lGzPǵ('à HR6}U"jnfMxu(("]ɳNX,SUUm?RȹTEiA=^SDKuVJj|Ve{^ uB $܇> +endobj +23 0 obj +<< +/BaseFont /AAAAAA+Dosis-SemiBold /FirstChar 0 /FontDescriptor 22 0 R /LastChar 127 /Name /F3+0 /Subtype /TrueType + /ToUnicode 20 0 R /Type /Font /Widths [ 0 566 513 459 582 561 198 0 0 0 + 0 0 0 0 0 0 0 0 0 0 + 0 0 0 0 0 0 0 0 0 0 + 0 0 200 214 290 646 517 779 630 147 + 325 325 460 443 184 407 183 481 549 267 + 494 509 480 495 538 483 522 538 212 212 + 414 441 414 424 734 561 553 541 573 522 + 504 555 593 238 526 542 475 687 593 566 + 546 566 553 511 506 582 560 845 530 556 + 506 326 364 326 279 322 184 459 506 425 + 506 475 327 465 513 214 215 479 232 794 + 512 486 506 506 358 406 326 513 457 682 + 446 454 422 340 225 340 406 370 ] +>> +endobj +24 0 obj +<< +/Filter [ /FlateDecode ] /Length 702 +>> +stream +xujAsb[Jѝ+! uLʪγOH +:YǮNL1 t ]n󮟴۷ۯi9t~{G9x:͇iy8Nϗq26lr<}lX4->~]s3Y|=&[r&.9O٢j1cm9Ozx;+Ev:}h{B+8KYJG_=@T׽eUt[۶TTU[^uT}UuՕmo+[ʟOc_3_'> +stream +x{ \U9V}tw-][WuW/յuUWw[Iz tHBH &Q0j&|" 8 2q|1f{oUw'{{[#YDLnMcx]9)ѫ/rBTkuIT:ىPo?L8||o|=v]~ OFנ";ȡ]v8 sg_~ŕA9 +rgq̤yÀ@}nzzk&B=7Ns'du,8KaDw\A,"&#HC:2<ȋ|ȏP3jAD!FCP%PJjG(:QF=(zQGTD}ʨUD+J4EchZChMi4fzmDf͡h]4v.AR~MV|+JdW*}^ò~iTe6E_OQ(c,^?KXFG Utq՟9ZRDU9VCڟ/SI />V`A>^djfP -+ ɤri% xa:A6YMs=!aÔx7yF*c%𨁈=Gu$ ZkSlC*qVO1MY6čO<3^11f&&f/N`ŧE#4xd(OzykeOKm݂ ^Y60!JlД׃*ZFԳQ\^#: ]Us[ +٩,EP]+GvEg':[sJt%$CS̱saa*_w $jx'~8ShRU"G:Ľkh/*C|PPuEaΩLRɴV^ET̷n\=/gGфxKXlzdfݘ5/JA7gDd93)<,yBbtJ$˪Xm\"H#?gJ6",n߆ri|FH.Il=25TCM@Fn؃7yW?Dt'1MJ:CGD%t4Su[HAT]ol%}h +;Kt!&GRcͳ҅}cc#ӓ fWD5ER֩&љ k5 󨄋Q7!:+St{)=`(NX컂&o؅g$W`xYfKs@`= ӷ%Me;*SSSJed>!Mo7HdztxZ3OK;*Sڵ$Detdbu,,(GK̴m99u%+ L~PʣIEwWZw}.3^LF/#:t Ճv1|Nr杝҂K`%Ո$VkMĘ]s(ОϯzbW6ؙGܩJk(NLo@qKV.*EyA Xoc$ٵ/9s.uqG%y{{!ɂR|2Lؗ2Lwk +Mx%iHն% 򶗳l"3( +gH|_Œ!p +ꡕ_ʜDI\9;yM||U&.'߰*g(jbrq; @yG)li)\X㣉#@}U[֭ڢKт1ua5peM&gڶ\v=h.VASY?zQV RB@znG#Lu7iP/viȲ=x]Nu$#;!|3nVDQA!>U'05kFWtuT' 3s@4!6]"KT}8@" tH)f7շ Y4- i}s +{(򽐐,YEYZ&ye+RK}kA"V[bJ6;6@?$<ߐHLT%9$! +*~xpi]$zٻ4zdɋHҭ/H2U >%,էoXʢI]q-\])Dc~LbۋcÝc7?!LGrxrȔĢ,\Ϳږ)h4ټiP*.RD]`e6Zˢ(WŇAiWaygY}[]L,>74"^)(R wURŠĖ;Oh o#Sà3ڟԿJÆb.<{vi7VJa a7n,͌kڇ&\++ |ԕKDN678Cl6h : +v| +˦ugͭ5ۻl& e#W=w@Ƈ4\t6g$VZ&|v$[A4[5EŖr2I}I=3 +:'^`X' |%5Mٗ({>Dă`iJ9Nv?]FfyMW)wM +  jG@a՚NvtVQΌ(3xZeā _CtTD:lJ)+tjo ŌsG2M~Q#G J!+P Ʃw _u]qdB~'dšJԟ)ܒp +(%*}ۋT +E4 SPQ@:fBHH!bZ+Gċ;{9egcڿrS5\eLˬPTt  e##&Mt]Z pEw ֳb D +vTX(V`[.?M7q1:6UhGS <;2V7E:Iji[bWD| |RFx|+~rmab=`3)+>nfʱX9.'epTP&p086=oR3m{RYԏѹtP*6266L0뻬8FMce+Vprώ:Kgލ摡hD)(-&mكL' X(ft eԛ˭m`@{8QbUAv +[ -?FۻEPĪ_ +{Zb1wK\fc1=1bď5$%!8$uҢ#dI13/ +|X*Jx+$T:)gH-E.Q^e6&@F/5uKK^<W}CY3.f[ۋhSkg +A4T|i(]Θ]ӝVZ&V @GWA[CI%{'>OkDyӆ $3S:k>7z2Cl#UZL'sxX.ͶV5xӳvץ 㝎Ef{7zӂ6Kq,CoQmGi,FI$.z}Ei5mh&Yכty.M[.joԚ5<-^A24]򆢘-!*Zl z:P ժiUb9J8jٯxr@N|%=r"ͻ>pƋ%zGst8*#gn-cp))AߺH,zJp8E|u~ ;bCscuP4Ntۑ#J7dE"q @{Z{Y,ȑ0^.oxmGbD ]l9II`o@ú<:Od{ό3"#=xdute8.%< 2m,:6 ي_rk*P}_zl:N9Jl8.UUƧ)[t6K$]uw9$,|g? +$Q[,s{J[b %VR 뫵?/a[h}?% +k)A RC@s +8;,n] +%˂캛ghYp1U.ؿ<]_\^5[~ @U/Yū +mf@w(МgkȮblnu'h en.Tc^>MPݼ3_8 +nOݶ(`_a]TBw:/6u%WhH06e.5=|R$#\Z_qx[=,nzQ^?:tjt뀥MI +#O"{#[@ᡸAMt'tY-ZµS8uX-%|IMQOmc\kuY׿wsak?k/O&n;}oaBRxJHx#KHoy|q#4JuNWROiI 60[3yM'y^]ߔm}EE!Eg*_!=b0#O!=iԋ;}jAW9}7/r Gd1rV}eĕJt]* {_0{X(>8?A7Wlb#}诬sC`9yrKu5F>uc;𷩋&Ym.c=\{9:{G`U“-";G=pAkrߜ 2%4\g:,IXݰs?2endstream +endobj +26 0 obj +<< +/Ascent 1027 /CapHeight 731 /Descent -237 /Flags 4 /FontBBox [ -140 -232 1029 1074 ] /FontFile2 25 0 R + /FontName /AAAAAA+Dosis-Regular /ItalicAngle 0 /MissingWidth 340 /StemV 87 /Type /FontDescriptor +>> +endobj +27 0 obj +<< +/BaseFont /AAAAAA+Dosis-Regular /FirstChar 0 /FontDescriptor 26 0 R /LastChar 127 /Name /F4+0 /Subtype /TrueType + /ToUnicode 24 0 R /Type /Font /Widths [ 0 496 438 550 469 563 312 322 311 185 + 0 0 0 0 0 0 0 0 0 0 + 0 0 0 0 0 0 0 0 0 0 + 0 0 200 202 270 590 498 758 610 140 + 298 298 435 434 171 400 171 474 533 234 + 475 488 444 475 519 460 503 519 201 203 + 403 435 403 401 719 538 538 525 560 508 + 496 542 573 218 509 523 462 668 573 553 + 527 553 528 494 477 563 537 784 483 529 + 482 303 351 303 268 335 155 438 484 412 + 484 458 305 454 495 189 191 455 208 779 + 494 469 484 484 330 387 295 496 420 666 + 409 420 401 309 202 309 403 340 ] +>> +endobj +28 0 obj +<< +/PageMode /UseNone /Pages 30 0 R /Type /Catalog +>> +endobj +29 0 obj +<< +/Author (Chrystal Math) /CreationDate (D:20260721144344+00'00') /Creator (anonymous) /Keywords () /ModDate (D:20260721144344+00'00') /Producer (ReportLab PDF Library - \(opensource\)) + /Subject (unspecified) /Title (Chrystal Math - Corporate Design / Corporate Identity Guide) /Trapped /False +>> +endobj +30 0 obj +<< +/Count 12 /Kids [ 3 0 R 4 0 R 6 0 R 7 0 R 8 0 R 9 0 R 10 0 R 11 0 R 12 0 R 13 0 R + 14 0 R 15 0 R ] /Type /Pages +>> +endobj +31 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 13704 +>> +stream +Gat=q?-hlKOe(t8YNX0J)9]-_9;F3#pl&Wh5%8j@6%I`MH]H-Ar&U5*)%?*)6`On'<@h^R9mDUW9o:E$Xa\6`T&&5!p$lku>He'Uq05#NrqZ)j^KhrIlgafFO7g3!+.rT$n_NA(bHo^m[Q^!iqsRQ,bPGPsE]egGk>-TAN;%C#?=c>Bot;ucT(VWkpQ+53jO:DX]6?&UY341ZGb**b5(<+H:Wp12rnYg`gAfXm:QODA_lrfW]Y1+lGJ+479,]4^CS8A:Jb-AUc6Ek$06>uWo?c7ipX_NL=9SR[&"OJ'J'E:?Mk[uCUcr)MrEVD\D)cEA]W-\5?dmB1=r@2q%rE(OJ'C?9L!a9!:pi"RC]8B;rU99hL%4"NN;f9$Fpm?DhnjWiVuM-XlX?GnOC=r/3V4BjpF_5]+bJS4coK%k]@=.s;=q#e5"Da6>r]j5iD:BiJrE&s@Isp_%.u6.[NUUdjj5`8dCUBu6Q!M[5K@jCHTW$4^EDR`VD.iM)2Io1r-b3t+';tD$Si.`/r*b#(qn+dI0cTl3E1_eH5ArhEsSOb3Ab'38%:O>n`i6Rj`ug:k7K>nA%Y-hE/BnN&hW&T/`S-\_BiC*9=0@F[#C>b$(#3!*?WV;?G:e*NXcggca?LHGe!^5BH*Ot+(M>%R*qb-+^q]ERK[L[@bh.V=Q-K;b&X>dh2$g_gd=tRo#e7;aDi=boJSLZQ&n"543,+'f"MD0!$gU4Xm9V0K0.gY&C-o^YoB)$05X/*4p+?ZU,?LDB64X.kf52,o6a(:BE=lD>g2O&0!Q>jpCErr"(9tO_!X]_uXjEhnEa-K\cm>?DMqImRL/UeP\8H#o0ad+LWnm:o!I!O]P?-m5_""ufidU*69fOb7lUMmh2'\dh,&WAcT\(Hsf0M[\,,Q*$'Mr\*\0&9bP]7:>5MC(V#m&Y;^,JL^rBN4S8-8/!'dp-1K7L8a(3)Rg"k]jY=?kMYWYkhm0B1PR!Y/GQp,WI=\;4jQ*X*Om7GJDZ!fh74>]J1!4UA"PD%ZM0YA;!p&R.KRE2mg_E('N+7K=,MJr:tYkQeu7hQRScXu"(n0,D'pETG9dZUF*LGU`e"fp1M31:"H/#CT$nP)V16:3P#0bet9;At2YOWLdO]E]kg/m2I2p9''*H1I(DE#Rc+Pu>08a^&p`ID(3`'NF0\Q^RRr"m?]&I&R5"JgW0oR3B:9.7S/f-7O[^mn.V1:d3>+bKP-.]+X7X-SBb6+hm1MnYmN`07/>\2^iRr'=mI@jur*hH.a.M]n(1@^;sk=1W24$`TRfV,fMJ*>tK8Lb"$cr1@lQ_&CuGu07*\*nAJlk1W24&V/Y+Og#Sh$Z3T\EW5<+!1[e15aiiOsmTkZq_%W0KbRi[-'I,duP8$BrG9uo:-m.[cbKP]p+f!_ZVh8cHa91^*5:dUKF7#&ZBq!R.-8OnhT5.kM1i\YQbCTShkUr26Ssu@6bmml*AT#bl2G8V4\-a["Y3sRJA^<%b?ee:n(Ub<_k7NUJCF.YdDZHZK&O&+4V4?;"E^1H#r-m4FA:eKQp4k[+sD7pPC[(okUg4C+N3jO+XR3C,9[,\>XHB/5_sh@]8eY6/V+HFf;+"V&A=>DhukDq7UsL58;Q,T!hC5Jf*P3.fl.7I0"@HO@"a?5?-o+u3:K%$M"K[OHR)#O+G6U/X>\N.64BGD.$5D,S!A"+,+;ZW`I[2<6<$c>Z:@5LO&CLS_.n*A:5Ha88guSaI$7He&CF0LN!%CYKZKg6A<2D"*i'A?A9Dm"T?dg@SpY&TKZNq#V,XUOMb8u>8TIQ;Ab]XVn2tO=6%_Upsb8qm$+@O4.]8LK1p-_'?ps#-g#Z7).`apg0SV64O]^1U[YPHVPa2el!Omu.aLemDoH.a,A?<^lBp-,cP6:=V]@UAcJJ_.>tQ9@^'5_tA;;Ml&1RRrBVi-CCq)3g3KOV#om'V\p=?hPU1"]`)!A[[d6]pY5#ESr]]>4re9![0>58L[,bBI51JJ`f-YM0a2=I+a,`'ia.tQe>,#oO_G'`du`hC"[!,$&$Cp-D_P&U7%eo#G)/,O[8fa*XNEA80R9?C@u-K6BnC5b?ee:DcY#sAP^g>K>X$=#Z3l.>kTr-8Vl6IbMG5JRP-7>N%BMk);h5(,=FAP']["#+<`Kg+5%k^U'E,8]jTsF*eY@mES8MDnU4UK^302//WcF8SnIfMQ\b/>F'G;*I+QZhakstirM*2Yb!GRkAes""Jr:Ak%!Vhm2qLf_q*V#2iZ^UaJsP?t/:b?pN"b7=6a3CV/!"ULap!cNA9E'Vl/5Ke(BC3',o0D5kq*j-ucCEn0>ifckZYF?0VaZLW7O#gdX`$XZgW_B(cs(pVKJ0Z_iWr0E2NFEofYm,Y<0U#uDHI=(lWA%.7/1Os/hTeRUeaG1'pRf_pFN)&e7J(HPlD3`XWL[U!NX1@Y\J+A#,7H5BcBKP5[+&cF39PM+90"HB&HG^_fh*8uFTj_VmBZ_qbOYVP4EWkS_\5SCnL59nS;c/PtCe'[%\NP$o^L&g,VY?MqX[M7rW.@d1C&#l^S?nZC?.huA$rOWdcmqK$ckc/:?"tR?#".GW&8Z<`*"`SkkCb2^iRN^maH6=RQJE">Pi4Q"CLgQI\Wr_LIu"gVp3`!2o<5]jJRL^E=TugLh?:]LmkU>I0PpT/iArYD^7PZ__`&A6_k&M:D#X.g&fDJTbt9^Fok'N,:V4EHl!pr??s%f<"t@G[Ck6$@(E#,\9XdEE7=;F>S70e\k!b"fEQ&,>U9_kEA3&ik0J>3JM,mFuHAi9U32\VO_kN\ZnJj;86h@!o?s%NI8`tk`CBDE1ba6DTN+#bN1G%6OPCr/r'#VR$L=UoadA81`-k-Vbc^,K7mP)"9L1Qn(R]98;:m=^)EWR,ETiGZX@(;)&]j7q@MS)3/PriQ3@#-dT2*&RKSMW@*ShDfL6Gq/20J'fb,SZLe&d0(QmZ\oI+l]$C<0\\]U3':q,KR(tXXZgD_c7-2m@5C@<6pmJ&,90\/QP`aBX`?f`7%CTPS70f?RN,;QQP^L3@;$Yu(0tYfMTQJjJda/Raq;H$EDC:!aq6s;3[r,^A6=RePTte=.YdV>c4LPdk=Z46GKLN6&96!1Ee["EBl[$5?Xd,jL7r`t=ELN6-n7UF#VrL:.7XM.`&Xs!-q=P3l(fFlOC9#1;2tp:Wu0FB3Cc'-ShDh"gaP_r6c;!caVbl]UrbpqI#28D)MZgo@F:nuTdU@Oj9RLlh6"g3_%:T]CH@\)KVER/+@hN%);:c(&I__qXLE82E)8])@T^0>NX1AqF&nJ\/D<[ZKBi7F_]goGXTQJ892.`M)'VS4@HC6E+rDNLDeh],N=TrY+]Y>UmMml/6eMmKV1I+/ieF"fCN5/=qc(kF[t5YoA6?c-X5IGh1`bQ7O4_[a1Mlnj)1HMdn/Jfd1h=g"R,VQLW3l\JQ+,/;7GPFGIdB@+ale%%BJ)j!SjZDD'd64+++G(tRj)7Rd0\0JKTfSCVd:/DF;@=UPY-0oUcD!h2#8bR4hpF08(JkqOlnigeP0%*NhBUiX>U%*aR1^i_iPe>2\G_p/;#hT_CK4VYf@VQ,kG'U=l>S,e;/X/`6D6Zf.2-lNMV(Vm8kSMGg+)<\(J@p$1'-3Mfd*t6?>I-:oBL?MMK;)B+66%EBr4/E3#1RjP/t(aGi-`c/p!STPF@?aq5Us!lHM5=\Zo?CaVp]WnflVQD+-$'t=\"V'_pM0LUp$_Zk>-&Mdmee!c/7"Ar,n$??7dJJRK;VXL;A2na(a;J#@=pZ'#T5DCBh_#VJg`)r"ZZVmX3c`EKFH7nVNQ"RJZ?t_EWh/`^p&];,7IOgcBKP5Zil+`S?nZC@G+DE$rjig0J#T_Tdt("U.\3Kd9qbM!JV'OPTs_[3%$P.q8Ek_OWdl*dI+;6b"t)Qeg*T076;l`@gicM=dJ8Pdr?6Bf&N3!?ju?q+C(jO@]mPOWLh1-S;7nOTOk'%&fA&X12O+;Z:'F9I'Z_0@D/)*nFpd-f_!(jTh5oH3X7+OO6QeaH8T!J'E!^=/>;"6I5-YcH*5tMICF1#@/Ok1Qs__ou/'JM@C11F=RFFIo5VOA-MAr@)@(hPWc_kN\Y3N,tY1nlK/%4."dV'_n7%$;[RY]?WU&I]97[&0iC+V^c:MB"p:AS>((+rI>i&_]6832flC2[\u;,D%)uSDK5`jTqP.GDQbhJdfhnAQ+TpL8o9IG0U[0W`=2%Jii(M@#-f*GM$Q\@WRQK:ou3j'K0+ULg[0%8(_EpNc7gs.X2Xc>31QJLcB$)3Q%S^1c_L87%MD.Hcqk")?"t"0aq-Rb$nHPE&]##u:2;?%&OK>U.EE*3=GBk@,D)U],,(QKKS+#>;5E,F3?f:ac<3leY\5CY%]WNoOVf!kL=/WZ;NjqAL+@9I)4'\kjbR<#32\VSaq6s;3]W9HaKQ*?:lYg9.[#I.c4LPdF46;9+LcB$)3Q%S^1c_L8eOj:a(`J8XYtIeX;&LQJOC@6G3?f:ac>RJb"o]$NJK\$nhsO#f.:_oG=>^D-p[+JUO^AOOVfIO*Q1\ML?tOE'._$<29h2]q[aJDB_ra:K6hr!nU4ei+8>R0sRa3Uk>G96:7OsO<J1I?_VF/2^UVI'Z_0@G056G$rtj*"72k=kunN8\`N&T&F=/JRNE@D,d<<"4h.A32\W>%*NhF`:$TU@;fMZ*%EK']:.4`^W%-.f&g5$-@S%`7RP*SX2u3EmA*=GXaso!+1ht.QLriN1^tPm"bs_QFG@JY4LimSLcD:i&el7bV^p%iZPp:mSatKHZF+f+Ec'`STLR&hf&a/e(ZmeKV7C>d)a:Vf^m4=`I6nhR\-F@iS0Mo/;;i]e_;PPDpSDRbI@>iAj_EcZFfT[U71t6#E2f,f\7i82Y5+?QqLR&hf&a-5B@p$1'-3Mfd*t6?>0JjJU@[EO>U;7C$!Xp%'.7XM.`&Xs!-q=h;jeQ:4JmfBt;2tp:.a`omc4L8\2J:/E**R)67%CTPN+(C7RLE0-IkWE@_pD5[M-Xj?M?ZH/#V^(6V]69W&a-NuU)ZH5Q'6e>!JXTf76)P/Wb<("3Capbg70T^E+l5u&96!1159@%BeiNPrkYfI%7GH5aP0LVG[RL\EbU8XS%a:Vf^Km"k7"@JGo69F?9"'(gHjTl>J2&[[a=\Zo?CaVp]WnflVQD%`#.-JN$2%`90+`[]&2Rl\G#_n.V6;p@qEl#cgTD5c]pcgI_\I]O>'[]64RrSt^?1+_IUe`7-sG1%Ye,/\"$)eqEjje->']Z@Eg@cU3':p,KR(tXXH[B6e-9F46HkSeZ,'5_4>U70V#?2AEQ"kU7F,$W)hGj@V?SsC-&Um9gV\qY/h2c=Lq_%,D+m%9d`1":lZ*Ed`I%[6&&raLN5d:<)"aIF,k39XfCV"gaP_r_tf`rG-3VPg.@K\C/mtUL5)CqVA$Sk,SZLeEWd7\mZ\rJiI"?I4GWgO>@9ubYhO?49+#mY"ZrJS7nk@HNR-]%_tL)!Lsu9@mq$a`kr)bpM%?6U@+,]?5,cb342Wg#5"P)VX]X&oS+3b*@b>H[]>STJ[TdLRR]bnnV^-YoRAKCM#0sH3M,-6i:HZTp&g1b1IY&F1RVs:En;.SDWMbPj*@9%?$:8+7t-Ei0lh%-MCeq7/pS6B=O2PCadj8#\8NU)XaRb]Li$aL'KNII*QS.Uo-:BL1Qn(RZ(\&cC.iSP73r'B!S.Ce78tlL71k)Tha2BL:rlH>U%'@c<3leY\5CYWg,o*9k@:+@3oT-L+PbeVkJ'fBd1IOb.T?g@2\78VQ,k7r+n#ACfO3-r3JH`i\"uG8diP_p*.CTeTAD&r,7E#b;a,l3Q%S^2!MW:AD$N397?t!BQAhZ6VXK;Mk)Mn1M$i?4#A]Dj.+\"Pp;$Eoch:SeTAqU]C?QFW2V7:$m4e(L97K?FT6T)M%%QeVg"n13F]e:aKSZ%SMGq^cphElQF,`n+XSJPhJdIk%*LWnGM$Q\@WRRV3Fpbt/7!(m6]Q,?/ON71Tn.VMjTs*H)4!#$C3#%t4)&_3XfCVR=$BTG55a:Vrb\PnNM+lf*D<0SV\U3':p,KR(tXXH]\&7'!"3Cc'-dfi3Q%S^1c_L8eT>865#d9*:@(lB:fN1j&S,"S;iZq_j.+\"PTtjUFAe2FaKQ)T-qD>i?"kcK7l[GJeT;/dPTs_[3+k*/_kN\Y3N-!/FCJoIdfi3Q%S^1c_L8eT>865#d9*:@(lB:fN1j&S,"S;iZq_j8?>49?-qQZPFC@M:j]K-&%b06,qI>W9IhE_'j/LMIc&^9+MkAl?T*n]a\:(`(@IKb#h\LC+MHd0$\;YU[o)Qc-9=Xh@pD!TXp0^R)_!=(K.9&;':WhpH`i@A)_@M75oVNYb56ISbs1GJ1@P3,&oWdWH3LcD:iVU8Fs7E%;>QT,NYsfhS".gGptSm:UQ/9dflt&"86Fm0/7#=n3\Kd]W[e1dmk_R]:DHn28M,YWI>?&iE\NM#.uDV5`SsU$mA\@IIP.?"u2aSC>*tVAq=7<(cJm&NX1AqF';L>NZa5%8O8@:_^`$f*"`TZdg>E3,7IOgcBKP5[+&cF3+k)d_m5gi)5q`Y?s&/30X(rolZ(0!0S]6I&5N64l)qk,qA2FI$!+.ljA"($rWUaA3Z(otC:WQc1MPt@bt9^Fok'M1U)X4O(,;?bV$&="FRnRcV48se!/@>FSPk')a#>Nf)&@(+UQJuCC-(/lK0Ie,d^.GsB6_XHAD!WF:A;f:09KZ\kHlRG=L>C]55U?KRidPIe9'-For'<'FtYUe;,*tcj85.`Y`*X(P;=cD8X#a"5_dOE8Jl2'kueD@1d$L912Kf^Vu,KoQH6:hF';LB8f5]k7YWLpl#\GF3Ri.Km7h>QAN;!Q(=dN#SF](k/n0)7HK@e*Udj6VSs,2NO;Ac4To4*uXeGo=lS,/E<8WNAfmSiG4sG@>ek]h7dJ]e9',_27Y#M3Ci9pT4HU/f0PbEY`*XPLOFn/2Wk?o[RQ"r+1ht>Sb1U+[b7/qoGJbhp@e%7&fI!Tc>%BS76>2rCQW$]L(-#2`,a3]?s[BrU7+i$>[/Jj1NY%)r8O8@Z__STn*"`TZdg>E3,90[@C,uNBaq;H$ER&<>L.+1b/0cjnUIjj5[DR/bWGY[uUFOn_86Trd6BrEL`*\XNPUbmsZmM*W*/0n'01,[p-eW"jem%Fa:0%lfY]LG\u.VAUc92VJTOtkHP2?37@1*Q-Nk"S13d9rmJRLJ*UTK\+W:u/,-`\O6,0ns7O-LH\^JOf6mE:iFjM252P[QI_=Q.HRJ]qUBT>3oloum(QKiS)7IZPbE'?gjiPVJ`5eoQp9MfoHZMAXj((*dO6`u[a3$J3p9]Oa4PsF_$gkX9=SnAq4T-;!rd+"9o=]<;/`Cn[#,@MdSUi:JOOf%'mp>ATAc?e=oH7!jl%`e;Beod[VBg8mf*9hVf'Mi2nSEQjf39$,UE^9Z(u4tFk6.Bd5/?!G!*4eV4j;r[E>,EBa2P?'K7AMWOq#l.qbK'f5^6G4mEoc5.?j?gUm1Nc]@bhD#[_o%J$nQ?hX`mXhDiK59<&dgXgr??f-9Zrd?lB*08Eqp\5:!jUXTRhnT*Tn,Dr$+.rSbj7?%fhgLO6[(lA7lI5C-j2\%mqdBFW5F,=Hm;L>-CV-S1gXUINHlnFBeb6$-c$SgS\s0pW[WVd0h:(:IMRHb4>Kf3e>r[KP#[8rrW;IVmuTc\N7kN'ABR?)jkGcY0aNC+ak9AQdm[l%tFl>em6jD;

CXRWCk+\ge%0U%O0Z#mjfeJ=Na_R1nD]##2Ic=5k).I6SPO^EV**D3dbrR104g&>[.>$'TA[^L7Ycb=J-9QAmFr8V_plTbC25C`\#nVcjbql=*'_rGA?*W";>^AE]3^\[lc_q*6k;>W`JO+pAP6WDf_h(Ge4Gs@n_pmiH*iqpLgnXojZQZa>?rQ!sms5Wo[IsCn(^\m':huCs]^O?,Hs5rk+s7>?5^\cL?n%\n#5Q:*@Dh%baa"Mo:[kIbC#4n+mhZ#/u1#T49Du8YH34:!^oD1D&+236sIo6(-qq8FFHFCRYb;c$Q6GW0':%J<[Ph.2Jc=@e:WF`'*_;oHrYPqa%gBcQA=l1l,ZLpZm/o(_kW!+b3(2#~>endstream +endobj +32 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2464 +>> +stream +Gat=lgN)=4&r,lN'R`!2fN<_b&Td,t'ur2;-a>O5[8jc2,Y2B<;BC^QGPq*fTSS5C8E,T/`q$<&UN-/*K+q5]U&G#_)W9'Yrr!K6R_a(PPS4PU$&kbg"eoQ\1PNSbc7"HkPr*nFT`rQ&OH=NUnm(A))Hd!#&=l]NZ(Z$S"ZB%sSoT(c8Vhs7Cs<,lJhmUVRZT/_$>L,W':mNAX5G`&SS&"f!0J+aB!qmpQk!Wql'.nfc'X/uNMBoHVP$It#Gd1k-h&:UE!^_i&"go:\(B[1^L6n"9Rj8K-'V?.,`oAd*sg+iVU'IOV>FRSm"KH6#u>DNfZC(jk.@YWbQ:9"@^@@X2rBdn<&2pU@qW:]piY((-<@Pgg=Lef5cfQI'pSE-[iagIh1"7)70Rm([t[+@4"HeSl/9,N/PWS'EbjV)VV-.[m\q]q%FeqogZR!aVCf:K[AiQF?+['cCg6;8h8_^CWJdp,JmDlAB'Rf0f:(gL1f3P)DO;M`WhSA:g'd\$=)ZeVHFnGSMorhbp6G!5'nP[[$ffh3<]2@BB4YWVWs["H1K@GX9[ggNffkhd!]KAa^_9aEf+ksdi5N&2m.V.:s15Z6UKA7*GMu3YUWWjRVCKh!1Vn3etT1p!&cEI"1FMGeN`l[@dgC)egXP``.cp[M1?Jq.4<&(>89P&lhO]8$-HWd4,BNZrZVK'!H=%!A=&/6:Dd&D\Di\`0`h>+qM$CW26'jZ2L'm("f6jDpUq-$*jF51jF#?bE$1d'0\Pm>GEV@'*ZLC!&H@ACNBO@8m3giHNe<&]fn@0\'=@\"R\](UPgU9HO\0cAL\Be1PZa1>*``QiV08P%`1>*JuG3ubkN$F$H;TbM\B>sIA9*N0d2Q8ABAdc=K8*uS2*l,4[(?S_dtkIg"\4MYC@)<)Vao]ei!0Veih.q:iGg#j2pBUApcgsS&s4:Q`goIOfB6qBr^[XiM!O2AWP?UL\B4]p4c(m`G&(nW`)MX?c7)tfJM`2qYb]GC5ZY;0&W]Yg&m@=eiaK'/5=k::S_uA&5fY"_%":6gHQQ"g^(O=.T\?C"N(D;/CF[a3:d`"]F\c:U^/kE)L10rHY3'P,M;cP,M95"'?LCg)G:sa>sq'R8Fa(W>""jQ\`*>MI`09J'l]?l*!/Jp1AjTMBMNp2SGDFM3"4+hjZ5T@ps9g&cX_J1*6->gfnL)XK(]s>%*qd8hgm]p,?2\Y+`DaA^eG)_M]7Bo\_[2rDM%"9@?ldcktr(NoXJ<<:DB!BMSY.R]gle,&dT%_""-DZa-+eR+AO=67/;X]SDBiO8TKCM5B8\f1Ql<0Mqs@`dCMt-'Yul-GbB%_]Y!]#jDMUGgl7YP7rc)Qi[]i?NNY0Z2h!kA\KCD4>Qrp(@0>6SKEPH4cUPO+*a8OD6-S;2cf%RKN0k*GuUV=,'O]p#3um7H"#ngfGcG#;-L#.Dlc:m,:%BnPfV^7-ssF/F>Pr^S$OVj_VY(-k>64W)1A&\=k<]6a?%&rp"Z:2RVdQ]^+5Y)M2UQ+$]E70t_!Jm=uJHY)1ae\CrMhZKo`HiT$Qf&U_7CM!3k>8N;T[BaKRF$%Y67MU:B(OeY9_;2ud8CBa>5T+TE`gkaF2@r^28'!]Jm&UT,lL?#W;&Kf>!J<(W22W+CLI'+mQ^\td2PM_mO3Y?bPdlDr>ItU>]$//VY3;X?@j5%lZH[K?h:C)B$*cD3+oL.Cu$u[UX<'lQF4l2i";1j^^13pjf+D?cQ+d:qYkV(:1<#)-4jWW+3p`+_-0'+O[o2k__j^C9_I2l&^$X`AmoC_KaHM(umRQo[!E-,dYh>D7O/.3SWS+f\Y1bK_LRFfkdQ:%:uh0]Zu0I^eMGV0PG"&!sN/DnN([(<%%1^E_7$81]mZS,Ri-p8jU#A0e,oD~>endstream +endobj +33 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 1729 +>> +stream +Gatm;gN)%,&:N_ClslJB#]:o@jt=!bZ8!hN^R?lTq"0M*N@DIC&3#ZY%8#))!J:dCCY9I8&%U8jh*S!\.0-_Mb1=rRp1L$WeI\5!S?_VKHa$H6Lh@!37s"acak@j5A2"DGpaVc#ee3.`!m!j$o4P&Rr8&3W-Mb`-.n"S-.l.6a>$N)2,>=HlpPpm$FTg=9bj")m*0jmWCj?=(R'Y^"sTD%:YB7fP#C5&imABr2XjP=DH)9'>M7^'.7-/bN;fS$dFiSaU"F!]k\AZ@.BKOl9h)"S[IAV<8]PL*jYMMQ&&o5oNA(W$XTJP_RZ@8)J*6E*;WOiO95Q;a%@Z&TYn3tWBYE#E.6WYKac*a+J%4]XuG8TJP+M"tpK"s8C@K2pteca3t_TcP<2f6k/5X(WG4M_g4]3*b4*U@43I4-G&/&NGR)\/6L3SkM*c>tL6iDbE]IhjF$,lheYjg#W/+PEt,O#rDA2G?G"ET-^GP&nmn_k#uk.p2YZM?(o2sYq>ZEg])5P/KqU3f6`EBDq_RCii,,a)OkYDClT1"Io2+*&"DG5!\ME*?\Sk)C,*_fA=A5L+sjC>+N4r^8j#Fk&3Vj@`:7Y(`NBC<7)7ja-.ZXAZUCX@S$B@inI2!j%pk?I'^2q&N&(>j0@L!t0[K`cEsCXreeO"i)r.qtK*@8sklEG3Dl09b4`lq6kfH>?NQsZoF7cS3R%q86Z-`T5d77^]VT/aH#1ub4O7"M^?)o(=cEA_hmeQ\O!q%Duf4UT$[9ttIYd1TfCN'F-Na5ncEY;PF,)h!&MfJ?8AALrF8/rdK('?M#C&LFO8~>endstream +endobj +34 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 3106 +>> +stream +Gau11bAu@[&Vg%-MQ+b<3KXls"h-NCl9a5?*LA"VS4tmQ2&$XSTEBdDU8LctJE^qXi^GK=/mG>_@&&)2S*;!s8J/gHg&=3C$ZRm7J"9+RQ'a.V1k?7F)f\"[8J,KQ)QO"TVFF3'lA&6eIOrX95UB8Y;BpfNbu.DCZ1r/MA>.4Vpn7MOM;X"pQA.laINAZLG_/_\.+"+(>,7i!<+loL(6Q^j9M)+H@QMAqWsF<5+GS'+j`5m)AR>Oo9+i+q9#kDLL2-?f6BMDM.jtdqGU#D+>+CMmq"E_EpuZl\]Df.(rCb@`F-QsX8=@C?#i#8G+Oa/"qsUAumPYDiUSYS\:'/u&ANF0^jn5s).dDBN]G'>]SZNukap.3]ruMVY`_dQi\1>c/r0Z:TrZskkmO,F>H6`,r$Rlra.,V-FYTfJ`1Nh309d'W?N)_hDWa_?:'lk%RKYcA*Yp8#bS,+]nWQp.isUCBq*,"X)DMC==sNnl]i4\DUI=LF9/l*7U5pOYKl']O@PMD5Ir;pIRYiU?7p#SY6:$mtnU'-(84q?Z5ZS"1smJIJ6fogi[U0IftrQ(Z)M#oV3&QMRY(TQU)tM7[Qc,Lg0+.j,>^2O;t%$5-oZJ^ItE\uRLi<9BDqC?jEoWkZILs]]Q!N#kis2[h8mj,V]VU-%X7L?c:b=ILR?fbdX<8C"fE27PjG/?sL>Y2Q\lF&+8Da)9#/Y\(/!r)L?.DTi;l.'bnW&S4SN`1F-5M&RpH;S2EP32SWkf=n/_!&aB)8-A8^,XE*VI\bklD'P0oV0@hAQiFQ7`VNaj)lQZ8kGYn6$gI*?)AaJW%hUMo0d#/U^hHR]OJ%&=.L[(@M5R&2"F`DeUS"sMAkN?Bmp6^kd3qej)lQL3g2aaK=p('`R`lfjqVBs_WtjEoWkZILs]R!USZej3ZfKAh7F>7h*'nc9,$eAb$>L1=LR'aG"j_af>ure>%k3lJu9HmcU?$"^+,OQ7B@nm%^m.]l]VWrl0]5*d40^]@L4ZqbnF."Iu$HD^.CueX0_OL[BbUK2SmE\:89&a?SL:NUTlRTj9=S6XGhKsubFP%o02Q:&aQ2"\Rejh9CcD'b##Q1ZcM7Ple&ThJiqf5^7?T6N31Be"$h0YU5$iiX/RkI,C>;U*I`c4>5Jr#R=+@MXK6U^XbK172@&>eM^Lf00))YGp/SLK@CC(*t:obCnWXElj4^LdJ+J3*XCk=qM6rljti$TJ1>8RfPVEnCPC4Kr2`h9RET4[TZki\E11mEg8j+HYQapGAd[Nj/qNM'=q;JG%1aVm'#L!H1#Ybg)o9Q)LPpd!`"t:c0@TiNo[.C#%`[hd*5N57Y=jXh0lITjNu3H^fF?:[1XUse_8ilDZh%a.XNn`p>Mg1_e('l]=tMZ*RZ>"o\nAG=fk^Y+g]QpFs/O%]/"S"p.,!XlA.l*0UQ\uql(T/'42id#V(BcC!6<#C)rCI=[:S`4qk9>0"UWU5^$i^[p*eW@bT>DNdb2SY/#=I`Ckm^H@/%Vp]m^OOt*h#;0.9:*H8`=C/6V'@5?GOS_VcSJL]>]Ltr^?Tm@^eNCpQ&n7ih6EWlZR4F>isSC3#>f2XMqX.Hfu);8KopmILYVGIF9f&#,;&BV6'RM/H/[HN;a(F3+;g~>endstream +endobj +35 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2472 +>> +stream +Gau0ED/\1M&cU'_0gK_DHG/)"qi^niVhu/?8TD$'!Z_&jQ<+^F'^8NFjdKQ6=d&Yk.B72))C%.#?I%:]1XAm05k0aAh\R5^b;m4abCFT"07c\=@=Afd%2?"Lsi(OTC9,*WcCEln]dd_H(V"=Z<'A2W/:'@+#dP#":M`='eX'BhBE64*LI@>&Zp@D9RN`8;s[P.S42ie08[MG!XUhHkT@SAFmCcW;fIs7(7js)n&*Y;#tck2-]3(Sel]9]t+Ic)E,d;59YAp,LddKek*P1Q1C5b$>P.[YL_`XF%H1[p*(o=nklt\?gr@H400kgQgT(NNUh3U6KTDm1pKBEjtBsgY7Iua!%hIm(M5lXL9'1%!Q!fF&IqM)u.Bq2*UNIFF.#s?XVL@_gQ/Jph8Do<:9?CSZf4t[7/&AD:LjFd80O+R&^8uTgh%$;R*Jb6fq?#8:d$VPT['S7JtD4W;'Vk?*-/@;2sAS,$#jAH%C:!5u1BXC+-)*JVJUYQS)Y2`]gS^)A#>4PemF5Mi:P30Hp0roM%hh5qrLY_Jb_a(PHRFb#==lcKu_PlaI@2Yuj6`G=i$?'O-u=FIl7qaoY449-)efPXqV]1\s4X'h,TrOsf$rkjDQ"WLNniq+MMk%22;M6R]p,Cbi.$_D/GqB=6B$mdrP\\q/ln2,1Mfjt3L[YHZ#(%--_\\U3\d36'm]CZ2k\4LR50H94kE03=Um-SKm_btu29RYZ:EO3;s7'V?M(KCKr'+EJ\oon>[u5B1/TH,'riXu/p&jQs`U;#p.m.dt"ErV3$@HNVLL&Nj11@F5LD"dTYZi/21%#(3@AfZ,A:Dm:#D5j0l_-cmA=(*r4ua-UmG=MF(`QN(616,Z&'TlF6q@DK[lW'#AHS5(!Id,@7M/oXeae*03FGi*7&#FBH:[4&2=kud$.'jF3$.'UiPOG]SMH0F;p$-b^%;SMb\P#FPLXmLi+s@eoU=7QuB*pdq0S$jWbge==Bt4,ffYC!Kl+X7l>[#=1I]Sgc#/Wde#b^pS'OE`jIRpYK-=T9^oZ'Kn!F,(63>%9u[O!gs(QZE$C`Y@CS'aQLbA&b;#uRVt`#G&=TYq$CJXg'"ggN7>Xfb'R;NGC-;bI'535Z&EJ]Q8G/7>b34]e6"h0,YrRbEVE1kcp!'G+%\/q.@Cc$5(L/>&WD%,5FOLiS`>kX:a.p]W.++@j-SLB=AKC;PBmH6SiOM0_:3_-"W8H5$k.34tuDi_BS:8GQhRheEBah']\\?%O*umCeoXD]R)XTrs[GLKBi!KOA]qK29Mdf)FuI(g-C&uf1;"nPUFjM:Uj1IEg0:;6p2TsBIs9)I0ul],[SqcChGKi8RR;aSe0Oqg,56X$eXY?nNofBKOu&lmQQSl3XmA1I$gp%2.Z^j$Am7g~>endstream +endobj +36 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 1902 +>> +stream +Gatm=N^E>[#Q8KqS*K\j5XJ/IZhmbqM[$76p%[,PPa15^$HC%*Dn^2JBi/^.S0LnW%+guu1kEl+gJ?k#^H@Q:FA+rI^;k?K/9&<4j]G;3L@Cm.3ikBW"_/i8O=R#Q>b_'?Zea:Mu(_?j4]$KFq6=6DN5rh/ujN;nV%/!hYmOtf`7Tge`AQqrDrmY]KA$V)j:3[^(OBB\Eh5D!c496,7dh'eT;jH^-8#Q20q%"Xgf_?<^GpiqT3LVu02>;rb:T3MTL-.k&_pUO#W3rOh32SY:hE#3%f%_F\BmSgVidX3(2.gm#[A[jp[1,qp=8K>VEA/;h3=_JtJ0%WC"A%2er1^`9i`pMcDPsaa+4C$g2+)RI%X('n54EKCu.6(J@+I8.DhCQm71^p,-gFupDW)h#dNB:b9qdYdY_#iHGAICu$]\r9!]fS3oSA!TFAfYY/8R+./hDgW/^3JHD]i)=mNEB1kB1rg6i*)GB%cFAUO9*n?%_qM)+;+jJca->60.U>TIM9gQLZZqpXN[6i*XMP-1Xb"u@WC!kXf?adBV=#Nq:WYL4!"mb55X`oDqoUX,@$BBG^m+Ta^l0)D7(j)t$fQt,]dIja8$/RqN3uD>\$p$b'58p&!G/bVAH9Z6\>;su3K^):$5k_FjYdo'!ZeQTRLAPQRJ1?k+s]*+@a%f-CGNLra6mh3aSL*;)TL#Vdn5W4ckVb-,3Q8R"mb-DC!u'%*':F^//so<486+.U,pJ*(pPBPH7nD()8%C,pNhiPcsA0Ojjs-HTT&7XE84*S`Y)"dq+VOJ3>g6_^L*:ZL?FTfCd%(Lr)NAqO>73KDh3Nll$_@G=4^PX3k=.]MXoN.\7QNVf6h0F\;Ka^rN[#ef0VjeIU7Q@7$?@J4+[R_=R=VhDU13Q^&X;Ui)P@N673*BelsJ0oE:T>?2oXK`emRp+uJQe#tannDiABj(&q&G*W(6ZQOm)42E/QMpO=T_IC5&>\55!mK`%h1P)1CZsUCo0iN#%#Ns`dJ).lN)"oS/E8*H9*PLbI43tZm0o`YAC1R:K=4F9"M^HY%g[@#t)@5Am)s]\Dr"2??]5L1N]M0J]5cF*QogGEOHJEa5$a2;)$_&J[@&Fu.(VTYKN8d"W'3lMcoR\r_\[VS];!Bp&q)H7[+S0R`,9*AYEdU8.i/qH'=,J$YOZ2g?\,RR?nV!Wa*8u,2pp^RA#Io\5T%iGWBJ^VslB;#M#>qd=@5fL>W.MP!MSRP]nFQ5&+=?VZsaeFCm=n('6g9rQUB[p&Q28M`!OsOBP@>TR+5+q~>endstream +endobj +37 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2011 +>> +stream +Gatm;flGh*'ReS7grD7Z:h&CLVqRH$GiC3U-')[oH(dVs@RNO8QalS;pOXTT`-.TF[E"18_7S[]K*r"eIae;j\cOiq_J_4;PehAB<"K)R9:.>%,`!,M.?FOZo,%`JPf=X;7W4fj;?#,-Hd+Na+3%9Y0Z%Kb[f6RpYn*)dJ(*l5/!V"h+o`$E`UV*os&n03Zr%#a^9f,(dTji.,]r&riZ-ZD.1S)5dShooI-!m?Y/I+_RD4U-pAUEn:5PCTRt=m%=qqISlW7G9>kK_94q[4It%*i+*1ADNi-.b;3I\p>`*ZE>L&BK!ATGjbSM4`V-3L-\602\$pV5m/;S]lOqVTQWkhU%\#<66bD39JLXJ:LJQ!M2qJhLGpY-bRSdGPo*f)[dYFGiknM_3'Z2HY)D\Mr=I0&G4rLq%2jT2"!]Cl8(5CmOBl1+AV!%Sfh,H:C,!2]H(h\A![;-qFS^]C>IeM!K"T_0ud^/SN"A+M\@]`-W,a9WhI0dXjCDWthb#(]$PkrR.q\\'/1.8>f=j0?=HC2gp(q1qYY17j*)eg0`,HZT#fe>[X,f2_R^(ubXd0^[V(l&7m:a]L^hk#Cb0+jl0Iee<9rBbqMTi$e\B!Selr2V1\Fb=UiN8OQ/oO'X$27ZPbP-g\'BC!l&ZXf>a:r/O,jS&<\SSNl0MS_G>(J5h<7X[>Pcd8UkSBZ;7GDEhl4`HZ!,J:grM+*[T;?]Te`au=-K<frnSdm64pFK"lc(p8UW+B+a&m\m.toj6pi*_fpWZ5h2Jl98.W/=VfQE#?m`DbodZ\73Mm7-)I8hFYg1VVpZ(<6&qWf"r(>)D>8Y9MZg%;$%_L+,P`kcXUs/%XE&DOURjStD*CRf,(:O8Oq]t15FlErLeR6YQRUo?g?n)cgDfTrf4o7U+!AHT[+a,Cok8T<14;3a9\0cDg_,9Qq1Q3]e(`FEUPB5Yb%5AVW6/>Kl-6_b;Q2\4QBkN=;Ko]TLQ3'.FQ-!?7fKX$!/os$Gt.5N(i!m<&/@!WI":*b00nj%0O"q^6Z;g,6*"-;(p%'Q#YoLPt2c^&,H2`_+$d=Pk$!fh_,IcIc4O*m(nC;hGB?cjkH#'0)0dh7!-[4&4bgmeLendstream +endobj +38 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2987 +>> +stream +Gau0EgN"7D&UihDi6cNi"LkqWDnaSUb-KU,Pdi344Ab+cRZJM8LSNDR?_>g*TE1IDXkh.RAQ(VmqM+FXknu&erp'"QHm?Rf9C]LC>%f-5QU3du`9!DS?;@kh^8st+iNm].44/PHFCAD4$YcW8'XcDqY'hnu7P(0,UfZ9:fLXb%JW7h(b)$WV'3U/rlun)iKsOh0b"/:4,rVK:?@&A&Cb77dXP=L$,%QOAb)d&d=H>YM\>mtT)-`!A%D8rq)KrD3cc?5AeWD,lL-!X&%).:_ZM"I))WQK?(64!E"'q1LK2FIcjfT.$485)e$>E]l]?,OnC,D.QRqW+G5uQMuPH0$@)9E7%]YeH11lkNWu9m"6Y%F=dr1Tpi%PSEbM[C]"6T10KD02F=/Z'p[4/?VASJmdCRPXM]IJAVq'U<`UbE`PRtF>N0[L@CZkorKQGA\MOa<0aLuEpDNeod1EnTHpehmD9jWKP+/9PS-"Ku1D$__Tm=NdfZ(HDOZE,UOA)d-j,Um-kt-9D%WIIdAF:.m2kA:le;s1ojH$c]M(K2N:jm+0bBZ/V5Zr=9KA\Ul3h/cEGaLpB3Jld80gccN;@30@ph(]1W^N`1t0ITSCti]f^;V^\%[Q@]mm7Vh;njP">=aiLYcKT>9oM6K9m0+!9"3rmg6MOgXGEWS+E7)Vs!g&'UDdan;aZ3haLJ&Q(rdE=;pK9lMoQ0=)GDHF_J?2nT)7pgiVrQjX=='jPod4lgV:b6i!k?bgo0Q`+i#RAB1ar_-q5NIO.2P>B)RuZFq-iDF%?Q#Do\+d6PQ(&lDb"3EkMqU&aHLPca1BFUi,SOU).(LPSbr+W-*G4A095_"oho_00E)_P3u%=1EodAYiCl:=9f=3!<_/LIbNhLS_>tLTu..M9n(G'L#L"Ya.>%JW!N&ogNqQ"ZJ0-WWrWX[ap3Q)f'5*7:1>i>$#0Zfsd^6&=-d)-p32@@U\N>QLRK[Y#Ok0h?cLW8gLer%@%n5l>./mUj#3<`?O(e.;N$V3=4_.,?:+oB*Qsbrmle/HnI\L8,=+"g'bUs?A%P?q+N$oHAKiuZ3,76fkLr'u>)AXWVTfa8k:j7_W0Codp@?di-3lX5$C5Jp_9Hsne+,!I;*`3cq7MNkjLr']6)D!s;7LQL6Ke:P='_Wm]B9s-=20P=A8\r`/`da'V$R,cbbt2W:"SRG+VFI.2MosE!UsW@/<>!udOYJ7JPC)4&o$TlO@hgV,V(/)_,p_aX995J5a@ugS=HWht%puS*7R.EWI?S0]3P8(IS0kl*a-?l$U.<=ZGmp?3kVI/>uGNhuYKNPD#j>b%@VTDjX;:e.tJ=9$SrIha$7FH&7q]9]tF]:3[q1jA6Z:#E=i.kGf+#bmqsDt(#]ps=h,?AAF:)*>+5l0$[Xot#"E`=C.2oP=Rjrt)6PlCMqeXRQ&R:K9*sK2a3187`m:XQgHU(+)]:iar'ke[(fLeapK#(ioeFSfq>qN+HRmYilQiB9*R5Puu#CNt^s]#/LgG.S37j)sBAk.;P_69u+cth<-Lce6459j:EW-6OI9'DBiEi^(E)4_gJTH>27c/f0VHN\/Q.g#KH/(fGSWA<7Sh=M!&R6rfN_D6qfR1[Pu6A1_\Zp0EbZ*G_N,&4-S>8&`O2J96@nHOB#"\NJU2S7n\Ached_uHqrJ[>HFpfF2[qJ@tEUf66H?(L6)84^Hb@VSpnS?V2L;aC7ki$5:iu]=iO)B>[6Nt`#N)8tn?aq("_@Poh%JBrg3FtU>FHN"g`9QlJFbY00V^O8-NNs#a>^8igc<`X9)>.Ag;%JDK5d9I*6j#40_1lRO,IoT;B8=6]&eg>K^a3mc(btI#$^=",D^6qfB^\i6qCt5"rQBf!T0=?#+,L^U0:L]NlP;k:Y!pFh*nTRqgM`lIh2%-:eMD2PgcB*("?4niendstream +endobj +39 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2154 +>> +stream +GatU4gN"5l&q-CUkXR!>_73kM-JOL2AQa"D-?6'V6;o+kX5VFKMk0Omn%isnJOI[Y_GZ6O*!2,6So.@9a.MR%k:<:i;gS;8+YS7#SO9@FW7;ZGb;R#cCo(;UB)_EFI;`VJserA'rA5+.GfIRhled.I4\ic%^.LKJKT@@jMB+$<6f_`8@m-m"H6%se-ZkAnu$oOVBJ[_!XFr:We>mc\E:cK5L8*;SLW8?=\=BcN)ii+qJ%-bJ^=3I&8lJ(uD[Te3to;JWin3``dn7:EGM/Uu4DR45L](F4mpgYKP>>e3b.@iA&o\7O(a=dFu7Za1<#\di*aFQ%2B8R:PSD,l6ZkK9]S.Q*SRT_\:J*AU&-EOh0Q(>.qHEoR(r6:f8qg3_5]b2(4]RG"bhA^b'I0G`!H`R\'\ei,Bjqb]=#bJ?TTo"<>V8eeiuI+7SJlDuqS%!E(k_DGC?%-*5su33KTo!7Wa&_h_1[?bMcSAjG3Bb^X>bEKIPDjKdSl>*9M'R)SmM@NSW:]ThO_Jpi+C7ZqYKd?=?1Xj*ke/*rcp_,hD;"1))M\+'B-3M67(jeiq;E6B;D5Oa$4[aMsV4sMi*QVIUV8HYi"ki1$LgGqjW#Z_uV1W3R;N>U?iSAZX/&b\$dpfqa?nCI"d<%m!qH<]jPT\"[rgQm<4D3VKpG.Yp0bosIhilK/`E-L4+7I$>KRjpV!*.C)u_ibZW5alb(sT.]S3ha8d!Pul@>DD8L>7YXnh69ri>!J9o?H5tK^6jd%3*Q!^4_7L5_HD+m#2W^*Fhfp-$tgEAFYeS;A:4eRhT96"=hG;/\l0,e2N'.pB*0`#O7[-et6[-DS[0,)8h4i*C9$j'I-@H65>CjG8Ibl%TrA:5f(B<9\9n"U_c!qQO$,Zpi%U@#qP!`$t^^Fim&h*ip+McOK:f9k(BZ?66%9beqX;G_NBK^aIq*=hZO?(%($!Fkl/`2+sU#]-S56DJ@2o>ElVTFL,"Z&EG`](Z;Gk/eoH*S1Sf&HGqcB19Q;Ga(+b8`5?aQGEc'OfX[P1$DG$9_h\+D^+N^?U??Se(WAn;sC*j'$!\.3E1Gc4d1ZE@5#g,EH&Dk7=j`+99"M_l7(!#uR*F2Fd?C['`rp?t53!*q%3F[a#@PF>1"=.p[;q@-KZY$piB"Rns?7]^S/R9nleR+kAZcpLId`B=>H?]@QLYl5;O0Tk!>5J?N-$JQ1OcIhbrj]"1+#')]_/ZT%KD@el#GUJf`0]f_ArA;;%'tAkU2*Jdj8&\Qpo'>.+NQ9LR/#Z_YO+#,h['GsKm9Ws%qJ:-:B~>endstream +endobj +40 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2492 +>> +stream +Gat%$gNM=0(4G@Ii%`Kp-ugC152)$/S5m,K6u'>Gf"<[lD/i6H*`9(%q>0MH&Jp:)R`6k@]a:5+3S:!43I\p9\_8`\[:J1p>qdGTnt$042-\AZCmbUL9B1u(IIL!*JA?CB"JH6i,26#)YGE_uArQb$Vks5^_:^2G'-G5L(`lQ&ccr@aWG1e#\I<$EE/r,($C^ZEGN%LkKlq?%%'oF41E=$?Fc2f2JXeD4ETDO.d'n#mN8p8)XJp@JXK0@d5)\p`BXJc4'+l^QeaF*GY_c(<_l]rcI=Fa(+Gij7h7I8dJQ]'5iU\uf,m@--SJjgjjSXDYWHC:/N2mOHrG@qF3ahX*6BSuo&:O-&_\@UJL6'R&*X?/;?^q1p,a>:MSAO&(H2(rJYiQPFI\W&uX>No6.7]V]lgi$o0h$L_N.7fNbX\(,-u;:H1(bnsGZS//7J6#WK'MZG[Dp5QFj4c@A3Di22_F'_Cc^8&Q@NaoW=eD,\Zj1CB0a:Em3heesnj"_K0e$E]"/V)DEIDs1)s%rEeNh1cY6TE3Gi)lDT&)DE\P->[?oMqjt:\N@0t^`U*IOu:nt=[nGhb]H/%lReaORd>YXlb*-NZ0QcPnU,H9NSe:j9.`\qi.IUp98.A+jF<%9"B8:8@D0bhdG30M,]4iYr)')PqIl-SPn]?X+78Y:Hr\VA.PId*VtrN-IDMqf.Td`;:&J4,=)Yhl['MV'@\sTYa*CE7,]<)cV(2f:Ck9BcFg4,""?taK;1kcT'oN#Z;FF!&fGCe4JK[gA,i_YmH%bg8X5YTbO`]mGT>p56DhOJq43A!)S7'Et*BZ4!>6iU^lTu\<"?m[e4UnI_M5:&;+70H'`M=_SK;?ASlLP;Ko2`h1Fs?2#^H[_2fbk?1k(M&J)?saP20/%IdBRFt_:gg:YE\J4uNM*[#1V)MrQA&ZRihdl0#TC&Z9-):1!p>Z!Hsn?p4eAes[gu,O?4)W/Ri!*<&l#?F\.Kj"6#)Lagks$fO5Mk?l,4SP7DC.-K*f'qNPj^Q%kp+?nV1r8_cED_h?S6![g%EVO58PaV0!0dj3Y,X&SVs]AcDZ/%4b3o4:!0:WiXP"-%9OZaMflFSip>j2rr&g&mH_C9\Sr7PlS4D%(NqVPE0IN$D%:\oPS5[N+qYl05Dk85Qo/0o*nq%RPFHm-]sueaqpi9hhnLDQar[1!?bf%ph.)B$a;kk(d*lb0jhQJKhj[?jZ7j/\DlW6.II80QmF/f&^;aC'k,um4JHD`Kd6WEB1hmm[H>'sA[@+hX,.10"JLQ30KUlLqb$lnI#`;K0o<#;Ieg;5g0Q'mtdn@/0+^Eu.[)!uf`)_r,).jO7B&H2\$i(.X,80C4@Vq!^*_#>MlY4"$o(nW8,H1nk,e$Z<")<\4mF_tPf"2B+,jg3Tm'+Z@->mD)fd;!_;iXLN4-_giZ:@,0>W>5f:Yqd!D2QlK!d&i.l0`j?;KTMH!HjKno5Qo/kVL&mMk_Qp=5e_]@ZB)s8.5p*fW%*BLlC=0LSfEaaI(&I7Z:5mumd0pW3Dh>G8:n"J[Uo35iV^,*'g60NeL>ga<1>mumbZ\&'7K,2Rk24rFc'mZZ%h;0__X&h2_$?^lCt(HO;e_If0T84?Dr1oj6C.1%>kL-XHpP2RSd@\b5JPm9k=L.e_KL8#Y2-0\X>+B^-$3eh)Nq?+$\Fp8@r$::#OG4Sh'>X<[(]Eu^($^N+q0=V[k#EPdf)?]p&Mn#Nr#;T_M&.-[]2rhNLI!@SmGQB..dM1qh15UgS<9%2rUs"L:9',"oTDc-eh-S>iV7lQuXmi-GI2lWUqR&:,/F(U%p0cqY__8=u:\b$`@fGCpIRt??9nFODM'3E/FJMX,U070pO*/g8~>endstream +endobj +41 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 3057 +>> +stream +GatU5>B:J")1A,ad>rrGVsbGmKFKIbbUs]eWiatk72d>g,M>/AQY_,!cI^Oodul:*!=J0Rl9=+%^KZaE'DO*,s76\0B34GqMI$gp!hPp@>6B_?Zh^ir]6rcaYf0HH5m.br0FId;n?NA&1\W64Br6g%'.#Mp(HhIWTNTJk4X]Z3m.q(Qp0Wa20aU7@d7jp[/2<,k[N)i@l8I=T4ZRLUSHc^uiNa6L0Pl@^kSd2POEWRoI,:V8Dp>WtScJP/*]_M9iioT:F^TabgZ)bpejuB:H0ePEu(PIh6Uc9Y)8ICX=.L=IoX!Hobc#2G4lu'FCDeAs^jcu4jRsS,[$>psp7tQeIaKG,;T4#=9nOO2go@sfo(haKF!GA@q-WIV.Y[@7G(0^V_KYQp+g\l$l%d;L2kB>&Jo;,a!G.h2,k,Xer]'6gE_6\%"hS"0!2#m@8Ve]&6_DSPVfH7WpdF8%Lobcl#:*NQWdlI#N"ICkkPn(0MQ"LCn1IQcF,qWC$@Ea_=3#2uJmYm<^bJ/!HlGMJA=QunKqDZ\ZMb%^:.R\1-ej<78(R!<_i!HHm4CF[7Q*i1c2hA"2R^nha&Qq#:+K6W+lRG3S>N="OgiX7H4Zn,>2Geo[:`_Di,>XfOr6sYnK^q;*u;7*C.d@A'[9YTtpH*_7IV8%LmYQp(+N6$K!4?#U<.H4o2/LC4S>3DscceX'$<jBiM4W=r4%\e)np5S;PT0XUZB9\;?k'n%>jA5bc/@mCjeRp8c(jE;BEQ3Ja.'Uo%VZ'4aB9"c@=@9faA)L?%rqCD!l2_hiAoqMH?3K,"Y30(FJY5%Zn1$*F8f2;I%9\LQ#MfSBLU9D#*4+JU$be$.9MVMP9)9$'mptb_8ihK-6!KN&J.dkTZLYmV(8Ie=Tl<\k1lBdtFR?i%+@r#QnLN!'r%^"W8$L+Ss.'sXu?,_FFMk[)3Q4_hPF=O>KhM(4@[VpKYFH4il6\@)8<'aeU!K+bI1)Q73-rU82-`0R.cd4nL/CX-R'bX)\aAJ$MLisLAOV6%U.isVeU>@lOap@AbqNP!Tb(]'#XD`FNF:G1^Kf5lhQW(V:%^@1H,"7'WOrJG]9m%YE]F9oa$k:ae&28oE>;=[LR$SKKE]-WcA#rGrVMLhN.]\Hh,L\gQP2F\QpTT:1V@Cc8h>g$mjAo/O(ajSf9Xe`/7shbYq"0_Tr64$E&:40Ds#e4qOt_Lnjhg8mB%G5q]%Of'Yk-E3AljoeY3X1T$3q<.;q:Po,_b4&oglo1OjgQ&QkI_u3,F,Ce+)BmTEJklO9S8@5=u-K%R#97=Y(E^+([,d8ed&4%AT!4W51rr6m;ShZII\OSkBVN6o;5\ItmsR,QJgPtfT7C1+WYR%ZEt`L.54NEFe7X:lf!$+$i;Pm`bR]dO"uKm<$\V0Z#nMl*SK&91F3Vk%Kp,1??%mU;WZ17c"bF)f(T*onhLWkp<]8U(RHA3E,^'b[KMV$9mQCM9A\M5t#biYLOQ^Lq_*;%+]*84O[-17rY?(u1l<=^5B=;q,MCYtrH>"1Uh%kh9%hBMi1k!E0i=Weqls`E-PfC%j$mB#cg9lh9<'lpQT<6NF]]AFig5=mu(_T+A[;.R]`FAX(pH#"T8mO%)4\Fu.@EpYGlr1#j4Go^Z^QHWZI/EAQqTXPN=!IQq%T2u)bHgT>)d/c2j1Ze9N1@c`0iOeA.@Nip\#s(lj)>fJ0TtA<.*o*>:;s<>ZJOY'5GuMH#e&8s3LWQ,(Y*:`;^4*mDbW0ZWLJ,!T]XZm,[_+tKt!0M$saSn-nPlmQ&%'j:!fim<]-\.iMpT\Ln0E]S(b!5fBh[h3Y>(jb"PVZ\%^8a.oubQ)A4fj[BISd-.?,6JS'.W#HH0iqnE;-@TfY/k?iMBb4RXlk6OrO?hSoO'P@q86BRH"nQZI=lM84+LT&e$WVP=$M#Yhp&>@.,ZATuWXR!=3`FM$`&eZAcu:jSPEDKkK&]gG`RZeZPej24Z*:LCU2rdk@'rgbY*.b:r\rasjOG2jP@dTV*&/pH]36$fh$DL2#Z^KK?gDZ\Pqm:ZOcMt?P2bOE'"d\QLhKK:`olZ/2>mQRNGnFbSL7#!EVE#n3?QmOKSi-NOWqsJ1~>endstream +endobj +42 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2215 +>> +stream +Gatn'bAuW$(5DR0MR1MP2F?2UACYR)Wb^BqSleQBg!C?_X%e]tP+#/Cl/r9t!gqW.C8kI@ZKtr6\I]hn%`#'Z%j-9S2FM2!qXK^^(GrlSY*bsZ2-nF=S2.K**XlKmMsX*81mo]rDr]",Jf\@VG?bs0\TqiEYpMKJ-:Wb,l\6Hr^M\Ep[pT$KDbd77[WfH\Q%-BKrG#`.kC:fa=>r_/d2*G=KWi-B["?d[,)(gme)R1Fn;37Pf:G0,h4pl0"El`NA)$WkK[pPZoYi`uSQCGNqrWRomA"TGg,;V#XmPCgjVt5b.20;a%oot.omgc4'&T6XZX,a&j-[FF4X'c:?a%'+ILSqqVZ4NZhlgoR6e6hs6`+frWNr-GG3&[NC:dpA])Yn7%`"KWJ$46?2.]3\E_=dbh5o8I$*0;M7Zrqr.@\>,%NqKom5lauP1XCGRmk:O-A8Y,`CLN-i#ou#,J(cGK"G3`T+F?]=ArT_,2c?kXUT7#d-7.hedS_]E6SFTa&0-NIW'K!*K7cFb%SS=0t7Z,*;DmlCOu1NFV74/-Ri\MMrBTU:=^Z:;f]9dn&&d'oYaS9H#dn&1qJ9hH`U0[#PmPAAh#$H`h5:,=Nn'->G:)aj>t,%O4GHCdJd7ra_sI3]6S-1*0mc+cWf<"",4;g0&D(;79CJA90X2XAc'!n@,ScR>uipe@H^G;IeJh2qL)/I'=F(GhU%2)%Kf1.^(K@b_N@'l]Im9.Z4S[i5t)NE0PV1E_c*>F'e"%9M/&P*#0Wa/7lu\?&hNS1?Ya`:asbmg+l00;K>_`/I"BVHBI!6W5.odok7A;#S-TIft@MhIeS&af@@<44T'jnK9aJKqLn#+>n(!XQZ+3b7V"FEh7=)%b?/IT8ch!(e^?\Bi(Sdl?TgR,n5'[m$FnFsogfHc\p?L(g9DSJ_JP2@XeI;/<6pXf[M#"(FD6N8`OLCkMNd(WAL(s;i0''je@>e@#49?>*%,(T$6?RL>l[`(Uc>+R90=nm8b(poRa..G!/k"0@\@kl;EB0b.H;4?C,((&NOPM:E)UJnnBu&&qu4Sl?5rGI6#:j/#2`MT!hJW7Qh:9NC3s^.?hUitnm]2;>C=\^)Op2O4uQ1nD$WXc4';L6=$\88/5$U%PN2W__6gi/6FXQZ'q&d)r>5IhqM"~>endstream +endobj +xref +0 43 +0000000000 65535 f +0000000061 00000 n +0000000131 00000 n +0000000238 00000 n +0000000443 00000 n +0000000648 00000 n +0000157491 00000 n +0000157759 00000 n +0000157964 00000 n +0000158169 00000 n +0000158374 00000 n +0000158580 00000 n +0000158786 00000 n +0000158992 00000 n +0000159198 00000 n +0000159404 00000 n +0000159610 00000 n +0000160379 00000 n +0000174476 00000 n +0000174703 00000 n +0000175435 00000 n +0000176207 00000 n +0000184299 00000 n +0000184531 00000 n +0000185208 00000 n +0000185986 00000 n +0000194363 00000 n +0000194588 00000 n +0000195270 00000 n +0000195340 00000 n +0000195657 00000 n +0000195793 00000 n +0000209590 00000 n +0000212146 00000 n +0000213967 00000 n +0000217165 00000 n +0000219729 00000 n +0000221723 00000 n +0000223826 00000 n +0000226905 00000 n +0000229151 00000 n +0000231735 00000 n +0000234884 00000 n +trailer +<< +/ID +[] +% ReportLab generated PDF document -- digest (opensource) + +/Info 29 0 R +/Root 28 0 R +/Size 43 +>> +startxref +237191 +%%EOF diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/FONT-LICENSE-NOTES.md b/chatgpt versuch/Chrystal_Math_CI_Package/FONT-LICENSE-NOTES.md new file mode 100644 index 0000000..cc2f445 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/FONT-LICENSE-NOTES.md @@ -0,0 +1,30 @@ +# Schrift- und Lizenzhinweise + +## Empfohlene Schriften + +### GFS Didot +- Rolle: Display, große Headlines, Editorial, Kampagnenzeilen +- Lizenz: SIL Open Font License 1.1 +- Offizielle Bezugsquelle: Google Fonts, Schriftfamilie „GFS Didot“ +- Besonderheit: Der Name „GFS Didot“ ist als Reserved Font Name genannt. Bei modifizierten Fontdateien gelten die OFL-Bedingungen zur Benennung. + +### Dosis +- Rolle: Fließtext, Navigation, Buttons, Daten, Labels +- Gewichte: 400, 500, 600; 700 nur sehr sparsam +- Lizenz: SIL Open Font License 1.1 +- Offizielle Bezugsquelle: Google Fonts, Schriftfamilie „Dosis“ + +## Was OFL 1.1 praktisch bedeutet +- Die Fonts dürfen kostenlos genutzt, eingebettet, kopiert und weitergegeben werden, solange die Lizenzbedingungen eingehalten werden. +- Dokumente und Grafiken, die mit den Fonts gestaltet wurden, müssen nicht selbst unter die OFL gestellt werden. +- Die Fontdatei darf nicht allein als Produkt verkauft werden. +- Bei Weitergabe der Fontdateien muss die Lizenzinformation erhalten bleiben. +- Bei modifizierten Fontdateien sind Reserved Font Names zu beachten. + +## Web-Empfehlung +Für eine Produktionswebsite die benötigten WOFF2-Dateien aus der offiziellen Quelle herunterladen, selbst hosten und die jeweilige OFL.txt im Fontordner behalten. Das Paket enthält absichtlich keine Fontdateien. + +## Technischer Hinweis zu den PDFs +GFS Didot und Dosis sind in den erzeugten PDFs eingebettet. Die SVG-, DOCX- und Webdateien referenzieren die beiden Familien direkt. Für die Bearbeitung von SVG und DOCX sollten die Schriften aus der offiziellen Quelle lokal installiert werden. + +Dies ist eine praxisnahe Übersicht, keine Rechtsberatung. diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/README.md b/chatgpt versuch/Chrystal_Math_CI_Package/README.md new file mode 100644 index 0000000..cf6b5a2 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/README.md @@ -0,0 +1,29 @@ +# Chrystal Math CI Package + +Dieses Paket übersetzt die visuelle Richtung des hochgeladenen Brandboards in ein nutzbares, nachhaltiges Designsystem. + +## Kernentscheidung + +Der tiefschwarze Hintergrund wurde durch **Cosmic Aubergine #140B24** ersetzt. Der Ton wirkt weiterhin bühnenhaft und dunkel, ist aber wärmer, eigenständiger und stärker mit Magenta/Violett/Cyan verbunden. + +## Dateien + +- `Chrystal_Math_CI_Design_Guide.pdf` - visuelles Design- und Anwendungshandbuch +- `Chrystal_Math_CI_Design_Guide.docx` - editierbare Textfassung +- `web/index.html` - zwei responsive Webbeispiele +- `web/styles.css` - Tokens, Typografie und Komponenten +- `web/fonts-self-hosted-template.css` - Vorlage für lokales Font-Hosting +- `print/Chrystal_Math_A4_Poster.pdf` und `.svg` - dunkles Poster, 3 mm Beschnitt +- `print/Chrystal_Math_A6_Card.pdf` und `.svg` - helle Karte, 3 mm Beschnitt +- `FONT-LICENSE-NOTES.md` - Lizenz- und Font-Hinweise + +## Schnellstart Web + +`web/index.html` im Browser öffnen. Für Produktion die Google-Fonts-Importzeile durch die Self-Hosting-Vorlage ersetzen und die offiziell heruntergeladenen WOFF2-Dateien ablegen. + +## Schriften + +- Display: **GFS Didot** +- Text/UI: **Dosis** + +Beide werden unter der SIL Open Font License 1.1 angeboten. Fontdateien sind nicht Bestandteil dieses Pakets. diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/assets/palette_overview.png b/chatgpt versuch/Chrystal_Math_CI_Package/assets/palette_overview.png new file mode 100644 index 0000000..3920fa3 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package/assets/palette_overview.png differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/assets/visual_reference.jpg b/chatgpt versuch/Chrystal_Math_CI_Package/assets/visual_reference.jpg new file mode 100644 index 0000000..bb8e103 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package/assets/visual_reference.jpg differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.pdf b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.pdf new file mode 100644 index 0000000..41d43e2 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.pdf differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.svg b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.svg new file mode 100644 index 0000000..8e540c8 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A4_Poster.svg @@ -0,0 +1,17 @@ + + + + + +Chrystal +Math +CALCULATED CHAOS. + +LIVE IN KÖLN +Smart. Sharp. +Unexpected. +27. September · Doors 19:00 · Show 20:00 +TICKETS & INFOS + + + \ No newline at end of file diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.pdf b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.pdf new file mode 100644 index 0000000..c54ecd8 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.pdf differ diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.svg b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.svg new file mode 100644 index 0000000..30462cb --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/print/Chrystal_Math_A6_Card.svg @@ -0,0 +1,13 @@ + + + +CHRYSTAL MATH +Let’s make +chemistry. +Smart entertainment, sharp wit +and a little calculated chaos. + + +CHRYSTALMATH.DE + + \ No newline at end of file diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/web/design-tokens.css b/chatgpt versuch/Chrystal_Math_CI_Package/web/design-tokens.css new file mode 100644 index 0000000..509436c --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/web/design-tokens.css @@ -0,0 +1,13 @@ + --cm-cosmic-aubergine: #140B24; + --cm-nebula-surface: #21143A; + --cm-raised-surface: #2A1A44; + --cm-starlight: #FFF7FB; + --cm-stage-white: #F8F4FA; + --cm-muted-lavender: #CFC5D8; + --cm-ink-plum: #24172E; + --cm-spectral-magenta: #F740A7; + --cm-electric-cyan: #08D4F3; + --cm-calculated-violet: #A146EE; + --cm-vector-blue: #568DF9; + --cm-acid-lime: #B7D92A; + --cm-soft-gold: #D6C65B; \ No newline at end of file diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/web/fonts-self-hosted-template.css b/chatgpt versuch/Chrystal_Math_CI_Package/web/fonts-self-hosted-template.css new file mode 100644 index 0000000..1a6b430 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/web/fonts-self-hosted-template.css @@ -0,0 +1,16 @@ +/* Self-hosted font template. Place legally downloaded WOFF2 files in web/fonts/. + Keep each font's OFL.txt alongside the files. */ +@font-face { + font-family: "GFS Didot"; + src: url("fonts/gfs-didot-regular.woff2") format("woff2"); + font-style: normal; + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: "Dosis"; + src: url("fonts/dosis-variable.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 800; + font-display: swap; +} diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/web/index.html b/chatgpt versuch/Chrystal_Math_CI_Package/web/index.html new file mode 100644 index 0000000..545e5b7 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/web/index.html @@ -0,0 +1,46 @@ + + + + + + Chrystal Math - Calculated Chaos + + + + +

+
+
+ + +
+
+ +
+
+
+

Beispiel 02 · Eventkarte

Calculated Chaos Live

+

Eine einfache, wiederverwendbare Komponente für Shows, Workshops, Veröffentlichungen oder Social-Media-Teaser.

+
+
+
27SEPTEMBER
+

Chrystal Math in Köln

Doors 19:00 · Show 20:00 · Ort folgt

+ Details ansehen +
+
+
+
+ +
GFS Didot + Dosis · Cosmic Aubergine statt Schwarz
+ + diff --git a/chatgpt versuch/Chrystal_Math_CI_Package/web/styles.css b/chatgpt versuch/Chrystal_Math_CI_Package/web/styles.css new file mode 100644 index 0000000..2420701 --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_CI_Package/web/styles.css @@ -0,0 +1,86 @@ +/* Chrystal Math Design Tokens and Components + Fonts: GFS Didot + Dosis (SIL OFL 1.1) + For production in Germany, self-host WOFF2 files where practical. */ + +@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&family=GFS+Didot&display=swap"); + +:root { + --cm-bg: #140B24; + --cm-bg-2: #21143A; + --cm-bg-3: #2A1A44; + --cm-light: #FFF7FB; + --cm-text-on-dark: #F8F4FA; + --cm-muted-on-dark: #CFC5D8; + --cm-ink: #24172E; + --cm-muted-ink: #62516D; + --cm-magenta: #F740A7; + --cm-cyan: #08D4F3; + --cm-violet: #A146EE; + --cm-blue: #568DF9; + --cm-lime: #B7D92A; + --cm-gold: #D6C65B; + --cm-display: "GFS Didot", Didot, "Bodoni MT", serif; + --cm-body: "Dosis", "Arial Narrow", sans-serif; + --cm-radius-sm: .75rem; + --cm-radius-md: 1.25rem; + --cm-radius-lg: 2rem; + --cm-shadow: 0 1.5rem 4rem rgba(9, 2, 18, .32); + --cm-content: 75rem; +} + +* { box-sizing: border-box; } +html { color-scheme: dark; scroll-behavior: smooth; } +body { margin: 0; font-family: var(--cm-body); font-size: 1.125rem; line-height: 1.55; background: var(--cm-bg); color: var(--cm-text-on-dark); } +a { color: var(--cm-cyan); text-decoration-thickness: .08em; text-underline-offset: .18em; } +a:hover { color: var(--cm-light); } +.container { width: min(calc(100% - 2rem), var(--cm-content)); margin-inline: auto; } +.eyebrow { color: var(--cm-magenta); font-size: .83rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } +h1, h2 { font-family: var(--cm-display); font-weight: 400; line-height: .96; margin: 0; text-wrap: balance; } +h1 { font-size: clamp(3.7rem, 10vw, 7.8rem); } +h2 { font-size: clamp(2.7rem, 6vw, 5rem); } +h3 { font-size: 1.45rem; line-height: 1.15; margin: 0; } +.gradient-text { background: linear-gradient(110deg, var(--cm-magenta), #f5d9ff 43%, var(--cm-violet) 65%, var(--cm-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } + +.hero { min-height: 92vh; display: grid; align-items: center; position: relative; overflow: hidden; isolation: isolate; padding-block: 5rem; background: radial-gradient(circle at 15% 20%, rgba(247,64,167,.18), transparent 32%), radial-gradient(circle at 87% 14%, rgba(8,212,243,.15), transparent 31%), var(--cm-bg); } +.hero::after { content: ""; position: absolute; inset: 10% -8% auto auto; width: 28rem; aspect-ratio: 1; border: 1px dashed rgba(183,217,42,.38); border-radius: 50%; z-index: -1; } +.hero__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: center; } +.hero p { max-width: 42rem; color: var(--cm-muted-on-dark); font-size: clamp(1.1rem, 2.3vw, 1.4rem); } +.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } +.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; } +.button:hover { transform: translateY(-2px); } +.button--primary { background: var(--cm-magenta); color: var(--cm-bg); } +.button--secondary { border-color: var(--cm-cyan); color: var(--cm-cyan); } +.button--secondary:hover { background: var(--cm-cyan); color: var(--cm-bg); } + +.orbit-card { position: relative; min-height: 24rem; border-radius: var(--cm-radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--cm-shadow); } +.orbit-card::before, .orbit-card::after { content: ""; position: absolute; border-radius: 50%; } +.orbit-card::before { width: 12rem; aspect-ratio: 1; border: 2px solid var(--cm-violet); left: 14%; top: 18%; } +.orbit-card::after { width: 1rem; aspect-ratio: 1; background: var(--cm-lime); box-shadow: 0 0 1.8rem .4rem rgba(183,217,42,.55); right: 18%; top: 24%; } +.node { position: absolute; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--cm-bg); border: 3px solid var(--cm-cyan); } +.node:nth-child(1) { left: 18%; top: 65%; } .node:nth-child(2) { left: 52%; top: 49%; border-color: var(--cm-magenta); } .node:nth-child(3) { right: 12%; bottom: 18%; border-color: var(--cm-lime); } +.node-line { position: absolute; height: 2px; background: linear-gradient(90deg, var(--cm-cyan), var(--cm-violet), var(--cm-lime)); width: 63%; left: 21%; top: 59%; transform: rotate(-9deg); transform-origin: left; } + +.events { background: var(--cm-light); color: var(--cm-ink); padding-block: 6rem; } +.events .eyebrow { color: var(--cm-violet); } +.events__header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; } +.events__header p { color: var(--cm-muted-ink); margin: 0; } +.event-card { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem; background: #fff; border: 1px solid #eadfea; border-radius: var(--cm-radius-md); box-shadow: 0 1.2rem 3rem rgba(36,23,46,.08); } +.event-date { min-height: 8rem; display: grid; place-content: center; text-align: center; border-radius: 1rem; background: var(--cm-magenta); color: var(--cm-light); } +.event-date strong { font-family: var(--cm-display); font-size: 3.6rem; line-height: .8; font-weight: 400; } +.event-date span { margin-top: .55rem; font-weight: 700; font-size: .75rem; letter-spacing: .13em; } +.event-card h3 { font-family: var(--cm-display); font-size: 2rem; font-weight: 400; } +.event-card p { margin: .45rem 0 0; color: var(--cm-muted-ink); } +.event-card .button { color: var(--cm-ink); border-color: var(--cm-ink); } + +.swatches { display: flex; height: .55rem; } .swatches span { flex: 1; } +footer { padding: 2rem; background: var(--cm-bg); color: var(--cm-muted-on-dark); font-size: .9rem; text-align: center; } + +@media (max-width: 760px) { + .hero__grid, .events__header { grid-template-columns: 1fr; } + .orbit-card { min-height: 18rem; } + .event-card { grid-template-columns: 6.5rem 1fr; } + .event-card > .button { grid-column: 1 / -1; } + .event-date { min-height: 6.5rem; } +} + +@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } diff --git a/chatgpt versuch/Chrystal_Math_Rechnungsvorlage_Light_Dark.xlsx b/chatgpt versuch/Chrystal_Math_Rechnungsvorlage_Light_Dark.xlsx new file mode 100644 index 0000000..d28d730 Binary files /dev/null and b/chatgpt versuch/Chrystal_Math_Rechnungsvorlage_Light_Dark.xlsx differ diff --git a/chatgpt versuch/Chrystal_Math_Web_Quick_Guide.md b/chatgpt versuch/Chrystal_Math_Web_Quick_Guide.md new file mode 100644 index 0000000..2f4b4ae --- /dev/null +++ b/chatgpt versuch/Chrystal_Math_Web_Quick_Guide.md @@ -0,0 +1,340 @@ +# Chrystal Math – Web Quick Guide + +Kompakte Anleitung für neue Seiten und Komponenten auf Basis von `styles.css`. + +## 1. Grundaufbau + +```html + +``` + +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 + +``` + +Für Light Mode: + +```html + +``` + +Der übrige Aufbau bleibt identisch: + +```html +
+
+

Chrystal Math · Members

+

Welcome back.

+

Melde dich an, um deinen Bereich zu öffnen.

+ +
+
+ + +
+ +
+ + +
+ +
+ + Passwort vergessen? +
+ + +
+
+
+``` + +## 8. Häufige Komponenten + +### Primäre Aktion + +```html + +``` + +Nur einmal pro klar abgegrenztem Bereich verwenden. + +### Sekundäre Aktion + +```html +Mehr erfahren +``` + +### 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 +

Kategorie · Kontext

+``` + +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.** diff --git a/chatgpt versuch/design-tokens.css b/chatgpt versuch/design-tokens.css new file mode 100644 index 0000000..509436c --- /dev/null +++ b/chatgpt versuch/design-tokens.css @@ -0,0 +1,13 @@ + --cm-cosmic-aubergine: #140B24; + --cm-nebula-surface: #21143A; + --cm-raised-surface: #2A1A44; + --cm-starlight: #FFF7FB; + --cm-stage-white: #F8F4FA; + --cm-muted-lavender: #CFC5D8; + --cm-ink-plum: #24172E; + --cm-spectral-magenta: #F740A7; + --cm-electric-cyan: #08D4F3; + --cm-calculated-violet: #A146EE; + --cm-vector-blue: #568DF9; + --cm-acid-lime: #B7D92A; + --cm-soft-gold: #D6C65B; \ No newline at end of file diff --git a/chatgpt versuch/fonts-self-hosted-template.css b/chatgpt versuch/fonts-self-hosted-template.css new file mode 100644 index 0000000..1a6b430 --- /dev/null +++ b/chatgpt versuch/fonts-self-hosted-template.css @@ -0,0 +1,16 @@ +/* Self-hosted font template. Place legally downloaded WOFF2 files in web/fonts/. + Keep each font's OFL.txt alongside the files. */ +@font-face { + font-family: "GFS Didot"; + src: url("fonts/gfs-didot-regular.woff2") format("woff2"); + font-style: normal; + font-weight: 400; + font-display: swap; +} +@font-face { + font-family: "Dosis"; + src: url("fonts/dosis-variable.woff2") format("woff2-variations"); + font-style: normal; + font-weight: 200 800; + font-display: swap; +} diff --git a/chatgpt versuch/index.html b/chatgpt versuch/index.html new file mode 100644 index 0000000..545e5b7 --- /dev/null +++ b/chatgpt versuch/index.html @@ -0,0 +1,46 @@ + + + + + + Chrystal Math - Calculated Chaos + + + + +
+
+
+
+

Chrystal Math · Calculated Chaos

+

Smart. Sharp. Unexpected.

+

Intelligenter Glamour, soziale Chemie und präzise gesetztes Chaos. Eine Bühne für Performance, Verbindung und Humor.

+
+ Termine ansehen + Über Chrystal +
+
+ +
+
+ +
+
+
+

Beispiel 02 · Eventkarte

Calculated Chaos Live

+

Eine einfache, wiederverwendbare Komponente für Shows, Workshops, Veröffentlichungen oder Social-Media-Teaser.

+
+
+
27SEPTEMBER
+

Chrystal Math in Köln

Doors 19:00 · Show 20:00 · Ort folgt

+ Details ansehen +
+
+
+
+ +
GFS Didot + Dosis · Cosmic Aubergine statt Schwarz
+ + diff --git a/chatgpt versuch/preview_v2guide_typo.png b/chatgpt versuch/preview_v2guide_typo.png new file mode 100644 index 0000000..23ac698 Binary files /dev/null and b/chatgpt versuch/preview_v2guide_typo.png differ diff --git a/chatgpt versuch/styles.css b/chatgpt versuch/styles.css new file mode 100644 index 0000000..2420701 --- /dev/null +++ b/chatgpt versuch/styles.css @@ -0,0 +1,86 @@ +/* Chrystal Math Design Tokens and Components + Fonts: GFS Didot + Dosis (SIL OFL 1.1) + For production in Germany, self-host WOFF2 files where practical. */ + +@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;500;600;700&family=GFS+Didot&display=swap"); + +:root { + --cm-bg: #140B24; + --cm-bg-2: #21143A; + --cm-bg-3: #2A1A44; + --cm-light: #FFF7FB; + --cm-text-on-dark: #F8F4FA; + --cm-muted-on-dark: #CFC5D8; + --cm-ink: #24172E; + --cm-muted-ink: #62516D; + --cm-magenta: #F740A7; + --cm-cyan: #08D4F3; + --cm-violet: #A146EE; + --cm-blue: #568DF9; + --cm-lime: #B7D92A; + --cm-gold: #D6C65B; + --cm-display: "GFS Didot", Didot, "Bodoni MT", serif; + --cm-body: "Dosis", "Arial Narrow", sans-serif; + --cm-radius-sm: .75rem; + --cm-radius-md: 1.25rem; + --cm-radius-lg: 2rem; + --cm-shadow: 0 1.5rem 4rem rgba(9, 2, 18, .32); + --cm-content: 75rem; +} + +* { box-sizing: border-box; } +html { color-scheme: dark; scroll-behavior: smooth; } +body { margin: 0; font-family: var(--cm-body); font-size: 1.125rem; line-height: 1.55; background: var(--cm-bg); color: var(--cm-text-on-dark); } +a { color: var(--cm-cyan); text-decoration-thickness: .08em; text-underline-offset: .18em; } +a:hover { color: var(--cm-light); } +.container { width: min(calc(100% - 2rem), var(--cm-content)); margin-inline: auto; } +.eyebrow { color: var(--cm-magenta); font-size: .83rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } +h1, h2 { font-family: var(--cm-display); font-weight: 400; line-height: .96; margin: 0; text-wrap: balance; } +h1 { font-size: clamp(3.7rem, 10vw, 7.8rem); } +h2 { font-size: clamp(2.7rem, 6vw, 5rem); } +h3 { font-size: 1.45rem; line-height: 1.15; margin: 0; } +.gradient-text { background: linear-gradient(110deg, var(--cm-magenta), #f5d9ff 43%, var(--cm-violet) 65%, var(--cm-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } + +.hero { min-height: 92vh; display: grid; align-items: center; position: relative; overflow: hidden; isolation: isolate; padding-block: 5rem; background: radial-gradient(circle at 15% 20%, rgba(247,64,167,.18), transparent 32%), radial-gradient(circle at 87% 14%, rgba(8,212,243,.15), transparent 31%), var(--cm-bg); } +.hero::after { content: ""; position: absolute; inset: 10% -8% auto auto; width: 28rem; aspect-ratio: 1; border: 1px dashed rgba(183,217,42,.38); border-radius: 50%; z-index: -1; } +.hero__grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr); align-items: center; } +.hero p { max-width: 42rem; color: var(--cm-muted-on-dark); font-size: clamp(1.1rem, 2.3vw, 1.4rem); } +.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } +.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.25rem; border-radius: 999px; border: 1px solid transparent; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease; } +.button:hover { transform: translateY(-2px); } +.button--primary { background: var(--cm-magenta); color: var(--cm-bg); } +.button--secondary { border-color: var(--cm-cyan); color: var(--cm-cyan); } +.button--secondary:hover { background: var(--cm-cyan); color: var(--cm-bg); } + +.orbit-card { position: relative; min-height: 24rem; border-radius: var(--cm-radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--cm-shadow); } +.orbit-card::before, .orbit-card::after { content: ""; position: absolute; border-radius: 50%; } +.orbit-card::before { width: 12rem; aspect-ratio: 1; border: 2px solid var(--cm-violet); left: 14%; top: 18%; } +.orbit-card::after { width: 1rem; aspect-ratio: 1; background: var(--cm-lime); box-shadow: 0 0 1.8rem .4rem rgba(183,217,42,.55); right: 18%; top: 24%; } +.node { position: absolute; width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: var(--cm-bg); border: 3px solid var(--cm-cyan); } +.node:nth-child(1) { left: 18%; top: 65%; } .node:nth-child(2) { left: 52%; top: 49%; border-color: var(--cm-magenta); } .node:nth-child(3) { right: 12%; bottom: 18%; border-color: var(--cm-lime); } +.node-line { position: absolute; height: 2px; background: linear-gradient(90deg, var(--cm-cyan), var(--cm-violet), var(--cm-lime)); width: 63%; left: 21%; top: 59%; transform: rotate(-9deg); transform-origin: left; } + +.events { background: var(--cm-light); color: var(--cm-ink); padding-block: 6rem; } +.events .eyebrow { color: var(--cm-violet); } +.events__header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; } +.events__header p { color: var(--cm-muted-ink); margin: 0; } +.event-card { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem; background: #fff; border: 1px solid #eadfea; border-radius: var(--cm-radius-md); box-shadow: 0 1.2rem 3rem rgba(36,23,46,.08); } +.event-date { min-height: 8rem; display: grid; place-content: center; text-align: center; border-radius: 1rem; background: var(--cm-magenta); color: var(--cm-light); } +.event-date strong { font-family: var(--cm-display); font-size: 3.6rem; line-height: .8; font-weight: 400; } +.event-date span { margin-top: .55rem; font-weight: 700; font-size: .75rem; letter-spacing: .13em; } +.event-card h3 { font-family: var(--cm-display); font-size: 2rem; font-weight: 400; } +.event-card p { margin: .45rem 0 0; color: var(--cm-muted-ink); } +.event-card .button { color: var(--cm-ink); border-color: var(--cm-ink); } + +.swatches { display: flex; height: .55rem; } .swatches span { flex: 1; } +footer { padding: 2rem; background: var(--cm-bg); color: var(--cm-muted-on-dark); font-size: .9rem; text-align: center; } + +@media (max-width: 760px) { + .hero__grid, .events__header { grid-template-columns: 1fr; } + .orbit-card { min-height: 18rem; } + .event-card { grid-template-columns: 6.5rem 1fr; } + .event-card > .button { grid-column: 1 / -1; } + .event-date { min-height: 6.5rem; } +} + +@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } diff --git a/chrystal-math-style.zip b/chrystal-math-style.zip new file mode 100644 index 0000000..5b8e01e Binary files /dev/null and b/chrystal-math-style.zip differ diff --git a/claude-version2/claude-versuch-2/Chrystal-Math_Briefkopf_A4_v2.pdf b/claude-version2/claude-versuch-2/Chrystal-Math_Briefkopf_A4_v2.pdf new file mode 100644 index 0000000..36db024 Binary files /dev/null and b/claude-version2/claude-versuch-2/Chrystal-Math_Briefkopf_A4_v2.pdf differ diff --git a/claude-version2/claude-versuch-2/Chrystal-Math_CI-CD-Guide_v2.pdf b/claude-version2/claude-versuch-2/Chrystal-Math_CI-CD-Guide_v2.pdf new file mode 100644 index 0000000..bbe2e62 Binary files /dev/null and b/claude-version2/claude-versuch-2/Chrystal-Math_CI-CD-Guide_v2.pdf differ diff --git a/claude-version2/claude-versuch-2/Chrystal-Math_Poster_A2_v2.pdf b/claude-version2/claude-versuch-2/Chrystal-Math_Poster_A2_v2.pdf new file mode 100644 index 0000000..751e924 Binary files /dev/null and b/claude-version2/claude-versuch-2/Chrystal-Math_Poster_A2_v2.pdf differ diff --git a/claude-version2/claude-versuch-2/Chrystal-Math_Postkarte_A6_v2.pdf b/claude-version2/claude-versuch-2/Chrystal-Math_Postkarte_A6_v2.pdf new file mode 100644 index 0000000..b0b5cea Binary files /dev/null and b/claude-version2/claude-versuch-2/Chrystal-Math_Postkarte_A6_v2.pdf differ diff --git a/claude-version2/claude-versuch-2/chrystal-math-brand-kit-v2.zip b/claude-version2/claude-versuch-2/chrystal-math-brand-kit-v2.zip new file mode 100644 index 0000000..b1413fa Binary files /dev/null and b/claude-version2/claude-versuch-2/chrystal-math-brand-kit-v2.zip differ diff --git a/claude-version2/claude-versuch-2/export/briefkopf.html b/claude-version2/claude-versuch-2/export/briefkopf.html new file mode 100644 index 0000000..dd3b4cb --- /dev/null +++ b/claude-version2/claude-versuch-2/export/briefkopf.html @@ -0,0 +1,72 @@ + + + + + + + + +
+ + + + +
+
+
Chrystal Math
+
Calculated Chaos.
+
+
+ Chrystal Math
+ Musterstraße 12, 50667 Köln
+ hallo@chrystalmath.de
+ chrystalmath.de +
+
+ +
„Exakt geplant, wunderbar aus der Reihe getanzt."
+ +
+ +
+
— Fließtext beginnt hier —
+
+ +
+
Kontakthallo@chrystalmath.de · +49 (0) 000 000000
+
Webchrystalmath.de · @chrystalmath
+
BankIBAN DE00 0000 0000 0000 00
+
+
+ + diff --git a/claude-version2/claude-versuch-2/export/briefkopf.pdf b/claude-version2/claude-versuch-2/export/briefkopf.pdf new file mode 100644 index 0000000..36db024 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/briefkopf.pdf differ diff --git a/claude-version2/claude-versuch-2/export/ci-guide.html b/claude-version2/claude-versuch-2/export/ci-guide.html new file mode 100644 index 0000000..4803be4 --- /dev/null +++ b/claude-version2/claude-versuch-2/export/ci-guide.html @@ -0,0 +1,260 @@ + + + + +Chrystal Math — CI/CD Guide v2.0 + + + + + + + + +
+
Corporate Identity & Design Guide
+ Chrystal Math Logo +
Calculated Chaos — CI/CD Guide v2.0
+

Überarbeitet: weniger Chaos, mehr Calculated. Gleiche Farben, gleiche Fonts — aber diszipliniert eingesetzt.

+
+ +
+
+ Das Prinzip hinter v2.0 +

Calculated zuerst. Chaos als Ausnahme.

+

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: Ruhe ist der Normalzustand, Farbe ist die Ausnahme.

+ +
+
01

Ein Verlauf, ein Ort

Der Farbverlauf erscheint ausschließlich auf der Wortmarke. Sonst nirgendwo — keine bunten Zahlen, keine Glow-Flecken im Hintergrund.

+
02

Ein Call-to-Action pro Ansicht

Nie zwei Buttons um Aufmerksamkeit konkurrieren lassen. Ein klarer nächster Schritt reicht.

+
03

Dekoration: ein Strich, kein Cluster

Das Zirkel-Motiv ist eine einzelne, dünne gepunktete Linie — nicht mehr drei überlagerte Kreise plus Punkt.

+
04

Gold bleibt Mikro-Detail

Nur für Eyebrow-Labels und einzelne Trennlinien. Nie als zweite Akzentfarbe neben dem Verlauf.

+
+ +
+
+
✕ v1.0 — zu viel gleichzeitig
+
    +
  • Zwei Glow-Flecken (Pink + Cyan) im Hero
    • +
  • Drei überlagerte Zirkel-Kreise als Deko
    • +
  • Zwei Buttons in der Hero, plus ein dritter in der Nav
    • +
  • Farbige Zahlen, farbige Foto-Platzhalter
    • +
+
+
+
✓ v2.0 — ein Fokuspunkt
+
    +
  • Ein sehr sanfter, einfarbiger Glow
    • +
  • Eine dünne gepunktete Linie
    • +
  • Ein Button, eine klare Handlung
    • +
  • Zahlen & Flächen in Ink-Tönen, Farbe bleibt der Wortmarke vorbehalten
    • +
+
+
+
+
+ +
+
+ Farbsystem +

Der Verlauf ist die Signatur — und bleibt es allein.

+

Fünf Kernfarben aus dem Original-Logo, plus Gold als Mikro-Detail. Unverändert gegenüber v1.0 — geändert hat sich nur, wie sparsam sie eingesetzt werden.

+ +
+
Chaos Pink
#F03A82
+
Orchid
#B744C4
+
Violet
#645EE9
+
Sky Cyan
#02AFF1
+
Calculated Gold
#E3B63E
+
+ +

Hintergrund — jetzt festgelegt

+

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.

+ +
+
+
Chrystal Math
+
Calculated Chaos.
+
#070307
+
+
+

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.

+
+
+ + + + + + + +
RegelBedeutung
Verlauf = WortmarkeDer Farbverlauf erscheint ausschließlich im Logo/Wortmarken-Schriftzug. Keine Ausnahmen mehr.
Ein Akzent-SignalPro Ansicht höchstens eine einzelne Volltonfarbe als Interaktions-Hinweis (z. B. Cyan bei Hover) — nicht mehrere gleichzeitig.
Kontrast zuerstFließtext immer in Ink oder Ink Muted, nie in Verlaufsfarbe direkt.
Gold bleibt Mikro-DetailNur Eyebrow-Labels und dünne Trennlinien — nie Flächen, nie zweite Akzentfarbe im selben Screen.
+
+
+ +
+
+ Typografie +

Drei Stimmen, klare Hierarchie.

+

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.

+ +
+
Wortmarke — nur der Logo-SchriftzugBodoni Moda ExtraBold
+
Chrystal Math
+

Bleibt schwer und dramatisch — das ist der eine Ort, an dem volles Gewicht und voller Farbverlauf erlaubt sind.

+
+ +
+
Zwischenüberschriften (h2) — neuBodoni Moda SemiBold, gerade
+
Exakt geplant, wunderbar chaotisch.
+

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. Kursiv ist als alternative Signature-Variante notiert, aber nicht der Standard.

+
+ +
+
Fließtext, UI, LabelsPoppins
+
Calculated Chaos.
+

Unverändert: Regular für Absätze, SemiBold mit Tracking für Labels/Buttons.

+
+ +
+
Signature-Moment, sehr sparsamFraunces SemiBold Italic
+
…mit einer Prise Unordnung.
+

Unverändert: ein einzelnes Zitat oder eine Unterschriftzeile pro Anwendung, nie mehr.

+
+ + + + + + + + +
RolleSchriftWann
WortmarkeBodoni Moda ExtraBold + VerlaufNur der Logo-Schriftzug „Chrystal Math"
Zwischenüberschrift (h2)Bodoni Moda SemiBold, geradeAlle Section-Headlines
FließtextPoppins RegularAbsätze, Beschreibungen
Labels / TagsPoppins SemiBold, TrackingKicker, Buttons, Navigation
Signature-MomentFraunces SemiBold Italic1 Zeile, nie mehr
+
+
+ + + +
+
+ Anwendungen +

Vier Beispiele, ein ruhigeres System.

+

Alle vier Anwendungen laufen jetzt auf v2.0 — ein ruhigeres, konsistentes System.

+
+
Web

One-Pager

Hero, Über mich, Programm, Galerie, Kontakt.

✓ v2.0
+
Druck

Poster

A2, Hochformat.

✓ v2.0
+
Druck

Postkarte

A6, beidseitig.

✓ v2.0
+
Druck

Briefkopf

A4, mit Signature-Moment.

✓ v2.0
+
+
+
+ +
+

Chrystal Math — Calculated Chaos. · CI/CD Guide v2.0 · Alle Schriften: SIL Open Font License 1.1

+
+ + + diff --git a/claude-version2/claude-versuch-2/export/ci-guide.pdf b/claude-version2/claude-versuch-2/export/ci-guide.pdf new file mode 100644 index 0000000..bbe2e62 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/ci-guide.pdf differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Bold.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Bold.woff2 new file mode 100644 index 0000000..dbbfde5 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Bold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-ExtraBold.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-ExtraBold.woff2 new file mode 100644 index 0000000..b6513e1 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-ExtraBold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Italic.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Italic.woff2 new file mode 100644 index 0000000..cdc3ac6 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Italic.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Medium.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Medium.woff2 new file mode 100644 index 0000000..11c972a Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Medium.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Regular.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Regular.woff2 new file mode 100644 index 0000000..9750b0e Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-Regular.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBold.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBold.woff2 new file mode 100644 index 0000000..bd99fa9 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBoldItalic.woff2 b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBoldItalic.woff2 new file mode 100644 index 0000000..af4d9b5 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/BodoniModa-SemiBoldItalic.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Fraunces-Regular.woff2 b/claude-version2/claude-versuch-2/export/fonts/Fraunces-Regular.woff2 new file mode 100644 index 0000000..83cbd8f Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Fraunces-Regular.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBold.woff2 b/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBold.woff2 new file mode 100644 index 0000000..58cee1f Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBoldItalic.woff2 b/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBoldItalic.woff2 new file mode 100644 index 0000000..66d09d2 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Fraunces-SemiBoldItalic.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Poppins-Bold.woff2 b/claude-version2/claude-versuch-2/export/fonts/Poppins-Bold.woff2 new file mode 100644 index 0000000..bf022fc Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Poppins-Bold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Poppins-Medium.woff2 b/claude-version2/claude-versuch-2/export/fonts/Poppins-Medium.woff2 new file mode 100644 index 0000000..c660336 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Poppins-Medium.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Poppins-Regular.woff2 b/claude-version2/claude-versuch-2/export/fonts/Poppins-Regular.woff2 new file mode 100644 index 0000000..b69e009 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Poppins-Regular.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/fonts/Poppins-SemiBold.woff2 b/claude-version2/claude-versuch-2/export/fonts/Poppins-SemiBold.woff2 new file mode 100644 index 0000000..921e962 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/fonts/Poppins-SemiBold.woff2 differ diff --git a/claude-version2/claude-versuch-2/export/logo.png b/claude-version2/claude-versuch-2/export/logo.png new file mode 100644 index 0000000..441f926 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/logo.png differ diff --git a/claude-version2/claude-versuch-2/export/onepager.html b/claude-version2/claude-versuch-2/export/onepager.html new file mode 100644 index 0000000..3d2ddfc --- /dev/null +++ b/claude-version2/claude-versuch-2/export/onepager.html @@ -0,0 +1,206 @@ + + + + +Chrystal Math — Calculated Chaos. + + + + + + +
+
+
Chrystal Math
+ + +
+
+ +
+ + + +
+ Drag · Performance · Calculated Chaos +

Chrystal
Math

+

Präzision mit Pailletten. Geometrie, die tanzen gelernt hat.

+
+ Booking anfragen +
+
+ +
+ +
+
+
Foto-Platzhalter · 4:5
+
+ Über mich +

Exakt geplant,
wunderbar chaotisch.

+

Chrystal Math verbindet strenge Geometrie mit theatralischem Glamour: Zirkel und Konstruktionslinien treffen auf Farbverlauf, Pailletten und einen bewussten Regelbruch mitten im Takt.

+

Seit [Jahr] auf Kölner Bühnen unterwegs — von kleinen Clubformaten bis zu größeren Bühnenshows.

+
+
40+Auftritte
+
12Formate
+
3Städte
+
+
+
+
+ +
+
+ Programm +

Nächste Termine

+
+
+
27.092026
+

Kleiner Freitag

Café Bach, Köln · Einlass 20 Uhr

+ Tickets +
+
+
11.102026
+

Calculated Chaos — Late Show

Ort folgt · Einlass 21 Uhr

+ Tickets +
+
+
02.112026
+

Gastauftritt

Ort folgt · Beginn 22 Uhr

+ Tickets +
+
+
+
+ +
+
+ Galerie +

Ein paar Eindrücke

+
+
Bild 1
Bild 2
Bild 3
Bild 4
+
+
+
+ +
+
+
„Wie ein Zirkel, der plötzlich Lust auf Freestyle bekommt."
+ — Platzhalter-Zitat, z. B. aus einer Rezension +
+
+ +
+
+
+ Kontakt & Booking +

Lust auf calculated chaos
bei deinem Event?

+ hallo@chrystalmath.de + chrystalmath.de +
IGTTFB
+
+
+
+
+
+ +
+
+
+ + + + + + + diff --git a/claude-version2/claude-versuch-2/export/poster.html b/claude-version2/claude-versuch-2/export/poster.html new file mode 100644 index 0000000..85df8ae --- /dev/null +++ b/claude-version2/claude-versuch-2/export/poster.html @@ -0,0 +1,63 @@ + + + + + + + + +
+ + + + + Calculated Chaos presents +
Chrystal
Math
+
Precision with sequins.
+ +
+ +
+
27. SeptemberEinlass 20 Uhr · Beginn 21 Uhr
+
Café BachKöln
+
Tickets ab 12€Link in Bio
+
+
Platzhalter — Datum/Ort/Preis vor Druck ersetzen
+
+ + diff --git a/claude-version2/claude-versuch-2/export/poster.pdf b/claude-version2/claude-versuch-2/export/poster.pdf new file mode 100644 index 0000000..751e924 Binary files /dev/null and b/claude-version2/claude-versuch-2/export/poster.pdf differ diff --git a/claude-version2/claude-versuch-2/export/postkarte.html b/claude-version2/claude-versuch-2/export/postkarte.html new file mode 100644 index 0000000..549b4a5 --- /dev/null +++ b/claude-version2/claude-versuch-2/export/postkarte.html @@ -0,0 +1,79 @@ + + + + + + + + + +
+ + + +
Chrystal
Math
+
Calculated Chaos.
+
+ +
+
+
Chrystal Math
+
Calculated Chaos.
+
+
+
+
+
+
+
Briefmarke
+
+
+
+
chrystalmath.de · @chrystalmath
+
+ + + diff --git a/claude-version2/claude-versuch-2/export/postkarte.pdf b/claude-version2/claude-versuch-2/export/postkarte.pdf new file mode 100644 index 0000000..b0b5cea Binary files /dev/null and b/claude-version2/claude-versuch-2/export/postkarte.pdf differ diff --git a/claude-version2/claude-versuch-2/export/style.css b/claude-version2/claude-versuch-2/export/style.css new file mode 100644 index 0000000..9a94dec --- /dev/null +++ b/claude-version2/claude-versuch-2/export/style.css @@ -0,0 +1,269 @@ +/* ========================================================================== + CHRYSTAL MATH — GENERAL-PURPOSE STYLESHEET + "Calculated Chaos." brand system v1.1 + Drop this file (+ the /fonts folder next to it) into any project. + All fonts: SIL Open Font License 1.1 — free for commercial use. + ========================================================================== */ + +/* -------------------------------------------------------------------------- + 1. FONTS (self-hosted, no external requests) + -------------------------------------------------------------------------- */ +@font-face{ + font-family:'Bodoni Moda'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:500; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Medium.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:700; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Bold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:800; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-ExtraBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:400; font-style:italic; font-display:swap; + src:url('fonts/BodoniModa-Italic.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:600; font-style:italic; font-display:swap; + src:url('fonts/BodoniModa-SemiBoldItalic.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Medium.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/Poppins-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Bold.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/Fraunces-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/Fraunces-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:600; font-style:italic; font-display:swap; + src:url('fonts/Fraunces-SemiBoldItalic.woff2') format('woff2'); +} + +/* -------------------------------------------------------------------------- + 2. DESIGN TOKENS + -------------------------------------------------------------------------- */ +:root{ + /* core gradient colors, fixed — from the logo, same in both themes */ + --chaos-pink: #F03A82; + --chaos-pink-deep: #6F235C; + --chaos-orchid: #B744C4; + --chaos-violet: #645EE9; + --chaos-cyan: #02AFF1; + --chaos-cyan-deep: #096089; + --chaos-gold: #E3B63E; + + /* reference backgrounds, kept for other applications (print etc.) */ + --bg-midnight: #070C1F; + --bg-aubergine: #200C24; + + /* fonts */ + --font-display: 'Bodoni Moda', 'Times New Roman', serif; + --font-sans: 'Poppins', 'Helvetica Neue', sans-serif; + --font-accent: 'Fraunces', 'Georgia', serif; + + /* spacing scale */ + --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; + --space-5: 40px; --space-6: 64px; --space-7: 96px; + + --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; + + /* ---- THEME: DARK (default) — Orchid-Anthrazit, Stufe 4 ---- */ + --bg: #070307; + --bg-raised: #140914; + --ink: #F5F1EA; + --ink-muted: #ACA7C0; + --line: rgba(245,241,234,.12); + --line-strong: rgba(245,241,234,.22); + + /* semantic accent text — safe-contrast variants per theme */ + --accent-gold: var(--chaos-gold); + --accent-pink: var(--chaos-pink); + --accent-cyan: var(--chaos-cyan); + + --grad-main: linear-gradient(100deg, var(--chaos-pink) 0%, var(--chaos-orchid) 45%, var(--chaos-violet) 60%, var(--chaos-cyan) 100%); + color-scheme: dark; +} + +/* ---- THEME: LIGHT ---- */ +:root[data-theme="light"]{ + --bg: #F6F4FB; + --bg-raised: #FFFFFF; + --ink: #1E1A2E; + --ink-muted: #6B6580; + --line: rgba(30,26,46,.10); + --line-strong: rgba(30,26,46,.18); + + /* deepened variants — the bright brand colors drop below AA contrast on light backgrounds */ + --accent-gold: #7E6112; + --accent-pink: var(--chaos-pink-deep); + --accent-cyan: var(--chaos-cyan-deep); + + /* deepened gradient stops for legible large headlines on light backgrounds */ + --grad-main: linear-gradient(100deg, #C70F58 0%, #862E90 45%, #241CCF 60%, #017EAE 100%); + color-scheme: light; +} + +/* -------------------------------------------------------------------------- + 3. RESET & BASE + -------------------------------------------------------------------------- */ +*, *::before, *::after{ box-sizing:border-box; } +html{ scroll-behavior:smooth; } +body{ + margin:0; + background:var(--bg); + color:var(--ink); + font-family:var(--font-sans); + font-size:16px; + line-height:1.65; + -webkit-font-smoothing:antialiased; + transition:background .3s ease, color .3s ease; +} +img, svg{ max-width:100%; display:block; } +a{ color:var(--accent-cyan); text-decoration:none; } +a:hover{ color:var(--accent-pink); } + +h1,h2,h3,h4{ + font-family:var(--font-display); + font-weight:700; + line-height:1.08; + margin:0 0 var(--space-3); + color:var(--ink); +} +h1{ font-size:clamp(40px,6vw,72px); font-weight:800; } +h2{ font-size:clamp(30px,4.4vw,46px); font-weight:600; font-style:normal; } +h3{ font-size:22px; font-weight:600; } +h4{ font-size:17px; font-weight:600; } + +p{ margin:0 0 var(--space-3); color:var(--ink-muted); max-width:65ch; } +p.lead{ font-size:1.15em; color:var(--ink); } + +blockquote{ + font-family:var(--font-accent); font-style:italic; font-weight:600; + color:var(--chaos-pink); font-size:1.4em; line-height:1.4; margin:0; +} + +::selection{ background:var(--chaos-gold); color:#241708; } + +/* -------------------------------------------------------------------------- + 4. TEXT UTILITIES + -------------------------------------------------------------------------- */ +.text-gradient{ + background:var(--grad-main); + -webkit-background-clip:text; background-clip:text; color:transparent; +} +.eyebrow{ + font-family:var(--font-sans); font-weight:600; font-size:.78em; + letter-spacing:.22em; text-transform:uppercase; color:var(--accent-gold); + margin-bottom:var(--space-2); display:block; +} +.text-muted{ color:var(--ink-muted); } +.text-pink{ color:var(--accent-pink); } +.text-cyan{ color:var(--accent-cyan); } +.text-gold{ color:var(--accent-gold); } +.font-accent{ font-family:var(--font-accent); font-style:italic; font-weight:600; } + +/* -------------------------------------------------------------------------- + 5. LAYOUT HELPERS + -------------------------------------------------------------------------- */ +.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; } +.section{ padding:var(--space-7) 0; } +.card{ + background:var(--bg-raised); + border:1px solid var(--line); + border-radius:var(--radius-md); + padding:var(--space-4); +} +.divider{ height:1px; background:linear-gradient(90deg, var(--chaos-gold), transparent 70%); margin:var(--space-4) 0; border:none; } +.grid{ display:grid; gap:var(--space-3); } +.grid-2{ grid-template-columns:repeat(2,1fr); } +.grid-3{ grid-template-columns:repeat(3,1fr); } +.grid-4{ grid-template-columns:repeat(4,1fr); } +@media(max-width:820px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } + +/* -------------------------------------------------------------------------- + 6. BUTTONS + -------------------------------------------------------------------------- */ +.btn{ + display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px; + letter-spacing:.04em; padding:14px 28px; border-radius:var(--radius-pill); + border:1px solid transparent; cursor:pointer; transition:.2s ease; +} +.btn-primary{ background:var(--chaos-gold); color:#241708; } +.btn-primary:hover{ background:#f0c85a; color:#241708; } +.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } +.btn-ghost:hover{ border-color:var(--chaos-cyan); color:var(--chaos-cyan); } + +/* -------------------------------------------------------------------------- + 7. TAGS / LABELS / SWATCHES + -------------------------------------------------------------------------- */ +.tag{ + display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; + text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); + background:var(--chaos-gold); color:#241708; +} +.swatch{ + border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--bg-raised); +} +.swatch .fill{ height:96px; } +.swatch .meta{ padding:14px 16px; } +.swatch .name{ font-weight:600; font-size:14px; color:var(--ink); } +.swatch .hex{ font-family:monospace; font-size:12.5px; color:var(--ink-muted); } + +/* -------------------------------------------------------------------------- + 8. NAV (optional, for one-pagers / sites) + -------------------------------------------------------------------------- */ +.nav{ + 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 .wrap{ display:flex; align-items:center; gap:24px; padding:16px 28px; } +.nav .brand{ font-family:var(--font-display); font-weight:700; font-size:19px; margin-right:auto; } +.nav a{ + font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-muted); +} +.nav a:hover{ color:var(--accent-cyan); } + +/* theme toggle button */ +.theme-toggle{ + display:inline-flex; align-items:center; gap:8px; + padding:8px 14px; border-radius:var(--radius-pill); + border:1px solid var(--line-strong); background:var(--bg-raised); + color:var(--ink); font-family:var(--font-sans); font-size:12px; font-weight:600; + cursor:pointer; +} +.theme-toggle:hover{ border-color:var(--chaos-gold); } + +/* -------------------------------------------------------------------------- + 9. PRINT SUPPORT + -------------------------------------------------------------------------- */ +@media print{ + .nav{ display:none; } + body{ background:var(--bg) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } +} diff --git a/claude-version2/claude-versuch-2/preview_bk_v2-1.png b/claude-version2/claude-versuch-2/preview_bk_v2-1.png new file mode 100644 index 0000000..d71c946 Binary files /dev/null and b/claude-version2/claude-versuch-2/preview_bk_v2-1.png differ diff --git a/claude-version2/claude-versuch-2/preview_pk_v2-1.png b/claude-version2/claude-versuch-2/preview_pk_v2-1.png new file mode 100644 index 0000000..bb54540 Binary files /dev/null and b/claude-version2/claude-versuch-2/preview_pk_v2-1.png differ diff --git a/claude-version2/claude-versuch-2/preview_pk_v2-2.png b/claude-version2/claude-versuch-2/preview_pk_v2-2.png new file mode 100644 index 0000000..1a84970 Binary files /dev/null and b/claude-version2/claude-versuch-2/preview_pk_v2-2.png differ diff --git a/claude-version2/claude-versuch-2/preview_poster_v2-1.png b/claude-version2/claude-versuch-2/preview_poster_v2-1.png new file mode 100644 index 0000000..70f89d4 Binary files /dev/null and b/claude-version2/claude-versuch-2/preview_poster_v2-1.png differ diff --git a/claude-version2/claude-versuch-2/preview_v2_galerie.png b/claude-version2/claude-versuch-2/preview_v2_galerie.png new file mode 100644 index 0000000..5221dfb Binary files /dev/null and b/claude-version2/claude-versuch-2/preview_v2_galerie.png differ diff --git a/claude-versuch-2.zip b/claude-versuch-2.zip new file mode 100644 index 0000000..9f97ee4 Binary files /dev/null and b/claude-versuch-2.zip differ diff --git a/design-document-pdf.html b/design-document-pdf.html new file mode 100644 index 0000000..39121d7 --- /dev/null +++ b/design-document-pdf.html @@ -0,0 +1,134 @@ + + + + + + Petrol Design System Document + + + + + + +
+
+
+
+
+
+

Petrol Commons

+
UI / UX Design Document
+
+
+
+

Deep petrol design system

+

This document defines a calm, readable, community-oriented colour system. It uses deep petrol as the primary brand anchor, a warm accent for emphasis, a secondary support role for supporting actions, and a muted tertiary tone for tags and light expressive UI.

+
+
Primary: deep petrol
+
Accent: warm clay
+
Secondary: petrol-blue
+
Support: muted violet
+
Light + dark themes
+
Accessible focus states
+
+
+
+
+

Colour system

+
+
Background
+
Surface
+
Primary
+
Accent
+
+
+
+
+

Principles

+
    +
  • Use the neutral scale for most layout and content space.
    • +
  • Reserve the primary colour for major brand anchors and key actions.
    • +
  • Use the accent colour sparingly so it stays meaningful.
    • +
  • Keep links, buttons, and statuses visually distinct.
    • +
+
+
+

Accessibility

+
    +
  • Maintain strong text contrast in both light and dark modes.
    • +
  • Keep borders visible on cards and inputs.
    • +
  • Use visible focus rings for all interactive elements.
    • +
  • Do not rely on colour alone to communicate state.
    • +
+
+
+
+

Components

+
+

Buttons: Primary buttons use deep petrol, secondary buttons use neutral surfaces, accent buttons are reserved for high-emphasis moments, and support chips are used for tags or tertiary actions.

+

Forms: Inputs use a slightly tinted surface with visible borders. Placeholder text is deliberately subdued.

+

Letterhead: The printable layout uses a clean header, a small colour line, and balanced typography for formal communication.

+
+
+
Petrol Commons · Cologne, Germany
+
Version 1.0 · July 2026
+
+
+
+
+ + \ No newline at end of file diff --git a/drawing.svg b/drawing.svg new file mode 100644 index 0000000..01dc654 --- /dev/null +++ b/drawing.svg @@ -0,0 +1,52 @@ + + + + diff --git a/files.zip b/files.zip new file mode 100644 index 0000000..5bc679e Binary files /dev/null and b/files.zip differ diff --git a/files/Chrystal-Math_Briefkopf_A4.pdf b/files/Chrystal-Math_Briefkopf_A4.pdf new file mode 100644 index 0000000..56ea7c3 Binary files /dev/null and b/files/Chrystal-Math_Briefkopf_A4.pdf differ diff --git a/files/Chrystal-Math_CI-CD-Guide.pdf b/files/Chrystal-Math_CI-CD-Guide.pdf new file mode 100644 index 0000000..52d0ba8 Binary files /dev/null and b/files/Chrystal-Math_CI-CD-Guide.pdf differ diff --git a/files/Chrystal-Math_Poster_A2.pdf b/files/Chrystal-Math_Poster_A2.pdf new file mode 100644 index 0000000..ead881b Binary files /dev/null and b/files/Chrystal-Math_Poster_A2.pdf differ diff --git a/files/Chrystal-Math_Postkarte_A6.pdf b/files/Chrystal-Math_Postkarte_A6.pdf new file mode 100644 index 0000000..7eb93d6 Binary files /dev/null and b/files/Chrystal-Math_Postkarte_A6.pdf differ diff --git a/files/brand/briefkopf.html b/files/brand/briefkopf.html new file mode 100644 index 0000000..9fbe7f4 --- /dev/null +++ b/files/brand/briefkopf.html @@ -0,0 +1,76 @@ + + + + + + + + +
+ + + + + + + +
+
+
Chrystal Math
+
Calculated Chaos.
+
+
+ Chrystal Math
+ Musterstraße 12, 50667 Köln
+ hallo@chrystalmath.de
+ chrystalmath.de +
+
+ +
„Exakt geplant, wunderbar aus der Reihe getanzt."
+ +
+ +
+
— Fließtext beginnt hier —
+
+ +
+
Kontakthallo@chrystalmath.de · +49 (0) 000 000000
+
Webchrystalmath.de · @chrystalmath
+
BankIBAN DE00 0000 0000 0000 00
+
+
+ + diff --git a/files/brand/briefkopf.pdf b/files/brand/briefkopf.pdf new file mode 100644 index 0000000..56ea7c3 Binary files /dev/null and b/files/brand/briefkopf.pdf differ diff --git a/files/brand/ci-guide.html b/files/brand/ci-guide.html new file mode 100644 index 0000000..6cc9a7d --- /dev/null +++ b/files/brand/ci-guide.html @@ -0,0 +1,340 @@ + + + + +Chrystal Math — CI/CD Guide + + + + + + + + +
+
Corporate Identity & Design Guide
+ Chrystal Math Logo +
Calculated Chaos — CI/CD Guide v1.0
+

+ Diese Datei ist deine Referenz für Farben, Schriften und Anwendung der Marke Chrystal Math — auf Papier und im Netz. +

+ +
+ + + +
+
↑ Live umschalten und in Ruhe entscheiden, bevor du dich festlegst.
+
+ +
+
+
Markenkern
+

Präzision mit Pailletten.

+

Chrystal Math ist Geometrie, die tanzen gelernt hat. Der Zirkel zieht exakte Kreise, die Konstruktionslinien stimmen — und mittendrin tanzt jemand bewusst aus der Reihe. Genau das ist calculated chaos: durchdachte Struktur, die sich einen glamourösen Wildcard-Moment erlaubt.

+

Für dein Design heißt das konkret: harte, saubere geometrische Grundformen (Kreise, Zirkel, Konstruktionslinien) treffen auf einen theatralischen, hochkontrastreichen Farbverlauf. Struktur zuerst, Glamour als bewusster Regelbruch obendrauf — nie umgekehrt.

+
+
+ +
+
+
Farbsystem
+

Der Verlauf ist die Signatur.

+

Fünf Kernfarben aus dem Original-Logo, plus Gold als sparsam eingesetzter Signal-Akzent für Linien, Icons und kleine Details (Zirkel, Sterne, Trennlinien).

+ +
+
Chaos Pink
#F03A82
Primär — Start des Verlaufs
+
Orchid
#B744C4
Übergang Pink→Blau
+
Violet
#645EE9
Übergang Mitte
+
Sky Cyan
#02AFF1
Primär — Ende des Verlaufs
+
Deep Wine
#6F235C
Schatten/Hover von Pink
+
Deep Petrol
#096089
Schatten/Hover von Cyan
+
Calculated Gold
#E3B63E
Akzent — sparsam, für Linien & Icons
+
Ink Light
#F5F1EA
Fließtext auf dunklem Grund
+
+ +

Hintergrund — drei Optionen zur Wahl

+

Reines Schwarz ist raus. Alle drei Alternativen sind dunkel genug, damit der Neon-Verlauf weiter leuchtet, aber jede setzt eine andere Stimmung.

+
+
+
Empfehlung
+

Mitternachtsblau

+
#0B1330
+
Chrystal Math
Calculated Chaos.
+

Kosmisch, edel — passt zum Zirkel/Sterne-Motiv im Logo. Kühlster Unterton, größter Kontrast zu Pink und Gold.

+
+
+

Anthrazit / Graphit

+
#18171C
+
Chrystal Math
Calculated Chaos.
+

Neutral, modern, leicht violetter Unterton. Wirkt am „technischsten" — gut für Web/UI-lastige Anwendungen.

+
+
+

Aubergine / Plum

+
#200C24
+
Chrystal Math
Calculated Chaos.
+

Am nächsten am Lila-Ton des Verlaufs selbst — monochromer, „drag-iger", am wenigsten neutral.

+
+
+ + + + + + + +
RegelBedeutung
60 / 30 / 1060% Hintergrund, 30% Verlauf/Flächen, 10% Gold-Akzent. Der Verlauf bleibt Ausnahme, nicht Grundzustand.
Ein Verlauf pro FlächeNie zwei Farbverläufe gleichzeitig im selben Sichtfeld — das kippt schnell ins Unruhige.
Kontrast zuerstFließtext immer in Ink Light oder Ink Muted auf dunklem Grund, nie in Verlaufsfarbe direkt.
Gold bleibt seltenGold nur für Linien, Icons, Sterne, Mikro-Details — nie als Fläche oder Fließtextfarbe.
+ +
+
+

✓ So funktioniert's

+
    +
  • Verlauf auf Headlines, Logo, große Flächen
    • +
  • Volltonfarben (einzeln) für Buttons, Icons, Tags
    • +
  • Gold als Trennlinie oder kleines Sternsymbol
    • +
+
+
+

✕ Bitte vermeiden

+
    +
  • Verlauf auf Fließtext (schlecht lesbar)
    • +
  • Cyan-Text direkt auf Pink-Fläche (zu wenig Kontrast)
    • +
  • Gold großflächig statt als Akzent
    • +
+
+
+
+
+ +
+
+
Typografie
+

Zwei Stimmen, ein Akzent.

+

Alle drei Schriften stehen bei Google Fonts unter der SIL Open Font License 1.1 — vollständig kostenlos, auch kommerziell, ohne Copyright-Risiko, selbst hostbar oder per Google-Fonts-CDN einbindbar.

+ +
+
Display — Wortmarke & HeadlinesSIL OFL 1.1 · frei
+
Chrystal Math
+

Bodoni Moda — moderner, freier Nachbau der klassischen Bodoni-Didone-Schnitte. Trifft den hochkontrastreichen Dünn-Dick-Charakter des Original-Logos am nächsten.

+
+ Regular 400Aa + SemiBold 600Aa + ExtraBold 800Aa + ItalicAa +
+
+ +
+
Sans — Fließtext, UI, TaglinesSIL OFL 1.1 · frei
+
Calculated Chaos.
+

Poppins — geometrische Grotesk, arbeitet mit breiter Laufweite genau wie die Original-Tagline. Für Fließtext, Buttons, Navigation, Labels.

+
+ RegularAa + SemiBoldAa + BoldAa +
+
+ +
+
Akzent — der „pfiffige" Moment, sehr sparsamSIL OFL 1.1 · frei
+
…mit einer Prise Unordnung.
+

Fraunces Italic — weicher, verspielter Serifenschnitt mit Charakter. Nur für einzelne Signature-Momente: Zitate, Unterschriften, eine Zeile auf dem Briefkopf. Nie für ganze Absätze.

+
+ + + + + + + +
RolleSchriftWann
Headline / WortmarkeBodoni Moda SemiBold–ExtraBoldTitel, Logo-Schriftzug, große Aussagen
FließtextPoppins RegularAbsätze, Beschreibungen, Web-Body
Labels / TagsPoppins SemiBold, tracking +0.15–0.25emKicker, Buttons, Navigation, Kleingedrucktes
Signature-MomentFraunces SemiBold Italic1 Zeile pro Anwendung, nie mehr
+
+
+ + + +
+
+
Anwendungen
+

Vier Beispiele, ein System.

+

Zwei für den Druck, dazu ein Briefkopf mit Signature-Moment, und eine vollständige Web-One-Pager-Vorlage — alle aus denselben Tokens gebaut.

+
+
Druck

Poster

A2, Hochformat. Großer Verlauf als Bühne, ein Termin/Statement als Fokus.

poster.pdf
+
Druck

Postkarte

A6, beidseitig. Vorderseite Bildmotiv, Rückseite Absender + Nachrichtenfeld.

postkarte.pdf
+
Druck

Briefkopf

A4. Elegant reduziert, mit einem Fraunces-Signature-Moment als Pfiff.

briefkopf.pdf
+
Web

One-Pager

Vollständige Website-Vorlage: Header, Nav, Bio, Programm, Zitat, Kontakt, Footer.

onepager.html
+
+
+
+ +
+

Chrystal Math — Calculated Chaos. · CI/CD Guide v1.0 · Alle verwendeten Schriften: SIL Open Font License 1.1

+
+ + + + + diff --git a/files/brand/ci-guide.pdf b/files/brand/ci-guide.pdf new file mode 100644 index 0000000..52d0ba8 Binary files /dev/null and b/files/brand/ci-guide.pdf differ diff --git a/files/brand/fonts.css b/files/brand/fonts.css new file mode 100644 index 0000000..497fab6 --- /dev/null +++ b/files/brand/fonts.css @@ -0,0 +1,100 @@ +/* Chrystal Math — Schriften (SIL Open Font License 1.1, 100% frei, kein Copyright-Risiko) */ + +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-Regular.woff2') format('woff2'); + font-weight: 400; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-Medium.woff2') format('woff2'); + font-weight: 500; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-SemiBold.woff2') format('woff2'); + font-weight: 600; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-Bold.woff2') format('woff2'); + font-weight: 700; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-ExtraBold.woff2') format('woff2'); + font-weight: 800; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-Italic.woff2') format('woff2'); + font-weight: 400; font-style: italic; font-display: swap; +} +@font-face { + font-family: 'Bodoni Moda'; + src: url('fonts/BodoniModa-SemiBoldItalic.woff2') format('woff2'); + font-weight: 600; font-style: italic; font-display: swap; +} + +@font-face { + font-family: 'Poppins'; + src: url('fonts/Poppins-Regular.woff2') format('woff2'); + font-weight: 400; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('fonts/Poppins-Medium.woff2') format('woff2'); + font-weight: 500; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('fonts/Poppins-SemiBold.woff2') format('woff2'); + font-weight: 600; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Poppins'; + src: url('fonts/Poppins-Bold.woff2') format('woff2'); + font-weight: 700; font-style: normal; font-display: swap; +} + +@font-face { + font-family: 'Fraunces'; + src: url('fonts/Fraunces-Regular.woff2') format('woff2'); + font-weight: 400; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Fraunces'; + src: url('fonts/Fraunces-SemiBold.woff2') format('woff2'); + font-weight: 600; font-style: normal; font-display: swap; +} +@font-face { + font-family: 'Fraunces'; + src: url('fonts/Fraunces-SemiBoldItalic.woff2') format('woff2'); + font-weight: 600; font-style: italic; font-display: swap; +} + +:root{ + /* Kern-Farbverlauf aus dem Logo */ + --chaos-pink: #F03A82; + --chaos-pink-deep: #6F235C; + --chaos-orchid: #B744C4; + --chaos-violet: #645EE9; + --chaos-cyan: #02AFF1; + --chaos-cyan-deep: #096089; + --chaos-gold: #E3B63E; + + /* Hintergrund-Optionen (3 zur Auswahl) */ + --bg-midnight: #0B1330; + --bg-graphite: #18171C; + --bg-aubergine:#200C24; + + /* Neutrale/Text-Farben */ + --ink-light: #F5F1EA; + --ink-muted: #ACA7C0; + + --font-display: 'Bodoni Moda', 'Times New Roman', serif; + --font-sans: 'Poppins', 'Helvetica Neue', sans-serif; + --font-accent: 'Fraunces', 'Georgia', serif; + + --grad-main: linear-gradient(100deg, var(--chaos-pink) 0%, var(--chaos-orchid) 45%, var(--chaos-violet) 60%, var(--chaos-cyan) 100%); +} diff --git a/files/brand/fonts/BodoniModa-Bold.woff2 b/files/brand/fonts/BodoniModa-Bold.woff2 new file mode 100644 index 0000000..dbbfde5 Binary files /dev/null and b/files/brand/fonts/BodoniModa-Bold.woff2 differ diff --git a/files/brand/fonts/BodoniModa-ExtraBold.woff2 b/files/brand/fonts/BodoniModa-ExtraBold.woff2 new file mode 100644 index 0000000..b6513e1 Binary files /dev/null and b/files/brand/fonts/BodoniModa-ExtraBold.woff2 differ diff --git a/files/brand/fonts/BodoniModa-Italic.woff2 b/files/brand/fonts/BodoniModa-Italic.woff2 new file mode 100644 index 0000000..cdc3ac6 Binary files /dev/null and b/files/brand/fonts/BodoniModa-Italic.woff2 differ diff --git a/files/brand/fonts/BodoniModa-Medium.woff2 b/files/brand/fonts/BodoniModa-Medium.woff2 new file mode 100644 index 0000000..11c972a Binary files /dev/null and b/files/brand/fonts/BodoniModa-Medium.woff2 differ diff --git a/files/brand/fonts/BodoniModa-Regular.woff2 b/files/brand/fonts/BodoniModa-Regular.woff2 new file mode 100644 index 0000000..9750b0e Binary files /dev/null and b/files/brand/fonts/BodoniModa-Regular.woff2 differ diff --git a/files/brand/fonts/BodoniModa-SemiBold.woff2 b/files/brand/fonts/BodoniModa-SemiBold.woff2 new file mode 100644 index 0000000..bd99fa9 Binary files /dev/null and b/files/brand/fonts/BodoniModa-SemiBold.woff2 differ diff --git a/files/brand/fonts/BodoniModa-SemiBoldItalic.woff2 b/files/brand/fonts/BodoniModa-SemiBoldItalic.woff2 new file mode 100644 index 0000000..af4d9b5 Binary files /dev/null and b/files/brand/fonts/BodoniModa-SemiBoldItalic.woff2 differ diff --git a/files/brand/fonts/Fraunces-Regular.woff2 b/files/brand/fonts/Fraunces-Regular.woff2 new file mode 100644 index 0000000..83cbd8f Binary files /dev/null and b/files/brand/fonts/Fraunces-Regular.woff2 differ diff --git a/files/brand/fonts/Fraunces-SemiBold.woff2 b/files/brand/fonts/Fraunces-SemiBold.woff2 new file mode 100644 index 0000000..58cee1f Binary files /dev/null and b/files/brand/fonts/Fraunces-SemiBold.woff2 differ diff --git a/files/brand/fonts/Fraunces-SemiBoldItalic.woff2 b/files/brand/fonts/Fraunces-SemiBoldItalic.woff2 new file mode 100644 index 0000000..66d09d2 Binary files /dev/null and b/files/brand/fonts/Fraunces-SemiBoldItalic.woff2 differ diff --git a/files/brand/fonts/Poppins-Bold.woff2 b/files/brand/fonts/Poppins-Bold.woff2 new file mode 100644 index 0000000..bf022fc Binary files /dev/null and b/files/brand/fonts/Poppins-Bold.woff2 differ diff --git a/files/brand/fonts/Poppins-Medium.woff2 b/files/brand/fonts/Poppins-Medium.woff2 new file mode 100644 index 0000000..c660336 Binary files /dev/null and b/files/brand/fonts/Poppins-Medium.woff2 differ diff --git a/files/brand/fonts/Poppins-Regular.woff2 b/files/brand/fonts/Poppins-Regular.woff2 new file mode 100644 index 0000000..b69e009 Binary files /dev/null and b/files/brand/fonts/Poppins-Regular.woff2 differ diff --git a/files/brand/fonts/Poppins-SemiBold.woff2 b/files/brand/fonts/Poppins-SemiBold.woff2 new file mode 100644 index 0000000..921e962 Binary files /dev/null and b/files/brand/fonts/Poppins-SemiBold.woff2 differ diff --git a/files/brand/logo.png b/files/brand/logo.png new file mode 100644 index 0000000..441f926 Binary files /dev/null and b/files/brand/logo.png differ diff --git a/files/brand/onepager.html b/files/brand/onepager.html new file mode 100644 index 0000000..5ce5cb6 --- /dev/null +++ b/files/brand/onepager.html @@ -0,0 +1,237 @@ + + + + +Chrystal Math — Calculated Chaos. + + + + + + +
+
+
Chrystal Math
+ + Booking anfragen +
+
+ +
+ + + + + +
+
Drag · Performance · Calculated Chaos
+

Chrystal
Math

+

Präzision mit Pailletten. Geometrie, die tanzen gelernt hat — Shows, Auftritte und Zahlen mit Wildcard-Moment.

+
+ Nächste Show + Booking anfragen +
+
+ +
+ +
+
+
Foto-Platzhalter · 4:5
+
+
Über mich
+

Exakt geplant,
wunderbar chaotisch.

+

Chrystal Math verbindet strenge Geometrie mit theatralischem Glamour: Zirkel und Konstruktionslinien treffen auf Farbverlauf, Pailletten und einen bewussten Regelbruch mitten im Takt.

+

Seit [Jahr] auf Kölner Bühnen unterwegs — von kleinen Clubformaten bis zu größeren Bühnenshows.

+
+
40+Auftritte
+
12Formate
+
3Städte
+
+
+
+
+ +
+
+
Programm
+

Nächste Termine

+
+
+
27.092026
+

Kleiner Freitag

Café Bach, Köln · Einlass 20 Uhr

+ Tickets +
+
+
11.102026
+

Calculated Chaos — Late Show

Ort folgt · Einlass 21 Uhr

+ Tickets +
+
+
02.112026
+

Gastauftritt

Ort folgt · Beginn 22 Uhr

+ Tickets +
+
+
+
+ +
+
+
Galerie
+

Ein paar Eindrücke

+
+
Bild 1
Bild 2
Bild 3
Bild 4
+
+
+
+ +
+
+
„Wie ein Zirkel, der plötzlich Lust auf Freestyle bekommt."
+ — Platzhalter-Zitat, z. B. aus einer Rezension +
+
+ +
+
+
+
Kontakt & Booking
+

Lust auf calculated chaos
bei deinem Event?

+ hallo@chrystalmath.de + chrystalmath.de +
IGTTFB
+
+
+
+
+
+ +
+
+
+ + + + + diff --git a/files/brand/poster.html b/files/brand/poster.html new file mode 100644 index 0000000..2420a21 --- /dev/null +++ b/files/brand/poster.html @@ -0,0 +1,74 @@ + + + + + + + + +
+ + + + + + + + +
Calculated Chaos presents
+
Chrystal
Math
+
Precision with sequins.
+ +
+ +
+
27. SeptemberEinlass 20 Uhr · Beginn 21 Uhr
+
Café BachKöln
+
Tickets ab 12€Link in Bio
+
+
Platzhalter — Datum/Ort/Preis vor Druck ersetzen
+
+ + diff --git a/files/brand/poster.pdf b/files/brand/poster.pdf new file mode 100644 index 0000000..ead881b Binary files /dev/null and b/files/brand/poster.pdf differ diff --git a/files/brand/postkarte.html b/files/brand/postkarte.html new file mode 100644 index 0000000..5563fe4 --- /dev/null +++ b/files/brand/postkarte.html @@ -0,0 +1,83 @@ + + + + + + + + + +
+ + + + + +
Chrystal
Math
+
Calculated Chaos.
+
+ +
+
+
Chrystal Math
+
Calculated Chaos.
+
+
+
+
+
+
+
Briefmarke
+
+
+
+
chrystalmath.de · @chrystalmath
+
+ + + diff --git a/files/brand/postkarte.pdf b/files/brand/postkarte.pdf new file mode 100644 index 0000000..7eb93d6 Binary files /dev/null and b/files/brand/postkarte.pdf differ diff --git a/files/chrystal-math-brand-kit.zip b/files/chrystal-math-brand-kit.zip new file mode 100644 index 0000000..d30c269 Binary files /dev/null and b/files/chrystal-math-brand-kit.zip differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..3427645 --- /dev/null +++ b/index.html @@ -0,0 +1,233 @@ + + + + + Design‑System Demo + + + + + + + + + + + + + + + +
+

Design‑System Demo

+

Farben, Schriften, Buttons, Karten, Modal & Timeline – alles in einer Seite.

+
+ + +
+ +
+

Farbpalette

+
+
#02AFF1
+
#F03A82
+
#B744C4
+
#6F235C
+
#645EE9
+
#096089
+
#E3B63E
+
+
+ + +
+

Buttons

+
+ + + +
+
+ + +
+

Card

+
+
Card Header
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec venenatis gravida, justo elit porta ligula, id porta sem purus ut erat.

+
+
+ +
+
+
+ + +
+

Modal

+ +
+ + +
+

Timeline

+
+
Event 1
+
Event 2
+
Event 3
+
Event 4
+
Event 5
+
Event 6
+
Event 7
+
Event 8
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/new colour try/deep-petrol-authentic-login.html b/new colour try/deep-petrol-authentic-login.html new file mode 100644 index 0000000..d948864 --- /dev/null +++ b/new colour try/deep-petrol-authentic-login.html @@ -0,0 +1,406 @@ + + + + + + Deep Petrol – Community Portal + + + + +
+
+
+
+
+ +
+ Petrol Commons + Community portal for events & volunteers +
+
+ +
+
+
+ +
+
+
+
+ + Inclusive spaces in deep petrol +
+

Coordinate volunteers and events with a calm, readable interface.

+

This light-mode preview shows how deep petrol, a warm complementary accent, and a small set of support colours behave in a realistic one-page layout with login, events, and community context.

+ +
+ + + +
+ +
+ Primary: deep petrol for key actions and brand. + Accent: warm clay for emphasis and highlights. + Support: muted violet for tags and tertiary UI. +
+
+ + +
+ +
+
+

Upcoming

+

Events and meetups

+

This section shows how petrol and its supporters behave in a more content-heavy context with lists, dates, and tags.

+
    +
  • +
    21 Jul · 19:00
    +
    +
    Queer Tech & Privacy Meetup
    +
    Köln · Hybrid · Organised by Petrol Commons
    +
    + Tech + Privacy + Community +
    +
    +
    • +
  • +
    28 Jul · 17:30
    +
    +
    Volunteer Onboarding
    +
    Köln · In person · Accessibility-first
    +
    + Onboarding + Training +
    +
    +
    • +
+
+ + +
+
+ + +
+ + diff --git a/new colour try/deep-petrol-light-dark-preview.html b/new colour try/deep-petrol-light-dark-preview.html new file mode 100644 index 0000000..943bf2a --- /dev/null +++ b/new colour try/deep-petrol-light-dark-preview.html @@ -0,0 +1,332 @@ + + + + + + Deep Petrol Light and Dark Preview + + + + + + +
+
+
+ +
+ Deep Petrol System + Light and dark accessibility preview +
+
+ +
+ +
+
+ Balanced palette +

Deep petrol with warm contrast, readable neutrals, and clearer hierarchy.

+

Instead of staying inside one narrow blue-green band, this version keeps petrol as the anchor and adds a warm complementary accent for calls to action and emphasis. That creates stronger visual rhythm and makes the interface easier to scan.

+
+ + + +
+
+ +
+ +
+

Palette tokens

+
+
BackgroundPage base
+
SurfaceCards and panels
+
Surface 2Inputs and nested areas
+
PrimaryDeep petrol anchor
+
AccentWarm complementary tone
+
LinkReadable interactive text
+
+
+ +
+
+

Typography

+

Readable contrast

+

This paragraph uses the muted text token so body copy stays soft but still readable. Links are separated into their own blue-cyan role instead of blending into the primary action colour.

+

Primary text is reserved for headings, labels, and short high-priority content.

+
+ +
+

Form controls

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Status colours

+

Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.

+
+ Success + Warning + Info + Danger +
+
+
+ +
+

Table preview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementPurposeColour logic
Primary buttonMain actionPetrol background with high-contrast foreground
Accent buttonSecondary emphasisWarm complement to break monotony
LinksInline interactionDedicated link token so they remain visible in copy
InputsEditable areasNested surface with visible border and focus ring
+
+ +

Theme toggle included. Both light and dark modes use the same colour roles with separate values tuned for readability.

+
+ + + + diff --git a/new colour try/deep-petrol-light-full.html b/new colour try/deep-petrol-light-full.html new file mode 100644 index 0000000..cc4a0c3 --- /dev/null +++ b/new colour try/deep-petrol-light-full.html @@ -0,0 +1,298 @@ + + + + + Deep Petrol Light Full Palette + + + + +
+
+
+ +
+ Deep Petrol System + Light-mode palette preview +
+
+
+ +
+
+ Minimal vs. full system +

Light mode with deep petrol and a complementary accent.

+

This layout is the same in both files, so you can focus purely on how the two palette strategies feel: a minimal system with one primary and one accent, and a fuller design-system-style palette with secondary and support colours.

+
+ + + + +
+
+ +
+ +
+

Palette tokens

+
+
BackgroundPage base
+
SurfaceCards and panels
+
Surface 2Inputs and nested areas
+
PrimaryDeep petrol anchor
+
SecondarySupport petrol tone
+
AccentWarm complementary tone
+
SupportAdditional chromatic role
+
+
+ +
+
+

Typography and links

+

This paragraph uses the muted text token so body copy stays soft but readable. Links are separated into their own role instead of blending into the primary action colour.

+

Primary text is reserved for headings, labels, and short high-priority content.

+
+ +
+

Form controls

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Status colours

+

Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.

+
+ Success + Warning + Info + Danger +
+
+
+ +
+

Table preview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementPurposeColour logic
Primary buttonMain actionPetrol background with high-contrast foreground
Secondary buttonSupporting actionNeutral surface with clear border
Accent buttonHigh emphasisWarm complement to break monotony
Support buttonTertiary emphasisAdditional chromatic role for chips/tags
+
+ +

Use these two files side by side to compare a restrained palette versus a fuller design-system-style colour set in light mode.

+
+ + \ No newline at end of file diff --git a/new colour try/deep-petrol-light-minimal.html b/new colour try/deep-petrol-light-minimal.html new file mode 100644 index 0000000..262803c --- /dev/null +++ b/new colour try/deep-petrol-light-minimal.html @@ -0,0 +1,276 @@ + + + + + Deep Petrol Light Minimal Palette + + + + +
+
+
+ +
+ Deep Petrol System + Light-mode palette preview +
+
+
+ +
+
+ Minimal vs. full system +

Light mode with deep petrol and a complementary accent.

+

This layout is the same in both files, so you can focus purely on how the two palette strategies feel: a minimal system with one primary and one accent, and a fuller design-system-style palette with secondary and support colours.

+
+ + + + +
+
+ +
+ +
+

Palette tokens

+
+
BackgroundPage base
+
SurfaceCards and panels
+
Surface 2Inputs and nested areas
+
PrimaryDeep petrol anchor
+
SecondarySupport petrol tone
+
AccentWarm complementary tone
+
SupportAdditional chromatic role
+
+
+ +
+
+

Typography and links

+

This paragraph uses the muted text token so body copy stays soft but readable. Links are separated into their own role instead of blending into the primary action colour.

+

Primary text is reserved for headings, labels, and short high-priority content.

+
+ +
+

Form controls

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Status colours

+

Semantic colours are distinct from the petrol brand colour so success, warning, info, and danger states do not depend on hue shifts alone.

+
+ Success + Warning + Info + Danger +
+
+
+ +
+

Table preview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementPurposeColour logic
Primary buttonMain actionPetrol background with high-contrast foreground
Secondary buttonSupporting actionNeutral surface with clear border
Accent buttonHigh emphasisWarm complement to break monotony
Support buttonTertiary emphasisAdditional chromatic role for chips/tags
+
+ +

Use these two files side by side to compare a restrained palette versus a fuller design-system-style colour set in light mode.

+
+ + \ No newline at end of file diff --git a/new colour try/preview.html b/new colour try/preview.html new file mode 100644 index 0000000..a76bfae --- /dev/null +++ b/new colour try/preview.html @@ -0,0 +1,905 @@ + + + + + + + Petrol Login Demo — Refined Dark Mode + + + + + +
+
+
+ + Calmspace +
+ +
+

Clear space. Clear mind.

+

Work with focus, not friction.

+

+ A calmer workspace for planning, tracking and finishing what matters— + without clutter, noise or unnecessary decisions. +

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + \ No newline at end of file diff --git a/one-pager.html b/one-pager.html new file mode 100644 index 0000000..a585060 --- /dev/null +++ b/one-pager.html @@ -0,0 +1,247 @@ + + + + + + Chrystal Math — One Pager + + + + + + + + + + + +
+
+ + + + + + + +
+
+ +
+
+
+
+

Calculated Chaos

+

Elegante Systeme für mutige digitale Präsenz.

+

Dieser One-Pager überträgt die visuelle Sprache aus dem Artwork in eine webtaugliche Oberfläche mit freier Typografie, klarer Hierarchie und kontrollierten Neon-Akzenten.

+
+ Beispiele ansehen + Kontaktblock +
+
+ + +
+ + +
+ +
+
+
+

Konzept

+

Ein präziser One-Pager mit editorialer Haltung.

+
+
+

Die Inszenierung bleibt dramatisch, ohne ins rein Dekorative zu kippen. Dunkle Nachtflächen, kontrollierte Verläufe und feine Linien schaffen Tiefe, während die Typografie die emotionale Hauptrolle übernimmt.

+

Statt eines harten Schwarztons nutzt die Seite ein dunkles Blau-Violett als Grundfläche. Dadurch bleibt das Konzept atmosphärisch, wirkt aber auf längeren Webseiten weicher und hochwertiger.

+
+
+
+ +
+
+
+

HTML-Elemente

+

Gängige Bausteine in einem konsistenten System.

+
+ +
+
+

Typografie

+

Headlines nutzen die Display-Serif, Lesetexte und Interfaces die Sans-Serif. So bleibt die Seite charakterstark und zugleich gut lesbar.

+ Zur Schriftprobe +
+ +
+

Navigation

+

Eine reduzierte Hauptnavigation führt klar durch die wichtigsten Inhaltsblöcke und bleibt auch mobil gut erfassbar.

+ Zum Formular +
+ +
+

Akzente

+

Sterne, Linien und Knotenpunkte erscheinen punktuell. Sie strukturieren Inhalte, statt bloß als Effekt zu dienen.

+ Zur Tabelle +
+
+
+
+ +
+
+
+

Schriftprobe

+

Display-Serif für Bühne. Sans-Serif für Struktur.

+

Diese Kombination eignet sich für kulturelle, kreative und kampagnenartige Webauftritte, bei denen Präsenz und Lesbarkeit zugleich wichtig sind.

+
+ „Calculated chaos“ funktioniert am stärksten dann, wenn jede dramatische Geste von einem ruhigen Raster getragen wird. +
+
+ +
+

Tabelle

+

Farbrollen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RolleFarbeHEX
FlächeDeep Night#0F1020
PrimärElectric Pink#FF4FBF
SekundärCrystal Cyan#22D7FF
AkzentAcid Lime#D6FF3F
+
+ +
+

Formular

+

Kontakt aufnehmen

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+
+
+

Listen

+

Geeignete Einsatzfelder

+
    +
  • Kultur- und Eventwebsites.
    • +
  • Persönliche Brand- und Portfolioseiten.
    • +
  • Kampagnen-Landingpages mit starker visueller Handschrift.
    • +
  • Community-Projekte mit editorialem Anspruch.
    • +
+
+ +
+

Hinweis

+

Barrierefreiheit bleibt Pflicht.

+

Neonfarben werden nur für Akzente verwendet. Lesetexte laufen auf ruhigen Flächen mit hohem Kontrast, damit die Gestaltung auch praktisch funktioniert.

+
+ Was ist hier bewusst reduziert? +

Übermäßige Glows, reines Schwarz, laute Animationen und zu viele konkurrierende Farbverläufe wurden vermieden.

+
+
+
+
+
+ +
+
+
+

Footer

+

Bereit für eine elegante Webpräsenz?

+

Dieser One-Pager ist als Ausgangspunkt gedacht und enthält typische HTML-Elemente, mit denen sich weitere Seiten oder Komponenten leicht ergänzen lassen.

+
+
+

Chrystal Math Studio

+ hello@example.com
+ example.com +
+
+
+ + + + diff --git a/petrol_design_package.zip b/petrol_design_package.zip new file mode 100644 index 0000000..28c6872 Binary files /dev/null and b/petrol_design_package.zip differ diff --git a/petrol_design_package/README.md b/petrol_design_package/README.md new file mode 100644 index 0000000..acc47c9 --- /dev/null +++ b/petrol_design_package/README.md @@ -0,0 +1,15 @@ +# Petrol Design Package + +This package contains a clear UI/UX design document, a letterhead, and example pages for light and dark themes. + +## Files +- `design-document.md` — design system notes, palette rationale, and component guidance. +- `letterhead.html` — printable letterhead with branding. +- `index.html` — sample one-page community portal UI. +- `light-theme.css` — light theme tokens and component styles. +- `dark-theme.css` — dark theme token override. +- `examples/forms.html` — form control examples. +- `examples/buttons.html` — button and chip examples. +- `examples/typography.html` — typographic specimen page. +- `assets/logo.svg` — simple brand mark. +- `assets/pattern.svg` — subtle petrol background pattern. diff --git a/petrol_design_package/assets/logo.svg b/petrol_design_package/assets/logo.svg new file mode 100644 index 0000000..8a55348 --- /dev/null +++ b/petrol_design_package/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/petrol_design_package/assets/pattern.svg b/petrol_design_package/assets/pattern.svg new file mode 100644 index 0000000..c3e6854 --- /dev/null +++ b/petrol_design_package/assets/pattern.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/petrol_design_package/dark-theme.css b/petrol_design_package/dark-theme.css new file mode 100644 index 0000000..c6d0e8c --- /dev/null +++ b/petrol_design_package/dark-theme.css @@ -0,0 +1,32 @@ +:root[data-theme="dark"] { + --bg: #08171a; + --surface: #10262b; + --surface-2: #16333a; + --surface-3: #1e444c; + --border: #35555b; + --divider: #274148; + --text: #e9f3f3; + --text-muted: #bdd1d3; + --text-faint: #8da4a8; + --primary: #63b7bd; + --primary-soft: rgba(99,183,189,0.16); + --primary-strong: #9de0e4; + --accent: #f0b07c; + --accent-soft: rgba(240,176,124,0.14); + --accent-strong: #ffcf9f; + --secondary: #7bb0c9; + --secondary-soft: rgba(123,176,201,0.14); + --support: #b792e8; + --support-soft: rgba(183,146,232,0.14); + --link: #89d7df; + --success: #73c592; + --success-soft: rgba(115,197,146,0.14); + --warning: #ebc06e; + --warning-soft: rgba(235,192,110,0.14); + --danger: #de8a9d; + --danger-soft: rgba(222,138,157,0.14); + --info: #87b5ea; + --info-soft: rgba(135,181,234,0.14); + --on-primary: #082125; + --shadow: 0 18px 42px rgba(0, 0, 0, 0.32); +} diff --git a/petrol_design_package/design-document.md b/petrol_design_package/design-document.md new file mode 100644 index 0000000..7d54daa --- /dev/null +++ b/petrol_design_package/design-document.md @@ -0,0 +1,43 @@ +# Petrol Design System + +## Brand direction +The visual direction uses deep petrol as the primary brand anchor. It is supported by a warm accent for emphasis, a cooler secondary role for navigation and support, and a muted violet tertiary role for tags and extended UI variety. + +## Palette principles +- Primary: deep petrol. +- Accent: warm clay/orange to counterbalance the cool base. +- Secondary: cooler petrol-blue for support actions and links. +- Support: muted violet for tertiary emphasis. +- Neutrals: a layered surface system for background, cards, inputs, and dividers. + +## Why this structure works +A single brand colour plus a single accent can work for small interfaces, but larger systems need a secondary and a tertiary role so the UI can express hierarchy without overusing one hue. The neutral scale carries most of the layout so the colour accents remain meaningful. + +## Accessibility rules +- Use strong contrast for body text and controls. +- Keep focus rings visible in both themes. +- Never rely on colour alone for status or action meaning. +- Keep links visually distinct from primary buttons. + +## Components +### Buttons +- Primary: petrol fill, light text. +- Secondary: neutral fill or outline. +- Accent: warm highlight, limited use. +- Support: tertiary chips or contextual actions. + +### Forms +- Inputs use a lighter surface than cards. +- Borders must stay visible in both light and dark themes. +- Placeholder text should be quieter than entered text. + +### Cards +- Cards use surface elevation rather than heavy shadows. +- Borders and spacing create the hierarchy. + +### Letterhead +- Header uses logo, brand name, and a subtle petrol accent line. +- Footer uses contact details, address, and a privacy-friendly note. + +## Example usage +Use the system for community event pages, volunteer coordination tools, editorial pages, and internal documents that need a calm but confident identity. diff --git a/petrol_design_package/examples/buttons.html b/petrol_design_package/examples/buttons.html new file mode 100644 index 0000000..7f1106f --- /dev/null +++ b/petrol_design_package/examples/buttons.html @@ -0,0 +1 @@ +Buttons

Buttons

ChipSuccess
\ No newline at end of file diff --git a/petrol_design_package/examples/forms.html b/petrol_design_package/examples/forms.html new file mode 100644 index 0000000..7879dca --- /dev/null +++ b/petrol_design_package/examples/forms.html @@ -0,0 +1 @@ +Forms

Forms

\ No newline at end of file diff --git a/petrol_design_package/examples/typography.html b/petrol_design_package/examples/typography.html new file mode 100644 index 0000000..4f2aefb --- /dev/null +++ b/petrol_design_package/examples/typography.html @@ -0,0 +1 @@ +Typography

Heading One

Heading Two

Heading Three

Body text is set for readability on calm, neutral backgrounds.

Muted text shows supporting information.

\ No newline at end of file diff --git a/petrol_design_package/index.html b/petrol_design_package/index.html new file mode 100644 index 0000000..c4375db --- /dev/null +++ b/petrol_design_package/index.html @@ -0,0 +1,102 @@ + + + + + + Petrol Commons UI Preview + + + + + +
+
+
+ Petrol Commons
UI/UX design package +
+ +
+ +
+
+ Design document included +

Deep petrol brand system with light and dark modes.

+

This package shows the colour system, components, letterhead, and example pages in one consistent visual language.

+
+ + + +
+
+
+

Palette

+
+
Background
+
Surface
+
Primary
+
Accent
+
Secondary
+
Support
+
+
+
+ +
+ +
+
+

Forms

+ +
+ +
+
+

Status

+

Success Warning Info Danger

+
+

The neutral scale carries structure while colour roles remain clearly separated.

+
+
+ +
+

Open this file, the letterhead, and the example pages in the examples folder for a complete preview.

+
+ + + + diff --git a/petrol_design_package/letterhead.html b/petrol_design_package/letterhead.html new file mode 100644 index 0000000..32e7dad --- /dev/null +++ b/petrol_design_package/letterhead.html @@ -0,0 +1,48 @@ + + + + + + Petrol Commons Letterhead + + + + +
+
+
+

Petrol Commons

Community portal & design system
+
+
+
+ Cologne, Germany
+ hello@petrolcommons.example
+ +49 221 000000 +
+
+ +
+

Dear community partner,

+

This letterhead demonstrates the petrol brand system in a clean, printable format. The design uses deep petrol for identity, a warm accent for emphasis, and generous neutral space for readability.

+

The layout is intentionally simple so it works for letters, notices, workshop invitations, and formal community communication.

+

Kind regards,
Petrol Commons Team

+
+ +
+
Petrol Commons · Accessible communication · Privacy-conscious by design
+
Page 1
+
+
+ + diff --git a/petrol_design_package/light-theme.css b/petrol_design_package/light-theme.css new file mode 100644 index 0000000..aa64481 --- /dev/null +++ b/petrol_design_package/light-theme.css @@ -0,0 +1,57 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap"); + +:root { + --bg: #f4f6f5; + --surface: #ffffff; + --surface-2: #edf3f2; + --surface-3: #dde7e5; + --border: #bfd0cd; + --divider: #d6e0de; + --text: #19353a; + --text-muted: #4b666a; + --text-faint: #6f8689; + --primary: #0f5c63; + --primary-soft: #e2eef0; + --primary-strong: #0b4b51; + --accent: #c46f34; + --accent-soft: #f7e5d8; + --accent-strong: #9a5328; + --secondary: #327087; + --secondary-soft: #e1edf2; + --support: #7d4bb3; + --support-soft: #efe6fa; + --link: #0b6d7c; + --success: #2f7d57; + --success-soft: #e1f1e7; + --warning: #9a6a12; + --warning-soft: #f6ecd2; + --danger: #9b3f54; + --danger-soft: #f4dde2; + --info: #3c6ca8; + --info-soft: #e0ebf8; + --on-primary: #f7fbfb; + --shadow: 0 18px 42px rgba(14, 37, 43, 0.14); + --radius: 1rem; + --radius-sm: 0.8rem; + --font-body: 'Inter', system-ui, sans-serif; + --font-display: 'Instrument Serif', Georgia, serif; +} + +* { box-sizing: border-box; } +body { + margin: 0; + font-family: var(--font-body); + color: var(--text); + background: radial-gradient(circle at top left, rgba(15,92,99,0.10), transparent 30%), radial-gradient(circle at top right, rgba(196,111,52,0.12), transparent 28%), var(--bg); +} + +a { color: var(--link); } +.container { max-width: 1180px; margin: 0 auto; padding: 32px; } +.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } +.muted { color: var(--text-muted); } +.btn { border-radius: 999px; padding: 0.85rem 1.1rem; border: 1px solid transparent; font: inherit; cursor: pointer; } +.btn-primary { background: var(--primary); color: var(--on-primary); } +.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } +.btn-accent { background: var(--accent-soft); color: var(--accent-strong); } +.input, select, textarea { width: 100%; padding: 0.95rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; } +.focus:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 65%, white 35%); outline-offset: 2px; } diff --git a/petrol_test.html b/petrol_test.html new file mode 100644 index 0000000..e2f0947 --- /dev/null +++ b/petrol_test.html @@ -0,0 +1,717 @@ + + + + + + Deep Petrol – Community Portal + + + + +
+
+
+
+ +
+ Petrol Commons + Community portal for events & volunteers +
+
+ +
+
+ +
+
+
+
+ + Inclusive spaces in deep petrol +
+

Coordinate volunteers and events with a calm, readable interface.

+

+ This one-page preview shows how deep petrol, a warm complementary accent, and a small set of support colours behave in a realistic layout with login, events, and community context. +

+ +
+ + + +
+ +
+ Primary: deep petrol for key actions and brand. + Accent: warm clay for emphasis and highlights. + Support: muted violet for tags and tertiary UI. +
+
+ + +
+ +
+
+

Upcoming

+

Events and meetups

+

This section shows how petrol and its supporting colours work in a more content-heavy context with lists, dates, and tags.

+
    +
  • +
    21 Jul · 19:00
    +
    +
    Queer Tech & Privacy Meetup
    +
    Köln · Hybrid · Organised by Petrol Commons
    +
    + Tech + Privacy + Community +
    +
    +
    • +
  • +
    28 Jul · 17:30
    +
    +
    Volunteer Onboarding
    +
    Köln · In person · Accessibility-first
    +
    + Onboarding + Training +
    +
    +
    • +
+
+ + +
+
+ + +
+ + \ No newline at end of file diff --git a/preview_dark_hero.png b/preview_dark_hero.png new file mode 100644 index 0000000..9959df6 Binary files /dev/null and b/preview_dark_hero.png differ diff --git a/preview_h2_light.png b/preview_h2_light.png new file mode 100644 index 0000000..fd9af1d Binary files /dev/null and b/preview_h2_light.png differ diff --git a/preview_light_hero.png b/preview_light_hero.png new file mode 100644 index 0000000..c4e906f Binary files /dev/null and b/preview_light_hero.png differ diff --git a/preview_orange_s3_hero.png b/preview_orange_s3_hero.png new file mode 100644 index 0000000..85b9fd1 Binary files /dev/null and b/preview_orange_s3_hero.png differ diff --git a/preview_orchid_hero.png b/preview_orchid_hero.png new file mode 100644 index 0000000..220a08b Binary files /dev/null and b/preview_orchid_hero.png differ diff --git a/preview_orchid_programm.png b/preview_orchid_programm.png new file mode 100644 index 0000000..1108d5e Binary files /dev/null and b/preview_orchid_programm.png differ diff --git a/preview_s3_hero.png b/preview_s3_hero.png new file mode 100644 index 0000000..4cd94ce Binary files /dev/null and b/preview_s3_hero.png differ diff --git a/preview_s4_hero.png b/preview_s4_hero.png new file mode 100644 index 0000000..0c005ed Binary files /dev/null and b/preview_s4_hero.png differ diff --git a/preview_s4_programm.png b/preview_s4_programm.png new file mode 100644 index 0000000..e9dda4f Binary files /dev/null and b/preview_s4_programm.png differ diff --git a/preview_v2_hero.png b/preview_v2_hero.png new file mode 100644 index 0000000..45cbb3d Binary files /dev/null and b/preview_v2_hero.png differ diff --git a/purple.html b/purple.html new file mode 100644 index 0000000..29f5a81 --- /dev/null +++ b/purple.html @@ -0,0 +1,1099 @@ + + + + + + + Purple Lavender Pink Orange Login Demo + + + + + +
+
+
+ + Lavender +
+ +
+

Clear space. Calm colour.

+

Work with focus, not friction.

+

+ A calmer workspace for planning, tracking and finishing what matters— + without clutter, noise or unnecessary decisions. +

+ +
    +
  • + + Clear visual hierarchy and predictable navigation +
    • +
  • + + Low-noise colours designed for longer sessions +
    • +
  • + + Readable typography with generous spacing +
    • +
+
+ +
+ Private by design + Accessible + Distraction-aware +
+
+ + +
+ + + + \ No newline at end of file diff --git a/signal-graphite-rose-style-guide.pdf b/signal-graphite-rose-style-guide.pdf new file mode 100644 index 0000000..d309ade --- /dev/null +++ b/signal-graphite-rose-style-guide.pdf @@ -0,0 +1,74 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R /F2 3 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font +>> +endobj +4 0 obj +<< +/Contents 8 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 7 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +5 0 obj +<< +/PageMode /UseNone /Pages 7 0 R /Type /Catalog +>> +endobj +6 0 obj +<< +/Author (anonymous) /CreationDate (D:20260721231410+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20260721231410+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (Signal \205 Graphite & Rose Accent Style Guide) /Trapped /False +>> +endobj +7 0 obj +<< +/Count 1 /Kids [ 4 0 R ] /Type /Pages +>> +endobj +8 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 3157 +>> +stream +Gatm=D0+aG&cR6o!gB*sI&X(i.I,0KIaDlV;l@=>;t?d:)*oMn+smU+!*WDac#<&'5k7H<[SBCH'9=GI(V>U]B-43[dDf;KuUe+2PQ&6[PM)',4^i`=!;*n5,aUWind&T:/i#k/((mCB0%;J0QicSUA2YbYgV[)tBkd<&oKX]IMCF7B]uiTMNoN+Dcc5KUjDMUO=W%*J05.(4\EAr6\9A<]*1T]An3Ie07mj.gj-YL,_a8pf#9b1)HU.:3)'`S,kZ;tL$:2d"7"pf/XLT4D%PDTA=SeBm'@ES7927j1U,hb#8e*4GXW`kc5A1foShS\o[=$75*cd7\51._lM5[9]Qq9W,VFAKlMXjKH#JQ7A\Q:s-*O?IX2"qhRUu;[Mp/4@9YiaZLq`Q\NM'uo&*u>"Yp?c)DpH14+?u\pT"qJ+;[)O"'n(OY#NT9)AcSfuXo6)ur"foJZ-@/:07^b.$ge1LT;:G8;`j$t-7$mN,E&fO>Q.TgAKP:aIfGLku`uPn+EnHT#^J[1i19sImELM]s3\T^D`1F[5QA_#4$M,f%FBKdrDBcqkP&0#Js0`uI(._0cL:8!NVNi)O@A1[D!bF*>0YoH[kF?-8l"\]6fp^q3r4oL&;<9R9Fp-4pF;]qoC,d4;or45,B4SG;7SF_o7=RLkcRY\uX.^#>b5J59,t=bh![E]<*%2aql#P?nkn;8jSU"Z%/ik:m4>H$cu`'dkG8dR.kCr.l6IM*8fsT.ke8TQkM1:g=4XPh0SV8m1a)4j1lj(N^e)6Xe2$TIj`ithJsZR8o*g"Jr!>[>>d=CI?UQ.EWkFPo8_Wr$@If&!s2e%_)pL\mDLL?'*o1/cY"cR^5>ZQJWIl4kC>\:=12tsKYQQYMKdu\%&<+3^r%4kqTD/<"rM*18R.cl_l8PH[4IGnBpNN:QA3*tTQD^\P$BU3Ie+(AWgV=!VR#a_3E=H.0J/Z/j!b/Z,p^moH2?oLV_pT.3U+ikQYipVQNt@S8'gP]]2G'^5!!cJlN8-W0YsZ/I=S5B=;7K6sd%2DdjCmUoIg2m#P(iZ]Jh,412ZH-]?d#1nLT9WEK&7l,9X&oNbcIrS!VH'GaoNq*O5L]Ba;hY(=5Y5JR\qa(re^L1'^u1j/WBa8!i9'CTmU<>C\tM=ZJQnmRNZ#`n1tYb*&A$10\)4l5+(s##^Md;]RfsLgZll^O-^k]'#a'9/FG%a#PQBIk]HnNoSFa7L:p](r"l6A/]1\EJ-B,iEW3Ub*r%`!V=eSRRHY/AHWC3:A4!c@g2PNFZTKbFL+>,S7_X5h#7oD^Ah=;"CHeiqk1m]*>dM.Qnot%Xi#-TFAmZ+Hcb[^d5]oc4/NDM7rr[\(`1R^]j?)i:HL@u+OW2:l.it(/&c39dWMJ[n>?Ue_(/j%!1;S#=3ctj'Tm!Vg'F$_k5`_Ydc1feCbea^\)1f:1)'=!kG!gj3##mEK-,Fbn;!a*J0!rn^gVsW&3jGZf]"2)"r1Mbu9Ej>Sb5A&YqgPqebObh,R:g^I@,G>FgJ[mS!J^R;_]%"kjO2XZm[:LB#T4OrgW?AXPMd$EMaVUkJ=oFh9T)jn0Vi.cce%=IImB2OfOOC\?g6^lN:c8dHQD%>Z\md%]Jp/ciquoqnCCQ8[qoguG=NoISqT!Uib#887;C_:2B6TSmZ"IKK;&babP7H63eSS1shla`,2*j"-$^`^!WmYrL\#48s'+"BVU:jkE93%j20P!q+-k6Q?h`aT.(OTHhK[:c0!)VLEAZ%XW.TE);2/9G\cdc;$\D7>R.%G4fneZR:jMll.GIiQ8XRX$I`Wq'C^5pBJI!&8Mk!b>72mJL%G)5Jbgm.d6#5dS@[iU>To9RGTBc>60f.pb'VWU!A&7\_a$\V9Y[_!dA#!?nS`C+/5Ug1Y4sjP!$b%s&:pCEr"pF_^ft:ns+-5cu'`dWU?7Pi`d<&#Tm52NQM+PECOsb--X(CRogindUful\,>p4qsh(%eGf+XHn];mZbN%o9ThZ^mrM\'Sq^W81C:.r:)Y0*ZKWJD"RB5_n04!8,pGtKk%2t:>T_aA8AG'jb;"lBO5:\Re.LnPXJ_@D2om+Vk,-TO,c4VKCL&-UPuh,iVGWc42\1!hJ11T97qB3/$/EKA?5'hlL()i>BDD`f>GSuIfeiG/fN&BP@]?Ee6pM=SUkh4'C2K2tNZf^k0c1JuWrA!Gpc":M"#p;u9QQ[*k&d=QT',H<9l2eX:t6/m\W]?no&':"+a0`)8'9NZ?X$07bJR?On*DM^7,24*d-VkI;,RmWgInD`_jVVE[b%s!7kI6DmDT]W@F^BY4#U)\!S6YJp$;JS=tu(\Rf(qE+br1nOI#W&r*u@5^50p0)f4:aQ9ZZpa'33YWBf5j#KaCnEMrlUWL*cAb:n[RCKh"&n0&%?"3KhZLceb=q#>C5L:m=H"Q[&U~>endstream +endobj +xref +0 9 +0000000000 65535 f +0000000073 00000 n +0000000114 00000 n +0000000221 00000 n +0000000333 00000 n +0000000536 00000 n +0000000604 00000 n +0000000938 00000 n +0000000997 00000 n +trailer +<< +/ID +[<2f7ee2a9c2c2889588bd7217ae1fc694><2f7ee2a9c2c2889588bd7217ae1fc694>] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 6 0 R +/Root 5 0 R +/Size 9 +>> +startxref +4245 +%%EOF diff --git a/signal-letterhead.pdf b/signal-letterhead.pdf new file mode 100644 index 0000000..baba93e --- /dev/null +++ b/signal-letterhead.pdf @@ -0,0 +1,74 @@ +%PDF-1.3 +% ReportLab Generated PDF document http://www.reportlab.com +1 0 obj +<< +/F1 2 0 R /F2 3 0 R +>> +endobj +2 0 obj +<< +/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font +>> +endobj +3 0 obj +<< +/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font +>> +endobj +4 0 obj +<< +/Contents 8 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 7 0 R /Resources << +/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ] +>> /Rotate 0 /Trans << + +>> + /Type /Page +>> +endobj +5 0 obj +<< +/PageMode /UseNone /Pages 7 0 R /Type /Catalog +>> +endobj +6 0 obj +<< +/Author (anonymous) /CreationDate (D:20260721231410+00'00') /Creator (ReportLab PDF Library - www.reportlab.com) /Keywords () /ModDate (D:20260721231410+00'00') /Producer (ReportLab PDF Library - www.reportlab.com) + /Subject (unspecified) /Title (Signal Letterhead) /Trapped /False +>> +endobj +7 0 obj +<< +/Count 1 /Kids [ 4 0 R ] /Type /Pages +>> +endobj +8 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 356 +>> +stream +Gar?-5u.P:&;BTNMK^gh[*f\/iM6\MiX))nnM59Ch3rL[g(GOua'2TqKU=YlB(F2n1K0--5-fOC".g6F?R0._[>#ZZ1"7-XC68&XKT8QI.&A?8BaNlV?9h7HHn(!u5(#;39,8U<0u7Xu9k+gr!_XUQ:Khh//tp"PY("&p=+#3ASsu)Kl"#0g6TYV`dj>Q?dL9k@B^a`b24BO.iZTXlU=U?epbQNk).M3Mi'"W1A`6"9D_)kG4%$p:qT&V(YL4lER6hs'FFS_)endstream +endobj +xref +0 9 +0000000000 65535 f +0000000073 00000 n +0000000114 00000 n +0000000221 00000 n +0000000333 00000 n +0000000536 00000 n +0000000604 00000 n +0000000909 00000 n +0000000968 00000 n +trailer +<< +/ID +[<7f521c32a5e7a2cdaecc9c55911b7454><7f521c32a5e7a2cdaecc9c55911b7454>] +% ReportLab generated PDF document -- digest (http://www.reportlab.com) + +/Info 6 0 R +/Root 5 0 R +/Size 9 +>> +startxref +1414 +%%EOF diff --git a/ssh-copy-id patsy@82.165.255.223 b/ssh-copy-id patsy@82.165.255.223 new file mode 100644 index 0000000..674a5ad --- /dev/null +++ b/ssh-copy-id patsy@82.165.255.223 @@ -0,0 +1,5 @@ +ssh-copy-id patsy@82.165.255.223 + +ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIOUfUWtp6chqoC+gHHrDBk1qkLcYoZ3wqWKNvuXiKtse patsy@laptop + +echo "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIOUfUWtp6chqoC+gHHrDBk1qkLcYoZ3wqWKNvuXiKtse patsy@laptop" >> ~/.ssh/authorized_keys \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..9345476 --- /dev/null +++ b/style.css @@ -0,0 +1,501 @@ +/* Art direction: glamorous editorial neon → precise, atmospheric, web-friendly + Palette: dark violet-blue base with pink/cyan/lime accents + Typography: Bodoni Moda + Manrope for display and structure + Density: spacious but readable */ + +:root, +[data-theme="light"] { + --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); + --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); + --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); + --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); + --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); + --text-2xl: clamp(2.4rem, 1.6rem + 3vw, 4.8rem); + + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + + --font-display: 'Bodoni Moda', Georgia, serif; + --font-body: 'Manrope', 'Inter', sans-serif; + + --color-bg: #f6f1fb; + --color-surface: #ffffff; + --color-surface-2: #f3ebfa; + --color-surface-offset: #ece3f7; + --color-border: rgba(40, 25, 54, 0.12); + --color-divider: rgba(40, 25, 54, 0.1); + --color-text: #211629; + --color-text-muted: #5d4f6b; + --color-text-faint: #8d80a0; + --color-primary: #c83ca2; + --color-primary-2: #22bce8; + --color-accent: #b4de2c; + --color-highlight: #7f57ff; + --color-text-inverse: #f9f7ff; + --shadow-sm: 0 1px 2px rgba(24, 14, 32, 0.08); + --shadow-md: 0 12px 30px rgba(40, 18, 62, 0.12); + --shadow-lg: 0 24px 48px rgba(32, 16, 49, 0.18); + --radius-sm: 0.375rem; + --radius-md: 0.75rem; + --radius-lg: 1.25rem; + --radius-xl: 1.75rem; + --content-wide: 1200px; + --content-default: 1080px; +} + +[data-theme="dark"] { + --color-bg: #0f1020; + --color-surface: #16172a; + --color-surface-2: #1c1733; + --color-surface-offset: #231b3d; + --color-border: rgba(243, 238, 255, 0.12); + --color-divider: rgba(243, 238, 255, 0.08); + --color-text: #f3eeff; + --color-text-muted: #c4bdd9; + --color-text-faint: #988fb4; + --color-primary: #ff4fbf; + --color-primary-2: #22d7ff; + --color-accent: #d6ff3f; + --color-highlight: #a85cff; + --color-text-inverse: #110f1d; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); + --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.28); + --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.38); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme]) { + --color-bg: #0f1020; + --color-surface: #16172a; + --color-surface-2: #1c1733; + --color-surface-offset: #231b3d; + --color-border: rgba(243, 238, 255, 0.12); + --color-divider: rgba(243, 238, 255, 0.08); + --color-text: #f3eeff; + --color-text-muted: #c4bdd9; + --color-text-faint: #988fb4; + --color-primary: #ff4fbf; + --color-primary-2: #22d7ff; + --color-accent: #d6ff3f; + --color-highlight: #a85cff; + --color-text-inverse: #110f1d; + } +} + +*, *::before, *::after { box-sizing: border-box; } +html { + scroll-behavior: smooth; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} +body { + margin: 0; + min-height: 100vh; + font-family: var(--font-body); + font-size: var(--text-base); + line-height: 1.65; + background: + radial-gradient(circle at top left, rgba(200, 60, 162, 0.12), transparent 28%), + radial-gradient(circle at top right, rgba(34, 188, 232, 0.12), transparent 25%), + linear-gradient(180deg, var(--color-bg), color-mix(in srgb, var(--color-bg) 84%, var(--color-surface-2))); + color: var(--color-text); +} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button, input, textarea { font: inherit; } +button { cursor: pointer; } + +.skip-link { + position: absolute; + left: var(--space-4); + top: -3rem; + z-index: 100; + background: var(--color-surface); + color: var(--color-text); + padding: var(--space-3) var(--space-4); + border-radius: var(--radius-md); +} +.skip-link:focus { top: var(--space-4); } + +:focus-visible { + outline: 2px solid var(--color-primary-2); + outline-offset: 3px; +} + +.container { + width: min(calc(100% - 2rem), var(--content-default)); + margin-inline: auto; +} +.section { + padding-block: clamp(var(--space-12), 10vw, var(--space-24)); +} + +.site-header { + position: sticky; + top: 0; + z-index: 40; + backdrop-filter: blur(14px); + background: color-mix(in srgb, var(--color-bg) 78%, transparent); + border-bottom: 1px solid var(--color-divider); +} +.header-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-4); + min-height: 4.75rem; +} +.brand { + display: inline-flex; + align-items: center; + min-height: 44px; +} +.brand-mark { + width: 180px; + height: 48px; + overflow: visible; +} +.brand-word { + fill: url(#fallback); + font-family: var(--font-display); + font-size: 34px; + letter-spacing: 0.01em; +} +.brand-mark circle, +.brand-mark path { + stroke: var(--color-primary-2); + fill: none; + stroke-width: 1.5; +} +.main-nav { + display: flex; + align-items: center; + gap: var(--space-4); + flex-wrap: wrap; +} +.main-nav a, +.theme-toggle { + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + padding-inline: var(--space-3); + color: var(--color-text-muted); +} +.main-nav a:hover, +.main-nav a:focus-visible, +.theme-toggle:hover, +.theme-toggle:focus-visible { + color: var(--color-text); +} +.theme-toggle { + border: 1px solid var(--color-border); + border-radius: var(--radius-full, 999px); + background: color-mix(in srgb, var(--color-surface) 86%, transparent); +} + +.hero { + position: relative; + overflow: clip; +} +.hero-grid { + display: grid; + gap: var(--space-10); + align-items: center; +} +.hero-copy h1, +h1, h2 { + font-family: var(--font-display); + line-height: 0.96; + letter-spacing: -0.03em; + margin: 0; +} +.hero-copy h1 { + font-size: var(--text-2xl); + max-width: 10ch; + background: linear-gradient(100deg, var(--color-primary), var(--color-highlight), var(--color-primary-2)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} +.hero-copy .lead { + max-width: 62ch; + color: var(--color-text-muted); +} +.eyebrow, +.section-kicker, +.panel-label { + margin: 0 0 var(--space-3); + font-size: var(--text-xs); + text-transform: uppercase; + letter-spacing: 0.22em; + color: var(--color-accent); +} +.button-row { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); + margin-top: var(--space-6); +} +.button { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 0.85rem 1.2rem; + border-radius: var(--radius-full, 999px); + border: 1px solid var(--color-border); +} +.button-primary { + background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2)); + color: var(--color-text-inverse); + border-color: transparent; + box-shadow: var(--shadow-md); +} +.button-secondary { + background: color-mix(in srgb, var(--color-surface) 80%, transparent); +} +.hero-panel { + display: grid; + gap: var(--space-4); +} +.card, +.panel-card { + background: color-mix(in srgb, var(--color-surface) 88%, transparent); + border: 1px solid var(--color-border); + border-radius: var(--radius-xl); + box-shadow: var(--shadow-sm); +} +.panel-card, +.card { + padding: var(--space-6); +} +.glow-card { + position: relative; +} +.glow-card::after { + content: ""; + position: absolute; + inset: auto 14% -10% 14%; + height: 40px; + background: radial-gradient(circle, rgba(34, 215, 255, 0.32), transparent 70%); + filter: blur(18px); +} +.stat-list { + display: grid; + gap: var(--space-3); + list-style: none; + padding: 0; + margin: 0; +} +.stat-list li { + display: flex; + justify-content: space-between; + align-items: baseline; + gap: var(--space-4); + padding: var(--space-4) var(--space-5); + background: color-mix(in srgb, var(--color-surface-2) 84%, transparent); + border: 1px solid var(--color-border); + border-radius: var(--radius-lg); +} +.stat-value { + font-family: var(--font-display); + font-size: var(--text-xl); + color: var(--color-primary-2); +} +.stat-label { color: var(--color-text-muted); } + +.hero-orbit { + position: absolute; + border-radius: 50%; + border: 1px dashed color-mix(in srgb, var(--color-primary) 60%, transparent); + opacity: 0.45; +} +.hero-orbit-left { + width: 280px; + height: 280px; + left: -80px; + top: 15%; +} +.hero-orbit-right { + width: 220px; + height: 220px; + right: -40px; + top: 10%; + border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); +} + +.split-section, +.showcase-grid, +.content-grid, +.footer-grid, +.feature-grid { + display: grid; + gap: var(--space-6); +} +.section-heading { + margin-bottom: var(--space-6); +} +.feature-card { + position: relative; + overflow: hidden; +} +.feature-card::before { + content: ""; + position: absolute; + top: 1rem; + right: 1rem; + width: 0.8rem; + height: 0.8rem; + border-radius: 50%; + background: var(--color-primary); + box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 55%, transparent); +} +.feature-card.accent-cyan::before { background: var(--color-primary-2); } +.feature-card.accent-lime::before { background: var(--color-accent); } +.text-link { + display: inline-flex; + margin-top: var(--space-3); + color: var(--color-primary-2); +} +.large-card { + background: + linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-primary-2) 8%, var(--color-surface)) 100%); +} +.drop-cap::first-letter { + float: left; + font-family: var(--font-display); + font-size: 4rem; + line-height: 0.9; + padding-right: 0.5rem; + color: var(--color-primary); +} +blockquote { + margin: var(--space-6) 0 0; + padding-left: var(--space-4); + border-left: 1px solid color-mix(in srgb, var(--color-primary-2) 55%, transparent); + color: var(--color-text-muted); +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: var(--space-4); + font-size: var(--text-sm); +} +th, td { + text-align: left; + padding: var(--space-3); + border-bottom: 1px solid var(--color-divider); +} +th { color: var(--color-text-muted); font-weight: 700; } + +.contact-form { + display: grid; + gap: var(--space-4); + margin-top: var(--space-4); +} +.form-field { + display: grid; + gap: var(--space-2); +} +label { + font-size: var(--text-sm); + color: var(--color-text-muted); +} +input, +textarea, +summary { + border-radius: var(--radius-md); +} +input, +textarea { + width: 100%; + border: 1px solid var(--color-border); + background: color-mix(in srgb, var(--color-surface-2) 82%, transparent); + color: var(--color-text); + padding: 0.9rem 1rem; +} +textarea { resize: vertical; } +input::placeholder, +textarea::placeholder { color: var(--color-text-faint); } + +.list-card ul { + padding-left: 1.2rem; + margin: var(--space-4) 0 0; +} +.list-card li + li { margin-top: var(--space-2); } + +details { + margin-top: var(--space-4); + border-top: 1px solid var(--color-divider); + padding-top: var(--space-4); +} +summary { + cursor: pointer; + color: var(--color-primary-2); +} + +.site-footer { + border-top: 1px solid var(--color-divider); +} +.site-footer address { + font-style: normal; + color: var(--color-text-muted); +} +.site-footer a { + color: var(--color-primary-2); +} + +@media (min-width: 760px) { + .hero-grid, + .split-section, + .footer-grid { + grid-template-columns: 1.2fr 0.8fr; + } + .feature-grid, + .content-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .showcase-grid { + grid-template-columns: 1.2fr 0.8fr; + } + .showcase-grid .large-card { + grid-row: span 2; + } +} + +@media (min-width: 1024px) { + .feature-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + +@media (max-width: 759px) { + .header-inner { + flex-wrap: wrap; + padding-block: var(--space-3); + } + .main-nav { + width: 100%; + justify-content: space-between; + } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8e7b59f --- /dev/null +++ b/styles.css @@ -0,0 +1,237 @@ +/* ========================================================================== + CHRYSTAL MATH — GENERAL-PURPOSE STYLESHEET + "Calculated Chaos." brand system v1.1 + Drop this file (+ the /fonts folder next to it) into any project. + All fonts: SIL Open Font License 1.1 — free for commercial use. + ========================================================================== */ + +/* -------------------------------------------------------------------------- + 1. FONTS (self-hosted, no external requests) + -------------------------------------------------------------------------- */ +@font-face{ + font-family:'Bodoni Moda'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:500; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Medium.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:700; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-Bold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:800; font-style:normal; font-display:swap; + src:url('fonts/BodoniModa-ExtraBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:400; font-style:italic; font-display:swap; + src:url('fonts/BodoniModa-Italic.woff2') format('woff2'); +} +@font-face{ + font-family:'Bodoni Moda'; font-weight:600; font-style:italic; font-display:swap; + src:url('fonts/BodoniModa-SemiBoldItalic.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Medium.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/Poppins-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; + src:url('fonts/Poppins-Bold.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:400; font-style:normal; font-display:swap; + src:url('fonts/Fraunces-Regular.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:600; font-style:normal; font-display:swap; + src:url('fonts/Fraunces-SemiBold.woff2') format('woff2'); +} +@font-face{ + font-family:'Fraunces'; font-weight:600; font-style:italic; font-display:swap; + src:url('fonts/Fraunces-SemiBoldItalic.woff2') format('woff2'); +} + +/* -------------------------------------------------------------------------- + 2. DESIGN TOKENS + -------------------------------------------------------------------------- */ +:root{ + /* core gradient colors, from the logo */ + --chaos-pink: #F03A82; + --chaos-pink-deep: #6F235C; + --chaos-orchid: #B744C4; + --chaos-violet: #645EE9; + --chaos-cyan: #02AFF1; + --chaos-cyan-deep: #096089; + --chaos-gold: #E3B63E; + + /* background — Mitternachtsblau, darkened for max color pop */ + --bg: #070C1F; + --bg-raised: #0D1430; /* one step up, for cards/panels sitting on --bg */ + --bg-graphite: #18171C; /* alt background, kept for reference */ + --bg-aubergine: #200C24; /* alt background, kept for reference */ + + /* text */ + --ink: #F5F1EA; + --ink-muted: #ACA7C0; + --ink-faint: rgba(245,241,234,.5); + + /* borders / dividers */ + --line: rgba(245,241,234,.12); + --line-strong: rgba(245,241,234,.22); + + /* fonts */ + --font-display: 'Bodoni Moda', 'Times New Roman', serif; + --font-sans: 'Poppins', 'Helvetica Neue', sans-serif; + --font-accent: 'Fraunces', 'Georgia', serif; + + /* signature gradient */ + --grad-main: linear-gradient(100deg, var(--chaos-pink) 0%, var(--chaos-orchid) 45%, var(--chaos-violet) 60%, var(--chaos-cyan) 100%); + + /* spacing scale */ + --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; + --space-5: 40px; --space-6: 64px; --space-7: 96px; + + --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px; +} + +/* -------------------------------------------------------------------------- + 3. RESET & BASE + -------------------------------------------------------------------------- */ +*, *::before, *::after{ box-sizing:border-box; } +html{ scroll-behavior:smooth; } +body{ + margin:0; + background:var(--bg); + color:var(--ink); + font-family:var(--font-sans); + font-size:16px; + line-height:1.65; + -webkit-font-smoothing:antialiased; +} +img, svg{ max-width:100%; display:block; } +a{ color:var(--chaos-cyan); text-decoration:none; } +a:hover{ color:var(--chaos-pink); } + +h1,h2,h3,h4{ + font-family:var(--font-display); + font-weight:700; + line-height:1.08; + margin:0 0 var(--space-3); + color:var(--ink); +} +h1{ font-size:clamp(40px,6vw,72px); font-weight:800; } +h2{ font-size:clamp(30px,4.4vw,46px); } +h3{ font-size:22px; font-weight:600; } +h4{ font-size:17px; font-weight:600; } + +p{ margin:0 0 var(--space-3); color:var(--ink-muted); max-width:65ch; } +p.lead{ font-size:1.15em; color:var(--ink); } + +blockquote{ + font-family:var(--font-accent); font-style:italic; font-weight:600; + color:var(--chaos-pink); font-size:1.4em; line-height:1.4; margin:0; +} + +::selection{ background:var(--chaos-gold); color:#241708; } + +/* -------------------------------------------------------------------------- + 4. TEXT UTILITIES + -------------------------------------------------------------------------- */ +.text-gradient{ + background:var(--grad-main); + -webkit-background-clip:text; background-clip:text; color:transparent; +} +.eyebrow{ + font-family:var(--font-sans); font-weight:600; font-size:.78em; + letter-spacing:.22em; text-transform:uppercase; color:var(--chaos-gold); + margin-bottom:var(--space-2); display:block; +} +.text-muted{ color:var(--ink-muted); } +.text-pink{ color:var(--chaos-pink); } +.text-cyan{ color:var(--chaos-cyan); } +.text-gold{ color:var(--chaos-gold); } +.font-accent{ font-family:var(--font-accent); font-style:italic; font-weight:600; } + +/* -------------------------------------------------------------------------- + 5. LAYOUT HELPERS + -------------------------------------------------------------------------- */ +.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; } +.section{ padding:var(--space-7) 0; } +.card{ + background:var(--bg-raised); + border:1px solid var(--line); + border-radius:var(--radius-md); + padding:var(--space-4); +} +.divider{ height:1px; background:linear-gradient(90deg, var(--chaos-gold), transparent 70%); margin:var(--space-4) 0; border:none; } +.grid{ display:grid; gap:var(--space-3); } +.grid-2{ grid-template-columns:repeat(2,1fr); } +.grid-3{ grid-template-columns:repeat(3,1fr); } +.grid-4{ grid-template-columns:repeat(4,1fr); } +@media(max-width:820px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } + +/* -------------------------------------------------------------------------- + 6. BUTTONS + -------------------------------------------------------------------------- */ +.btn{ + display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:13.5px; + letter-spacing:.04em; padding:14px 28px; border-radius:var(--radius-pill); + border:1px solid transparent; cursor:pointer; transition:.2s ease; +} +.btn-primary{ background:var(--chaos-gold); color:#241708; } +.btn-primary:hover{ background:#f0c85a; color:#241708; } +.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } +.btn-ghost:hover{ border-color:var(--chaos-cyan); color:var(--chaos-cyan); } + +/* -------------------------------------------------------------------------- + 7. TAGS / LABELS / SWATCHES + -------------------------------------------------------------------------- */ +.tag{ + display:inline-block; font-size:11px; font-weight:700; letter-spacing:.08em; + text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); + background:var(--chaos-gold); color:#241708; +} +.swatch{ + border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); background:var(--bg-raised); +} +.swatch .fill{ height:96px; } +.swatch .meta{ padding:14px 16px; } +.swatch .name{ font-weight:600; font-size:14px; color:var(--ink); } +.swatch .hex{ font-family:monospace; font-size:12.5px; color:var(--ink-muted); } + +/* -------------------------------------------------------------------------- + 8. NAV (optional, for one-pagers / sites) + -------------------------------------------------------------------------- */ +.nav{ + position:sticky; top:0; z-index:50; + background:rgba(7,12,31,.75); backdrop-filter:blur(10px); + border-bottom:1px solid var(--line); +} +.nav .wrap{ display:flex; align-items:center; gap:24px; padding:16px 28px; } +.nav .brand{ font-family:var(--font-display); font-weight:700; font-size:19px; margin-right:auto; } +.nav a{ + font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--ink-muted); +} +.nav a:hover{ color:var(--chaos-cyan); } + +/* -------------------------------------------------------------------------- + 9. PRINT SUPPORT + -------------------------------------------------------------------------- */ +@media print{ + .nav{ display:none; } + body{ background:var(--bg) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } +} diff --git a/test.md b/test.md new file mode 100644 index 0000000..eac4139 --- /dev/null +++ b/test.md @@ -0,0 +1,59 @@ +# Flask Login App – Markdown Guide + +> **Goal** – Build a minimal Flask app that: +> 1. Uses **SQLite** for persistence. +> 2. Has a *login* page, an *index* page (requires auth), and a *logout* route. +> 3. Uses **Flask‑Login** and **Werkzeug** for password hashing. +> 4. Is ready for a CLI‑AI to read and walk you through the implementation. + +--- + +## 1. Project Overview + +- **What it does** – Basic authentication + protected landing page. +- **Tech stack** – Flask, Flask‑Login, Werkzeug, SQLite, Jinja2. +- **Why SQLite** – Zero‑config, file‑based DB that ships with Python. + +--- + +## 2. Prerequisites + +- Python 3.9+ installed. +- `pip` available. +- Optional: `virtualenv` or `venv` for isolation. + +--- + +## 3. Directory Layout (suggested) +my_flask_app/ +│ +├── app/ +│ ├── init.py +│ ├── models.py +│ ├── routes.py +│ ├── templates/ +│ │ ├── base.html +│ │ ├── index.html +│ │ └── login.html +│ └── static/ # optional, for CSS/JS +│ +├── migrations/ # if you later add Flask‑Migrate +│ +├── config.py # app config (secret key, DB URI, etc.) +├── run.py # entry point +├── requirements.txt +└── README.md + + +--- + +## 4. Setting Up the Environment + +1. `python -m venv venv` +2. `source venv/bin/activate` (Linux/macOS) or `venv\Scripts\activate` (Windows). +3. Create `requirements.txt` with: + +```text +Flask +Flask-Login +Werkzeug \ No newline at end of file diff --git a/test.svg b/test.svg new file mode 100644 index 0000000..8ef72d9 --- /dev/null +++ b/test.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/test_perplexity1.html b/test_perplexity1.html new file mode 100644 index 0000000..9f6245c --- /dev/null +++ b/test_perplexity1.html @@ -0,0 +1,604 @@ + + + + + Signal UI – Graphite Rose Accent + + + + +
+
+
+
+ +
+
Signal
+
Graphite & Rose Accent
+
+
+
+
+

Less noise. One clear signal.

+

+ A calm graphite system with a single rose accent for next actions. + Designed for longer sessions, focused work and distraction-aware sign-in. +

+
+
Private by design
+
Accessible
+
Distraction-aware
+
+
    +
  • Clear visual hierarchy and predictable navigation.
    • +
  • Low-noise colours tuned for longer, calmer sessions.
    • +
  • Readable typography with generous spacing and line height.
    • +
+

+ Signal keeps one primary path per screen and avoids surplus decisions near the main action. +

+
+
+ +
+
+
+

Sign in

+

Continue to your distraction-aware workspace.

+
+ +
+ +
+
+ +
+ + +
+

Use the address you registered with this space.

+
+ +
+ +
+ + +
+

We never show passwords in plain text.

+
+
+ +
+ + +
+ +
+
By signing in, you agree to the terms and privacy policy.
+ +
+ +
+ Appearance +
+ + +
+
+ +
+
+ + + + \ No newline at end of file