The complete
A–Z handbook for
paralegent.ai.

The site documents facts. It does not perform them.

Paralegent's website should feel like a research-grade due-diligence brief that happens to be a website. Editorial discipline. Generous whitespace. Oversized confident typography. Hairline geometry instead of pillow shadows. Bento where data invites scanning; linear scrollytelling where narrative invites depth. Motion is rare and meaningful.

Six locked layers. All else cascades.

Color, typography, spacing, radius, elevation, and motion are tokenized at the root. No raw hex, no magic numbers, no orphan fonts. Adding to any of these requires founder sign-off.

02.1 — Color palette

Five brand tokens carry the system. GREEN/ORANGE/RED tier colors live separately for the 3-tier risk classification. The palette is unchanged from V1 — only the way we use it changed.

02.2 — Typography

One family, two cuts. Inter at weight 700 for display + labels (UPPERCASE, 1.5px tracking — the "machined" voice). Inter Light at weight 300 for body + secondary copy (sentence case — the "engineered" voice). The contrast between heavy display and light body is the editorial signature.

02.3 — Spacing

Editorial wide-step scale. Removes mid-values from V1's Tailwind default. If you reach for a missing one, pick the next bigger or smaller.

02.4 — Radius

Most surfaces are sharp or 4-pixel. Cards 8-pixel. Pill radius reserved for the P mark and dots. Soft 16-24px curves are gone.

02.5 — Elevation ladder

Borders carry hierarchy. Shadows appear only on hover and modals. Shadow color is teal-tinted (rgba(4,39,41,0.08–0.16)) — never pure black.

02.6 — Motion language

Three signature motions per system, never more than one per page. Default duration 200ms ease-out. Mode-shift 300ms. All motion respects prefers-reduced-motion.

Atoms first. Composites cascade.

Three layers, in dependency order. Primitives never depend on composites. Composites never depend on page sections. Eight atoms, twelve molecules.

03.1 — Buttons

Three tiers, no more. Rectangular 4px radius. Inter 700 ALL-CAPS labels. → chevron translates 4px on hover.

03.2 — IconBlock

Replaces V1's peach-circle IconBox. A 64×64 square with a Inter 700 numeral. The numeral itself is the icon.

03.3 — Badges & tier markers

03.4 — Eyebrow / label

03.5 — Tile · the bento unit

Four sizes (1×1 · 2×1 · 1×2 · 2×2). Four tones (default · peach · dark · primary). 16/24px gap. Sharp corners, 1px border. Hover: 2px lift + teal-tinted shadow.

03.6 — Form input

03.7 — Footnote citation

03.8 — Mock document, rulebook, specialists

Three "show-don't-tell" components used in walkthrough sections. They demonstrate the product in concrete terms without screenshots.

Composites in their context. Five-zone composition.

V1 enforced a strict 12-section linear sequence. V2 swaps to a five-zone composition that combines narrative spine with bento variety. Each zone is a recognizable shape; users can scan or read.

04.1 — Homepage structure · 14 sections · 9 zones

Validated buyer-journey curve: Recognition → Identification → Thesis → Mechanics → Architecture → Differentiation → Outcome → Answers → Closer. Each section is sequentially numbered (00-13) and lives inside one of nine themed zones.

04.2 — Header pattern

Wordmark left · Menu trigger + DEMO button right · No center nav. Clicking MENU reveals a full-bleed teal grid menu.

04.3 — Pull quote pattern

04.4 — Always-open FAQ pattern

Why no accordion: AI search engines (Perplexity, Google AI Overview, Claude, OpenAI) often skip collapsed answers. Always-open guarantees verbatim extraction.

04.5 — Spec-sheet comparison pattern

04.6 — Brand scene tableau (footer / menu)

04.7 — Role-deep tabbed pattern

Identification zone. Five tabs across the top (GC · CFO · CIO · CPO · Legal Ops). Click switches the panel below. Each panel: persona meta + pain point (peach card) on the left; 4 numbered features with mono tags on the right.

04.8 — Workflow diagram pattern

Mechanics zone, abstract. Three horizontal step cards with 2px foreground borders. Primary-orange arrow connectors between them. Each step: 56px numeral block + meta + Inter 700 UPPERCASE title + SVG icon panel + body + mono time-stat.

04.9 — Tech stack strip pattern · "Built on"

Architecture zone. 6-tile row with real partner SVG logos at 32px height. Each tile: 1px border, hover lift + border darken. Mono caption below logo. Section eyebrow says "BUILT ON" — never "PARTNERS" (avoids fake-trust signal).

04.10 — Inside the Word Add-in pattern · cinematic mockup

Mechanics zone, cinematic. Full Word UI — title bar (mac dots), ribbon (with "Paralegent" tab active), toolbar (rulebook + redline count + confidence + specialists), document body with GREEN/ORANGE/RED highlights, sidebar with specialist cards (confidence per redline) + Insert/Customize/Reject actions. Three annotation cards underneath label A/B/C the parts.

