Vide Infra

Overview

Vide Infra is an award-winning design and development agency that transforms complex digital challenges into refined, purposeful solutions. The brand embodies Architectural Minimalism—a design philosophy that prioritizes structural clarity, precision geometry, and restrained elegance. The visual language is deliberately austere: a monochromatic palette of deep charcoal (#191b1d) and pure white (#ffffff) with carefully calibrated grays (#666666, #cdcecf) creates an atmosphere of professional sophistication and intellectual rigor. Every interface element serves a function; nothing is decorative. The emotional response is one of confidence and mastery—users feel they are in the hands of experts who understand both craft and strategy.

The brand voice is direct, authoritative, and unadorned. Vide Infra speaks in declarative statements: "Design. Development. Mastership." The vocabulary is precise and technical, avoiding hyperbole or marketing clichés. Tone is calm and assured, never breathless. Example sentence in brand voice: "We design and develop exceptional digital products & services, eCommerce, and brand communication solutions." The personality is that of a seasoned craftsperson—confident without arrogance, sophisticated without pretension.

Colors

The color system is built on a foundation of architectural restraint. Primary (#191b1d) is the deep charcoal used for all text, interactive elements, and primary CTAs—it is the dominant visual anchor and the signature of the brand's no-nonsense aesthetic. On-primary (#ffffff) provides maximum contrast for readability and accessibility. The surface stack moves through carefully calibrated grays: surface-container (#e9ecef) serves as the default card and section background, while surface-container-high (#e0e0e0) and surface-container-highest (#d0d0d0) create subtle depth for hover states and layered UI. Secondary (#666666) is used for supporting text, metadata, and secondary interactive states—it is intentionally muted to maintain visual hierarchy. Tertiary (#505050) appears in disabled stat

Typography

The type system is anchored in GraphikLCG, a geometric sans-serif that reinforces the brand's architectural precision. Display (76px, 500 weight, -0.08em letter-spacing) is reserved for hero headlines and the most prominent page titles—its tight tracking and substantial weight create visual authority. Headline-lg (56px, 500 weight, -0.07em) is used for section titles and major content divisions. Headline-md (38px, 500 weight, -0.05em) serves as the secondary heading level. Body-lg (22px, 400 weight, -0.05em) is used for introductory paragraphs and prominent body copy, while body-md (19px, 400 weight, -0.05em) is the standard paragraph text. Label-md (16px, 400 weight, -0.04em) is applied to button text, form labels, and UI labels. All type sizes use negative letter-spacing (ranging from -0

Layout

The page grid is a 12-column fluid layout with a maximum container width of 1280px, ensuring content remains readable on all screen sizes while maintaining visual proportion. The gutter spacing is 24px, applied consistently between columns and sections. White-space is used strategically to create breathing room: section separation uses lg spacing (40px) to create clear visual breaks, while internal card padding uses md spacing (24px). The layout philosophy is one of generous margins and minimal visual clutter—empty space is as important as content. Container max-widths are enforced at 1280px to prevent text lines from becoming too long (optimal reading width is 60–80 characters). Padding is applied asymmetrically when appropriate: hero sections use 87.5px top padding and 80px horizontal pa

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering, not through color gradients or glassmorphism. The elevation scale uses three primary levels: sm (0 1px 2px rgba(25, 27, 29, 0.06)) for minimal lift on interactive elements like buttons on hover; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards, dropdowns, and modals that need clear separation from the background; and lg (0 8px 24px rgba(25, 27, 29, 0.12)) for floating elements like sticky headers or prominent overlays. Borders are used as the primary visual separator: apply 1px solid #d0d0d0 to card edges and input fields to def

Shapes

The shape philosophy is Geometric Precision—rounded corners are used sparingly and intentionally. The default border-radius is 0.5rem (8px), applied to buttons, input fields, and small cards. Larger containers and modals use 1rem (16px) for a slightly softer appearance. Buttons and interactive elements use 0.5rem (8px) to maintain a crisp, technical feel. Circular elements (avatars, badge indicators) use 9999px (full) for perfect circles. The rationale is that sharp corners (0px) would feel too austere and cold, while excessive rounding (>1.5rem) would undermine the architectural precision of

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (solid background with primary color #191b1d, white text, 2px solid border in primary) and secondary (transparent background, primary text, 2px solid border in primary). Both use label-md typography (16px, 400 weight, -0.04em letter-spacing) and a height of 48px with 12px vertical and 24px horizontal padding. On hover, primary buttons transition to primary-fixed-dim (#d0d0d0) background over 0.4s using cubic-bezier(0.25, 0.74, 0.22, 0.99); secondary buttons shift to surface-container (#e9ecef) background. Focus states add a 2px solid border in primary with a 0 0 0 2px outline in primary for accessibility. Active/pressed states darken the background by 10% (rgba(25, 27, 29, 0.9) for primary but

Do's and Don'ts

**Do**

• Do use primary (#191b1d) for all primary CTAs, focus states, and interactive elements—it is the signature accent of the brand.
• Do maintain negative letter-spacing (-0.04em to -0.08em) across all typography to preserve the brand's architectural tightness and sophistication.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns to create clear visual separation without relying on color.
• Do use the spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) consistently—never introduce arbitrary spacing values.
• Do apply 0.4s cubic-bezier(0.25, 0.74, 0.22, 0.99) transitions to all interactive state changes (hover, focus, active) for smooth, predictable motion.

**Don't**

• Don't use rounded corners greater than 1.5rem (24px)—the brand's geometric precision requires restraint in border-radius.
• Don't introduce colors outside the defined palette; the monochromatic system with error as the only warm accent is intentional and brand-defining.
• Don't use font-weight greater than 500 (medium)—bold (700+) undermines the brand's restrained, sophisticated aesthetic.
• Don't apply shadows with blur radius greater than 24px or spread radius greater than 0px—keep shadows subtle and precise.
• Don't animate border-radius or use gradient backgrounds—both violate the brand's architectural minimalism and structural integrity.