Skip to content
DesignMunkDesignMunk Submit a site

Lexi

getlexi.io
The AI operating system for law.
AI Software Next.js Tailwind Homepage Inter lovato
Share Visit site
getlexi.io DESKTOP · 1440
Lexi

AI Breakdown

Design export

---
version: alpha
name: Lexi
description: The AI operating system for law.
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#24cfa6"
  neutral: "#121212"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: lovato
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: lovato
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: lovato
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: -0.011em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 32px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#000000"
    rounded: "{rounded.full}"
    padding: 10px 24px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 10px 24px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Lexi: White Serif Headlines on a Dark Law Library

## Overview

Lexi's UI is formal, quiet, and authoritative. It's a dark-mode system designed for legal buyers: low-chroma, high-contrast text, and measured pacing. Spacing is deliberate and section-based rather than card-heavy. Use the green accent sparingly to signal state or section anchors; typography and spacing do the persuasive work.

## Colors

- Primary (#ffffff): Primary text and CTA fills on dark surfaces.
- Secondary (#7c7c7c): Muted supporting text and captions.
- Tertiary (#24cfa6): Accent for small indicators, bullets, and success states.
- Neutral (#121212): Base canvas and card backgrounds in dark mode.
- Border (#374151): Subtle dividers, rules, and control outlines.
- Surface ({colors.neutral}): Default surface color for sections and cards.
- On-surface ({colors.primary}): Text and icon color on dark surfaces.

## Typography

- Lovato (custom, 400): Display serif for headlines (60px, 36px, 24px). This is self-hosted and not universally available to agents. Use substitutes with similar contrast and warmth such as Lora, Spectral, or Cormorant Garamond.
- ui-sans-serif (system): Utility headings (18px) and small labels where a neutral, default sans is preferred. Falls back to the platform's system UI sans.
- Inter (Google): Body copy at 16px with generous 1.8 line-height and light negative letter-spacing. Also suitable for UI controls, meta, and long-form text. Load directly from Google Fonts.
- Noto Color Emoji (Google): Emoji support where needed; not used for core UI copy.

## Layout

- Spacing scale: 10, 20, 32, 48, 80px. Base unit is 10px; compose vertical rhythm in multiples of 10.
- Section rhythm: 80px top/bottom for major sections, 48px between headings and content blocks, 32px inner padding for cards and grids, 20px for gutters within small components.
- Use a responsive multi-column grid; allow headlines to span wider than body on large screens to preserve the stately feel. Avoid cramped layouts — let typography set the tempo.

## Elevation & Depth

- No shadows across all sizes. Depth is expressed through contrast, whitespace, and thin dividers.
- Use Border (#374151) for separators and control outlines. Layer content by stepping text from Primary (#ffffff) to Secondary (#7c7c7c) and by tightening/loosening spacing, not by elevation effects.

## Shapes

- Rounded sm: 8px for cards and solid blocks.
- Rounded full: 9999px for pill buttons, chips, and any capsule tabs.
- Corners communicate interaction level: pills are interactive CTAs; 8px blocks are informational containers.

## Components

- Button — Primary: White fill (#ffffff) with black text (#000000), 40px height, 10px×24px padding, rounded.full. Use for main CTAs like Book a Demo.
- Button — Secondary: Text-only, white text on dark background, rounded.full, 40px height; reserve for secondary actions adjacent to the primary.
- Button — Link: Inline textual actions; no radius.
- Card: Background #121212, text #ffffff, 8px radius, 16px padding. Use with dividers rather than shadows.

### Hero with Photo Overlay
- Centered headline using Lovato 60px, line-height 1.1, on a darkened image. One paragraph in Inter 16px below. Primary pill button (40px high) beneath with 20–32px spacing.

### Feature Trio
- Section label with a small tertiary (#24cfa6) dot, headline-md (36px). Three features (Speed, Precision, Scale) in a 3-column grid; each label set in headline-xs (18px) with Inter body beneath.

### Metrics Strip
- Four statistics (5,000,000+, 200,000+, 45%, 200+) in a responsive grid. Use headline-md (36px) for numerals and body-md for descriptors. Dividers use #374151.

### Capability Blocks (Onboarding, Drafting, Research)
- Each block opens with headline-md (36px) and a short Inter paragraph. Optional capsule tabs or chips can use rounded.full with thin borders (#374151) and white text.

### Security Statement
- Single-column paragraph emphasizing privacy and encryption. Keep tone dense; avoid color beyond white text and the occasional tertiary bullet.

### Testimonial Card
- 8px radius card with quote in headline-sm (24px) and attribution in body-md. If a highlight (e.g., "3x") appears, it can use headline-md and the tertiary accent sparingly.

### Final CTA Band
- Headline-md plus a single primary pill button. Maintain 80px vertical padding and a clear, repeated CTA label.

## Do's and Don'ts

Do
- Use Primary (#ffffff) for all core text on Neutral (#121212); reserve Secondary (#7c7c7c) for meta and captions.
- Keep CTAs at 40px height with rounded.full and 10px×24px padding.
- Employ Border (#374151) for separation; avoid any shadows.
- Limit Tertiary (#24cfa6) to indicators, small bullets, or positive status.

Don't
- Mix multiple CTA labels in the same flow; pick one and repeat.
- Add colorful backgrounds or gradients that compete with the monochrome palette.
- Use large radii on cards; cards stay at 8px, not pills.

## Agent Prompt Guide

Quick color reference: text #ffffff / background #121212 / border #374151 / accent #24cfa6.

1) Build a hero
- Background: #121212 over a darkened image. Headline: "The AI operating system for law." in Lovato 60px, weight 400, line-height 1.1, letter-spacing -0.02em, color #ffffff. Body: Inter 16px, line-height 1.8, color #7c7c7c. Primary button: 40px height, padding 10px 24px, radius 9999px, background #ffffff, text #000000. Spacing: 32px between headline/body, 20px to button, 80px vertical section padding.

2) Three-feature section
- Section preface: small dot in #24cfa6. Heading: Lovato 36px. Grid: 3 columns. Each feature title in ui-sans-serif 18px; description in Inter 16px. Use dividers in #374151 only if needed. Outer padding 48px, inner gutters 20px.

3) Metrics strip
- Background #121212. Four stats: numerals in Lovato 36px, descriptors in Inter 16px. Use thin borders (#374151) between items on desktop. Section spacing 48px, item padding 32px.

4) Testimonial card
- Card background #121212, radius 8px, padding 16px. Quote in Lovato 24px; attribution in Inter 16px secondary (#7c7c7c). Optional highlight number in Lovato 36px with a tiny #24cfa6 bullet.

5) Footer CTA
- Heading in Lovato 36px, one Inter paragraph (16px), then a single primary pill button (40px height, #ffffff with #000000 text). Maintain 80px top/bottom spacing and avoid shadows.

## Similar Brands

- Harvey: Dark, proof-forward legal AI; similar serif-on-dark tone, but tends to use heavier gradients than Lexi's flat canvas.
- Ironclad: Contract lifecycle management; shares the restrained green accent, but favors a lighter theme and denser application UI.
- Palantir: Enterprise analytics with authoritative typography on dark backgrounds; more austere and grid-dense than Lexi.
- Cohere: Enterprise AI with dark surfaces and bright white CTAs; uses bolder accent color and more motion compared to Lexi's stillness.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 4 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago