atalanta.tech

A mathematical-AI company's homepage set entirely in warm olive charcoal (#37352f) instead of the usual blue-black, so a defense-and-infrastructure pitch reads like a quiet research lab rather than a war room. Everything hangs off one fixed left rail divided by a single hairline: section labels live in the rail, content starts on the line to its right. Type does all the work: FK Aktual at weight 300, 64px, -2% tracking, with every headline split into a muted stone first half and a white second half. Full-bleed, desaturated space and infrastructure photography is dimmed under the charcoal so it reads as texture, the "Argo for…" panels pair a light grotesk heading with a small serif paragraph (MD Lorien), and a bitmap-pixel motif (the stepped "A" mark, scattered gray blocks, a giant pixel-edged wordmark in the footer) is the only ornament.

Build a dark, warm, typographic page with zero radius and no saturated color. Background #37352f (olive charcoal, never blue-black); raised tiles and blocks #3f3d39–#4a4843; hairlines #505558 at 1px; ink #fcfaf3 for emphasis, stone #acaaa3 / #8f8f8c for de-emphasized text. Stone (#acaaa3) is the brand tone, used for the muted half of headlines and the oversized wordmark; there is no hue accent, and primary CTAs are flat white or lighter-gray square tiles.

Type: one grotesk (FK Aktual or a Suisse/Aktiv-style substitute) for everything structural. Display 64px / 1.1, weight 300, tracking -0.02em, and split each headline into a stone first clause and a white second clause at the same size. Labels, nav and buttons are 12px / 500 / uppercase / +0.03em. Body lead 18px / 500 in white-ish. For long explanatory paragraphs switch to a small book serif (MD Lorien, or Tiempos/Source Serif) at 15px / 1.45 in light stone.

Layout: a fixed left rail of about 16% of the width, separated by one full-height 1px hairline; eyebrows ("■ LABEL", a small filled square plus uppercase label) sit in the rail and all content starts on the hairline. Nav links are separated by "/" glyphs, and the active one is marked with a filled square. Header actions are flush, full-height square tiles butted against the edge. Photography is full-bleed, desaturated and darkened under a charcoal overlay so it reads as atmosphere. Use a bitmap/pixel motif sparingly as the only ornament: a stepped edge on the logomark, and flat gray rectangles on the grid as section dividers. Forms use hairline square fields and a flat full-width submit bar. Motion should be slow and quiet; no glow, gradients or shadows.