Hebbia

---
version: alpha
name: Hebbia
description: Purpose-built AI for high-stakes finance decisions.
colors:
  primary: "#f4f1eb"
  tertiary: "#465bff"
  neutral: "#130f0f"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Selecta
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Edict Display
    fontSize: 40px
    fontWeight: 390
    lineHeight: 1.26
    letterSpacing: 0.035em
  headline-sm:
    fontFamily: Selecta
    fontSize: 28px
    fontWeight: 390
    lineHeight: 1.21
  headline-xs:
    fontFamily: Selecta
    fontSize: 20px
    fontWeight: 390
    lineHeight: 1.2
  body-md:
    fontFamily: Selecta
    fontSize: 14.5px
    fontWeight: 90
    lineHeight: 1.52
    letterSpacing: 0.01em
rounded:
  sm: 4px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 40px
  xl: 62px
components:
  button-primary:
    backgroundColor: "#f5f5f5"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 10px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    padding: 8px
---

# Hebbia: Grand Serif Headlines on Cinematic Black

## Overview

Hebbia's UI is institutional and cinematic: dark surfaces, ivory typography, and a single blue accent for action. It targets finance teams—investors, bankers, advisors—who expect clarity, proof, and rigor. Density is controlled by small body type and wide section gutters, keeping heavy product content readable on a near-black canvas. When in doubt, prefer restraint: one accent color, measured shadows, and spacious margins around complex UI.

## Colors

- **primary (#f4f1eb):** Ivory text and key UI on dark surfaces; default for body copy and icons.
- **tertiary (#465bff):** Accent blue for CTAs, active states, and standout links.
- **neutral (#130f0f):** Near-black foundation used for page backgrounds and cards.
- **surface ({colors.neutral}):** Alias of neutral; use wherever a surface token is required.
- **on-surface ({colors.primary}):** Alias of primary for elements that sit on dark surfaces (text, icons, borders).

## Typography

- Headline LG — Selecta, 56px/1.2, weight 400. Primary hero and major section titles. Selecta is self-hosted (custom); if you cannot load it, use Inter (Google, 600–700) or Roboto (Google, 500–700) for a clean neo-grotesk feel at the same sizes.
- Headline MD — Edict Display, 40px/1.26, weight ~390, +0.035em tracking. Secondary section headers and large callouts. Edict Display is self-hosted (custom); substitutes: Playfair Display (Google, 600–700), DM Serif Display (Google, 400–700).
- Headline SM — Selecta, 28px/1.21 for tertiary section headers and card titles.
- Headline XS — Selecta, 20px/1.2 for labels and small feature headings.
- Body MD — Selecta, 14.5px/1.52, letter-spacing +0.01em for legibility on dark. If substituting, use Inter 14–15px/1.5 with +0.01em tracking.

## Layout

Spacing uses a compact-to-generous scale: 6, 14, 24, 40, 62px. Build vertical rhythm with 40–62px between sections, 24px inside sections, 14px for intra-component gaps, and 6px for micro-spacing between labels and values. Content modules favor single-column stacks with full-width media, switching to two-column splits (text/media) at wide viewports. Keep dense product tables full-bleed within the safe content width; surround them with 40–62px outer padding to preserve contrast on the dark surface.

## Elevation & Depth

Depth is minimal. Use measured shadows sparingly: sm (0 4px 30px, 10% black) for overlays on imagery, md for sticky nav/menus, lg (0 0 2px 2px, light outline) as a subtle ring on interactive cards. There is no xl or inner shadow. Hierarchy primarily comes from contrast (ivory on near-black), typographic scale, thin borders in on-surface, and whitespace.

## Shapes

The language is square-first with a single radius: sm = 4px. Buttons, inputs, and small cards share this corner. Links remain unboxed (0 radius). Reserve 4px for interactives—do not introduce pills or circular avatars unless they originate from product content.

## Components

Buttons
- Primary button — 40px high, 8px 10px padding, background #f5f5f5, text #130f0f, 4px radius. Use for the main CTA (e.g., Request a demo).
- Secondary button — Text-only, color #f4f1eb, 4px radius; pair with the primary in nav/hero.
- Link button — Unboxed text link, color #f4f1eb, radius 0.

Card
- Background #130f0f, text #f4f1eb, 8px padding. Use for compact stats, badges, or small content clusters on the dark canvas.

### Global Navigation Bar
- Background #130f0f; menu items Body MD. Right-side actions: a secondary link (Sign in) and a 40px-high primary button.

### Cinematic Hero Split
- Left column: Headline LG (56px), short body copy, primary CTA. Right column: full-height media. Section padding lg–xl; keep one accent (#465bff) visible.

### Workspace Feed
- Tiled list of recent items ("Project Alpha", "Buyer Universe"). Implement as a grid of cards using 8–14px internal gaps and Headline XS or Body MD for rows and metadata.

### Insights Matrix Table
- Dense table listing documents with two emphasis columns ("Red flags", "Opportunities"). Headings in Headline XS, rows in Body MD. Use #f4f1eb for text, rely on spacing—not heavy borders—to separate rows.

### Workflow Stepper
- Vertical list of titled steps ("Find fintech AI startups", "Analyze expert call transcripts"). Titles in Headline SM (28px), descriptions in Body MD. Use #465bff for active step affordances only.

### Integrations Grid
- Logo wall (SEC, FactSet, S&P Capital IQ, etc.) arranged in an even grid. Use 24px gutters, center logos on #130f0f without tiles; apply 4px radius only if you introduce tiles.

### KPI + Testimonial Block
- Three large metrics (e.g., $30T, 200K, 1.5B) set in Headline LG/MD with short labels in Body MD. Follow with a single quotation card using card token and Body MD.

### Compliance Badges Strip
- Row of badges (ISO/IEC 42001:2023, SOC 2 Type II, GDPR, etc.). Treat each as a small card with 8px padding on #130f0f and text in #f4f1eb.

## Do's and Don'ts

- Do keep copy and icons in #f4f1eb on #130f0f; avoid mid-greys that reduce contrast.
- Do reserve #465bff for CTAs, active states, and key links; don't scatter blue across body text.
- Do use the 4px radius consistently; don't introduce rounded pills or circles for primary controls.
- Don't apply heavy drop-shadows; use the provided sm/md only when elements sit over imagery.
- Do set major headings at 56px (LG) or 40px (MD) and maintain the specified tracking; don't squeeze body type below 14.5px.
- Don't mix button styles—pair one primary with at most one secondary in any region.

## Agent Prompt Guide

Quick reference
- Text: #f4f1eb
- Background: #130f0f
- Border: #f4f1eb (1px, low-emphasis)
- Accent/CTA: #465bff
- Radius: 4px

1) Hero with official families (self-hosted available)
- Set page background to #130f0f.
- H1: Selecta, 56px, line-height 1.2, weight 400, color #f4f1eb, max-width 12ch.
- Body: Selecta, 14.5px, line-height 1.52, letter-spacing 0.01em, color #f4f1eb.
- Primary button: 40px height, padding 8px 10px, background #f5f5f5, text #130f0f, radius 4px.
- Keep a single accent element in #465bff (e.g., a supporting link).

2) Hero using Google substitutes
- H1: Playfair Display 700, 56px, line-height 1.2, letter-spacing 0.035em, color #f4f1eb.
- Body: Inter 400, 14.5px, line-height 1.52, letter-spacing 0.01em, color #f4f1eb.
- Primary button as above (#f5f5f5 on #130f0f, radius 4px).

3) Workflow Stepper
- Section padding: 40px top/bottom.
- Step title: Selecta 28px/1.21 (or Inter 24–28px/1.3), color #f4f1eb.
- Step description: Selecta 14.5px/1.52 (or Inter 14–15px/1.5).
- Use #465bff for the active step indicator only; gaps between items = 14px.

4) Insights Matrix Table
- Table background #130f0f; 24px outer padding.
- Column headers: Selecta 20px/1.2, #f4f1eb.
- Rows: Selecta 14.5px/1.52, #f4f1eb; 6px row spacing, 1px borders in #f4f1eb at 20% opacity if needed.

5) KPI + Testimonial
- KPI number: Selecta 56px/1.2 (or Inter 56px/1.2, 700), #f4f1eb.
- KPI label: Selecta 14.5px/1.52, #f4f1eb.
- Quote card: 8px padding, background #130f0f, text #f4f1eb; author line in Headline XS (20px).

