System overview
- Hero
- visual-led · left
- Surface
- light
- Density
- sparse
- Content width
- 1600px full-width canvas
- Confidence
- medium
- Primary action
- Request a Demo
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 119.Surface
Repeated container or section fill; relative occurrence score 115.Surface
Repeated container or section fill; relative occurrence score 101.Primary text
Observed display foreground; its canvas-reference contrast is 1.2:1 and may rely on a local hero surface.Secondary text
Observed reading foreground; measured canvas-reference contrast is 1.1: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 ShizukaD 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.Welcome to the CNC Factory of the Future.
ShizukaD · 36px/40px · weight 700 · tracking 0px · color rgb(255, 255, 255)More about the Factory of the Future.
ShizukaD · 72px/90px · weight 700 · tracking 0px · color rgb(255, 255, 255)Witness our AI-driven robotic arm effortlessly handle components, serving multiple CNC machines with…
ShizukaD · 16px/26px · weight 400 · tracking 0px · color rgb(243, 244, 246)Gantry mounted, effortlessly spanning multiple machines.
ShizukaD · 12px/16px · weight 400 · tracking 0px · color rgb(243, 244, 246)Home
ShizukaD · 14px/20px · weight 500 · tracking 0px · color rgb(255, 255, 255)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 32px
- Container
- 16px
8px16px12px32px20px4px24px6px96px48pxShape
Soft geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Containers
- 8px
- Buttons
- 8px
- Media
- 6px
- Pills
- 9999px
Inspect borders & shadows · 3
1px solid rgb(255, 255, 255)1px solid rgb(0, 0, 0)None observedComponent grammar
Hero
Opening proposition
Visual led, left-aligned opening anchored by “Request a Demo”.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- left
- Heading
- ShizukaD · 36px / 700
- Media
- video-led
Navigation
Global wayfinding
Static navigation with 8 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #000000
- Border
- none
- Radius
- 0px
- Padding
- 16px 24px 16px 24px
- Type
- ShizukaD · 16px / 400
- Position
- relative
- Height
- 84px
Primary action
Conversion
“Request a Demo” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #000000
- Text
- #ffffff
- Border
- none
- Radius
- 8px
- Padding
- 8px 16px 8px 16px
- Type
- ShizukaD · 14px / 500
Media frame
Visual proof
2 style-matched media elements were found among 9 rendered candidates; fill fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- fill, cover, contain
- Ratios
- 1.00, 4.55, 1.60, 1.92, 2.19
- Radius
- 0px, 6px
- Candidate pool
- 9
Footer
Closing navigation
7 visible actions close the page on a #000000 surface.
Inspect 7 properties
- Background
- #000000
- Text
- #ffffff
- Border
- none
- Radius
- 0px
- Padding
- 48px 0px 0px 0px
- Type
- ShizukaD · 16px / 400
- Links
- 7
Layout & narrative
The homepage continues through 4 observed sections, moving from the opening proposition into Intelligent Vision, Flexible Reach, Human-in-the-loop Safety.
- Structure
- Visual marquee narrative
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- 3 columns
- Closing
- Utility footer with 7 actions
Full section sequence · 4
- Intelligent Vision
- Flexible Reach
- Human-in-the-loop Safety
- More about the Factory of the Future.
Imagery, motion & responsive
Imagery
Video led media acts as the page’s primary visual proof rather than decoration.
fill fitting · square-edged framesInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 5 images/canvas elements and 4 videos across the analyzed homepage.
Motion
3 declared keyframes and 0 active animations were inspectable at capture; observed timing uses 0.3s, 0.5s, 5s.
No reduced-motion rule detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- move, spin, pulse
- Durations
- 0.3s, 0.5s, 5s
- Easings
- ease, linear
- States
- transition-all, hover, focus, disabled
Mobile
Desktop navigation reduces from 8 visible actions to 2. Hero alignment changes from left to center; mobile heading size is 24px.
Primary content reads as a single-column mobile flow.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #ebebeb canvas with #ffffff primary copy before adding secondary surfaces.
- Use ShizukaD at 36px/40px, weight 700, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Request a Demo” within the left-aligned visual-led hero.
- Video led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 8px is the repeated treatment on containers.
- Do not reuse the #000000 action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond ShizukaD.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.