---
version: alpha
name: "causal.so"
description: "Design system extracted from https://causal.so/ on 2026-10-28"
colors:
  background: "#f9f9f9"
  surface: "#e3e3e5"
  surface-2: "#abdddf"
  surface-3: "#d8d8d8"
  foreground: "#1a1a1a"
  muted-foreground: "#878787"
  primary: "#1a1a1a"
  on-primary: "#ffffff"
  secondary: "#ffc9a0"
  border: "#f2f2f2"
typography:
  headline-display:
    fontFamily: "Manrope Variable"
    fontSize: "60px"
    fontWeight: 700
    lineHeight: "72px"
  headline-lg:
    fontFamily: "Manrope Variable"
    fontSize: "50px"
    fontWeight: 650
    lineHeight: "70px"
  headline-md:
    fontFamily: "Manrope Variable"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "38px"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "22.4px"
  label-md:
    fontFamily: "Manrope Variable"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: "23px"
  button:
    fontFamily: "Manrope Variable"
    fontSize: "20px"
    fontWeight: 600
    lineHeight: "30px"
  code:
    fontFamily: "ui-monospace"
    fontSize: "12px"
    fontWeight: 350
    lineHeight: "18px"
rounded:
  none: "0px"
  2xl: "100px"
  lg: "12px"
  xl: "15px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "44px"
  9: "52px"
  10: "64px"
  11: "120px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#f9f9f9"
    typography: "{typography.button}"
    rounded: "100px"
    height: "36px"
    padding: "0px 14px"
  button-ghost:
    backgroundColor: "#f9f9f9"
    textColor: "#878787"
    typography: "{typography.button}"
    rounded: "0px"
    height: "20px"
    padding: "0px 0px"
  card:
    backgroundColor: "#fcfcfc"
    rounded: "12px"
    padding: "20px"
---

# causal.so

## Overview

Causal AI Canvas Workspace for Creative Projects: An infinite AI canvas for moodboards, notes, files and links. Plan visual projects in one space, with an agent that reads the whole board. Free on Mac.

Soft, well-rounded controls, layered shadows for depth, large display type at 60px / 700, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 2230 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-logo.png`: primary logo lockup
- `screenshots/brand-symbol.png`: possible standalone brand symbol
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-logo-source-hd.png`: primary logo lockup / high-resolution source capture
- `screenshots/media-symbol-source-hd.png`: possible standalone brand symbol / high-resolution source capture
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/desktop-1440-dark.png`: Desktop 1440, dark mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png
- `screenshots/media-logo-transparent.png`: primary logo lockup / transparent.png
- `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp
- `screenshots/media-symbol-upscaled.png`: possible standalone brand symbol / upscaled.png
- `screenshots/media-symbol-transparent.png`: possible standalone brand symbol / transparent.png
- `screenshots/media-symbol-optimized.webp`: possible standalone brand symbol / optimized.webp
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/c-button-1--rest.png`: Button 1 ("What is this app for?"), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("What is this app for?"), focus
- `screenshots/c-close-button-1--rest.png`: Close / dismiss button 1, rest
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Solutions"), rest
- `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Solutions"), hover
- `screenshots/c-overlay-dropdown-menu-1--open.png`: Dropdown menu 1 opened by menu-button "Solutions"
- `screenshots/c-menu-button-1--open.png`: Menu / dropdown trigger 1 ("Solutions"), open (trigger)
- `screenshots/c-breadcrumb-1--rest.png`: Breadcrumb 1 ("Harbour CoffeeRebrand pl"), rest
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Features"), rest
- `screenshots/c-counter-badge-1--rest.png`: Counter / notification dot 1 ("A"), rest
- `screenshots/c-card-1--rest.png`: Card 1 ("ColourCream ground, harb"), rest
- `screenshots/c-code-1--rest.png`: Code block / inline code 1 ("SM-2"), rest
- `screenshots/c-blockquote-1--rest.png`: Blockquote 1 ("I started using it to pl"), rest
- `screenshots/c-image-1--rest.png`: Image / figure 1, rest
- `screenshots/c-carousel-1--rest.png`: Carousel / slider 1, rest
- `screenshots/c-icon-1--rest.png`: Icon 1, rest
- `screenshots/c-button-2--rest.png`: Button 2, rest
- `screenshots/c-button-2--hover.png`: Button 2, hover
- `screenshots/c-button-2--focus.png`: Button 2, focus
- `screenshots/c-button-2--disabled.png`: Button 2, disabled
- `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest
- `screenshots/c-link-2--rest.png`: Text link 2 ("See all"), rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#f9f9f9` | Page background |
| surface | `#e3e3e5` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#abdddf` | Secondary surface |
| surface-3 | `#d8d8d8` | Secondary surface |
| foreground | `#1a1a1a` | Primary text |
| muted-foreground | `#878787` | Secondary text, captions |
| primary | `#1a1a1a` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#ffc9a0` | Secondary accent (amber) |
| border | `#f2f2f2` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#f9f9f9`, `#e3e3e5`, `#abdddf`, `#7f7f87`, `#da6304`, `#1a1a1a`, `#c04737`, `#678975`.

