Colors
The causal.so color palette
causal.so builds its pages on #f9f9f9 with #1a1a1a text and no single accent color. The 10 colors below were measured from the live site.
Measured from causal.so 4 days ago.
Palette
10 colors| Colors | Role | Hex | RGB | Light / dark |
|---|---|---|---|---|
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 on the page background
- 16.53:1 · passes WCAG AA
- Text on the accent
- 17.40:1 · passes WCAG AA
CSS variables
Every color as a custom property, named by role. The dark block is there when the site has a dark theme.
: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;
}For AI agents
The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.
curl -s https://stylepack.ai/packs/causal.so/DESIGN.mdQuestions
What is the causal.so hex code?
The accent color on causal.so is #1a1a1a; the page background is #f9f9f9 and the main text color #1a1a1a. Each is measured from the rendered page, so it is what visitors see, not a value from a style guide.
How do I use the causal.so colors in Tailwind or CSS?
Copy the CSS variables or the Tailwind v4 theme on this page, or download the design pack: it includes tokens.json (W3C design tokens), tokens.css and tailwind.css with the same values.