# atalanta.tech

Source: https://www.atalanta.tech/
Captured: 2026-10-30
Tags: saas, landing, dark, both, swiss, minimal, editorial, serious, technical, mysterious, premium, calm
Colors: #333334, #505558, #707373, #8f8f8c, #1d1b15, #acaaa3
Type (h1): FKAktual · 64px/70.4px · 300 · tracking -2% — "Provably correct decision-making for the world’s most important missions."
Type (h2): FKAktual · 12px/14.4px · 500 · tracking 3% — "THE PROBLEM"
Type (h3): MDLorien · 14px/17.5px · 400 · tracking -1% — "NPR Weekend Morning Edition Coverage"
Type (body): FKAktual · 64px/70.4px · 300 · tracking -2% — "Provably correct decision-making for the world’s most important missions."
Type (small): FKAktual · 12px/14.4px · 500 · tracking 3% — "Full Name"
Type (button): FKAktual · 12px/14.4px · 500 · tracking 3% — "CONTACT US"
Button: "Contact Us" — fill #ffffff, text #fcfaf3, radius 0px, border 0px, padding 24px 0px 24px 20px, height 62px, type 12px/500

## Images

- Hero (desktop): https://media.lvly.design/library/atalanta-tech/hero.webp?v=a9ba1466
- Page crop (mid-1): https://media.lvly.design/library/atalanta-tech/mid-1.webp?v=0fbf3014
- Page crop (mid-2): https://media.lvly.design/library/atalanta-tech/mid-2.webp?v=96805ffc
- Hero (mobile): https://media.lvly.design/library/atalanta-tech/mobile-hero.webp?v=3605b23c
- Full page (desktop): https://media.lvly.design/library/atalanta-tech/full.jpg?v=842169c5
- Full page (mobile): https://media.lvly.design/library/atalanta-tech/mobile-full.jpg?v=7f74d312
- Clip preview (mp4): https://media.lvly.design/library/atalanta-tech/video-bt89xe.preview.mp4?v=bf24a9e5

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.

## Steal-worthy details

- Two-tone headline: the sentence's setup is in muted stone (#8f8f8c–#acaaa3) and the payoff in white, same size and weight, so the line reads as setup and payoff without a second style
- Breadcrumb-style nav: uppercase 12px/500 links with +3% tracking, separated by thin "/" glyphs, and the current page marked by a small filled white square instead of an underline
- Header CTAs are flush, full-height square tiles in a slightly lighter warm gray (about #4a4843), butted against each other and the viewport edge with 0px radius, plus an "Updates 1 NEW" counter set in a dimmer gray inside the label
- A fixed ~237px left rail split off by one 1px hairline that runs the full page height; section eyebrows ("■ THE PROBLEM", "■ INTRODUCING ARGO") sit in the rail, and all content aligns to the hairline
- Pixel-art "A" logomark: a stepped bitmap edge on an otherwise clean grotesk letter, repeated in the wordmark, which gives the brand a "computed" feel without any neon
- Scattered flat gray rectangles in two close tones (#3f3d39 on #37352f) laid on the column grid like oversized pixels, used as a section divider instead of a rule or an illustration
- Industry panels pair a light grotesk heading ("Argo / for Space.") with a 15px serif paragraph set in a narrow right column over a dimmed, desaturated full-bleed photo
- Contact form built from hairline-boxed fields with tiny uppercase labels and a full-width flat gray SUBMIT bar, no radius and no accent color
- Footer closes on a viewport-wide wordmark in stone (#acaaa3) with the pixel-stepped "A", cropped at the bottom edge

## Style recipe

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.