# Atalanta — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.atalanta.tech/
Captured: 2026-10-10
CSS measured: 2026-10-10T05:51:23.660Z at 1440×1000 — https://www.atalanta.tech/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The Atalanta website employs a highly minimal, corporate, and typographic design language characterized by a dark, earthy color palette. The interface relies heavily on large, elegant typography—mixing the sans-serif FKAktual and the serif MDLorien—alongside cinematic full-bleed background imagery and videos. The layout utilizes a structured grid system with persistent navigation and utility labels, emphasizing a sophisticated, high-tech aesthetic.

## Classification

- Industry: ai
- Site type: Landing
- Business model: AI, Software
- Styles: minimal, corporate, typographic, bold, cinematic, grid-based
- Platform: Custom code
- Technology: Astro

## Typography

- Display: FKAktual — weight 300; size 64px; line-height 70.4px; tracking -2%; Regular (95% role confidence, computed values)
- Heading: FKAktual — weight 300; size 50px; line-height 55px; tracking -2%; Regular (90% role confidence, computed values)
- Body: MDLorien — weight 400; size 16px; line-height 21.6px; tracking normal; Regular (90% role confidence, computed values)
- Mono: FKAktual — weight 500; size 12px; line-height 14.4px; tracking 3%; uppercase (85% role confidence, computed values)

## Functional palette

