System overview
- Hero
- visual-led · left
- Surface
- dark
- Density
- sparse
- Content width
- 1200px
- Confidence
- medium
- Primary action
- None detected
Color system
Dark surfaces use 7 repeated semantic colors; hierarchy is carried mainly by tonal contrast.
Page canvas
Dominant rendered page background.Surface
Repeated container or section fill; relative occurrence score 204.Surface
Repeated container or section fill; relative occurrence score 160.Surface
Repeated container or section fill; relative occurrence score 150.Primary text
Observed display foreground with 8.1:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 1.1:1.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns Larken to display, heading text; Circular to body, body-small text; IBM Plex Mono to label text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Dubbing is finally good.
Larken · 64px/69.12px · weight 300 · tracking -1.152px · color rgb(255, 255, 255)Broadcasts, dubbed as they air.
Larken · 52px/59.8px · weight 300 · tracking 0.15px · color rgb(29, 29, 24)Broadcast dubs run 5 to 9 seconds behind the original over SRT or RTMP: translation 2 to 6 seconds…
Circular · 15px/24.75px · weight 400 · tracking 0.15px · color rgb(74, 74, 66)With review on, a dub pauses after translation: your team checks every line against the original,…
Circular · 14.5px/25.375px · weight 400 · tracking 0.15px · color rgb(232, 232, 219)▚ TESTED ON THE SAME CLIPS ▞
IBM Plex Mono · 11px/17.6px · weight 700 · tracking 1.98px · color rgb(163, 162, 133)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 71px
- Container
- 16px
8px16px4px10px12px6px20px28px71px3pxShape
Rounded geometry is the dominant shape voice. Elevation is selectively reinforced with shadow.
- Pills
- 9999px
- Containers
- 6px
- Media
- 0px
- Buttons
- 0px
Inspect borders & shadows · 10
1px solid rgb(227, 227, 212)1px solid rgb(61, 61, 51)1px solid rgb(217, 229, 133)1px solid rgb(50, 50, 42)1px dashed rgb(61, 61, 51)rgb(227, 227, 212) 0px 2px 0px 0pxrgba(0, 0, 0, 0.25) 0px 1px 1.5px 0px inset, rgba(255, 255, 255, 0.18) 0px 1px 0px 0pxrgb(197, 211, 96) 0px 3px 0px 0pxrgb(197, 211, 96) 0px 1px 0px 0pxrgb(201, 201, 207) 0px 3px 0px 0pxComponent grammar
Hero
Opening proposition
Visual led, left-aligned opening anchored by the primary message.
Inspect 4 properties
- Pattern
- visual-led
- Alignment
- left
- Heading
- Larken · 64px / 300
- Media
- video-led
Navigation
Global wayfinding
Persistent navigation with 5 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #171717
- Border
- none
- Radius
- 0px
- Padding
- 14px 71px 14px 71px
- Type
- Circular · 15px / 400
- Position
- fixed
- Height
- 84px
Content card
Repeated content module
1 style-matched content card instance was found among 1 candidates; properties describe the dominant observed cluster.
Inspect 7 properties
- Background
- rgba(255, 255, 255, 0.6)
- Text
- #171717
- Border
- 1px solid rgb(224, 224, 210)
- Radius
- 42px
- Padding
- 4px 4px 4px 4px
- Type
- Circular · 15px / 400
- Candidate pool
- 1
Form control
Input and selection
1 style-matched form control instance was found among 1 candidates; properties describe the dominant observed cluster.
Inspect 6 properties
- Text
- #1d1d18
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Circular · 14px / 400
- Candidate pool
- 1
Media frame
Visual proof
9 style-matched media elements were found among 26 rendered candidates; contain fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- contain, cover, fill
- Ratios
- 1.00, 1.78, 1.60, 1.81, 3.65
- Radius
- 0px, 12px
- Candidate pool
- 26
Footer
Closing navigation
33 visible actions close the page on a #f7f7f3 surface.
Inspect 7 properties
- Background
- #f7f7f3
- Text
- #171717
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Circular · 15px / 400
- Links
- 33
Layout & narrative
The homepage continues through 12 observed sections, moving from the opening proposition into Preserving the tone, facial expressions, music, background noise, all while perfectly syncing the lips, The whole translation, delivered, Broadcasts, dubbed as they air.
- Structure
- Visual marquee narrative
- Hero pattern
- Visual marquee: imagery carries most of the opening surface
- Grid
- 2 columns
- Closing
- Index footer with 33 actions
Full section sequence · 12
- Preserving the tone, facial expressions, music, background noise, all while perfectly syncing the lips.
- The whole translation, delivered.
- Broadcasts, dubbed as they air.
- Your platform, in every language.
- Control at every step.
- Questions?
- One request per dub
- Live, seconds behind
- Per-creator control
- Titles & descriptions too
- Review before it goes out
- Broadcasts
Imagery, motion & responsive
Imagery
Video led media acts as the page’s primary visual proof rather than decoration.
contain fitting · square-edged framesInspect imagery inventory
- Composition
- A focused visual anchors the first viewport.
- Inventory
- 20 images/canvas elements and 6 videos across the analyzed homepage.
Motion
8 declared keyframes and 1 active animation were inspectable at capture; observed timing uses 0.5s, 0.2s, 0.3s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- shimmer, unlimited-sweep, skeleton-sweep, publish-pop, page-enter, spin, ping, pulse
- Durations
- 0.5s, 0.2s, 0.3s, 0.15s, 6s, 7s
- Easings
- ease, ease-in-out, ease-out, cubic-bezier(0.2, 1.4, 0.4, 1), cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1), cubic-bezier(0.22, 0.61, 0.36, 1)
- States
- transition-all, hover, focus, active, disabled
Mobile
Desktop navigation reduces from 5 visible actions to 3. Hero alignment changes from left to center; mobile heading size is 40px.
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 #224ba0 canvas with #ffffff primary copy before adding secondary surfaces.
- Use Larken at 64px/69.12px, weight 300, for the primary display moment.
- Let the left-aligned visual-led hero establish hierarchy before secondary content.
- Video led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 9999px is the repeated treatment on pills.
- Do not introduce an accent hue that is absent from the captured palette.
- Do not introduce extra type families beyond Larken and Circular and IBM Plex Mono.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.