Gradients in use: `radial-gradient(circle, rgb(214, 214, 214) 0.59px, rgba(214, 214, 214, 0) 1.05px)`; `radial-gradient(closest-side, rgb(238, 238, 238), rgb(238, 238, 238) 60%, rgba(0, 0, 0, 0))`; `radial-gradient(circle, rgb(176, 176, 176) 0.65px, rgba(176, 176, 176, 0) 1.15px)`.

The accent `#1a1a1a` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Manrope Variable** for h1, h2, h3, button, label: self-hosted webfont; verify availability and permission; **Manrope** is the suggested stand-in.
- **Inter Variable** for body, label: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.
- **ui-monospace** for code: system font stack.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Manrope Variable | 60px | 700 | 72px | normal |
| headline-lg | Manrope Variable | 50px | 650 | 70px | normal |
| headline-md | Manrope Variable | 24px | 600 | 38px | normal |
| body-md | Inter Variable | 14px | 400 | 22.4px | normal |
| label-md | Manrope Variable | 16px | 500 | 23px | normal |
| button | Manrope Variable | 20px | 600 | 30px | normal |
| code | ui-monospace | 12px | 350 | 18px | normal |

Type scale in use: 12px, 14px, 16px, 20px, 24px, 40px, 50px, 60px. Base body size 14px.

The hero heading (h1) renders at 60px / 700, center aligned, up to 599px wide. Sample: "AI canvas workspace for your ideas.".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 44, 52, 64, 120 (px).
- Flex and grid gaps: 4, 8, 12, 16, 20, 24, 32, 100 px.
- Content max width: 1200px, centred.
- Header: 68px tall, sticky, background `rgba(0, 0, 0, 0)`; 12 nav links at 16px / 400 (Home · Pricing · FoundersPlan the app before you build it. Flows, specs and the launch on one can · DesignersTurn references into a brief. Images, colours and notes side by side. · Content creatorsMap every shoot, scene by scene. Voice memos, shot lists and scr · Canvas · Widgets · MCP).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.01) 0px 1px 10px 0px`
- shadow-2: `rgba(0, 0, 0, 0.04) 0px 2px 12px 0px`
- shadow-3: `rgba(0, 0, 0, 0.04) 0px 2px 10px 0px`
- shadow-4: `rgba(0, 0, 0, 0.01) 0px 1px 10px 0px, rgba(0, 0, 0, 0.06) 0px 4px 10px 0px`

## Shapes

- Buttons: 100px
- Inputs: 100px
- Cards and panels: 12px
- Images and media: 0px
- Radius scale: none 0px, 2xl 100px, lg 12px, xl 15px, full 9999px

## Components

### Button, primary

Background `#1a1a1a`, text `#f9f9f9`, border none, radius 100px, height 36px, padding 0px 14px, 14px / 600. Sample label: "Start for free".

### Button, ghost

Background transparent (it sits on `#f9f9f9`, so place it on that colour), text `#878787`, border none, radius 0px, height 20px, padding 0px 0px, 14px / 500. Sample label: "Solutions".

### Card

Background `#fcfcfc`, border 1px solid #f2f2f2, radius 12px, padding 20px, shadow `rgba(0, 0, 0, 0.01) 0px 1px 10px 0px`. Typical size about 300×218px.

### Link

