Comp AI

---
version: alpha
name: Comp AI
description: Compliance that helps you close deals—get audit-ready fast.
colors:
  primary: "#0a0a0a"
  secondary: "#7ca49c"
  tertiary: "#004e3b"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: lausanne
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-md:
    fontFamily: lausanne
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: lausanne
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.021em
  headline-xs:
    fontFamily: lausanne
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: lausanne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
rounded:
  sm: 4px
  md: 5.8px
  lg: 13px
spacing:
  xs: 6px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 106px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#f0fdfa"
    rounded: "{rounded.md}"
    padding: 13px 20px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 13px 20px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 32px
---

# Comp AI: Dark-Green Hero and Evidence-First Compliance Pitch

## Overview

Serious and trustworthy B2B tone aimed at founders, security leads, and enterprise buyers. The interface is spacious, text-forward, and proof-oriented: a dark hero, white content cards, and repeated numbered sections. Visual noise is low; hierarchy comes from a single strong accent green, generous spacing, and consistent card scaffolding.

## Colors

- **primary (#0a0a0a):** Core text and icons; use for headlines, body copy, and strong dividers.
- **secondary (#7ca49c):** Muted sage accent for subtle UI states, chips, and progress indicators.
- **tertiary (#004e3b):** Brand accent and hero backgrounds; primary button fill and strong emphasis.
- **neutral (#ffffff):** Page background and card surfaces.
- **surface (#ffffff):** Alias to neutral; use for panels and cards.
- **on-surface (#0a0a0a):** Alias to primary; text on light surfaces.

## Typography

All text styles use the Lausanne family. Lausanne is self-hosted (type: custom); agents should not assume they can load it directly. Good obtainable substitutes: Inter (Google), Plus Jakarta Sans (Google), and IBM Plex Sans (Google).
- Headline LG (48px/1.1/400, -0.01em): Primary hero H1 and key section intros.
- Headline MD (36px/1.1/400, -0.014em): Section headers and major feature leads.
- Headline SM (24px/1.1/400, -0.021em): Card titles, FAQ headings.
- Headline XS (18px/1.22/400): Minor card headings and labels.
- Body MD (16px/1.75/400): All body copy, lists, testimonials, and link text.
Include "Noto Color Emoji" for emoji rendering when needed.

## Layout

Spacing follows a compact-to-roomy scale: 6, 16, 32, 48, 106px. Use md (32px) as the base rhythm for card padding and vertical steps; lg (48px) for intra-section gaps; xl (106px) for section breaks and hero top/bottom padding. Content reads in a centered grid with generous gutters; align numbered blocks and logos to the same column width. Maintain 16px minimum gutters for small elements and inputs.

## Elevation & Depth

Depth is minimal. The system's only measured shadow is sm: a 1px ring plus a soft drop for lift on cards, inputs, and sticky elements. Larger shadows are none; hierarchy relies on whitespace, the dark hero slab in #004e3b, thin borders/rings, and tonal contrast between white cards and ink text.

## Shapes

Corners are rounded and consistent. Use sm (4px) for small controls and inputs, md (5.8px) for buttons and pill-like badges, and lg (13px) for cards, hero panels, and large containers. Mixing new radii is discouraged—these three sizes carry the entire language.

## Components

Buttons and cards are the primary building blocks.
- Button—Primary: #004e3b fill, #f0fdfa text, 5.8px radius, 40px height, 13×20px internal padding.
- Button—Secondary: Transparent on light surfaces, #0a0a0a text, 4px radius, 40px height, 13×20px padding.
- Button—Link: Text-only action in #0a0a0a, no radius.
- Card: #ffffff surface, #0a0a0a text, 13px radius, 32px padding; apply sm shadow for separation.

Distinctive on this page:
### Hero Panel
- Background: #004e3b, text #ffffff/#0a0a0a as needed; 13px radius.
- H1 uses Headline LG (48px). Primary CTA uses Button—Primary; surrounding inputs and controls match 40px height.

### Email Capture Group
- Input + Get Started pair within the hero; group height 40px; input radius 5.8px; 13×20px padding; apply sm shadow ring for focus.

### Rating Badge
- Compact pill preceding the H1; md (5.8px) radius, Body MD text; use sm shadow for edge contrast on dark hero.

### Logo Strip
- Grayscale partner logos in a single row under the hero; vertical padding lg (48px); maintain even gaps of sm (16px).

### How-It-Works Step Card
- Numbered blocks (1–5) using Card spec (13px radius, 32px padding) with Headline SM titles and Body MD copy.

### Feature Tile Grid
- "AI-first platform" items arranged in a responsive grid; each tile follows Card spec; titles set in Headline XS (18px).

### Testimonial Block
- Quote text in Body MD with name/role meta; place on surface cards with lg (13px) radius and sm shadow; keep section spacing lg–xl.

### FAQ Accordion
- Each question row uses Headline SM for the trigger; content in Body MD; apply sm shadow ring to the expanded panel; corners sm (4px) for triggers, lg (13px) for the expanded body.

## Do's and Don'ts

- Do reserve #004e3b for the hero, primary CTAs, and key accents; don't flood secondary sections with this tone.
- Do keep headings at weight 400; don't switch to bold for emphasis—use size and spacing instead.
- Do pad cards at 32px and set corners to 13px; don't introduce ad-hoc paddings or radii.
- Do use the sm shadow ring for separation; don't add heavy or colored shadows.
- Do keep gutters at least 16px; don't collapse spacing below the scale.
- Do use #7ca49c sparingly for subtle accents; don't set long-form text in secondary.

## Agent Prompt Guide

Quick color reference:
- Text: #0a0a0a
- Background: #ffffff
- Border: #0a0a0a (use at low opacity or the sm shadow ring)
- Accent: #004e3b (primary actions), #7ca49c (subtle accents)

1) Build a dark hero with email capture
- Container: 100% width, background #004e3b, padding top/bottom 106px, 13px radius, sm shadow.
- H1: 48px/1.1, weight 400, letter-spacing -0.01em, font-family: "Lausanne", sans-serif, color #ffffff.
- Subcopy: 16px/1.75, color #ffffff.
- Input + Button group: height 40px; input radius 5.8px, 13×20px padding, background #ffffff, text #0a0a0a; button uses #004e3b fill, #f0fdfa text, 5.8px radius.

2) Create a 3-column feature grid
- Section background #ffffff; gap 32px.
- Each tile: card with 13px radius, 32px padding, sm shadow; title 18px/1.22 (400), body 16px/1.75; icons or badges may use #7ca49c accents.

3) Numbered "How it works" steps
- Stack of cards with 32px vertical gaps; each card: 13px radius, 32px padding, sm shadow.
- Step number in Headline SM (24px), title in Headline SM, body in Body MD; accent rules or dots may use #004e3b.

4) Testimonial section
- White background, lg (48px) top/bottom padding.
- Quote card: 13px radius, 32px padding, sm shadow; quote in 16px/1.75, name line in 18px/1.22; accent divider in #7ca49c at 1px.

5) FAQ accordion
- Trigger rows: 24px title, 4px corner; expanded panel: 13px corner, 32px padding, sm shadow ring; body copy 16px/1.75, icons and indicators in #0a0a0a.

## Similar Brands

- Vanta — Similar dark-green accent and trust-driven content; Comp AI is bolder in using a single deep hero panel.
- Drata — Clean, white cards and restrained palette; Drata skews more blue where Comp AI leans evergreen.
- Secureframe — Proof-led homepage with logo strips and testimonials; Secureframe uses heavier shadows, Comp AI relies more on rings/whitespace.
- Thoropass — Structured compliance storytelling; Thoropass spreads accents wider, while Comp AI keeps green use focused.

:root {
  /* Colors */
  --color-primary: #0a0a0a;
  --color-secondary: #7ca49c;
  --color-tertiary: #004e3b;
  --color-neutral: #ffffff;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.1;
  --text-headline-lg-tracking: -0.01em;
  --text-headline-md-size: 36px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.1;
  --text-headline-md-tracking: -0.014em;
  --text-headline-sm-size: 24px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.1;
  --text-headline-sm-tracking: -0.021em;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.75;
  --font-lausanne: "lausanne";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 5.8px;
  --radius-lg: 13px;

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

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #f0fdfa;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 13px 20px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 13px 20px;
  --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-rounded: var(--radius-lg);
  --card-padding: 32px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Compliance that helps you close deals—get audit-ready fast.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.643,
          0.612
        ],
        "hex": "#7ca49c"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.306,
          0.231
        ],
        "hex": "#004e3b"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.039,
          0.039,
          0.039
        ],
        "hex": "#0a0a0a"
      }
    }
  },
  "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": 106,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 5.8,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 13,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "lausanne",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.01,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "lausanne",
        "fontSize": {
          "value": 36,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.014,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "lausanne",
        "fontSize": {
          "value": 24,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.021,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "lausanne",
        "fontSize": {
          "value": 18,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "lausanne",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}