Farben
Die Farbpalette von causal.so
causal.so baut seine Seiten auf #f9f9f9 mit Text in #1a1a1a und ohne eine einzelne Akzentfarbe. Die 10 Farben unten wurden auf der Live-Seite gemessen.
vor 4 Tagen auf causal.so gemessen.
Palette
10 Farben| Farben | Rolle | Hex | RGB | Hell / dunkel |
|---|---|---|---|---|
background | Page background | #f9f9f9 | rgb(249 249 249) | #060606 |
surface | Cards, panels, raised or recessed surfaces | #e3e3e5 | rgb(227 227 229) | #111111 |
surface-2 | Secondary surface | #abdddf | rgb(171 221 223) | #3d2b1f |
surface-3 | Secondary surface | #d8d8d8 | rgb(216 216 216) | #1a1a1a |
foreground | Primary text | #1a1a1a | rgb(26 26 26) | #111111 |
muted-foreground | Secondary text, captions | #878787 | rgb(135 135 135) | |
primary | Candidate accent (semantic role inferred) | #1a1a1a | rgb(26 26 26) | #e5e5e5 |
on-primary | Text on the accent | #ffffff | rgb(255 255 255) | #111111 |
secondary | Secondary accent (amber) | #ffc9a0 | rgb(255 201 160) | #c98a74 |
border | Hairlines, dividers, input borders | #f2f2f2 | rgb(242 242 242) | #f2f2f2 |
- Text auf dem Seitenhintergrund
- 16.53:1 · erfüllt WCAG AA
- Text auf dem Akzent
- 17.40:1 · erfüllt WCAG AA
CSS-Variablen
Jede Farbe als Custom Property, benannt nach ihrer Rolle. Der Dark-Block ist da, wenn die Seite ein dunkles Theme hat.
:root {
--color-background: #f9f9f9;
--color-surface: #e3e3e5;
--color-surface-2: #abdddf;
--color-surface-3: #d8d8d8;
--color-foreground: #1a1a1a;
--color-muted-foreground: #878787;
--color-primary: #1a1a1a;
--color-on-primary: #ffffff;
--color-secondary: #ffc9a0;
--color-border: #f2f2f2;
}
[data-theme="dark"] {
--color-background: #060606;
--color-surface: #111111;
--color-surface-2: #3d2b1f;
--color-surface-3: #1a1a1a;
--color-foreground: #111111;
--color-primary: #e5e5e5;
--color-on-primary: #111111;
--color-secondary: #c98a74;
--color-border: #f2f2f2;
}Für KI-Agenten
Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.
curl -s https://stylepack.ai/packs/causal.so/DESIGN.mdFragen
Was ist der Hex-Code von causal.so?
Die Akzentfarbe auf causal.so ist #1a1a1a; der Seitenhintergrund ist #f9f9f9 und die Haupttextfarbe #1a1a1a. Jede ist an der gerenderten Seite gemessen, also das, was Besucher sehen, kein Wert aus einem Styleguide.
Wie nutze ich die Farben von causal.so in Tailwind oder CSS?
Kopiere die CSS-Variablen oder das Tailwind v4 Theme auf dieser Seite, oder lade das Designpaket herunter: Es enthält tokens.json (W3C Design-Tokens), tokens.css und tailwind.css mit denselben Werten.