Lawdex

Overview

Lawdex is a practice management platform purpose-built for Nigerian law firms and chambers, delivering institutional-grade case registry, court diary, task management, finances, documents, and team collaboration in a single workspace. The brand embodies 'Professional Clarity'—a design philosophy that prioritizes legibility, trust, and efficiency over decorative flourish. The UI uses a clean, light-first palette anchored by a vibrant cobalt blue (#2563eb) that signals actionability and institutional authority, paired with a sophisticated sans-serif type system (Geist + Plus Jakarta Sans) that conveys precision without coldness. The emotional response is one of competence and relief: a lawyer using Lawdex feels their practice is organized, secure, and ready for the next deadline.

The brand voice is direct, professional, and locally grounded. Lawdex speaks to Nigerian legal practitioners in their language—acknowledging the specific pain points of managing matters across multiple courts, tracking deadlines in a fragmented ecosystem, and handling finances in Naira. The tone avoids jargon-heavy corporate speak; instead, it uses concrete, action-oriented language. Example sentence: 'Law firms run on deadlines, documents and trust. Too many still run on paper diaries, WhatsApp threads and memory.'

Colors

The color system is built on a foundation of institutional trust and clarity. Primary (#2563eb) is the signature cobalt blue used exclusively for call-to-action buttons ('Start free trial'), interactive links, and focus states—it appears 202 times across the site, establishing it as the dominant accent. This blue is neither corporate-cold nor trendy; it reads as reliable and professional, the color of a law firm's letterhead. Secondary (#0f9d58) is a vibrant green reserved for success states, positive indicators, and confirmatory actions—it appears sparingly to avoid diluting the primary's authority. Tertiary (#1098ad) is a teal used for informational elements and secondary interactive states. The surface stack is deliberately minimal: surface (#ffffff) is pure white for maximum legibility

Typography

The type system reflects the dual nature of Lawdex: professional rigor paired with modern accessibility. Geist (400–700 weights) is the primary typeface, chosen for its geometric clarity and excellent readability at small sizes—critical for dense case registries and financial tables. Plus Jakarta Sans (700–800 weights) is reserved for display and headline contexts, adding visual warmth and distinction to section headers without sacrificing legibility. Display (60px, 700 weight, -0.04em tracking) is used sparingly for hero headlines; headline-lg (40px, 600 weight, -0.02em tracking) anchors major sections; headline-md (28px, 700 weight, Plus Jakarta Sans) introduces subsections with authority. Body-lg (18px, 400 weight) is used for hero copy and introductory paragraphs; body-md (16px, 400 we

Layout

The page layout follows a 12-column grid with a fixed max-width of 1280px, centering content on desktop while maintaining full-width fluidity on mobile (no horizontal scroll). The hero section uses 80px vertical padding (lg spacing) with 24px horizontal gutter (gutter token), creating breathing room around the headline and CTA. Section separation is enforced via lg spacing (40px) between major content blocks—this rhythm prevents cognitive overload when scanning multiple features or pricing tiers. Container max-widths range from 1024px to 1536px depending on content type: dense tables use 1024px to maintain line-length readability; feature showcases use 1280px to allow side-by-side layouts. White-space is treated as a first-class design element: never collapse margins below md spacing (24px

Elevation & Depth

Depth in Lawdex is achieved through subtle shadow layering and border definition, not through dark overlays or glassmorphism. The elevation system uses three levels: Level 1 (Base) has no shadow—cards and containers sit flush on the surface (#ffffff) with only a 1px border in outline-variant (#cbd5e1) to define edges. Level 2 (Standard Card) applies box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—used for cards, modals, and floating elements that need mild separation from the background. Level 3 (Elevated/Hover) applies box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12)—reserved for hover states on car

Shapes

The shape philosophy is 'Institutional Precision'—rounded corners are used strategically to soften institutional rigidity without introducing playfulness. Buttons use rounded.full (9999px) to create pill-shaped CTAs that feel modern and clickable; this is the only place where maximum rounding is applied, making buttons instantly recognizable as interactive. Cards and containers use rounded.lg (1rem / 16px) for a subtle, professional curve that avoids sharp corners without appearing rounded. Input fields use rounded.DEFAULT (0.5rem / 8px) for a minimal curve that maintains visual hierarchy belo

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses backgroundColor: {colors.primary} (#2563eb), textColor: {colors.on-primary} (white), rounded: {rounded.full} (9999px), padding: 8px 18.4px, height: 40px, fontWeight: 500. On hover, shift backgroundColor to #1d4ed8 (a 10% darker blue) with a 150ms ease transition—do not change text color. On active/pressed, shift to #1e40af (20% darker) to provide tactile feedback. Button-secondary uses transparent background with a 1px border in {colors.outline} (#64748b), same padding and height as primary. On hover, apply backgroundColor: {colors.surface-container-high} (#e2e8f0) to indicate interactivity without overwhelming the page. All buttons must have a minimum touch target of 44px height on mobile (use padding to

Do's and Don'ts

**Do**

• Do use primary (#2563eb) exclusively for CTAs, links, and focus states—never use it for decorative elements or backgrounds.
• Do maintain minimum 44px touch targets on all interactive elements; use padding, not font-size, to achieve this on mobile.
• Do apply box-shadow transitions (md → lg) on card hover to signal depth change; never change background color alone.
• Do use Geist for all body text and labels; reserve Plus Jakarta Sans only for display and headline contexts (28px and above).
• Do enforce lg spacing (40px) between major sections; never collapse margins below md (24px) between content blocks.
• Do apply 1px borders in outline-variant (#cbd5e1) to all cards and containers to define edges without harsh contrast.
• Do use rounded.full (9999px) only on buttons and badges; use rounded.lg (16px) on cards and rounded.DEFAULT (8px) on inputs.
• Do test all interactive states (hover, active, focus, disabled) with a 150–200ms ease transition to provide smooth feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#0f172a) for dark text and on-primary (#ffffff) only on primary backgrounds.
• Don't apply shadows without corresponding background color changes—shadows alone don't signal interactivity; pair them with subtle color shifts.
• Don't use secondary (#0f9d58) or tertiary (#1098ad) for primary CTAs; these are supporting accents only and dilute the primary's authority.
• Don't exceed 1280px container max-width on desktop; wider layouts reduce readability for dense legal content and case registries.
• Don't use rounded corners greater than rounded.lg (16px) on cards or containers; excessive rounding reads as playful and undermines institutional trust.
• Don't apply text-shadow or text-stroke to body text; use color contrast and weight changes instead to maintain legibility.
• Don't mix Geist and Plus Jakarta Sans in the same headline; choose one per section to maintain visual consistency.
• Don't reduce spacing below md (24px) between sections on mobile; maintain breathing room even on small screens to prevent cognitive overload.