Vincent AI

Overview

Vincent AI is a legal technology platform that transforms how law practices manage casework through intelligent automation. Serving solo practitioners to mid-size firms, the design system embodies "Professional Clarity"—a sophisticated aesthetic that balances cutting-edge AI capability with the trust and precision demanded by the legal industry. The visual language uses a teal-to-navy gradient hero backdrop with clean white surfaces, creating a sense of depth and forward momentum while maintaining the formality expected in legal contexts. The brand personality is confident yet approachable: Vincent speaks with the authority of a seasoned legal technologist, never condescending, always precise. Example sentence in brand voice: "Vincent handles the document review so you can focus on strategy."

Colors

The Vincent color system is anchored on a primary blue (#4169e1, Royal Blue) that appears on all interactive elements—buttons, links, focus states—signaling trust and professional authority. This primary is paired with a secondary cyan (#0090ff, Vivid Blue) used for icons, highlights, and accent UI elements that draw attention to key features. The tertiary teal (#00a8a8) provides a supporting accent for status indicators and secondary highlights. The surface stack progresses from pure white (#ffffff) for primary content areas through light grays (#f8f9fa, #e9ecef) for container backgrounds, creating visual hierarchy without darkness. Text on light surfaces uses #212121 (near-black) for headings and #575757 (mid-gray) for body copy, ensuring 7:1 contrast for accessibility. The error state i

Typography

The type system uses At Aero Retina (a geometric, modern typeface) for display and headline levels, paired with Open Sans for body and label text. This pairing communicates innovation (the distinctive headline font) grounded in clarity (the highly legible body font). Display text (64px, 700 weight) appears only in hero sections and major page titles, set in white over gradient backgrounds with -0.04em letter-spacing for visual tightness. Headline-lg (40px, 600 weight) is used for section titles and card headers, maintaining -0.02em tracking. Body-md (16px, 400 weight, 24px line-height) is the workhorse for all paragraph text, with 0.01em letter-spacing to prevent the open-source font from feeling loose. Labels use 14px at 600 weight with 0.05em letter-spacing to create visual distinction o

Layout

Vincent uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The hero section spans full viewport width with a 40px gutter on each side (24px on tablet, 12px on mobile), creating breathing room around the main headline and CTA. Section separation uses lg spacing (40px) between major content blocks, with md spacing (24px) between related subsections. Container backgrounds (cards, form groups) use surface-container tokens (#e9ecef, #f0f2f5) to create subtle visual separation without harsh borders. The primary CTA button is always positioned at the end of hero copy, with 24px padding horizontally and 12px vertically, using a 3px border-radius for a slightly softer but still professional appearance. Form fields sta

Elevation & Depth

Depth in Vincent is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation system uses three levels: Level 1 (Base) is the white surface (#ffffff) with no shadow, used for primary content areas and cards at rest. Level 2 (Standard) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards, modals, and floating elements, creating a soft lift of 3-8px. Level 3 (Elevated) uses box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3) for full-screen modals and overlays, creating significant visual separation. On hover, cards transition from Level 1 to Level 2 over

Shapes

The shape philosophy is "Refined Minimalism"—subtle rounding that feels professional without appearing playful. Buttons and form inputs use 4px border-radius (DEFAULT), a conservative choice that softens hard edges while maintaining geometric precision. Cards and larger containers use 6px (md), creating a slightly more approachable appearance for grouped content. Modals and full-width overlays use 8px (lg) at the top corners only, maintaining a grounded, architectural feel. Badges and pills use full (9999px) border-radius for maximum softness, appropriate for status indicators and tags. The ra

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #4169e1 background with white text, 12px vertical and 24px horizontal padding, 4px border-radius, and 400 font-weight. On hover, the background transitions to rgba(65, 105, 225, 0.8) over 200ms, maintaining the same text color. The active state (on click) uses the same hover color with an inset box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) to indicate press. Secondary buttons (button-secondary) invert this: white background with #4169e1 text and a 1px solid #4169e1 border. On hover, they fill to primary blue with white text, creating a clear visual progression. Tertiary buttons use #061d4e (dark navy) background with white text, appearing only in modals or secondary contexts; on hove

Do's and Don'ts

**Do**

• Do use the primary blue (#4169e1) exclusively for interactive elements—buttons, links, focus states—to create a consistent affordance pattern that users learn to recognize.
• Do maintain minimum 40px margins around major content sections and use md (24px) spacing between related elements to create visual breathing room that reduces cognitive load.
• Do apply 4px border-radius to buttons and inputs, 6px to cards, and 8px to modals; this hierarchy signals component importance through subtle shape progression.
• Do use Open Sans for all body and label text at 400 weight; reserve 600 weight only for headlines and labels to maintain visual hierarchy without creating visual noise.
• Do transition all interactive states (hover, focus, active) over 150-200ms using ease-in-out timing to feel responsive and intentional, never instant.
• Do layer shadows using the three-level elevation system (no shadow, 0 3px 8px, 0 32px 68px) rather than inventing custom shadows; this creates consistency and predictability.

**Don't**

• Don't use colors outside the defined palette for interactive elements; off-palette colors break the trust signal that the primary blue establishes.
• Don't apply border-radius values smaller than 2px or larger than 12px outside of full (9999px); this range maintains the refined minimalism aesthetic.
• Don't use shadows larger than 0 32px 68px or smaller than 0 3px 8px; the three-level system is exhaustive and additional custom shadows create visual inconsistency.
• Don't mix At Aero Retina and Open Sans weights arbitrarily; use At Aero only for display/headline levels and Open Sans for body/label to maintain the innovation-plus-clarity pairing.
• Don't set line-height below 24px for body text or below 20px for labels; tighter leading reduces legibility and creates visual tension inappropriate for legal content.
• Don't apply color overlays or gradients directly over photographic backgrounds without testing contrast; all text over images must maintain 7:1 contrast ratio using rgba overlays at 85%+ opacity.