# Atlasmotion — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://atlasmotion.com/
Captured: 2026-10-11
CSS measured: 2026-10-11T21:57:14.572Z at 1440×1000 — https://atlasmotion.com/
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 website for Atlas features an immersive, cinematic design defined by heavy use of full-screen background video and imagery with layered typography and 3D modeling. The layout is structured by a subtle grid overlay, and scrolling drives parallax effects and animated product breakdowns. The palette relies heavily on stark contrasts between black and off-white, with photographic assets providing rich environmental tones.

## Classification

- Industry: other
- Site type: Not identified
- Business model: Not identified
- Styles: photographic, typographic, corporate, cinematic, technical-schematic
- Platform: Custom code
- Technology: Astro, Three.js

## Typography

- Display: SuisseIntl — weight 500; size 150px; line-height 165px; tracking -4.5px; Regular (90% role confidence, computed values)
- Heading: SuisseIntl — weight 500; size 64px; line-height 58px; tracking -1.9px; uppercase (90% role confidence, computed values)
- Body: SuisseIntl — weight 500; size 24px; line-height 28px; tracking -0.7px; Regular (85% role confidence, computed values)
- Mono: SuisseIntl — weight 500; size 14px; line-height 14px; tracking normal; uppercase (80% role confidence, computed values)

## Functional palette