04.11 — Security & data sovereignty pattern

Architecture zone. Dark teal background with dot grid. 6-row cloud architecture diagram (Data sits / Compute runs / Storage lives / LLM calls / Network egress / Access owned by) on the left, 4 security pillars on the right. 4-stat strip at the bottom.

04.12 — Outcome timeline pattern

Outcome zone. Three milestone cards horizontal: Week 02 (sandbox demo) · Week 10 (in production) · Quarter on (steady state). The third card uses peach background to mark "the destination". Each card: mono milestone label + Inter 700 UPPERCASE milestone phrase + 4 bullet points + mono meta tag.

04.13 — Cognilium credibility strip

Outcome zone, borrowed authority. Slim strip with "Built by → Cognilium AI" framing on the left + 4 mono numerals on the right (100+ projects · 50+ GenAI deployments · 96% CSAT · 99.9% uptime). Each numeral is a vertical bar with primary-colored 2px left border.

04.14 — Footer V2 pattern · mirrors actual site

Closer zone. Dark teal with dot grid. 5 link columns (Product · Solutions · Resources · Company · Partners) → centered social icons row → centered Paralegent AI logo (white-text SVG) → mono copyright "© 2026 Paralegent AI · Built by Cognilium AI" → legal links (Terms / Privacy / Security) → founder attribution row with avatar + name + role + bio + social → mono "Last updated" stamp. Mirrors `Footer.tsx` actual site structure.

04.15 — Form input pattern

48-px height. 4-px radius. 1-px border default → 2-px on focus + 3-px primary-tinted ring. Label above (mono uppercase 11px). Real-example placeholder (not "Enter your email"). Helper text below as mono caption ("We'll never share this. Demo only."). Errors: red border + helper text below input, never error-color on label (screen-readers read label).

Nine templates. 52 live pages.

Each template is a wireframe-grade rhythm — the section sequence and word/data targets that make a page-type recognisable. Solutions area: 1 template × 16 pages. Compare area: 1 template × 5 pages. Product area has the most variation.

Five personas. One 2026 buyer shift.

Senior in-house counsel at $200M+ revenue companies are time-poor, read-skeptical, and risk-averse. The 2026 procurement shift: they buy outcomes, not tools. Every page move below is a direct response to documented buyer behavior — Bloomberg Law's 2026 GC trend report, Law.com legal tech buyer research, and Wynter's vendor-discovery study (84% now use AI tools to evaluate vendors).

06.1 — The five personas

06.2 — The 2026 procurement shift

Three documented shifts in how senior in-house counsel evaluate AI legal tech in 2026. Every Paralegent page should reflect these.

06.3 — Cognitive biases (used / refused)

Locked vocabulary. Documented voice.

Confident, technical, calm. Active voice, present tense. Concrete numbers over adjectives. Short sentences (≤18 words). Future-tense promises forbidden. The vocabulary below is brand identity — not preferences.

07.1 — V1 vs V2 voice diff

Move	V1 voice	V2 voice
Hero subtitle	"Paralegent AI is the production AI accelerator that reviews master agreements in 30 minutes — deployed in your cloud."	"Paralegent reviews an 80-page master agreement in 30 minutes¹. Deployed in your cloud. Your data does not leave."
Feature description	"Our rulebook system learns your preferred clauses with deep contextual understanding."	"One rulebook upload. 80-150 terms learned. Every clause from then on, scored against your standard."
FAQ opener	"Great question! Paralegent handles your existing rulebook by..."	"Yes. Paralegent ingests your rulebook once — PDF or DOCX, 80-150 terms — and processes it in 4-8 hours."
CTA label	"Get Started" / "Sign Up" / "Try Free"	"Request a Demo" → /demo
Number style	"30 hours to 30 minutes"	"30 hrs → 30 min¹" with footnote

Four wedges. One position.

Paralegent does not market against competitors. We position on four distinct wedges that, together, are the production-accelerator category. The wedges are own-cloud deployment + 18+ specialist orchestration + word-native review + always-open editorial design. Each wedge has a corresponding visual treatment in the V2 design system.

Wedge	What others do	Paralegent V2 design move	Visual surface
Own-cloud deployment	Vendor-hosted SaaS. Customer data leaves the customer environment.	Production accelerator deployed inside customer Azure / AWS / GCP. Customer data never leaves.	Section 07 Security · cloud architecture diagram · 4 pillars
Multi-agent orchestration	Single generalist LLM. Free-form output. No specialist routing.	18+ specialist agents on LangGraph. Orchestrator routes per clause. Confidence per redline.	Section 03 Workflow · Section 05 Walkthrough · mock specialists grid
Word-native review	Web app. Lawyers learn a new tool. Adoption resistance.	Office.js add-in inside Microsoft Word — desktop, web, Mac. Sidebar is the only new surface.	Section 04 Inside the Word Add-in · cinematic mockup
Editorial transparency	Accordion FAQ. Hidden answers. Manufactured social proof. Pricing pages.	Always-open numbered FAQ. Footnoted claims. Real partner logos. No website pricing.	Section 12 FAQ · footnote citation · spec sheet

