---
name: "Catalyst"
description: "A high-density financial motion UI and autonomous trading workflow platform featuring clean technical typography, node graph UI accents, and high-contrast data visualization."
version: "1.0"
colors:
  canvas: "#fcfcfc"
  ink: "#141414"
  ink-strong: "#000000"
  black: "#000000"
  neutral-strong: "#212121"
  body: "#4f4f4f"
  surface-soft: "#f7f7f7"
  surface-muted: "#ededed"
  hairline: "#cecece"
  hairline-soft: "#dbdbdb"
  overlay: "rgba(0, 0, 0, 0.35)"
  primary: "#4b6525"
  primary-strong: "#364417"
  on-primary: "#ffffff"
  success: "#87b548"
  warning: "#ee7b00"
  destructive: "#c62e42"
  accent-red: "#f1424e"
  accent-orange: "#f07900"
  accent-yellow: "#ffbe5b"
  accent-blue: "#4181ff"
  accent-sky: "#00a1e1"
  accent-purple: "#9f78e2"
  accent-pink: "#ff8bc7"
typography:
  heading-xl:
    fontFamily: "bdoGrotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "32px"
    fontWeight: "400"
    lineHeight: "36.8px"
    letterSpacing: "-0.64px"
  heading-lg:
    fontFamily: "bdoGrotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "20px"
    fontWeight: "500"
    lineHeight: "20px"
    letterSpacing: "-0.4px"
  body-default:
    fontFamily: "bdoGrotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "20px"
    letterSpacing: "normal"
  body-medium:
    fontFamily: "bdoGrotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "15px"
    fontWeight: "450"
    lineHeight: "24px"
    letterSpacing: "normal"
  caption:
    fontFamily: "bdoGrotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: "13px"
    fontWeight: "500"
    lineHeight: "16px"
    letterSpacing: "normal"
  code-mono:
    fontFamily: "\"DM Mono\", monospace"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "-0.42px"
rounded:
  none: "0px"
  xs: "2px"
  sm: "4px"
  md: "6px"
  lg: "8px"
  xl: "12px"
  full: "9999px"
spacing:
  2xs: "2px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  section: "96px"
  container: "1280px"
components:
  header-nav:
    height: "80px"
    backgroundColor: "{colors.canvas}"
    maxWidth: "{spacing.container}"
    padding: "0px 40px"
    position: "sticky"
    top: "0"
  primary-button:
    backgroundColor: "#fafafa"
    color: "{colors.body}"
    borderRadius: "{rounded.lg}"
    padding: "0px 16px"
    height: "32px"
    fontWeight: "500"
    boxShadow: "0px 0px 0px 2.5px #cecece, 0px 4px 12px -4px rgba(0, 0, 0, 0.18)"
  secondary-button:
    backgroundColor: "{colors.canvas}"
    color: "#3b3b3b"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    height: "28px"
    padding: "0px 8px"
  flow-node-card:
    backgroundColor: "rgba(20, 20, 20, 0.04)"
    color: "{colors.ink}"
    borderRadius: "{rounded.xs}"
    padding: "16px"
    border: "0px solid {colors.ink}"
  tab-list:
    display: "flex"
    gap: "12px"
    height: "24px"
    alignItems: "center"
  tab-item:
    fontSize: "13px"
    fontWeight: "500"
    color: "{colors.body}"
    padding: "0px 12px 8px"
    activeColor: "{colors.ink}"
  market-article-card:
    backgroundColor: "#f0f0f0"
    borderRadius: "{rounded.lg}"
    padding: "8px"
    gap: "6px"
    display: "flex"
  accordion-section:
    padding: "24px 0px"
    maxWidth: "800px"
    borderBottom: "1px solid {colors.hairline-soft}"
source: "https://catalyst.app/"
captured: "2026-10-11T19:02:03.879Z"
---

# DESIGN.md: Catalyst

## Source

- URL: https://catalyst.app/
- Captured: 2026-10-11T19:02:03.879Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Catalyst](./screenshot.png)

## Design Summary

Catalyst uses a modern light-mode financial canvas (#FCFCFC) paired with crisp geometric sans-serif typography (bdoGrotesk) and mono metadata labels. High-contrast dark neutrals (#141414) form structural framing, while vibrant semantic accents (olive green #4B6525, crimson red #C62E42, and orange #F07900) emphasize market positions, trends, and node-editor logic triggers.

## Visual Language

- Subtle off-white backgrounds (#FCFCFC) combined with high-contrast text (#141414) and soft translucent cards.
- Sharp 2px micro-radii on flow/graph node structures contrasting with 6px-8px rounded buttons and controls.
- Node-editor canvas paradigm featuring interactive trigger/action boxes connected via flow logic.
- Dense data layouts featuring numeric values displayed in monospace and medium-weight Grotesk typography.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Sticky top navigation header constrained to max-width 1280px with left brand mark and right waitlist CTA.
- Hero section with 56px top and 96px bottom padding showcasing interactive strategy flow previews.
- Two-column split view combining side market feeds with main trading activity charts and node settings.
- Centrally aligned bottom FAQ accordion container constrained to 800px width.

## Components

- Use primary buttons with a crisp dual-layer ring outline shadow (`0px 0px 0px 2.5px #cecece`) and subtle drop shadow.
- Apply `bdoGrotesk` for primary UI text and headings, switching to `DM Mono` for numeric values, ticker symbols, and codes.
- Render positive financial metrics in olive green (#4B6525) and negative deltas in deep red (#C62E42).
- Keep graph and strategy block components compact with 2px borders or subtle translucent background fills.

## Content Style

- Direct, high-intent financial messaging focusing on strategy automation and market surveillance.
- Clear, concise control labels (e.g., 'Join waitlist', 'Prediction markets', 'Risk-off').
- Dense tabular data displaying complete float values, percentage shifts, and execution triggers.

## Agent Build Instructions

- Configure Tailwind with `bdoGrotesk` as `font-sans` and `DM Mono` as `font-mono`.
- Set default page canvas color to `#FCFCFC` with default text color `#141414`.
- Implement high-density node cards using `bg-black/5` or explicit surface classes with precise `rounded-[2px]` borders.
- Replicate custom shadow rings on interactive buttons: `box-shadow: 0 0 0 2.5px #CECECE, 0 4px 12px -4px rgba(0,0,0,0.18)`.

## Evidence And Confidence

- Observed: Brand font 'bdoGrotesk' present in HTML font definitions and computed styles.
- Observed: Measured button custom shadow `rgb(206, 206, 206) 0px 0px 0px 2.5px`.
- Observed: Palette contains distinct semantic red `#c62e42` / `#f1424e` and green `#4b6525` / `#87b548`.
- Inferred: Micro border radii default to 2px based on measured interactive nodes (`borderRadius: 2px`).

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://catalyst.app/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.