System overview
- Hero
- visual-led · center
- Surface
- dark
- Density
- sparse
- Content width
- 1600px full-width canvas
- Confidence
- medium
- Primary action
- Learn More
Color system
Dark surfaces use 8 repeated semantic colors; the primary action carries the strongest interactive emphasis.
Page canvas
Dominant rendered page background.Surface
Repeated container or section fill; relative occurrence score 60.Surface
Repeated container or section fill; relative occurrence score 49.Surface
Repeated container or section fill; relative occurrence score 5.Primary text
Observed display foreground with 16.2:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 6.9:1.Primary action
Foreground used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
A single-family system uses Inter across display and reading roles, differentiated by size and weight.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Low cost radars for interceptors
Inter · 72px/75.6px · weight 700 · tracking -1.8px · color rgb(240, 232, 216)Archimedes 1A
Inter · 60px/75px · weight 700 · tracking -1.5px · color rgb(139, 154, 107)The same seeker supports two modes of employment. It can carry an interceptor to the target on its…
Inter · 18px/29.25px · weight 400 · tracking 0px · color rgb(153, 153, 153)The interceptor launches on a fire control cue from the C2 network and flies out under radar…
Inter · 15px/24.375px · weight 400 · tracking 0px · color rgb(153, 153, 153)Problem
Inter · 11px/16.5px · weight 400 · tracking 2.2px · color rgb(85, 85, 85)Spacing & shape
Spacing
- Base unit
- 8px
- Section gap
- 48px
- Container
- 24px
24px16px48px20px8px12px80px32px10px6pxShape
Sharp geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Containers
- 10px
- Media
- 0px
Inspect borders & shadows · 6
1px solid rgb(26, 26, 26)1px solid rgba(200, 185, 155, 0.200)1px solid rgba(26, 26, 26, 0.800)1px solid rgb(200, 184, 154)1px solid rgba(200, 183, 155, 0.180)None observedComponent grammar
Hero
Opening proposition
Visual led, center-aligned opening anchored by “Learn More”.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- center
- Heading
- Inter · 72px / 700
- Media
- image-led
Navigation
Global wayfinding
Persistent navigation with 6 visible actions in the desktop opening.
Inspect 8 properties
- Background
- rgba(9, 9, 9, 0.949)
- Text
- #f0e8d8
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Inter · 16px / 400
- Position
- fixed
- Height
- 65px
Primary action
Conversion
“Learn More” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 5 properties
- Text
- #c8b89a
- Border
- 1px solid rgb(200, 184, 154)
- Radius
- 0px
- Padding
- 14px 32px 14px 32px
- Type
- Inter · 12px / 400
Media frame
Visual proof
2 style-matched media elements were found among 8 rendered candidates; cover fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- cover, contain, fill
- Ratios
- 3.30, 1.60, 1.99, 0.77, 0.97
- Radius
- 0px
- Candidate pool
- 8
Layout & narrative
The homepage continues through 4 observed sections, moving from the opening proposition into The vast majority of interceptors are still manually piloted, Beyond-visual-range guidance. Autonomous or operator-assisted, Low-cost, high-performance CUAS radars.
- Structure
- Visual marquee narrative
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- 3 columns
- Closing
- No footer detected
Full section sequence · 4
- The vast majority of interceptors are still manually piloted.
- Beyond-visual-range guidance. Autonomous or operator-assisted.
- Low-cost, high-performance CUAS radars.
- Archimedes 1A
Imagery, motion & responsive
Imagery
Image led media acts as the page’s primary visual proof rather than decoration.
cover fitting · square-edged framesInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 8 images/canvas elements and 0 videos across the analyzed homepage.
Motion
2 declared keyframes and 8 active animations were inspectable at capture; observed timing uses 0.3s, 0.2s, 0.5s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- countUp, subtlePulse
- Durations
- 0.3s, 0.2s, 0.5s, 0.7s, 1s, 2s
- Easings
- ease, ease-out, ease-out, ease-out, ease-in-out
- States
- transition-all, hover, focus
Mobile
Desktop navigation reduces from 6 visible actions to 2. Hero remains center-aligned; mobile heading size is 36px.
Observed multi-column desktop regions collapse to a single-column mobile flow.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #0b0a0a canvas with #f0e8d8 primary copy before adding secondary surfaces.
- Use Inter at 72px/75.6px, weight 700, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Learn More” within the center-aligned visual-led hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 10px is the repeated treatment on containers.
- Do not reuse the #c8b89a action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Inter.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.