08.1 — Industry design moves we adopted

08.2 — Industry design moves we explicitly rejected

What V2 will not do. Ever.

Side-by-side examples of common SaaS moves that look fine in isolation but undermine the editorial discipline of V2 — or worse, violate ethics, regulations, or accessibility.

Migration in four phases. Owned changes.

10.1 — Phased migration plan

10.2 — What stays / what goes

10.3 — Iteration tiers (ownership)

Tier	Examples	Approval needed
Token	New color · spacing · font · radius	Founder sign-off + tailwind.config.ts PR + MASTER-RULEBOOK update
Component	New Button variant · Card layout · Tile tone	Code review + Storybook screenshot in PR
Pattern	New section type · new FAQ format · new bento variant	Update MASTER-RULEBOOK.md + announce in PR description
Page template	New page-type rhythm · new IA branch	Founder + product owner sign-off

10.4 — Hard checks before any merge

• ✓ Vocabulary check passed (skill: paralegent-voice-vocabulary)
• ✓ Design token check passed — no raw hex outside tailwind.config.ts
• ✓ Page rhythm check passed (skill: paralegent-page-rhythm)
• ✓ Visual design check passed (skill: paralegent-visual-design)
• ✓ JSON-LD validates at schema.org/validator
• ✓ Lighthouse Performance ≥90 / Accessibility ≥95
• ✓ Web Vitals: FCP <0.4s · LCP <2.5s · CLS 0 · INP <200ms
• ✓ SSR-only on content pages (no `'use client'` at page level)
• ✓ Logo files used per visual-design skill table
• ✓ prefers-reduced-motion honored on every animation

Four breakpoints. One grid.

Mobile-first scaling. Display headlines drop a tier at each breakpoint. Photography (and the brand-scene tableau) stays full-bleed at every width. Card grids reduce columns rather than scaling cards down.

Name	Width	Key changes
Mobile	< 768px	Hamburger nav · hero h1 80→48px · photo cards stack full-width · spec grid 1-up · footer 4 cols → 1.
Tablet	768–1024px	Top nav tightens but stays horizontal · 2-up card grids · spec tables 2-up · footer 4 cols → 2.
Desktop	1024–1440px	Full top-nav · 3-up card grids · 4-up spec grids · brand scene shows full panorama.
Wide	> 1440px	Same as desktop with more breathing room · max content 1440px centered · oversized footer wordmark scales freely.

11.1 — Device ladder

Six reference frames at scale (1:6). Each frame represents a real-world viewport our pages must render at. The ladder is the visual contract — components scale within these widths, never beyond.

11.2 — Touch targets

All interactive elements meet WCAG AAA (≥44 × 44px). Paralegent goes one step further: 48 × 48px minimum on every touchable surface.

• Primary CTA at minimum 48 × 48px — meets WCAG AAA.
• Icon button at exactly 48 × 48px — circular for arrows, square for utility.
• Text input height 48px with 16px horizontal padding.
• Category tabs render as 14px label-uppercase with 12px vertical padding — effective tap area 44px+ with surrounding spacing.
• FAQ rows are not interactive (always-open) so no touch-target obligation — but row padding stays generous for scan comfort.

11.3 — Collapsing strategy

What collapses, what stays full-bleed, and what reduces columns instead of scaling. The brand scene panorama scrolls horizontally on mobile rather than squashing.

• Top nav collapses to a hamburger at < 768px; menu opens as a full-screen teal overlay with the M-stripe equivalent (primary-rule divider) at top.
• Photography & product mocks stay full-bleed at every breakpoint — never collapse to a margin'd container.
• Card grids reduce columns rather than scaling cards down — bento 4-up → 2-up → 1-up; tile typography retains its weight.
• Spec tables collapse 4 → 2 → 1 columns; spec values stay at display-sm (32px) regardless of column count.
• Brand scene tableau keeps min-width 1100px and scrolls horizontally on mobile — figures never squash, the panorama becomes a swipeable strip.
• The primary-rule divider stays 1px height across all breakpoints — never thickens, never grows.

11.4 — Image behaviour

• Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Subject (the contract / Word document) stays in the optical center.
• Lifestyle & product photos retain native aspect ratios — never letterboxed or pillarboxed.
• Logo scales proportionally with viewport. Min display: 96px wide for the wordmark, 24px for the P-mark.
• Partner logos in tech-stack strip cap at 32px height; gap reduces from 24px → 16px → 12px.