## Similar Brands

- Palantir — Dark, austere enterprise aesthetic with restrained accent color; more utilitarian type and fewer display flourishes.
- Scale AI — Black-first canvas with blue accents; leans harder into gradients and animation than Hebbia's steadier tone.
- Bloomberg Professional — Dense, data-driven modules and dark UI; uses warmer accent colors and more varied charts.
- PitchBook — Finance data platform with blue accents; lighter overall theme and more conventional corporate spacing.
- Databricks — Enterprise tech with dark hero and bold typography; brighter gradients and a more expressive color system.

:root {
  /* Colors */
  --color-primary: #f4f1eb;
  --color-tertiary: #465bff;
  --color-neutral: #130f0f;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 390;
  --text-headline-md-leading: 1.26;
  --text-headline-md-tracking: 0.035em;
  --text-headline-sm-size: 28px;
  --text-headline-sm-weight: 390;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 390;
  --text-headline-xs-leading: 1.2;
  --text-body-md-size: 14.5px;
  --text-body-md-weight: 90;
  --text-body-md-leading: 1.52;
  --text-body-md-tracking: 0.01em;
  --font-selecta: "Selecta";
  --font-edict-display: "Edict Display";

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

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

  /* Components */
  --button-primary-background-color: #f5f5f5;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 10px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 10px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-padding: 8px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Purpose-built AI for high-stakes finance decisions.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.957,
          0.945,
          0.922
        ],
        "hex": "#f4f1eb"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.275,
          0.357,
          1
        ],
        "hex": "#465bff"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.075,
          0.059,
          0.059
        ],
        "hex": "#130f0f"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.075,
          0.059,
          0.059
        ],
        "hex": "#130f0f"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.957,
          0.945,
          0.922
        ],
        "hex": "#f4f1eb"
      }
    }
  },
  "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": 62,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Selecta",
        "fontSize": {
          "value": 56,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Edict Display",
        "fontSize": {
          "value": 40,
          "unit": "px"
        },
        "fontWeight": 390,
        "letterSpacing": {
          "value": 0.035,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Selecta",
        "fontSize": {
          "value": 28,
          "unit": "px"
        },
        "fontWeight": 390
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Selecta",
        "fontSize": {
          "value": 20,
          "unit": "px"
        },
        "fontWeight": 390
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Selecta",
        "fontSize": {
          "value": 14.5,
          "unit": "px"
        },
        "fontWeight": 90,
        "letterSpacing": {
          "value": 0.01,
          "unit": "em"
        }
      }
    }
  }
}