Docomate

Overview

Docomate is a document intelligence operating system that automates enterprise workflows through AI-powered agents. It serves operations teams, finance departments, and document-heavy organizations seeking to eliminate manual processing. The design aesthetic is **Architectural Minimalism**—a disciplined, ink-forward approach where warm neutrals (bone and ink) create a calm, professional canvas, punctuated by a single hero accent (amber beam) that signals action and brand presence. The UI evokes precision and clarity: every element is intentional, every interaction is direct, and the visual language mirrors the product's core promise—intelligent automation without friction.

The brand voice is confident, direct, and human-centered. Docomate speaks in active verbs and concrete outcomes: "read it, transform it, send it where it belongs." The tone avoids jargon while remaining technical; it respects the user's expertise and time. Vocabulary favors clarity over cleverness—"workflow" over "orchestration," "agents" over "bots." Example sentence in Docomate's voice: "Your documents arrive, our agents extract and route them, and your team reviews only what matters."

Colors

Docomate's color system is built on a warm-neutral foundation (ink #0A0A0A, bone #FAFAF7) that establishes trust and professionalism. The primary color is ink (#0A0A0A), used for all primary CTAs, headings, and key interactive elements—it commands attention without aggression. The secondary color is beam amber (#F5A524), the single hero accent reserved exclusively for brand moments, focus states, and highlight strokes. This amber appears on the brand mark, primary button hover states, and focus rings (via the 3px ring at rgba(253, 216, 136, 1.0)). Tertiary violet (#7A5AF8) is used sparingly for category badges and secondary actions. The surface stack progresses from bone (#FAFAF7, primary background) through bone-2 (#F4F4EE, raised surfaces) to bone-3 (#ECECE4, sunken/disabled states). Bor

Typography

Docomate uses Manrope (variable, 400–800) as the single sans-serif family for both display and UI, paired with JetBrains Mono for codes, timestamps, and tabular numbers. The type system is anchored at 16px (body-md) and scales via a 1.2 modular ratio: display at 112px (weight 800, -0.03em tracking, 0.98 line-height), headline-lg at 64px (weight 800, -0.03em), headline-md at 48px (weight 800, -0.02em), title-lg at 28px (weight 800, -0.02em), body-lg at 22px (weight 400, -0.005em, 1.5 line-height), body-md at 16px (weight 400, -0.005em, 1.5 line-height), label-md at 14px (weight 600, -0.005em), and label-sm at 12px (weight 600, 0.14em tracking for uppercase). Headings use weight 800 (black) and tight negative tracking (-0.03em to -0.02em) to create visual hierarchy and brand presence. Body t

Layout

Docomate uses a fixed 12-column grid with a max-width of 1280px (--ef-container), centered on the page. The page padding is 28px top/bottom and 40px left/right, creating a gutter of 24px between content and viewport edges. Spacing follows a 4px base unit: xs (4px), sm (12px), md (24px), lg (40px), xl (64px). Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections. The sidebar is 248px wide with a 1px border (--ef-border: #E6E6DE) and uses bone-2 (#F4F4EE) as background. The topbar is 60px tall, sticky, with a bottom border. Cards and containers use md spacing (24px) for internal padding. Input fields use sm spacing (12px) for padding. The layout rhythm emphasizes breathing room: generous margins between sections, tight internal padding within compon

Elevation & Depth

Docomate uses a flat, crisp shadow system with minimal depth. Elevation is conveyed through borders (1px solid #E6E6DE) rather than shadows, maintaining the clean, architectural aesthetic. Shadows are reserved for interactive moments: menus, modals, and toasts. The shadow scale is: sm (0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 1px rgba(10, 10, 10, 0.04)), md (0 6px 16px -4px rgba(10, 10, 10, 0.10), 0 2px 4px rgba(10, 10, 10, 0.05)), lg (0 18px 40px -12px rgba(10, 10, 10, 0.18), 0 4px 8px rgba(10, 10, 10, 0.06)). Focus states use a 3px ring shadow (box-shadow: 0 0 0 3px rgba(253, 216, 136, 1.0))

Shapes

Docomate employs **Architectural Sharpness**—a disciplined radius system that balances precision with approachability. Buttons and inputs use sm radius (4px) for a crisp, technical feel. Cards and larger containers use md radius (8px) or lg radius (12px) for slightly softer edges. Chips, badges, and pills use full radius (999px) for maximum roundness. The sidebar nav items use md radius (8px). Focus rings use sm radius (4px) to match button corners. This hierarchy—tight on interactive chrome, slightly softer on containers—creates visual coherence while maintaining the brand's architectural pre

Components

Action Elements Buttons are the primary interactive element. **button-primary** uses ink (#0A0A0A) background with bone (#FAFAF7) text, 12px vertical / 22px horizontal padding, 48px height, 4px radius, and label-md typography (14px, weight 600). On hover, background transitions to ink-800 (#1F1F1D) over 120ms (cubic-bezier(0.2, 0.7, 0.2, 1)). On focus, apply box-shadow: 0 0 0 3px rgba(253, 216, 136, 1.0). **button-secondary** uses bone (#FAFAF7) background with ink (#0A0A0A) text and a 1px ink border; on hover, background becomes bone-2 (#F4F4EE). **button-accent** uses beam amber (#F5A524) background with ink text for high-priority secondary actions. All buttons use font-weight: 700 and letter-spacing: -0.005em.

Containers & Surfaces **card** uses white (#FFFFFF) background, 1px

Do's and Don'ts

**Do**

• Do use ink (#0A0A0A) for all primary CTAs and headings—it is the brand's anchor and commands attention.
• Do apply the amber beam (#F5A524) exclusively to focus rings, hover states on secondary elements, and the brand mark—never as a background for large surfaces.
• Do maintain 1px borders (#E6E6DE) on cards and inputs instead of relying on shadows; the flat aesthetic is core to the brand.
• Do use Manrope weight 800 for all headings and weight 600 for labels; this weight hierarchy is essential to visual clarity.
• Do apply negative letter-spacing (-0.03em to -0.02em) on display and headline sizes to tighten the visual rhythm.
• Do use the 4px base unit consistently: all padding, margin, and spacing should be multiples of 4px (4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128).

**Don't**

• Don't use secondary (amber) or tertiary (violet) colors as primary backgrounds or dominant text; they are accents only.
• Don't apply shadows to cards or inputs—use 1px borders instead. Shadows are reserved for modals, menus, and toasts.
• Don't mix typefaces; Manrope is the single sans-serif for all UI. Use JetBrains Mono only for codes and timestamps.
• Don't use radius > 16px on buttons, inputs, or nav items; reserve xl (24px) for rare, special cases.
• Don't apply positive letter-spacing on headings; use negative tracking (-0.03em to -0.02em) to maintain the architectural precision.
• Don't use near-black or near-white as accent colors; the brand's accent is the warm amber beam (#F5A524), not a neutral.