PCA AI2 – Procedimiento Constructivo Ardila

Overview

PCA AI2 is an operational automation platform built exclusively for construction companies. The brand embodies a philosophy of "Invisible Systems"—technology that works silently in the background, eliminating repetitive tasks and friction without imposing new workflows on job-site teams. The aesthetic is Pragmatic Minimalism: clean, direct, and unadorned, with a warm accent color (coral-orange #FF7A64) that signals action and energy without shouting. The emotional response is one of relief and control—users feel that their operational chaos is finally being managed by intelligent, field-tested systems. Voice: direct, field-experienced, never theoretical. The brand speaks to construction leaders who are tired of software that creates more work. Example sentence: "Tareas administrativas que desaparecen del flujo humano. Se ejecutan en segundo plano, automáticamente."

Colors

The color system is anchored in a high-contrast, light-dominant palette designed for clarity on job sites and in office environments. Primary (#FF7A64, a warm coral-orange) is the signature accent—used on all CTAs, active states, and marquee highlights to signal actionable moments. It appears frequently in the hero marquee strip and on primary buttons, creating visual momentum. Secondary (#FCB900, a golden amber) provides a complementary accent for secondary actions and highlights, often paired with dark text (#333333) for high contrast. Tertiary (#0693E3, a vivid cyan-blue) is reserved for informational elements, links, and supporting data visualization. The surface stack is predominantly white (#FFFFFF) with carefully calibrated grays: surface-container (#E9ECEF) for subtle card backgrou

Typography

The type system uses Mulish exclusively across all scales, a geometric sans-serif that conveys both technical precision and approachability. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section breaks—it commands attention without aggression. Headline-lg (40px, 600 weight, -0.02em) is used for primary section titles and page headers. Headline-md (28px, 600 weight) handles subsection titles and card headlines. Title-lg (20px, 600 weight) is applied to form labels and prominent UI text. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry all narrative content and descriptions. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is used for button text, form labels, and UI microcopy. Label-sm (

Layout

The layout follows a 12-column grid system with a fixed container max-width of 979px, centered on the viewport. The page rhythm alternates between full-width hero sections (marquee strips, video backgrounds) and contained content blocks. White-space is generous: section separation uses lg spacing (40px) vertically, with gutter spacing (24px) applied horizontally to content margins. The hero section uses a two-column layout (image + text) on desktop, collapsing to single-column on mobile. Form containers are centered and constrained to 600px max-width for optimal input field interaction. Pill badges and marquee items use flex layout with gap: 0.55rem (8.8px) for consistent micro-spacing. The marquee strip (background: #FF7A64) spans full viewport width and uses overflow: hidden with a pseud

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered elevation. Level 1 (Base/Surface): no shadow; flat background at #FFFFFF. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to card-standard components and form containers. Level 3 (Elevated/Modals): box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 50px rgba(0, 0, 0, 0.05), creating a soft, diffused depth. Form containers use a distinctive shadow: rgba(0, 0, 0, 0.14) 0px 0px 34px 6px, which creates a subtle halo effect and signal

Shapes

The shape philosophy is Soft-Technical: rounded corners are used strategically to soften the geometric precision of the grid without introducing organic curves. Buttons and primary interactive elements use rounded.md (12px / 0.75rem) for a balanced, approachable feel. Cards and containers use rounded.lg (16px / 1rem) to create visual breathing room and hierarchy separation. Form inputs use rounded.DEFAULT (8px / 0.5rem) for subtle definition without distraction. Pill badges and marquee items use rounded.full (9999px) to create a capsule shape that signals lightweight, non-blocking information.

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background: #FF7A64, color: #FFFFFF, padding: 10px 24px, height: 44px, border-radius: 12px, font-size: 15px, font-weight: 500. On hover, background transitions to #FF6A52 over 200ms ease-out. Button-secondary mirrors the primary structure but uses background: #FCB900, color: #333333, with hover state #F0A800. Button-tertiary is transparent with a 1px border in primary color; on hover, it fills with primary-container (#FFE0D9) and text shifts to on-primary-container (#5D2817). All buttons use Mulish label-md typography and include a 200ms transition on all properties. Focus state adds a 3px outline at rgba(255, 122, 100, 0.3) offset 2px from the button edge.

Containers & Surfaces Card-standard uses b

Do's and Don'ts

**Do**

• Do use primary coral (#FF7A64) exclusively on CTAs and primary interactive elements—it is the brand's signature accent and must remain visually distinct.
• Do apply the full Material 3 color stack (surface, surface-container, on-surface, etc.) to maintain consistent contrast ratios and accessibility across all UI states.
• Do use Mulish exclusively for all typography—never substitute system fonts or serif typefaces; geometric sans-serif is core to the brand's technical-yet-approachable voice.
• Do constrain content to the 979px max-width container and use lg (40px) spacing for section separation to maintain rhythm and readability.
• Do apply smooth transitions (200–250ms cubic-bezier(0.4, 0, 0.2, 1)) on all interactive state changes (hover, focus, active) to signal responsiveness without jarring jumps.
• Do use the marquee-strip component (full-width, #FF7A64 background, animated text) sparingly—only for high-priority messaging or brand moments.
• Do apply rounded.md (12px) to buttons and rounded.lg (16px) to cards; never use sharp corners (0px) on interactive elements except the marquee strip.

**Don't**

• Don't use secondary (#FCB900) or tertiary (#0693E3) as primary CTAs—they are supporting accents only. Primary coral must dominate the call-to-action hierarchy.
• Don't apply shadows heavier than 0 8px 50px rgba(0, 0, 0, 0.05)—the brand aesthetic is light and minimal, not dramatic or theatrical.
• Don't mix typefaces; Mulish is the sole font family. Avoid Open Sans, IBM Plex Sans, or system fonts in production components.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 9999px)—custom radii break visual consistency.
• Don't apply color directly to components; always use token references like {colors.primary} so the system remains wired and maintainable.
• Don't exceed 979px container width on desktop—the layout is intentionally constrained to maintain focus and readability.
• Don't animate text or elements for longer than 30s or shorter than 200ms; respect the marquee 30s linear infinite and transition 200–250ms conventions.