- Text — text #FFFDE0: color-2: computed rgb(255, 253, 224); AI role: Off-white (#FFFDE0) used extensively for primary text, wireframes, and grid lines against dark backgrounds. (95% role confidence, computed values)
- Canvas — canvas #181818: color-1: computed rgb(24, 24, 24); AI role: Very dark gray (#181818) used as the background color for technical and footer sections. (90% role confidence, computed values)
- Primary Action — primary action #121211: color-4: computed rgb(18, 18, 17); AI role: Near black (#121211) used as the background for the primary CTA button. (80% 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": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "14px",
    "lineHeight": "16.3px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 118,
    "contexts": [
      {
        "tag": "span",
        "text": "Scroll down to explore",
        "top": 968,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Links",
        "top": 14233,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "TT",
        "top": 14277,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 112,
    "contexts": [
      {
        "tag": "div",
        "text": "T",
        "top": 14294,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "h",
        "top": 14294,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 14294,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 103,
    "contexts": [
      {
        "tag": "div",
        "text": "PP",
        "top": 72,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "P",
        "top": 84,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "rr",
        "top": 72,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "64px",
    "lineHeight": "58px",
    "letterSpacing": "-1.9px",
    "traits": "uppercase",
    "count": 43,
    "contexts": [
      {
        "tag": "div",
        "text": "T",
        "top": 384,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "h",
        "top": 384,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "e",
        "top": 384,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "14px",
    "lineHeight": "14px",
    "letterSpacing": "-0.4px",
    "traits": "uppercase",
    "count": 28,
    "contexts": [
      {
        "tag": "div",
        "text": "BB",
        "top": 13953,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "B",
        "top": 13967,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "ee",
        "top": 13953,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "150px",
    "lineHeight": "165px",
    "letterSpacing": "-4.5px",
    "traits": "Regular",
    "count": 25,
    "contexts": [
      {
        "tag": "div",
        "text": "B",
        "top": 13498,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "u",
        "top": 13498,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "i",
        "top": 13498,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "SuisseIntl",
    "fontStack": "SuisseIntl",
    "weight": "500",
    "size": "24px",
    "lineHeight": "28px",
    "letterSpacing": "-0.7px",
    "traits": "Regular",
    "count": 20,
    "contexts": [
      {
        "tag": "div",
        "text": "Atlas",
        "top": 1188,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "builds",
        "top": 1188,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "motors",
        "top": 1188,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#181818",
    "alpha": 1,
    "cssValue": "rgb(24, 24, 24)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "OO",
        "top": 23,
        "property": "text"
      },
      {
        "tag": "footer",
        "text": "Links TThheessiiss WWrriittiinngg CCoonnttaacctt uuss Social XX LLiinnkkeeddIInn Press pprreessss@@a",
        "top": 14153,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFDE0",
    "alpha": 1,
    "cssValue": "rgb(255, 253, 224)",
    "count": 382,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 16,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 16,
        "property": "svg-fill"
      },
      {
        "tag": "li",
        "text": "PPrroocceessss",
        "top": 64,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#CBCBBD",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(204, 203, 189, 0.5)",
    "count": 81,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 14233,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 14233,
        "property": "svg-fill"
      },
      {
        "tag": "span",
        "text": "Links",
        "top": 14233,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#121211",
    "alpha": 1,
    "cssValue": "rgb(18, 18, 17)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "BBeeccoommee aa ppaarrttnneerr",
        "top": 13918,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F65893",
    "alpha": 1,
    "cssValue": "rgb(246, 88, 147)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "BBeeccoommee aa ppaarrttnneerr",
        "top": 13918,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#C4C4C4",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(192, 192, 192, 0.1)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "RReeaadd ffuullll TThheessiiss ↗",
        "top": 10412,
        "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: Content is positioned against a persistent structural grid overlay, with large gaps between distinct scroll chapters to allow for animation sequences.
- Corner style: Sharp corners are dominant, aligning with the technical grid aesthetic.
- Radius: Buttons and structural elements do not show measurable border-radius, maintaining sharp edges.
- Borders: Thin, semi-transparent light lines (e.g., color-3) are used to draw the structural grid across the entire canvas.
- Buttons: Buttons are typically sharp rectangles, either solid dark fills or outline styles with small, tight uppercase typography.
- Content width: Content often spans the full width of the viewport (edge-to-edge imagery), while text blocks are contained within specific columns of the overlay grid.
- Density: The layout is sparse and airy, prioritizing the background imagery and scroll animations, with text elements appearing in isolated blocks.
- Evidence: DOM data shows font-1 through font-5 mostly sizes 12-14px for UI elements alongside large 64px/150px headings. The grid lines and sharp UI elements confirm the technical aesthetic.

## Sections

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

1. **Hero — The Physical Layer of Autonomy Hero** (Home)
   AI suggestion (97% confidence): Complete, substantial opening hero with integrated navigation, industrial full-bleed imagery, oversized positioning statement, and a clear scroll cue.
   Capture: 1440×990px; page bounds 0–990px of 14619px; source section ID: `d51f124c-ed1e-4d2f-b7c7-c4464e8bc6ee`; image: https://media.designdetails.io/library/32f2370a262e0e20819ef4dbf64963b537e6501027e7e666bff5cfc33c3bd736/section-manual-d51f124c-ed1e-4d2f-b7c7-c4464e8bc6ee-1791783541398.webp
   SECTION.md v3.2: `d51f124c-ed1e-4d2f-b7c7-c4464e8bc6ee` (deterministic evidence; editorial review pending)
2. **Features — Motors for Drones and Robots** (Home)
   AI suggestion (84% confidence): Self-contained product-value section pairing a concise manufacturing proposition with a distinctive cloud-to-mountain visual composition; both its opening and lower boundary are visible.
   Capture: 1440×991px; page bounds 1008–1999px of 14619px; source section ID: `f7e7f65d-843b-45d6-9f4b-5eb78c5324f7`; image: https://media.designdetails.io/library/c1c2a2470214e6202faa9628a0ff5892c3db09952a49d06b6d1c27ad9a8ee39c/section-manual-f7e7f65d-843b-45d6-9f4b-5eb78c5324f7-1791783552384.webp
   SECTION.md v3.2: `f7e7f65d-843b-45d6-9f4b-5eb78c5324f7` (deterministic evidence; editorial review pending)
3. **Feature Card — Built to Ramp With You** (Home)
   AI suggestion (97% confidence): Complete full-width feature panel with a clear headline, central drone product visual, supporting copy, and distinct image boundaries. The repeated instance below is omitted.
   Capture: 1440×900px; page bounds 3800–4700px of 14619px; source section ID: `dca8b269-df91-4c07-9113-0e03e1218848`; image: https://media.designdetails.io/library/464c71afb977b955d77dd90976685b43ee048d711fe107c8bc506994f77ffadf/dca8b269-df91-4c07-9113-0e03e1218848.webp
   SECTION.md v3.2: `dca8b269-df91-4c07-9113-0e03e1218848` (deterministic evidence; editorial review pending)
4. **Editorial — Built Intelligence Thesis Feature** (Home)
   AI suggestion (90% confidence): A complete editorial promo pairing a large atmospheric facility image with a thesis excerpt and clear “Read Full Thesis” action; visually self-contained and reusable.
   Capture: 1440×558px; page bounds 10104–10662px of 14619px; source section ID: `6585b6e3-fe5d-4147-be69-376466cff7a9`; image: https://media.designdetails.io/library/1bfb326f7ff5e52e2e1db21b64baf6af75c09062e471c512da3c59e92607f7ca/6585b6e3-fe5d-4147-be69-376466cff7a9.webp
   SECTION.md v3.2: `6585b6e3-fe5d-4147-be69-376466cff7a9` (deterministic evidence; editorial review pending)
5. **Process — The Atlas Ecosystem** (Home)
   AI suggestion (94% confidence): Complete product-development section with a central product visual, prominent heading, and three stages covering prototyping, design, and scaling. Its beginning and ending are both visible before the next section starts.
   Capture: 1440×1156px; page bounds 12104–13260px of 14619px; source section ID: `72b2a13a-badf-40a9-b0d5-ec7c8b286ad7`; image: https://media.designdetails.io/library/1d0a344bc0c3c1e67cebf7457dce61ae2be2be4368bc010f8ec4a6e9c7699954/section-manual-72b2a13a-badf-40a9-b0d5-ec7c8b286ad7-1791783561130.webp
   SECTION.md v3.2: `72b2a13a-badf-40a9-b0d5-ec7c8b286ad7` (deterministic evidence; editorial review pending)
6. **Footer — Atlas Link Footer** (Home)
   AI suggestion (98% confidence): Complete substantial footer with Atlas branding, grouped navigation, social, press and careers contacts, plus legal links and year.
   Capture: 1440×445px; page bounds 14174–14619px of 14619px; source section ID: `64327b5c-f674-43d8-bfbf-553a64af664a`; image: https://media.designdetails.io/library/098e6b8b6608a51cf27c6581cce9af0ce69909da7d7e6a3bfce48f8fac3b82e5/64327b5c-f674-43d8-bfbf-553a64af664a.webp
   SECTION.md v3.2: `64327b5c-f674-43d8-bfbf-553a64af664a` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/f837a2a58e6ef2251581d0ef89d22616c34072eec9e84859a64550f82a435d21/desktop_full-cd4799ab-2026-10-11T21-57-14-582Z.webp
- Mobile screenshot: https://media.designdetails.io/library/6db64f445534313e074477fef26febb715763a54091c1ff200f29bb54e584baf/mobile_full-cd4799ab-2026-10-11T21-58-02-994Z.webp
- Open Graph image: https://media.designdetails.io/library/c05715aa4813e1491b11f0b00320b66f7837a15d9d69d0324e26b6accd2d9114/og_image-cd4799ab-2026-10-11T21-57-23-966Z.webp
- Full-page video: https://media.designdetails.io/library/b3aaab5009814bc2bc080b48ee7fef1b0d8bc17c9f79640cf6a5795d67444fbf/motion-1791757149975.mp4
- Video poster: https://media.designdetails.io/library/d03ad40a7fb59304ca65e7e3717527e4cfc4d1d916bad248cf6577011c2d3458/motion-poster-1791757149975.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
- Primary Button
- Outline Button
- Footer
- Carousel
- Scroll Driven Narrative Sequence
- Persistent Grid Overlay

## Quality rubric

Overall: 60.8/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Atlas Motion delivers a coherent, technically-themed scroll narrative — grid overlay, restrained duotone palette, scaled uppercase typography, and an exploded 3D motor diagram tied to process labels — that holds together across the page, landing it solidly in the 'good' range. It falls short of 'strong' because transition sequencing between step labels and sections shows visible overlap, some body copy appears truncated mid-reveal, and the overall device vocabulary (cinematic parallax hero, exploded product reveal) is a well-worn convention in deep-tech startup design rather than a genuinely distinctive system.

- Typography (15%): 66 — A single family (SuisseIntl) is deployed across a wide scale range (12px labels to 150px display) with calibrated negative tracking that tightens as size increases (-4.5px at 150px, -1.9px at 64px), and uppercase mono-style labels are used consistently for structural/UI text. This produces a legible, considered hierarchy, but the system relies on one typeface with no secondary voice, and the display text is frequently stacked over complex photographic/video backgrounds, which risks contrast and legibility rather than demonstrating typographic craft beyond scale/tracking.
- Color (10%): 59 — The core UI palette is a disciplined off-white-on-near-black duotone (#FFFDE0 on #181818/#121211) with a single pink accent (#F65893) reserved for a CTA hover state and schematic highlight fills. This restraint is appropriate to the technical-schematic idiom, but the palette itself is simple and conventional (dark mode + one accent), and most of the visual color richness comes from uncontrolled photographic/painterly assets rather than a designed system.
- Layout (20%): 67 — A persistent thin-line grid overlay spans the entire page and content is consistently keyed to it — numbered process steps (01-04) occupy a stable left column, technical labels sit in fixed grid positions, and full-bleed photographic/video sections alternate with contained text blocks. This is a genuine structural system carried across many sections (hero, process, thesis, ecosystem, footer), which is a real strength, though density is thin in places and the grid is largely decorative rather than driving varied compositions.
- Motion (20%): 58 — Motion carries much of the narrative: parallax hero zoom, scale-in text, a drone entrance, and a scroll-scrubbed exploded 3D motor model with changing labels are all real, multi-section choreography. However, the recording shows unresolved transition overlaps — at ~23s 'EVALUATE' visibly overlaps with the incoming 'MANUFACTURE' label text, and at ~45.6s the footer/hero overlap with 'Ready to scale.' bleeding into the nav bar — indicating crossfade/timing issues rather than clean sequencing.
- Originality (25%): 58 — The combination of a persistent technical grid overlay with warm painterly cloud/mountain imagery and scroll-scrubbed exploded wireframe product diagrams is a reasonably specific synthesis for an industrial motor company, and the grid-as-skin device is a mild distinguishing idea. But the overall vocabulary — cinematic full-bleed hero, scroll-jacked parallax, massive uppercase display type, exploded 3D product reveal — is now a well-established genre for hardware/deep-tech startup sites, so this reads as a competent execution of familiar moves rather than a hard-to-substitute original system.
- Content (10%): 55 — Content is clearly mapped to visual moments — process step labels sit beside the matching exploded diagram stage, and a thesis statement is paired with a readable CTA. However, several captured instances show body copy truncated or fragmented mid-animation ('can be / and / supply-chain', 'Autonomous platforms demand motion systems that can be designed precisely, prototyped quickly;' cut off), suggesting the scroll-reveal mechanism can leave sentences incomplete/illegible at certain scroll positions.

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

A tight close-up of machining tools shifts into a painterly sky and mountain, pairing gritty hardware with an almost dreamlike backdrop. Oversized cream headlines on near-black and muted-blue sections give each chapter, from raw metal to finished drone, room to breathe and keeps the long scroll easy to follow.

## 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.