Build a complete, responsive multi-section marketing website for my business in a precise, Swiss-grid minimal style — disciplined, systematic, and quietly confident.
AESTHETIC DIRECTION
Structure IS the design: visible hairline rules (1px, low-contrast) divide the layout into an exact grid. The hero is asymmetric — a large flush-left headline column beside a narrower metadata rail listing a few short facts as a definition list, each separated by a hairline. Capabilities are presented as a ruled grid of equal cells on a slightly raised surface, each cell titled with a short underlined heading. The process section is a genuinely sequential four-step row with small numbered markers (01–04). One full-width statement band sets a single large sentence with one accent-underlined word. No decorative imagery, no gradients, no shadows, no rounded cards — alignment, rhythm, and rules carry everything.
COLOR
The page background is a crisp warm white (#f6f7f6). Text is a near-black ink (#171a1f). The single accent is a cobalt blue (#2743d0) — used only for the kicker line, buttons, numbered markers, cell-heading underlines, and the one emphasized word; everything else stays neutral. a slate blue (#5a6b7a) is reserved for small uppercase labels. Raised panels and cells sit on a crisp white (#ffffff).
TYPOGRAPHY
Use a systematic engineered sans for headings with its matching serif companion for body text (IBM Plex Sans for headings, IBM Plex Serif for body). Headlines are set tight and flush left; labels are small, bold, letterspaced uppercase; running text stays modest in size.
SPACING
Overall spacing should feel balanced and orderly, with consistent measured gaps (6rem section padding).
MOOD
The site should feel measured and professional, all substance.
STRUCTURE
Include: a slim top bar with an uppercase wordmark and plain navigation; the asymmetric hero with headline column, short lede, one button, and the metadata rail; a four-cell capabilities grid with hairline borders; the numbered four-step process row; the full-width statement band; a closing section pairing a short heading and note with one button; and a compact single-row footer. Adapt all facts and copy to my actual business, keep the grid discipline absolute, and make it fully responsive — the rail moves below the hero and grids stack cleanly on small screens.