System overview
- Hero
- visual-led · center
- Surface
- dark
- Density
- sparse
- Content width
- 1184px
- Confidence
- low
- Primary action
- Book a demo
Color system
Dark surfaces use 7 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 466.Surface
Repeated container or section fill; relative occurrence score 180.Surface
Repeated container or section fill; relative occurrence score 10.Primary text
Observed display foreground with 17.7:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 3.8:1.Primary action
Fill used by the dominant first-viewport action.Typography
A single-family system uses Apple System 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.See what Lightfield can do.
Apple System · 104px/106.08px · weight 500 · tracking -3.952px · color rgb(245, 245, 247) · preview scaled© 2026 Lightfield, Inc. All rights reserved.
Apple System · 11px/17.05px · weight 400 · tracking -0.187px · color rgb(110, 110, 115)Skip to content
Apple System · 13px/20.15px · weight 500 · tracking -0.187px · color rgb(0, 0, 0)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 40px
- Container
- 40px
9px12px40px32px7px8px20px16px10px72pxShape
Rounded geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Containers
- 14px
- Pills
- 999px
Inspect borders & shadows · 5
No repeated border treatment detectedrgba(255, 255, 255, 0.09) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.1) 0px 1px 0px 0px insetrgba(0, 0, 0, 0.5) 0px 12px 40px 0px, rgba(0, 0, 0, 0.45) 0px 4px 12px 0pxrgba(0, 0, 0, 0.25) 0px 1px 4px 0pxrgba(176, 205, 250, 0.353) 0px 5.33652px 39.3652px -8.66348pxComponent grammar
Hero
Opening proposition
Visual led, center-aligned opening anchored by “Book a demo”.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- center
- Heading
- 100px
- Media
- image-led
Navigation
Global wayfinding
Static navigation with 4 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #f5f5f7
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Apple System · 17px / 400
- Position
- static
- Height
- 34px
Primary action
Conversion
“Book a demo” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #f4f1e9
- Text
- #0a0a0c
- Border
- none
- Radius
- 12px
- Padding
- 0px 32px 0px 32px
- Type
- Apple System · 17px / 600
Media frame
Visual proof
2 style-matched media elements were found among 2 rendered candidates; fill fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- fill
- Ratios
- 1.60
- Radius
- 0px
- Candidate pool
- 2
Footer
Closing navigation
5 visible actions close the page on a #050508 surface.
Inspect 7 properties
- Background
- #050508
- Text
- #f5f5f7
- Border
- none
- Radius
- 0px
- Padding
- 64px 40px 40px 40px
- Type
- Apple System · 17px / 400
- Links
- 5
Layout & narrative
The homepage continues through 5 observed sections, moving from the opening proposition into See what Lightfield can do, It does the work, You approve.
- Structure
- Visual marquee narrative
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- 1 column
- Closing
- Utility footer with 5 actions
Full section sequence · 5
- See what Lightfield can do.
- It does the work
- You approve
- Connect anything in 2 minutes.
- Built for the security review.
Imagery, motion & responsive
Imagery
Image 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
- 2 images/canvas elements and 0 videos across the analyzed homepage.
Motion
12 declared keyframes and 40 active animations were inspectable at capture; observed timing uses 1.2s, 1ms, 0.24s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- site-header-module__hM9mMW__sheetIn, site-header-module__hM9mMW__headerDodge, hero-field-module__Y7QtaG__nightDim, queue-visual-module__0Uu6wW__dotBreathe, queue-visual-module__0Uu6wW__windowFly, queue-visual-module__0Uu6wW__chromeDrop, queue-visual-module__0Uu6wW__switchDrop, queue-visual-module__0Uu6wW__gearIn, queue-visual-module__0Uu6wW__trayIn, queue-visual-module__0Uu6wW__rowIn, queue-visual-module__0Uu6wW__countUp, queue-visual-module__0Uu6wW__titleFocus
- Durations
- 1.2s, 1ms, 0.24s, 3.2s, 4.5s, 0.44s
- Easings
- linear, ease, ease-in-out, cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.19, 0.75, 0.28, 0.99), cubic-bezier(0.16, 0.62, 0.23, 1), cubic-bezier(0.2, 0.7, 0.2, 1)
- States
- hover, focus, active
Mobile
The same 4 visible navigation actions remain at mobile width. Hero remains center-aligned; mobile heading size is 46px.
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 #0c0d11 canvas with #f7f4ec primary copy before adding secondary surfaces.
- Preserve the first viewport’s existing display-to-body scale contrast.
- Reserve the strongest first-viewport contrast for “Book a demo” 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; 14px is the repeated treatment on containers.
- Do not reuse the #f4f1e9 action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Apple System.
- Do not spread the observed shadow treatment across every container; keep elevation selective.