DeepJudge

Overview

DeepJudge is an enterprise legal AI platform that embodies Architectural Minimalism—a design philosophy that prioritizes structural clarity, precision typography, and restrained color discipline. The brand serves legal teams seeking to transform institutional knowledge into actionable intelligence through enterprise search and LLM-powered workflows. The visual identity evokes quiet confidence: a warm, neutral canvas (beige #ede9e5) anchors the interface, while deep charcoal (#242422) provides authoritative contrast, and a measured purple accent (#9478fc) signals intelligence and precision. The emotional response is one of calm professionalism—users feel they are working with a system that understands legal complexity without overwhelming them with visual noise.

The brand voice is direct, measured, and expertise-driven. DeepJudge speaks in declarative statements that emphasize capability and institutional knowledge: "Your collective knowledge is your unique asset." "Search the way you think to unlock everything." The vocabulary avoids hyperbole; instead, it grounds itself in concrete outcomes ("build entire AI applications," "implement LLM agents"). Tone is never breathless or casual—it respects the user's domain expertise and time. Example sentence in brand voice: "DeepJudge transforms your firm's institutional knowledge into structured intelligence that powers every legal workflow."

Colors

The color system is built on a principle of restraint and institutional trust. The primary surface (#ede9e5, a warm beige) creates a sophisticated, paper-like foundation that evokes legal documents and institutional gravitas. Primary action color is deep charcoal (#242422)—used for buttons, headers, and key interactive elements—which conveys authority without coldness. The secondary accent, a measured purple (#9478fc), is reserved for highlights, focus states, and data visualization elements; it signals precision and intelligence without dominating the interface. Tertiary accent is a warm orange (#f28954), used sparingly for error states and critical alerts. On-surface text is pure dark (#1a1a1a) for maximum legibility at 14–18px body sizes. The surface stack progresses through carefully c

Typography

The type system pairs Suisse Works (display and headlines) with Suisse Intl (body and labels), creating a clear hierarchy that respects both formal and functional needs. Display text (85px, 400 weight, -0.02em letter-spacing) anchors hero sections with monumental presence; headline-lg (48px) breaks up content sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at typical viewing distances. Label-md (14px, 500 weight) is used for buttons and form labels, with 0.01em letter-spacing to add subtle emphasis. The 400-weight body text (not 300) ensures legibility on the warm beige background without appearing heavy. When small labels (12px) appear over busy backgrounds or data visualizations, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain contrast. Line

Layout

The layout system uses a 12-column grid with a 1280px max-width container, maintaining a fixed-width approach that ensures predictable text line lengths (52–66 characters for body text). Horizontal rhythm is established through the spacing scale: lg (40px) separates major sections (hero, feature blocks, testimonials); md (24px) creates breathing room within cards and form groups; sm (12px) is used for internal component spacing (button padding, list item margins). The gutter (24px) provides consistent left-right padding on all container edges. Vertical rhythm follows a 8px baseline grid: all heights, margins, and paddings are multiples of 8px (40px button height, 24px padding, 12px gaps). This creates a sense of order and makes responsive scaling predictable. The hero section uses centered

Elevation & Depth

Depth in DeepJudge is conveyed through subtle shadows and layering, not through dramatic blur or glassmorphism. The elevation system uses three levels: Level 1 (Base) is the warm beige surface (#ede9e5) with no shadow. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, readable lift that separates content from the background without visual drama. Level 3 (Modals, Elevated Containers) uses box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12), a slightly larger blur radius that signals modal importance. Hover states on cards transition from Level 2 to Level 3 over

Shapes

The shape philosophy is Soft-Technical: rounded corners are used sparingly and purposefully, never organically. Buttons use 0.25rem (4px) border-radius, a subtle softening that maintains geometric precision. Cards and containers use 1rem (16px) border-radius, creating a gentle, approachable container without appearing playful. Input fields use 0.5rem (8px) border-radius, a middle ground that balances form and function. The reasoning: sharp 0px corners would feel austere and cold in a legal context; large 16px+ radii would undermine the professional, structured aesthetic. The 4px–16px range kee

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses a 40px height with 8px 27px padding, background #242422, text color #e6e0db, 4px border-radius, and label-md typography (14px, 500 weight). On hover, the background transitions to #333333 (primary-container) over 200ms ease. The secondary button uses a transparent background with a 1px solid border in outline color (#999999), same height and padding, and transitions to surface-container-high (#d0d0d0) on hover. Both buttons use cursor: pointer and no text-decoration. The primary CTA ("Book Demo") is always primary-button style; secondary CTAs ("View All", "Learn More") use secondary-button style.

Containers & Surfaces Cards (card component) use a background of surface-container-

Do's and Don'ts

**Do**

• Do use the primary color (#242422) for all CTAs, headers, and key interactive elements—it is the visual anchor of authority.
• Do maintain generous white space (40px lg spacing between sections) to support scanning and reduce cognitive load in legal workflows.
• Do apply the 8px baseline grid rigorously: all padding, margins, and heights must be multiples of 8px for visual harmony.
• Do use the secondary purple (#9478fc) only for focus states, data highlights, and accent elements—never as a primary background.
• Do transition all interactive states (hover, focus, active) over 200ms ease to signal responsiveness without distraction.
• Do use Suisse Works for all headlines and Suisse Intl for body text; never mix or substitute system fonts.

**Don't**

• Don't use the warm beige surface color (#ede9e5) for text or interactive elements—it is reserved for backgrounds only.
• Don't apply shadows larger than 0 5px 15px rgba(0, 0, 0, 0.12); excessive depth undermines the minimalist aesthetic.
• Don't use border-radius larger than 16px on cards or containers; it introduces organic, playful energy that conflicts with institutional trust.
• Don't mix Suisse Works and Suisse Intl weights arbitrarily; maintain the 400-weight body text and 500-weight labels for consistency.
• Don't apply the secondary purple (#9478fc) as a background color for large areas; it should appear only as an accent or highlight.
• Don't use the tertiary orange (#f28954) outside of error states and critical alerts—it is reserved for high-priority messaging.