Rulebase

---
version: alpha
name: Rulebase
description: AI for customer operations, built for financial services.
colors:
  primary: "#f7f7f4"
  tertiary: "#cc3542"
  neutral: "#1a1716"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ABC Diatype
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.043em
  headline-md:
    fontFamily: ABC Diatype
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: -0.038em
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.006em
rounded:
  sm: 4px
  md: 12px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 100px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "#454343"
    rounded: "{rounded.sm}"
    padding: 6px 14px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 6px 14px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "#1e1e1e"
    rounded: "{rounded.md}"
    padding: 12px 16px
---

# Rulebase: Dark Split Hero with Finance-Grade Type

## Overview

Rulebase's UI presents an enterprise-calm, finance-ready dark theme. The tone is serious and operational, prioritizing clarity over flair. Spacing is compact to mid, supporting dense product storytelling while leaving generous breathing room in hero and section headers. Visual energy comes from white cards over a near-black surface and a sparing compliance-red accent for urgency and status.

## Colors

- Primary (#f7f7f4): Light porcelain for text on dark surfaces and key UI lines.
- Tertiary (#cc3542): Red accent for alerts, errors, active statuses, and key metrics that need attention.
- Neutral (#1a1716): Ink black foundation for pages, hero panels, and dark UI chrome.
- Surface ({colors.neutral}): Surface color alias; use for page backgrounds and large panels.
- On-surface ({colors.primary}): Text and icon color on the dark surface for maximum contrast.

## Typography

- ABC Diatype: Display family for headlines. Self-hosted custom; agents should not attempt to load it directly. Substitutes with similar modern grotesk tone: Hedvig Letters Sans (Google), IBM Plex Sans (Google), or Public Sans (Google).
- Headline levels: headline-lg 42px/1.1 (ABC Diatype, 400, -0.043em) for hero and sectional H1s; headline-md 32px/1.44 (ABC Diatype, 400, -0.038em) for key section leads; headline-sm 24px/1.21 (Inter, 400) and headline-xs 18px/1.22 (Inter, 400) for card titles and UI headings.
- Body: body-md 14px/1.5 (Inter, 400, -0.006em) for paragraphs, captions, and supporting detail. Inter is available from Google Fonts and is the default workhorse for UI text.

## Layout

- Spacing scale: 6, 16, 32, 48, 100px. Compose vertical rhythm on 16/32/48 steps; reserve 100px for hero paddings and section separators.
- Grid model: a simple column grid with gutters aligned to the 16px step; cards and screenshots snap to 32 or 48px outer margins.
- Content density: copy blocks stay compact at 14px; break long paragraphs with 32px spacing and use 48px above section headings.

## Elevation & Depth

- Depth is restrained. Cards use measured shadows: sm for small UI layers and md (0 16px 48px + 0 2px 8px) for floating previews or overlays.
- Large shadows are disabled (lg/xl/inner: none). Hierarchy is primarily conveyed by dark-vs-white surfaces, spacing jumps, and weight/size shifts in type rather than heavy elevation.
- Where depth is unnecessary, rely on the white card background against #1A1716 without borders.

## Shapes

- Radius language: sm 4px for interactive elements (buttons, chips), md 12px for cards and media frames.
- Use 12px consistently for product screenshots and data panels to signal modular, document-like containers; keep smaller actions at 4px to read as controls.

## Components

- Button — Primary: background #ffffff, text #454343, 4px radius, 40px height, 6px 14px padding. Use on dark surfaces for main CTAs ("Schedule a Demo").
- Button — Secondary: text #f7f7f4 on the dark surface, 4px radius, 40px height, 6px 14px padding. Reserve for less-urgent actions on dark backgrounds.
- Button — Link: text #f7f7f4, 0px radius. Inline textual action without a box.
- Card: background #ffffff, text #1e1e1e, 12px radius, 12px 16px padding. Apply sm shadow for standard cards; md shadow for floating previews.

Distinctive components on this page

### Split Hero with Live Preview
- Left panel: surface #1a1716 with headline-lg and body-md; right panel: imagery with a floating white card.
- Primary CTA uses Button — Primary; typical vertical padding 100px.

### Logo Rail
- Row of partner/customer logos inside light 12px-radius chips built from Card; horizontal gaps at 16px, row margin 32–48px.

### Three-Up Capability Cards
- "Quality & Compliance / Revenue / Intelligence" cards using Card token. Title at headline-sm (24px Inter), body at 14px Inter.

### Funnel Timeline Tile
- Sequential status list (e.g., KYC steps) inside a Card. Use body-md for steps; highlight urgent states with #cc3542.

### QA Score List
- Two columns for "Low scores / High scores." Each entry set in body-md with small avatars; list groups live in Cards with 12px radius and sm shadow.

### Coaching Scenario Panel
- White Card with headline-xs for the scenario title and body-md for task steps. Action row uses Button — Primary ("Begin").

### Compliance Badges Strip
- Icon + label items on the dark surface; spacing at 16px; labels in headline-xs for readability.

### Footer Navigation
- Multi-column link lists on #1a1716. Links use Button — Link styling; columns separated by 32px gaps.

## Do's and Don'ts

- Do use #f7f7f4 for all text on #1a1716 surfaces; avoid mid-gray that would reduce contrast.
- Do reserve #cc3542 for alerts, critical statuses, and key emphasis—not for routine links.
- Do keep interactive elements at 4px radius and containers at 12px to preserve control vs. content hierarchy.
- Don't add heavy drop shadows beyond the provided md token; rely on surface contrast and spacing.
- Don't exceed the spacing scale; compose paddings and gaps from 16/32/48, with 100px for hero-level breathing room.
- Don't mix headline families; ABC Diatype is for display, Inter for all supporting headings and body.

## Agent Prompt Guide

Quick colour reference
- Text: #f7f7f4
- Background: #1a1716
- Border (subtle on dark): #f7f7f4
- Accent: #cc3542

1) Build a dark split hero
- Left column: background #1a1716; headline set to ABC Diatype 42px, 400, letter-spacing -0.043em, line-height 1.1, color #f7f7f4. Body: Inter 14px/1.5, color #f7f7f4. Vertical padding 100px. Primary button: 40px height, 6px 14px, radius 4px, background #ffffff, text #454343.
- Right column: image. Overlay a Card (background #ffffff, text #1e1e1e, radius 12px, padding 12px 16px) with md shadow.

2) Create a logo rail
- Container on #1a1716 with 32px top/bottom margin. Each logo sits in a Card: background #ffffff, radius 12px, padding 12px 16px, sm shadow. Gaps 16px.

3) Three feature cards
- Grid with 32px gaps. Each Card uses white background, radius 12px, padding 12px 16px. Title at Inter 24px/1.21 (headline-sm), body at Inter 14px/1.5. Any alert badges use #cc3542.

4) Metrics pair
- Two Cards side-by-side, 32px gap. Number set in ABC Diatype 32px (headline-md), label in Inter 14px. Cards: white background, radius 12px, sm shadow; section heading above uses ABC Diatype 32px.

