BetterClaw

---
version: alpha
name: BetterClaw
description: Build AI agents in 60 seconds. No code. No infrastructure.
colors:
  primary: "#171717"
  secondary: "#4c7cfc"
  tertiary: "#3a63cc"
  neutral: "#ffffff"
  brand-truesky-gloxym: "#9cbcfc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Satoshi
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Satoshi
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.013em
  headline-sm:
    fontFamily: Satoshi
    fontSize: 29px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Inter
    fontSize: 23px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.78
rounded:
  sm: 8px
  md: 16px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 40px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "#404040"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    height: 42px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
    height: 42px
  button-link:
    textColor: "#737373"
    rounded: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "#f5f5f5"
    rounded: "{rounded.md}"
    padding: 24px
---

# BetterClaw: Black Primary CTA and Proof-First Hero

## Overview

BetterClaw's UI is calm, technical, and proof-oriented. It uses a white canvas, near-black text, and sparing blue accents to keep attention on claims and pricing. Density is moderate: generous section padding with compact components inside. The tone is enterprise-ready—confidence via numbers, audits, and security posture rather than spectacle.

## Colors

- **primary (#171717):** Core ink for headlines, body text, and icons on light surfaces.
- **secondary (#4c7cfc):** Accent blue for links, active states, and small highlights.
- **tertiary (#3a63cc):** Deeper action blue for hover/pressed states and emphasis chips.
- **neutral (#ffffff):** Canvas and default surface.
- **brand-truesky-gloxym (#9cbcfc):** Pale sky tint for subtle badges and tags.
- **surface (#ffffff):** Page and panel backgrounds.
- **on-surface (#171717):** Default text/controls when placed on surface.

## Typography

- Headlines use Satoshi at medium weight: 48px (lg), 38px (md), 29px (sm) with tight letter-spacing for compact, confident statements. Satoshi in this system is self-hosted (custom). If you cannot load it, use substitutes with similar geometry and x-height such as Plus Jakarta Sans, Manrope, or Outfit.
- Sub-headline level uses Inter at 23px (xs, 500) to bridge headings and body.
- Body copy is Inter 18px/1.78 for comfortable reading on wide pages. Inter is a Google font and can be loaded directly.
- Use Satoshi for numbers, short titles, and KPIs; keep paragraphs and UI labels in Inter for legibility.

## Layout

Spacing uses a compact-to-generous ladder: 6, 14, 24, 40, 64px. Default vertical rhythm is md (24px); section padding uses xl (64px). Use lg (40px) for container gutters and between major blocks; sm (14px) for button groups and form fields; xs (6px) for chip/icon gaps. A responsive 12-column grid with generous gutters suits the content—center columns for copy with wide margins to maintain focus.

## Elevation & Depth

Depth is restrained. Small panels and sticky elements may use the sm shadow; featured or focus states can use the md glow (a soft blue halo) to suggest activity. Larger layers avoid heavy shadows (lg/xl are none). When shadows are not used, contrast is handled by the white surface against dark text and, for emphasis, dark cards with light text.

## Shapes

Two radii define the language: 8px for interactive controls and compact panels; 16px for larger containers and hero/pricing panels. Keep components inside a section on one radius to avoid visual noise. Buttons use 8px; cards and screenshots use 16px.

## Components

- Button – Primary: White fill (#ffffff) with #404040 text, 42px height, 10px 20px padding, 8px radius. Use on dark containers or where a light CTA is required.
- Button – Secondary: Graphite fill (#171717) with white text, same sizing as primary. Use as the dominant CTA on light surfaces.
- Button – Link: Text-only action in #737373; reserve for low-emphasis links.
- Card: Dark container (#171717) with #f5f5f5 text, 16px radius, 24px padding—suited to security callouts, highlights, or inverting sections.

### Hero Headline Block
- Headline: Satoshi 48px/1, letter-spacing -0.025em. Subhead: Inter 18px/1.78. CTA pair: one dark filled (secondary) and one light or outline. Vertical gaps: 24px; section padding: 64px.

### Trust Strip with Security Chips
- Logo carousel followed by a compact grid of security badges. Use 24px padding inside a rounded panel (16px). Icons and labels in Inter 18px, bullets or ticks tinted with secondary blue.

### Segmented Product Toggle
- Three small tabs: "Agent Builder", "Skills Marketplace", "Task Dashboard". 8px radius, 14px horizontal gaps, active tab accented with secondary/tertiary blue, body text in Inter 18px.

### KPI Stats Row
- Five items in a responsive grid. Numerals in Satoshi 29px/500; labels in Inter 18px. 24px internal gaps.

### Comparison Table
- Two columns: "Building it yourself" vs "BetterClaw". Row padding 24px; headers at Inter 23px/500; checkmarks or highlights in #4c7cfc.

### How-It-Works Steps
- Numbered 1–3 with step titles in Satoshi 29px and descriptions in Inter 18px. 24px gap per step; use 8px chips for step markers if needed.

### Pricing Tiers
- Four plans in a grid. Containers use 16px radius and 24px padding. Plan name at Inter 23px/500; price callout can use Satoshi 38px; features in Inter 18px. CTAs at 42px height.

### FAQ Accordion
- Question headings at Inter 23px/500; answers in Inter 18px/1.78. 24px vertical rhythm; icons tinted with tertiary on hover.

## Do's and Don'ts

- Do use secondary (#4c7cfc) for interactive accents, active tabs, and link hovers; don't use it for long text blocks.
- Do pair Satoshi for headings/KPIs with Inter for body; don't set paragraphs or FAQs in Satoshi.
- Do use 64px section padding and 24px internal gaps; don't collapse sections below 40px—copy needs room to scan.
- Do treat the dark filled button (secondary) as the lead CTA on light surfaces; don't mix two filled CTAs of equal weight in one block.
- Do keep radii to 8px for controls and 16px for containers; don't introduce extra corner sizes.
- Do reserve the md blue glow shadow for focus/featured states; don't apply strong glows to every card.

## Agent Prompt Guide

Quick color reference:
- Text: #171717
- Background: #ffffff
- Border: #171717
- Accent: #4c7cfc (primary), #3a63cc (pressed)

1) Build the hero
- Background #ffffff. Container padding 64px top/bottom.
- H1: Satoshi 48px, weight 500, line-height 1, letter-spacing -0.025em, color #171717.
- Subhead: Inter 18px/1.78, color #171717 at 80% opacity if supported.
- CTAs: leading button uses background #171717, text #ffffff, height 42px, padding 10px 20px, radius 8px. Secondary CTA uses background #ffffff, text #404040, same sizing.
- Link accents use #4c7cfc.

2) KPI stats row
- 5-column responsive grid with 24px gaps.
- Number: Satoshi 29px/500, color #171717.
- Label: Inter 18px/1.78, color #171717.
- Row padding: 24px top/bottom.

3) Comparison table (2 columns)
- Table header: Inter 23px/500, color #171717.
- Cells: Inter 18px/1.78 with 24px vertical padding.
- Use check icons or bullets tinted #4c7cfc; emphasize BetterClaw column with a 1px border in #171717 and 16px radius.

4) Pricing grid
- 4 cards, each 16px radius, 24px padding, background #ffffff on page surface.
- Plan title: Inter 23px/500. Price: Satoshi 38px/500.
- Feature list: Inter 18px/1.78 with 14px item gaps.
- CTA: background #171717, text #ffffff, height 42px, radius 8px.
- Optional badge uses #9cbcfc as background with #171717 text.

5) Security callout card
- Use dark card: background #171717, text #f5f5f5, padding 24px, radius 16px.
- Headline: Satoshi 29px/500. Body: Inter 18px/1.78.
- Apply md shadow (soft blue glow) for emphasis.

## Similar Brands

- Vercel — Monochrome base with sparing accent color; BetterClaw is less cinematic and more copy-led.
- Linear — Precise typography and disciplined spacing; BetterClaw leans more into security proof points than animation.
- Retool — Product-first with clear pricing; BetterClaw uses a lighter visual footprint and fewer UI chrome elements.
- OpenAI — Neutral palette and text-driven pages; BetterClaw adds a stronger operational/security narrative.

:root {
  /* Colors */
  --color-primary: #171717;
  --color-secondary: #4c7cfc;
  --color-tertiary: #3a63cc;
  --color-neutral: #ffffff;
  --color-brand-truesky-gloxym: #9cbcfc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.21;
  --text-headline-md-tracking: -0.013em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.012em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.78;
  --font-satoshi: "Satoshi";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 16px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 64px;

  /* Components */
  --button-primary-background-color: var(--color-neutral);
  --button-primary-text-color: #404040;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 20px;
  --button-primary-height: 42px;
  --button-secondary-background-color: var(--color-primary);
  --button-secondary-text-color: var(--color-neutral);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 20px;
  --button-secondary-height: 42px;
  --button-link-text-color: #737373;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-primary);
  --card-text-color: #f5f5f5;
  --card-rounded: var(--radius-md);
  --card-padding: 24px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Build AI agents in 60 seconds. No code. No infrastructure.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.09,
          0.09,
          0.09
        ],
        "hex": "#171717"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.298,
          0.486,
          0.988
        ],
        "hex": "#4c7cfc"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.227,
          0.388,
          0.8
        ],
        "hex": "#3a63cc"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "brand-truesky-gloxym": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.612,
          0.737,
          0.988
        ],
        "hex": "#9cbcfc"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.09,
          0.09,
          0.09
        ],
        "hex": "#171717"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 40,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 64,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Satoshi",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.025,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Satoshi",
        "fontSize": {
          "value": 38,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.013,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Satoshi",
        "fontSize": {
          "value": 29,
          "unit": "px"
        },
        "fontWeight": 500,
        "letterSpacing": {
          "value": -0.012,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 500
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}