- Canvas — canvas #37352F: color-1: computed rgb(55, 53, 47); AI role: Dark olive/brown hex #37352F used as the primary background color for the document body. (95% role confidence, computed values)
- Text — text #FCFAF3: color-4: computed rgb(252, 250, 243); AI role: Off-white hex #FCFAF3 used for primary readable text against the dark canvas. (95% role confidence, computed values)
- Muted Text — muted text #989486: color-2: computed rgb(152, 148, 134); AI role: Greyish color hex #989486 used for secondary text, breadcrumbs, and less emphasized copy. (90% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "FKAktual",
    "fontStack": "FKAktual, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "3%",
    "traits": "uppercase",
    "count": 39,
    "contexts": [
      {
        "tag": "div",
        "text": "/ Home",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "/ Argo",
        "top": 0,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 27,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "MDLorien",
    "fontStack": "MDLorien, serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "17.5px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "NPR Weekend Morning Edition Coverage",
        "top": 83,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "FKAktual",
    "fontStack": "FKAktual, sans-serif",
    "weight": "300",
    "size": "64px",
    "lineHeight": "70.4px",
    "letterSpacing": "-2%",
    "traits": "Regular",
    "count": 53,
    "contexts": [
      {
        "tag": "p",
        "text": "Provably correct decision-making for the world’s most important missions.",
        "top": 236,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "t",
        "top": 306,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "h",
        "top": 306,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "FKAktual",
    "fontStack": "FKAktual, sans-serif",
    "weight": "300",
    "size": "50px",
    "lineHeight": "55px",
    "letterSpacing": "-2%",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "p",
        "text": "The most important systems in the world are now software-defined and increasingly autonomous. But we",
        "top": 1337,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Testing shows how systems behave in known scenarios. It cannot prove the absence of failure in unkno",
        "top": 1662,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Mathematical proof can establish these guarantees, but it has historically been too slow and too spe",
        "top": 1932,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "MDLorien",
    "fontStack": "MDLorien, serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Argo helps energy operators prove the safety of critical infrastructure at operational speed. It ver",
        "top": 4277,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Argo helps space teams prove the resilience of communications and satellite systems in dynamic, cont",
        "top": 5277,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Argo helps defense organizations prove the security of complex systems with agility. It verifies tha",
        "top": 6277,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "FKAktual",
    "fontStack": "FKAktual, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "23.4px",
    "letterSpacing": "-1%",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Atalanta is a mathematical AI company that brings speed and rigor to the design, implementation, and",
        "top": 447,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "MDLorien",
    "fontStack": "MDLorien, serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "17.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Learn More",
        "top": 118,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "FKAktual",
    "fontStack": "FKAktual, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "3%",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Full Name",
        "top": 7277,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Email Address",
        "top": 7361,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Company Name",
        "top": 7445,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#37352F",
    "alpha": 1,
    "cssValue": "rgb(55, 53, 47)",
    "count": 3,
    "contexts": [
      {
        "tag": "body",
        "text": "const $=(a,A)=>{a.innerHTML=\"\";const d=a.getAttribute(\"data-columns\"),m=a.getAttribute(\"data-rows\");",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 1000,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Submit",
        "top": 362,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#989486",
    "alpha": 1,
    "cssValue": "rgb(152, 148, 134)",
    "count": 32,
    "contexts": [
      {
        "tag": "div",
        "text": "/ Argo",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "/",
        "top": 27,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "NPR Weekend Morning Edition Coverage",
        "top": 83,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#D0CEC8",
    "alpha": 1,
    "cssValue": "rgb(208, 206, 200)",
    "count": 26,
    "contexts": [
      {
        "tag": "p",
        "text": "Atalanta is a mathematical AI company that brings speed and rigor to the design, implementation, and",
        "top": 447,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Learn More",
        "top": 4022,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "/ LinkedIn",
        "top": 8188,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#FCFAF3",
    "alpha": 1,
    "cssValue": "rgb(252, 250, 243)",
    "count": 76,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 19,
        "property": "svg-fill"
      },
      {
        "tag": "div",
        "text": "/ Home",
        "top": 0,
        "property": "text"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 27,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#413F39",
    "alpha": 1,
    "cssValue": "rgb(65, 63, 57)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2577,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#979387",
    "alpha": 0.25098039215686274,
    "cssValue": "color(srgb 0.596078 0.580392 0.52549 / 0.25)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "NPR Weekend Morning Edition Coverage Learn More",
        "top": 63,
        "property": "background"
      },
      {
        "tag": "label",
        "text": "Full Name",
        "top": 63,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FBFBF3",
    "alpha": 0.25098039215686274,
    "cssValue": "color(srgb 0.988235 0.980392 0.952941 / 0.25)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "input",
        "text": "",
        "top": 7301,
        "property": "border"
      },
      {
        "tag": "textarea",
        "text": "",
        "top": 7553,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#CFCDC7",
    "alpha": 0.5019607843137255,
    "cssValue": "color(srgb 0.815686 0.807843 0.784314 / 0.5)",
    "count": 4,
    "contexts": [
      {
        "tag": "span",
        "text": "Full Name",
        "top": 7277,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#9A9486",
    "alpha": 0.14901960784313725,
    "cssValue": "color(srgb 0.596078 0.580392 0.52549 / 0.15)",
    "count": 2,
    "contexts": [
      {
        "tag": "button",
        "text": "Updates 1 New",
        "top": 0,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between distinct thematic sections, with tight, structured padding within the grid columns.
- Corner style: Sharp, 90-degree corners exclusively.
- Radius: 0px on all visible components including input fields and buttons.
- Borders: Subtle, thin solid 1px borders used to delineate the grid structure and input fields.
- Buttons: Flat, unrounded rectangular containers with uppercase text.
- Content width: Full-bleed for background imagery, but text content is constrained within a multi-column grid system leaving a wide left margin.
- Density: Low density, favoring large typography and significant negative space over cramped information.
- Evidence: Visual observation of sharp input boxes, visible grid lines separating the left sidebar from the main content, and DOM facts confirming thin borders and 0px border-radius patterns.

## Sections

Gallery section count: 6. Each entry corresponds to one gallery capture.

1. **Hero — Provably Correct Decision-Making Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with brand navigation, a strong mission statement, concise company description, and a distinctive full-width Earth visual; it ends cleanly before “The Problem” section begins.
   Capture: 1440×1242px; page bounds 0–1242px of 8935px; source section ID: `0d86da17-8306-40ba-b3f4-0c74a587bf17`; image: https://media.designdetails.io/library/91c6cadec5e58d58d5b73b3f09e88511c9740c51d329cffa0b2a3674835a80cb/0d86da17-8306-40ba-b3f4-0c74a587bf17.webp
   SECTION.md v3.2: `0d86da17-8306-40ba-b3f4-0c74a587bf17` (deterministic evidence; editorial review pending)
2. **Features — THE PROBLEM** (Home)
   Reusable feature composition from Home, organized around “THE PROBLEM”.
   Capture: 1440×1940px; page bounds 1237–3177px of 8935px; source section ID: `cd196aff-6d1d-456f-aad7-e7971e795f51`; image: https://media.designdetails.io/library/2fc834039f09b907c21a9e0782197e1388a35169ed0118c63d8534c23add20c6/section_crop-cd196aff-2026-10-10T05-51-35-203Z.webp
   SECTION.md v3.2: `cd196aff-6d1d-456f-aad7-e7971e795f51` (deterministic evidence; editorial review pending)
3. **CTA — CONTACT US** (Home)
   CTA composition from Home, organized around “CONTACT US”.
   Capture: 1440×758px; page bounds 7177–7935px of 8935px; source section ID: `d10c3cdb-c9b1-4a6e-8d6b-81b16e786c17`; image: https://media.designdetails.io/library/330a29b7a3120140ffe28d6dd813d5c82352755613c8d7ebb135e4f440d0223f/section_crop-d10c3cdb-2026-10-10T05-51-36-276Z.webp
   SECTION.md v3.2: `d10c3cdb-c9b1-4a6e-8d6b-81b16e786c17` (deterministic evidence; editorial review pending)
4. **Features — Argo for Energy** (Home)
   AI suggestion (86% confidence): Complete industry use-case section with a clear title, explanatory copy, atmospheric infrastructure imagery, and a distinct boundary before the next “Argo for Space” section.
   Capture: 1440×565px; page bounds 4621–5186px of 8935px; source section ID: `86fe9f50-6443-4253-8feb-a14656435c15`; image: https://media.designdetails.io/library/a6bfbc65bc3aeb4f9ee3f61e3cc2ac952c24e71b754aa31e376df9bea5117a42/section-manual-86fe9f50-6443-4253-8feb-a14656435c15-1791700607639.webp
   SECTION.md v3.2: `86fe9f50-6443-4253-8feb-a14656435c15` (deterministic evidence; editorial review pending)
5. **Feature Card — Argo for Defense Systems** (Home)
   AI suggestion (94% confidence): Complete full-width product feature with a clear title, explanatory copy, operational imagery, and a Learn more action; it has distinct boundaries and works as a reusable immersive feature pattern.
   Capture: 1440×996px; page bounds 6187–7183px of 8935px; source section ID: `9fb2fb05-ca34-4913-8751-40524ea6e035`; image: https://media.designdetails.io/library/38e25dce72a4e0c6943a6234e7854d857a058020f359f663a29a044b2fc5d977/9fb2fb05-ca34-4913-8751-40524ea6e035.webp
   SECTION.md v3.2: `9fb2fb05-ca34-4913-8751-40524ea6e035` (deterministic evidence; editorial review pending)
6. **Footer — Atalanta link footer with oversized wordmark** (Home)
   AI suggestion (94% confidence): Complete page-ending footer with copyright, social and company navigation links, site credit, geometric decoration, and a distinctive oversized Atalanta brand mark.
   Capture: 1440×809px; page bounds 8126–8935px of 8935px; source section ID: `eb26f13f-d842-4194-a088-1c33d9e9706a`; image: https://media.designdetails.io/library/42acf07dea62bddc802a35467129ea89c578e49a2fcf2215b997d1518cecb63c/eb26f13f-d842-4194-a088-1c33d9e9706a.webp
   SECTION.md v3.2: `eb26f13f-d842-4194-a088-1c33d9e9706a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/4ef8b1dd69c956a6f617f10eaa3ec78c9a1fdaa3bd05e8589253d9c205feff77/desktop_full-17fbe0f8-2026-10-10T05-51-23-667Z.webp
- Mobile screenshot: https://media.designdetails.io/library/2aef7aca9f55a5414795cac2d12d082c8c44b457e10ce2e63a0ebdce578dee4f/mobile_full-17fbe0f8-2026-10-10T05-51-56-294Z.webp
- Open Graph image: https://media.designdetails.io/library/825b3ce950221771bd5064b914c6bf946317137ef14f025f6ba2f48fd4aa4f5b/og_image-17fbe0f8-2026-10-10T05-51-33-274Z.webp
- Full-page video: https://media.designdetails.io/library/0c4e5dbc5d07473dc864579c3afc55baa1351f7c448720d49e4d40f59d08440c/motion-1791694807261.mp4
- Video poster: https://media.designdetails.io/library/68deb524c971f7ce00c568ea3857666cf73175040f8a0c339ba07469d0fdb27e/motion-poster-1791694807261.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Feature Collection
- Contact Form
- Primary Button
- Footer
- Persistent Sidebar Indicator
- Oversized Footer Logo

## Quality rubric

Overall: 61.6/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Atalanta executes a disciplined, dark-toned corporate-technical aesthetic with a genuinely reused (not one-off) grid-transition motion system and content imagery that is well-matched to each product vertical. However, the underlying design language—cinematic earth/space hero, vertical breadcrumb sidebar, serif/sans typographic split, and a repeated three-part section template—closely mirrors conventions common across funded AI/deep-tech startup sites, limiting originality and keeping the overall execution in the 'good' rather than 'strong' tier.

- Typography (15%): 66 — A controlled two-typeface system (FKAktual sans for display/UI, MDLorien serif for body copy) with clear hierarchy (64px/50px display, 16px body, 12px uppercase tracked labels) and consistent negative letter-spacing on large type. Competent and legible, but the serif/sans split paired with uppercase micro-labels is a familiar convention in this corporate-AI genre rather than a distinctive typographic voice.
- Color (10%): 62 — A restrained, monochromatic earth-tone palette (dark olive canvas #37352F, off-white text #FCFAF3, muted taupe #989486) with tonal background variation (#413F39) for section separation. Cohesive and tasteful but low-risk, relying on neutral tonal shifts rather than any considered chromatic accent or hierarchy beyond value contrast.
- Layout (20%): 65 — A consistent grid is maintained across the full page: persistent left-column breadcrumb/label sidebar, generous negative space, and a repeated three-part structure (label / headline+subtitle / supporting copy) reused for each Argo vertical (Energy, Space, Defense). This produces genuine structural consistency across many sections, though the repetition becomes formulaic by the third instance and the grid itself is a common full-bleed-image/left-margin-text pattern.
- Motion (20%): 69 — A bespoke staggered grid-block transition is used repeatedly and bidirectionally to separate major sections (hero→problem text, text→Argo intro, Argo→footer logo reveal, and reverse on scroll-up), plus a sticky section-indicator that updates live. This is a genuine custom motion system reused consistently rather than a single one-off hero effect, which is the main differentiator pushing this above a merely decorative animation.
- Originality (25%): 50 — The overall language—cinematic earth/space imagery, dark corporate palette, vertical breadcrumb sidebar, serif/sans pairing, uppercase micro-labels—closely matches an established template used across many funded AI/deep-tech startup sites. The grid-block transition is the one somewhat distinctive device, but it functions as decorative scene-changing rather than a structurally necessary or conceptually tied idea, and the rest of the system (hero, stacked feature sections, contact form, oversized footer logo) follows conventional startup-site beats without a second or third hard-to-substitute idea.
- Content (10%): 62 — Imagery is well-matched to subject matter (earth for the mission statement, nuclear cooling towers for Energy, satellite/ISS for Space, radar cockpit display for Defense), and copy blocks are concise and consistently placed relative to their visuals. This is solid, purposeful integration, though the pairing is fairly literal/stock-like rather than deeply bespoke.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Curator review pending.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.