EmendoAI

Overview

EmendoAI is an AI-powered construction workflow platform that transforms complex job data into actionable insights, estimates, and financial automation. The design system embodies "Warm Professionalism"—a blend of approachable, human-centered interface design with the precision and clarity demanded by construction professionals. The brand personality is confident yet accessible: it speaks to busy contractors and project managers who value efficiency without sacrificing clarity. The visual language combines a vibrant golden-yellow accent (#ffc530) with clean, neutral surfaces and a modern sans-serif typeface (DM Sans) to convey both energy and trustworthiness. The UI evokes a sense of control and simplification—every interaction removes friction from the user's workflow.

The tone is direct, practical, and solution-focused. EmendoAI avoids jargon and instead uses concrete, action-oriented language. Example sentence: "Your AI assistant fetches exact job costs, inventory details, and task status in seconds—cutting admin work by 50 percent."

Colors

The color palette is anchored by a warm, energetic primary accent—#ffc530 (golden yellow)—used exclusively for call-to-action buttons, interactive highlights, and key brand moments. This color appears on the hero CTA ("Try it free for 30 days") and signals opportunity and forward momentum. The primary container (#fff9ea, a soft cream) provides a subtle background for secondary actions and badges, maintaining visual hierarchy without competing for attention. The surface stack uses pure white (#ffffff) as the dominant background, with carefully calibrated grays (from #fafafa to #e0e0e0) for container layering and depth. On-surface text is set to a near-black (#020817) for maximum readability at 16px body size. Secondary colors include a professional slate gray (#64748b) for supporting text a

Typography

The type system is built on DM Sans, a geometric sans-serif that balances warmth with technical precision. Display (60px, 800 weight) is reserved for hero headlines and brand moments, using a tight -0.02em letter-spacing to create visual impact. Headline-lg (48px, 800 weight) anchors major sections; headline-md (32px, 700 weight) breaks up content hierarchy. Title-lg (24px, 600 weight) labels feature sections and card headers. Body-lg (18px, 400 weight) is used for hero copy and testimonials, while body-md (16px, 400 weight) serves as the default paragraph text with a 24px line-height for comfortable reading. Label-md (14px, 600 weight) is applied to button text and form labels, with a 0.01em letter-spacing to add subtle distinction. Label-sm (12px, 500 weight) is used for badges, metadata

Layout

The layout follows a 12-column grid system with a max-width of 1440px, maintaining a fluid, responsive structure that scales from mobile (single column) to desktop (full grid). The gutter is consistently 24px, applied as margin between grid columns and as padding within containers. Page rhythm is established through lg spacing (40px) for major section separation—between hero and features, between features and testimonials. The hero section uses a 2-column layout on desktop (text on left, mobile mockup on right), with the primary CTA positioned prominently at 56px height and 44px horizontal padding. Card grids typically use 3 columns on desktop, collapsing to 1–2 on tablet and mobile. Testimonial cards are arranged in a scrollable or stacked layout with md spacing (24px) between items. Inpu

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surface colors rather than dramatic depth effects. The base elevation (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, input fields) uses elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) and a 1px border in #c4c4c4 to define the edge. Level 3 (elevated cards, modals, hover states) applies elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) and shifts the background to surface-container-low (#f5f5f5). On hover, cards transition to elevation.md and lift 2px (transform: translateY(-2px)) to signal interactivity. P

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied strategically to soften the interface while maintaining a professional, constructed appearance. Buttons use lg rounding (1rem / 16px), creating a pill-like shape that feels approachable and modern. Input fields use full rounding (9999px) for secondary actions and form inputs, emphasizing their role as entry points. Primary CTAs use lg rounding (16px) to balance prominence with approachability. Cards and containers use xl rounding (1.5rem / 24px) for major content blocks, creating visual breathing room. Smaller UI elements—bad

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #ffc530 background with black text, 56px height, 24px vertical padding, and 44px horizontal padding, set in label-md (14px, 600 weight). On hover, the background shifts to #f4b000 (inverse-primary) and receives a 0 4px 12px rgba(244, 176, 0, 0.2) shadow, with a 200ms ease transition. On active, the button scales to 0.98 to provide tactile feedback. The button-secondary component uses #fff9ea background with #262626 text, full rounding (9999px), 40px height, and 8px vertical / 24px horizontal padding. It includes a 1px border in #c4c4c4 and transitions to #fff5dc on hover with a 200ms ease timing. Both buttons disable at opacity 0.5 with cursor: not-allowed.

Containers & Surfaces Cards

Do's and Don'ts

**Do**

• Do use #ffc530 (primary) exclusively for CTAs, interactive highlights, and brand moments—never for backgrounds or body text.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between related content blocks to establish clear visual rhythm.
• Do use DM Sans at 16px body-md with 24px line-height for all paragraph text to ensure readability and professional appearance.
• Do apply elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) and translateY(-2px) on card hover to signal interactivity without jarring motion.
• Do use full rounding (9999px) for secondary buttons and input fields to emphasize their role as entry points and supporting actions.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) in borders or shadows—use #c4c4c4 for borders and rgba(0, 0, 0, 0.08) for shadows.
• Don't apply primary color (#ffc530) to body text, backgrounds, or non-interactive elements—reserve it for CTAs and brand highlights only.
• Don't exceed 1440px container max-width; content that stretches beyond this loses focus and readability.
• Don't use system fonts or generic sans-serif fallbacks in place of DM Sans—the typeface is core to the brand identity.
• Don't apply shadows stronger than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) or use drop-shadows; keep depth subtle and refined.