System overview
- Hero
- split · left
- Surface
- light
- Density
- sparse
- Content width
- 1280px
- Confidence
- medium
- Primary action
- Explore OpenVector
Color system
Light 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 564.Surface
Repeated container or section fill; relative occurrence score 1.Surface
Repeated container or section fill; relative occurrence score 1.Primary text
Observed display foreground with 14.3:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 5.4:1.Primary action
Fill used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
A single-family system uses Aspekta 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.Vision Language Action Systems for the Physical World.
Aspekta · 68px/71.4px · weight 300 · tracking -2.1px · color rgb(33, 34, 44)Tell any camera what to do, in real time, in plain English.
Aspekta · 64px/69.12px · weight 300 · tracking -1.8px · color rgb(33, 34, 44)Describe what matters in your operation. OpenVector connects camera observations to inspectable…
Aspekta · 18px/24.3px · weight 300 · tracking 0px · color rgb(33, 34, 44)Vision Language Action Systems for the Physical World.
Aspekta · 14px/21.7px · weight 300 · tracking 0px · color rgb(176, 176, 179)Explore OpenVector
Aspekta · 11px/15.4px · weight 400 · tracking 2.2px · color rgb(255, 255, 255)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 64px
- Container
- 16px
12px64px16px153.5px7px18px8px140px60px24pxShape
Sharp geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Pills
- 50px
- Media
- 0px
- Cards
- 0px
- Buttons
- 0px
Inspect borders & shadows · 5
1px solid rgb(33, 34, 44)1px solid transparent1px solid rgb(213, 213, 216)1px solid rgba(255, 255, 255, 0.188)None observedComponent grammar
Hero
Opening proposition
Split, left-aligned opening anchored by “Explore OpenVector”.
Inspect 4 properties
- Pattern
- split
- Alignment
- left
- Heading
- Aspekta · 68px / 300
- Media
- video-led
Navigation
Global wayfinding
Static navigation with 7 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #21222c
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Aspekta · 18px / 400
- Position
- static
- Height
- 44px
Primary action
Conversion
“Explore OpenVector” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #21222c
- Text
- #ffffff
- Border
- 1px solid rgb(33, 34, 44)
- Radius
- 0px
- Padding
- 10px 28px 10px 28px
- Type
- Aspekta · 11px / 400
Content card
Repeated content module
12 style-matched content card instances were found among 12 candidates; properties describe the dominant observed cluster.
Inspect 6 properties
- Text
- #21222c
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Aspekta · 18px / 300
- Candidate pool
- 12
Media frame
Visual proof
25 style-matched media elements were found among 30 rendered candidates; cover fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- cover, contain
- Ratios
- 2.05, 1.00, 1.20, 2.00
- Radius
- 0px
- Candidate pool
- 30
Footer
Closing navigation
12 visible actions close the page on a #21222c surface.
Inspect 7 properties
- Background
- #21222c
- Text
- #f4f3f3
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Aspekta · 18px / 300
- Links
- 12
Layout & narrative
The homepage continues through 17 observed sections, moving from the opening proposition into Real-time video intelligence, Tell any camera what to do, in real time, in plain English, Real places. Specific tasks.
- Structure
- Long-form product catalogue
- Hero pattern
- Split hero: message and proof share the first viewport
- Grid
- 1 column
- Closing
- Index footer with 12 actions
Full section sequence · 17
- Real-time video intelligence.
- Tell any camera what to do, in real time, in plain English.
- Real places. Specific tasks.
- At the speed of life.
- Follow through in your software.
- Check that the defined SOP is followed.
- Track the location of items, boxes, and consignments.
- Document care visits for Medicaid records.
- Track each workout. Check it against the plan.
- Turn shelf gaps into replenishment tasks.
- Turn a growing queue into a staffing request.
- Catch unscanned items at checkout.
- A table is ready. Notify the host.
- Catch packages in the wrong place.
- Record vehicles leaving the service bay.
- Link cleaning rounds to the work order.
- Write your own prompt.
Imagery, motion & responsive
Imagery
Video led media acts as the page’s primary visual proof rather than decoration.
cover fitting · square-edged framesInspect imagery inventory
- Composition
- The first viewport is type-led.
- Inventory
- 13 images/canvas elements and 5 videos across the analyzed homepage.
Motion
1 declared keyframe and 4 active animations were inspectable at capture; observed timing uses 0.18s, 0.5s, 1ms.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- swiper-preloader-spin
- Durations
- 0.18s, 0.5s, 1ms, 0.35s
- Easings
- ease, ease, ease, ease-in-out, ease-in-out, linear, cubic-bezier(0.37, 0, 0.63, 1), linear
- States
- hover, focus, disabled, active
Mobile
Desktop navigation reduces from 7 visible actions to 2. Hero alignment changes from left to center; mobile heading size is 40px.
3 multi-column content regions remain on mobile.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #f4f3f3 canvas with #21222c primary copy before adding secondary surfaces.
- Use Aspekta at 68px/71.4px, weight 300, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Explore OpenVector” within the left-aligned split hero.
- Video led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 50px is the repeated treatment on pills.
- Do not reuse the #21222c action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Aspekta.
- Do not add card shadows; the source separates content without repeated elevation.




