ErgoCadApps

Overview

ErgoCadApps is a professional SaaS suite designed for engineering firms and technical offices, delivering cloud-based calculation and documentation tools that streamline daily workflows. The platform serves a technical, detail-oriented audience who value precision, reliability, and efficiency. The design aesthetic is "Technical Warmth"—a fusion of professional minimalism with approachable color accents that humanize complex engineering software. The UI evokes confidence and clarity: users trust the system to handle critical calculations, and the interface reinforces that trust through consistent, predictable interactions and a calm, light-filled canvas.

The brand voice is direct, professional, and solution-focused. Vocabulary emphasizes capability and simplicity: "streamline," "automate," "calculate," "verify." Tone avoids jargon-heavy abstractions; instead, it speaks to concrete outcomes. Example sentence in brand voice: "Αμοιβές Ιδιωτικών Έργων—calculate private project fees in seconds, with full compliance built in."

Colors

The color system employs a dual-accent strategy: a warm golden-orange primary (#ee9b01) for calls-to-action and interactive elements, paired with a deep forest green secondary (#074c34) for trust, stability, and secondary actions. The primary accent (#ee9b01) appears on all CTAs, hover states, and brand moments—it's the color users click. The secondary (#074c34) reinforces institutional credibility and appears in navigation, badges, and confirmatory states. A tertiary accent (#f69ea4, soft rose) provides gentle feedback for warnings or secondary highlights. The surface stack is deliberately light and neutral: #f8f8f8 (surface) to #ffffff (surface-bright), with subtle gray outlines (#cccccc, #d6d6d6) that define boundaries without visual noise. On-surface text is a near-black #303030, ensur

Typography

The type system is built on Open Sans, a humanist sans-serif that balances technical precision with approachability. Display (60px, 700 weight) anchors hero sections and major headings with -0.04em letter-spacing for visual tightness. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish information hierarchy without excessive weight. Body text (16–18px, 400 weight) is set at 24–28px line-height for comfortable reading on screens; 0.01em letter-spacing prevents the typeface from feeling cramped. Labels and UI text (12–14px, 500–600 weight) use 0.01–0.02em letter-spacing to maintain clarity at small sizes. All headings use -0.01 to -0.04em letter-spacing to create visual compression and authority. When displaying small labels over busy backgrounds (e.g., status badges)

Layout

The layout grid is a 12-column fluid system with a max-width of 1200px, centered on the viewport. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter between columns is 24px, collapsing to 12px on mobile. Container max-width is 1200px; content rarely exceeds 970px on desktop to maintain comfortable line lengths and visual breathing room. White-space is generous but purposeful: sections are separated by lg spacing (40px) to create visual rhythm and reduce cognitive overload. Cards and components use md padding (24px) internally, with sm (12px) for nested elements. The layout philosophy prioritizes clarity over de

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, dark shadows common in older enterprise software. Level 1 (base surface) has no shadow; it is the neutral canvas. Level 2 (standard cards, dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, diffuse shadow that suggests a card floating 4–6px above the surface. Level 3 (modals, elevated popovers) uses box-shadow: 0 5px 8px -1px rgba(25, 25, 25, 0.5)—a slightly darker, more defined shadow indicating 12–16px elevation. Interactive elements (buttons, inputs) on hover gain a subtle shadow boost: 0 4px 12px rgb

Shapes

The shape philosophy is "Precision with Approachability." Border-radius values are deliberately small and technical: sm (2px) for buttons and tight UI elements, DEFAULT (4px) for inputs and standard containers, md (6px) for slightly softer cards, lg (20px) for larger, more prominent cards and modals, and full (9999px) for badges and pill-shaped elements. The 2px radius on buttons (#ee9b01 CTAs) signals precision and control—appropriate for engineering software where exactness matters. Larger cards use 6–20px radius to create visual softness and reduce the austere feeling of a purely rectangula

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses the brand orange (#ee9b01) with white text, 12px horizontal padding, 48px height, and 2px border-radius for a compact, technical appearance. On hover, the background shifts to #f7a500 (primary-container), the shadow deepens to 0 5px 8px -1px rgba(25, 25, 25, 0.5), and the button translates up 2px (transform: translateY(-2px)) over 200ms cubic-bezier(0.4, 0, 0.2, 1). On active/click, the background darkens to #d68800 and the transform resets to 0px, creating tactile feedback. Secondary buttons use a transparent background with a 1px solid #cccccc border and primary text color; on hover, the background becomes #fcfcfc and the border shifts to primary orange. All button text uses label-

Do's and Don'ts

**Do**

• Do use primary orange (#ee9b01) exclusively for primary CTAs and interactive focus states—it is the only accent that signals "click me" to users.
• Do maintain 16:1 contrast between on-surface (#303030) and surface (#f8f8f8) for all body text to ensure accessibility for users with low vision.
• Do apply md spacing (24px) between major sections and lg spacing (40px) between hero and content to create visual breathing room and reduce cognitive load.
• Do use Open Sans at 400 weight for body text and 600+ for headings; avoid mixing weights within a single component to maintain visual clarity.
• Do pair primary orange buttons with secondary green (#074c34) badges or accents to reinforce the dual-accent system and create visual rhythm.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and elevated elements; never use harsh, close shadows that feel heavy or dated.

**Don't**

• Don't use primary orange (#ee9b01) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and interactive states to maintain signal clarity.
• Don't apply border-radius larger than 6px to buttons or form inputs; the technical audience expects compact, precise UI elements, not rounded, playful shapes.
• Don't mix Open Sans with system fonts or serif typefaces; the entire system relies on Open Sans for consistency and professional appearance.
• Don't use the secondary green (#074c34) as a primary accent or CTA color; it is a supporting color for trust and institutional elements, not the main interactive signal.
• Don't exceed 1200px container max-width or use dense, multi-column layouts that overwhelm users with information; prioritize clarity and white-space.
• Don't apply shadows darker than rgba(25, 25, 25, 0.5) or blur-radius larger than 12px; the system uses soft, diffuse shadows to maintain a light, modern aesthetic.