Colour `#1a1a1a`, no underline at rest, weight 500.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (21 of 87 in the checklist, 41 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 6 state changes, 1 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost-icon-right lg, ghost, ink-icon-right, ghost-with-icon sm, ink-icon-right, ghost sm, ghost-with-icon sm | focus, hover, disabled | "What is this app for?" |
| Icon button | ghost, ghost, ghost, secondary | rest only |  |
| Text link | plain, plain | rest only | "Video brief" |
| Close / dismiss button | ghost | rest only |  |
| Header / navbar | default | rest only | "HomeSolutionsTemplatesPricingR" |
| Navigation link | plain, plain, plain | rest only | "Canvas" |
| Menu / dropdown trigger | ghost | hover, open | "Solutions" |
| Breadcrumb | default | rest only | "Harbour CoffeeRebrand plan" |
| Footer link | plain | rest only | "Features" |
| Counter / notification dot | subtle-filled | rest only | "A" |
| Card | elevated, elevated-media-top, filled, elevated, filled-interactive-media-top, elevated | rest only | "ColourCream ground, harbour re" |
| Code block / inline code | inline | rest only | "SM-2" |
| Blockquote | default | rest only | "I started using it to plan a n" |
| Image / figure | aspect-1, aspect-1, aspect-1.6 | rest only |  |
| Carousel / slider | default | rest only |  |
| Icon | filled-12px, outline-16px, outline-16px | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Footer, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Keyboard key, Video / media embed, Logo strip, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Sticky bar.

## Dark Mode

Both themes exist; the default render is light and the dark theme was reached via class dark. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#f9f9f9` | `#060606` |
| surface | `#e3e3e5` | `#111111` |
| surface-2 | `#abdddf` | `#3d2b1f` |
| surface-3 | `#d8d8d8` | `#1a1a1a` |
| foreground | `#1a1a1a` | `#111111` |
| primary | `#1a1a1a` | `#e5e5e5` |
| on-primary | `#ffffff` | `#111111` |
| secondary | `#ffc9a0` | `#c98a74` |
| border | `#f2f2f2` | `#f2f2f2` |

Dark-theme shadows: `rgba(0, 0, 0, 0.01) 0px 1px 10px 0px`; `rgba(0, 0, 0, 0.04) 0px 2px 12px 0px`; `rgba(0, 0, 0, 0.04) 0px 2px 10px 0px`; `rgba(0, 0, 0, 0.01) 0px 1px 10px 0px, rgba(0, 0, 0, 0.06) 0px 4px 10px 0px`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1200px | 420px | 16px | 60px, 2 lines, center | 68px, 3 links, 1 CTA | media above text | 8→1 col; 6→1 col; 6→1 col | content-width |
| laptop 1024px | 976px | 247px | 15.783px | 53.2px, 2 lines, center | 68px, 6 links, 2 CTA | media above text | 3→1 col; 8→1 col; 6→1 col | content-width |
| tablet 768px | 440px | 168px | 15.4733px | 43.2px, 2 lines, center | 68px, 6 links, 2 CTA | media above text | 3→1 col; 8→1 col; 6→1 col | 1 full-width |
| phone 390px | 342px | 45px | 15.0159px | 28.6px, 2 lines, center | 60px, hamburger (Open menu) | media above text | 5→1 col; 2→1 col; 9→1 col | 4 full-width |

- H1 goes 60px → 28.6px (48%), 2 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 390px); header 68px → 60px.
- Card grids: 3 columns → 1 column on phones (gap 12px → 12px).
- Body text 16px → 15.0159px.
- Phone side gutter 45px.
- 4 buttons stretch full-width on phones.
- Section top padding 48px → 40px.

## Interaction & Motion

190 elements carry transitions; typical 0.15s with cubic-bezier(0.4, 0, 0.2, 1), mostly on opacity, color, rotate. No running keyframe animations at rest.

- Hover on button-primary ("Start for free"): no visible change; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter | 0.3s | cubic-bezier(0.4, 0, 0.2, 1).
- Hover on button-secondary ("Start for free"): no visible change; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter | 0.3s | cubic-bezier(0.4, 0, 0.2, 1).
- Hover on nav-link ("Home"): no visible change; cursor pointer; transition color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter | 0.15s | cubic-bezier(0.4, 0, 0.2, 1).
- Focus on button-primary: outline 2px solid rgb(26, 26, 26), offset 2px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 315px gap, shifted right; transparent, radius 0px, padding 0px 0px, shadow none; appears instantly (no fade); stays open after the pointer leaves (click-away or hover-intent grace).
- 9 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#1a1a1a` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 14px in Inter Variable and headings in Manrope Variable.
- Do match corner radii per element class (buttons 100px, cards 12px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.