Webisoft

Overview

Webisoft is a Montreal-based custom software development studio serving enterprise clients across North America. The brand embodies **Technical Brutalism**—a design philosophy that celebrates raw, unadorned interfaces with stark geometric forms, monospace typography, and a bold accent color that cuts through minimalist layouts. The aesthetic evokes precision, engineering rigor, and no-nonsense professionalism. The UI communicates confidence through high contrast (pure black #000000 on pure white #ffffff), aggressive use of the signature coral-red accent (#de5849) on interactive elements, and a deliberate rejection of soft shadows or rounded corners in favor of sharp, 3px borders and flat planes. The emotional response is one of technical mastery and directness—users feel they're interfacing with serious engineers, not a lifestyle brand.

The brand voice is terse, technical, and unapologetically direct. Vocabulary favors precision over warmth: "senior engineers," "enterprise scale," "prototype to production," "technical expertise." Sentences are short and declarative. The tone avoids marketing fluff; every word serves function. Example sentence in brand voice: "We build software that scales. Montreal-based. Senior engineers only."

Colors

The color system operates on a **high-contrast, accent-driven** model. The primary accent is coral-red (#de5849), used exclusively on call-to-action buttons, hover states, and interactive focus indicators. This color appears sparingly but with maximum impact—it's the only warm tone in an otherwise cool, neutral palette, making it impossible to miss. The surface stack is purely achromatic: white (#ffffff) as the default background, with a six-step grey scale (surface-container-lowest #f0f1f4 through surface-container-highest #a7a7a7) for layering and depth. On-surface text is pure black (#000000) for maximum legibility; secondary text uses mid-grey (#666666) for hierarchy. The outline color (#777777) is used for borders and dividers, maintaining visual separation without introducing color.

Typography

The type system pairs two premium typefaces: **Helvetica Now Display** (fontWeight: 500) for all headings and display text, and **Helvetica Now Text** (fontWeight: 400) for body copy, with **Suisse Intl Mono** (fontWeight: 400, text-transform: uppercase, letter-spacing: 0.05em–0.08em) reserved for labels, buttons, and UI chrome. Display sizes scale fluidly via CSS clamp() functions: h1 uses clamp(28px, 55/1440*100vw, 55px) with 1em line-height, creating a responsive headline that never exceeds 55px on desktop or drops below 28px on mobile. Body text is set at 16px (clamp-16) with 1.1em line-height for comfortable reading. All headings use 1em line-height (tight, architectural spacing) and negative letter-spacing (-0.02em on display, -0.015em on headline-lg) to compress letterforms and rein

Layout

The layout system uses a **fluid 12-column grid** with responsive breakpoints at 700px. On mobile (< 700px), the grid collapses to 4 columns with 10px gutters and 10px margins. On desktop (≥ 700px), it expands to 12 columns with clamp(16px, 16/1440*100vw, 16px) gutters and margins, scaling proportionally with viewport width. The container max-width is 1440px, enforced via CSS custom properties (--grid-12-col-1 through --grid-12-col-10 calculate column widths dynamically). Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. The hero section uses --hero-mobile-padding-top: calc(var(--header-bar-height) + (var(--grid-margin) * 2)) t

Elevation & Depth

Depth is achieved through **flat layering and subtle shadows**, not through color gradients or transparency. The elevation system defines three levels: Level 1 (Base) is the white background (surface #ffffff) with no shadow. Level 2 (Standard Cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft but visible shadow that lifts cards 2–3px above the surface. Level 3 (Modals/Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger shadow suggesting greater distance. Shadows are always black-based (rgba(0, 0, 0, ...)) and never colored. Focus states use a 3px solid border in prim

Shapes

The shape philosophy is **Geometric Precision**—sharp, intentional angles with minimal rounding. Border-radius follows a strict scale: sm (0.25rem / 4px) for small UI elements like badges and inputs, DEFAULT (0.5rem / 8px) for buttons and standard cards, md (0.75rem / 12px) for larger containers, lg (1rem / 16px) for hero sections and major blocks, xl (1.5rem / 24px) for oversized modals, and full (9999px) for pill-shaped elements (rarely used). Most interactive elements (buttons, inputs, cards) use DEFAULT (8px) or sm (4px) to maintain a technical, grid-aligned appearance. The header and hero

Components

Action Elements

**Buttons** come in four primary variants: primary (solid coral #de5849 background, black text, 48px height, 12px vertical / 24px horizontal padding, 8px border-radius), secondary (transparent background, black text, 1px solid grey border #777777, same dimensions), ghost (transparent background, black text, 1px solid grey border, hover state fills with light grey #f0f1f4), and link (no background, no border, text color only, used for tertiary actions). All buttons use Suisse Intl Mono at 12px, uppercase, 0.05em letter-spacing. Hover transitions are 300ms cubic-bezier(0.215, 0.61, 0.355, 1). Primary buttons on hover darken to #c94a3a. Secondary and ghost buttons invert: background becomes black (#000000), text becomes white (#ffffff). Focus states apply a 3px solid bord

Do's and Don'ts

**Do**

• Do use the coral accent (#de5849) sparingly and only on interactive elements—CTAs, hover states, focus indicators—to maintain maximum visual impact.
• Do maintain high contrast: pure black (#000000) text on white (#ffffff) backgrounds, or white text on black backgrounds in dark mode, for accessibility and technical clarity.
• Do use Helvetica Now Display (fontWeight: 500) for all headings and Suisse Intl Mono (uppercase, 0.05em–0.08em tracking) for labels and UI chrome to reinforce the technical aesthetic.
• Do apply tight line-height (1em) and negative letter-spacing (-0.02em on display) to headings to compress letterforms and create an architectural, engineered appearance.
• Do use the 12-column grid with clamp() functions for responsive sizing; never hardcode pixel values for breakpoints or typography sizes.
• Do reserve box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards and 0 8px 24px rgba(0, 0, 0, 0.12) for modals; avoid blur effects or transparency overlays.

**Don't**

• Don't use rounded corners (border-radius > 8px) on buttons, inputs, or standard cards—keep them sharp (0–8px) to maintain the brutalist aesthetic.
• Don't introduce secondary colors or gradients; the palette is strictly achromatic (black, white, greys) with coral (#de5849) as the only accent.
• Don't apply text-shadow or glow effects except on small labels over busy backgrounds (0 2px 4px rgba(0, 0, 0, 0.15) only).
• Don't use system fonts or generic sans-serif fallbacks in production; always load Helvetica Now Display, Helvetica Now Text, and Suisse Intl Mono via @font-face with font-display: swap.
• Don't exceed 48px height on buttons or 44px on input fields; maintain the compact, grid-aligned proportions.
• Don't use opacity or rgba() for layering; all colors are opaque and intentional. Avoid backdrop-filter or color-mix() for depth.