Lexi Design System — Redesign v2

An editorial, document-first system: Charter serif for headings, display, and legal body copy; a native system-sans stack for interface text; JetBrains Mono for citations, metadata, and eyebrows. Small, sober radii and a warm terracotta accent give the product the feel of a verifiable legal document rather than a consumer app.

Charter Serif · Headings
System Sans · Interface
JetBrains Mono · Citations
Warm Terracotta Accent
125%
90100110125140160

Brand Identity

Logo & Branding

The Lexi brand identity combines professional legal aesthetics with modern AI innovation.

Lexi

Your AI Legal Core

Color Tokens

Sourced from the Redesign v2 mockups (oklch tokens, converted to HSL to match this app's existing oklch(var(--x)) convention). Never hardcode a hex value — tokens shift per theme (light/dark), high-contrast mode, and the three colorblind-safe variants.

Primary — Warm Accent

Terracotta accent used for primary CTAs, links, and focus rings

Primary

oklch(var(--primary))

Primary CTAs, links, focus ring

Primary Foreground

oklch(var(--primary-foreground))

Text on primary surfaces

Secondary & Status

Subtle alternate surface plus ok/warn/destructive semantics

Secondary

oklch(var(--secondary))

Alternate paper surface

Destructive

oklch(var(--destructive))

Errors, critical findings

Paper & Ink Foundation

Warm off-white canvas with a near-black ink foreground

Background (Paper)

oklch(var(--background))

Warm off-white canvas

Foreground (Ink)

oklch(var(--foreground))

Near-black, blue-leaning ink

Muted

oklch(var(--muted))

Metadata backgrounds, subtle fills

Rules & Borders

Sober hairlines instead of shadows — a document, not a card stack

Card / Surface

oklch(var(--card))

Panels, chat bubbles, table rows

Border

oklch(var(--border))

Rule lines, dividers

Input Border

oklch(var(--input))

Form field borders

Readability & Accessibility

Reading Optimization

Font choices designed for extended reading sessions

Display & Headings (Charter)

Charter is a high-contrast transitional serif designed for screen and low-resolution rendering. It gives the product the air of a legal document without sacrificing legibility, and is used for headings, display type, and legal clause quotes — not general body copy.

Dyslexia-Friendly Font (Atkinson Hyperlegible)

Atkinson Hyperlegible was specifically designed for improved readability and accessibility. It features increased character spacing, unique letterforms that reduce confusion between similar characters (like b/d, p/q), and enhanced contrast that helps with dyslexia, low vision, and general reading fatigue.

Accessibility Features

Built-in support for diverse reading needs
High Contrast Themes

4.5:1 minimum contrast ratio for WCAG AA compliance

Dyslexia Support

Specialized fonts with improved character distinction

Colorblind-Friendly

Alternative color schemes for color vision deficiency

Dark Mode

Optimized for low-light reading environments

Font Size Scaling

Dynamic Font Sizing

Test different font sizes using the controls above. Default is 20px for better readability.

Available Font Sizes

14px - Legal fine print

16px - Compact reading

20px - Better readability (default)

24px - Comfortable reading

28px - Large text

32px - Extra large

36px - High visibility

40px - Maximum size

Current Font Size Benefits

  • • Reduces eye strain during long sessions
  • • Improves reading speed and comprehension
  • • Better accessibility for all users
  • • Scales proportionally across all elements
  • • Maintains design harmony at all sizes

Try adjusting the font size above and observe how this text changes:

The quick brown fox jumps over the lazy dog. This pangram contains all letters of the alphabet and helps you evaluate character legibility at different sizes. Legal documents often contain complex terminology that benefits from larger, clearer typography.

Typography

Headings (Charter serif)

Display serif for headings, titles, and legal body copy

Heading 1

4xl / Bold / -0.02em

Heading 2

3xl / Bold / -0.015em

Heading 3

2xl / Bold / -0.01em

Heading 4

xl / Semibold

Heading 5

lg / Semibold

Heading 6

base / Semibold

Body Text (System sans)

Native system-ui sans stack for interface and body copy

Large body text for prominent content and introductions that need to stand out from regular content.

lg / Normal / Relaxed

Regular body text for main content, paragraphs, and general reading material that forms the bulk of the content.

base / Normal / Normal

Small body text for secondary information, captions, and supporting details that complement the main content.

sm / Normal / Normal

Extra small text for fine print, metadata, and minimal supporting information.

xs / Normal / Normal

Professional Buttons

Efficient, professional button design with glass effects and optimized sizing for modern interfaces.

Button Variants

Natural color palette applied to professional button styles

Professional Button Sizes

Optimized sizes for efficiency and modern interfaces

Button States

Interactive states and loading indicators

Form Components

Input Fields

Text inputs and form controls

Form Controls

Checkboxes, switches, and other controls

Cards & Layout

Basic Card

Simple card with header and content

This is a basic card component with a header, description, and content area.

Action Card

Card with footer actions

This card includes action buttons in the footer area.

Interactive Card

Hover to see the effect
New
Document type

Documents Processed

1,234

+12% from last month

AI Analysis

Advanced document insights

Media Card

Card with image or media content

Tables

Document Analysis Results

Sample table showing analysis results
DocumentTypeStatusConfidenceActions
Contract_Agreement_2024.pdf
Contract
Completed
98.5%
Legal_Brief_Client_A.docx
Legal Brief
Processing
-
Privacy_Policy_Draft.pdf
Policy
Completed
94.2%
Terms_of_Service_v2.pdf
Terms
Review
87.3%

Badges & Status

Theme-Aware Badges

Pill-style badges with automatic dark/light theme contrast
Primary
Secondary
Accent
Neutral
Contrast Enhancement: These badges automatically adjust opacity and text color for optimal visibility in both light and dark themes.

Standard Badge Variants

Traditional badge styles for content labeling
Default
Secondary
Outline
Destructive

Status Indicators

Custom status badges for document states
Completed
Processing
Review
Error
Draft

Navigation Elements

Navigation Patterns

Different navigation components and states

Breadcrumb Navigation

Tab Navigation

Reading Sample

Extended Reading Test

Sample legal document text to test readability across themes and fonts

Contract Analysis Report

This comprehensive analysis examines the terms and conditions outlined in the Master Service Agreement dated January 15, 2024, between TechCorp Industries and Legal Services Group. The agreement encompasses multiple facets of service delivery, including but not limited to intellectual property rights, liability limitations, and termination clauses.

Key Findings

The intellectual property clause (Section 4.2) establishes clear ownership boundaries between pre-existing materials and work product created during the engagement. Notable provisions include the assignment of derivative works and the retention of moral rights where applicable under jurisdictional law.

Liability limitations are structured through a tiered approach, with general liability capped at the total contract value, while specific exclusions apply to consequential damages, lost profits, and business interruption. The indemnification provisions create mutual protection mechanisms for both parties in cases of third-party claims arising from the performance of services.

Recommendations

Based on industry standards and risk assessment protocols, we recommend clarification of the force majeure provisions in Section 7.3, particularly regarding pandemic-related disruptions and cybersecurity incidents. Additionally, the data protection clauses should be updated to ensure compliance with evolving privacy regulations across multiple jurisdictions.

Reading Comfort Test

Instructions: Read the above text in different theme and font combinations using the accessibility controls at the top of this page. Notice how the optimized fonts and contrast ratios affect your reading comfort and comprehension during extended reading sessions.

Chat Deletion System

Professional, trust-first deletion interface designed specifically for legal professionals. Features comprehensive confirmation patterns, bulk operations, and accessibility compliance.

Chat Deletion Demo

Consulta Constitucional: Artículo 1

Análisis de Contrato Laboral

Derecho Laboral: Artículo 123

Propiedad: Artículo 27

Código Civil: Sucesiones

Código Penal: Delitos Financieros

Derecho Mercantil: Sociedades

Consulta Histórica: Código de 1884

Filter Components

Comprehensive filtering system designed specifically for legal document analysis and management. These components provide powerful search and filtering capabilities while maintaining accessibility and professional appearance.

Complete Legal Document Filter System

Interactive demo showcasing all filter components working together for legal document management

Dropdown Components

Various dropdown and select components for different use cases

Range & Date Components

Date pickers and range sliders for filtering by time and numerical values
0%Range100%
0 KBRange100 KB

Filter Chips & Status

Chip-based filters and status buttons for category selection
Active(24)
Pending(12)
Closed(156)
On Appeal(8)

Search & Sort Components

Advanced search with autocomplete and sorting options

Smart Search

Autocomplete with legal document suggestions

Document Types

Organized by legal document categories

Advanced Filters

Complex filtering with multiple criteria