DocuWare

Overview

DocuWare is an enterprise-grade document management and workflow automation platform that transforms how organizations capture, process, and manage critical business documents. The design system embodies 'Corporate Clarity'—a modern, professional aesthetic that prioritizes information hierarchy, accessibility, and trust through clean typography, purposeful color contrast, and intuitive interaction patterns. The brand serves mid-market to enterprise customers who demand both sophistication and reliability in their document workflows. The UI evokes confidence and competence: every element is deliberate, every interaction is predictable, and every visual decision reinforces the promise of operational excellence. Voice: direct, authoritative, solution-focused. Example: 'Reduce manual data entry by 80% with GenAI-powered extraction—zero setup required.'

Colors

The color palette centers on a deep corporate blue (#303aae) as the primary accent, deployed across all call-to-action buttons, navigation highlights, and interactive states. This blue conveys trust and professionalism while maintaining sufficient contrast (WCAG AA+) against white surfaces (luminance ratio 8.2:1). Secondary accents include a bright cyan (#0099eb) for links and tertiary actions, and a vibrant teal (#37cd8f) for success states and confirmations. The surface stack uses a clean white (#ffffff) as the base, with carefully calibrated grays (#f7f7f7 for containers, #e9e9e9 for dividers, #353535 for body text) to create visual separation without introducing color noise. Dark overlays use rgba(0, 0, 0, 0.45) for modals and consent dialogs, ensuring readability while maintaining foc

Typography

The type system uses AvenirNext as the primary typeface family, chosen for its geometric clarity and professional weight range. Display and headline levels (48–60px, fontWeight 700–900) anchor page sections and hero messaging, with tight line-height (56–68px) and negative letter-spacing (-0.04em to -0.02em) to create visual impact and hierarchy. Body text (16–18px, fontWeight 400) maintains a generous 24–28px line-height for readability on screen, while labels and UI text (12–14px, fontWeight 600) use AvenirNext Demi to ensure legibility at smaller scales. All interactive text (buttons, links) receives a 200ms transition on color and background-color properties to signal state changes. Small labels over busy backgrounds should receive text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain c

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing ample breathing room for enterprise dashboards and content-heavy pages. The gutter spacing is consistently 24px, applied symmetrically to create visual rhythm and predictability. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for grouped elements within cards. The hero section spans full-width with 64px vertical padding (xl spacing) to establish visual dominance, while card-based layouts use md padding (24px) internally to balance content density. Responsive breakpoints collapse the grid to 6 columns at tablet widths (768px) and single-column at mobile (< 480px), maintaining the same spacing scale proportionally.

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics subtle light diffusion rather than dramatic drop-shadows. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and contained elements, creating minimal separation from the base surface. Level 2 (md elevation: 0 4px 12px rgba(0, 0, 0, 0.08)) is used for interactive elements on hover and secondary containers, signaling state change and focus. Level 3 (lg elevation: 0 16px 40px rgba(0, 0, 0, 0.12)) is reserved for modals, dropdowns, and floating action elements that demand visual prominence. All shadow transitio

Shapes

The shape philosophy is 'Refined Pragmatism'—rounded corners are applied selectively to soften the interface without sacrificing professional appearance. Buttons and primary interactive elements use lg rounding (1rem / 16px), creating a friendly yet authoritative appearance. Cards and containers use md rounding (0.75rem / 12px) to maintain visual cohesion while reducing visual weight. Input fields use minimal rounding (3px) to align with form-field conventions and ensure text legibility. Badges and status indicators use full rounding (9999px) to emphasize their discrete, non-interactive nature

Components

Action Elements Buttons are the primary interaction mechanism and must use consistent sizing: 48px height with 12px vertical and 24px horizontal padding. Primary buttons (#303aae background, white text) receive md elevation on hover (0 4px 12px rgba(0, 0, 0, 0.08)) and transition to a darker blue (#1a2280) on active state. Secondary buttons use transparent backgrounds with a 2px primary-colored border, transitioning to the primary-container background (#e9f3fd) on hover. All button text uses label-md typography (14px, fontWeight 600) with 200ms transition-duration on background-color and box-shadow properties. Ghost buttons (transparent, no border) are reserved for tertiary actions and use the same hover treatment as secondary buttons.

Containers & Surfaces Cards use a 1px solid o

Do's and Don'ts

**Do**

• Do use primary blue (#303aae) exclusively for primary CTAs and focus states—never apply it to passive elements or backgrounds.
• Do maintain the 48px button height and 24px horizontal padding across all interactive buttons to ensure touch-target accessibility (minimum 44×44px).
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.08)) on hover to cards and buttons to signal interactivity; never use color alone.
• Do use AvenirNext Demi (fontWeight 600) for all labels and UI text below 16px to maintain legibility at small scales.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to provide smooth visual feedback.
• Do use the full rounded value (9999px) for badges and status indicators to visually distinguish them from interactive containers.

**Don't**

• Don't use secondary blue (#0099eb) or cyan for primary CTAs—reserve it for links and tertiary actions only.
• Don't apply box-shadows larger than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components; reserve lg shadows for modals and floating elements.
• Don't use rounded corners smaller than 3px on input fields or form elements, as this reduces perceived affordance and clarity.
• Don't apply text-shadow or text-stroke to body text (16–18px); use color contrast and background color to ensure readability instead.
• Don't mix AvenirNext with system fonts (Helvetica, -apple-system) in the same component; always specify the full AvenirNext family stack.
• Don't transition opacity or transform properties on buttons; use background-color and box-shadow transitions only to maintain predictable interaction patterns.