## Similar Brands

- Stripe: similarly disciplined dark-on-light modularity and tight sans-serif display, but Stripe leans more into color gradients; Rulebase stays monochrome with a single red accent.
- Intercom: product storytelling through white cards over dark ground; Intercom uses friendlier spacing and blues, while Rulebase keeps finance-serious density.
- Front: operational SaaS with restrained visuals and strong typography; Front is brighter overall, Rulebase is darker and more compliance-toned.
- Mercury: fintech site with dark surfaces and crisp grotesk headings; Mercury is more expressive with motion, Rulebase is more utilitarian and detail-heavy.

:root {
  /* Colors */
  --color-primary: #f7f7f4;
  --color-tertiary: #cc3542;
  --color-neutral: #1a1716;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 42px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: -0.043em;
  --text-headline-md-size: 32px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.44;
  --text-headline-md-tracking: -0.038em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.006em;
  --font-abc-diatype: "ABC Diatype";
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 12px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 48px;
  --spacing-xl: 100px;

  /* Components */
  --button-primary-background-color: #ffffff;
  --button-primary-text-color: #454343;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 6px 14px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 6px 14px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: #1e1e1e;
  --card-rounded: var(--radius-md);
  --card-padding: 12px 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "AI for customer operations, built for financial services.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.969,
          0.957
        ],
        "hex": "#f7f7f4"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.8,
          0.208,
          0.259
        ],
        "hex": "#cc3542"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.102,
          0.09,
          0.086
        ],
        "hex": "#1a1716"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.102,
          0.09,
          0.086
        ],
        "hex": "#1a1716"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.969,
          0.969,
          0.957
        ],
        "hex": "#f7f7f4"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 48,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 100,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 12,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ABC Diatype",
        "fontSize": {
          "value": 42,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.043,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "ABC Diatype",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.038,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Inter",
        "fontSize": {
          "value": 14,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.006,
          "unit": "em"
        }
      }
    }
  }
}