System overview
- Hero
- compact · center
- Surface
- dark
- Density
- dense
- Content width
- 1472px
- Confidence
- medium
- Primary action
- Watch now
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 571.Surface
Repeated container or section fill; relative occurrence score 117.Surface
Repeated container or section fill; relative occurrence score 100.Primary text
Observed display foreground with 16.6:1 contrast against the captured canvas.Secondary text
Observed reading foreground; measured canvas-reference contrast is 14.4:1.Primary action
Fill used by the dominant first-viewport action.Border and divider
Most repeated inspectable border color.Typography
The observed type system assigns Bricolage Grotesque to display, heading, label text; Inter to body, body-small text.
Metric previews use the observed CSS values. Source font files are not bundled, so unavailable families fall back locally.Every Monster Thinks I'm Their Landlord
Bricolage Grotesque · 27px/28.35px · weight 800 · tracking -0.675px · color rgb(255, 255, 255)Top 10 today
Bricolage Grotesque · 17px/23.8px · weight 800 · tracking 0.68px · color rgb(214, 218, 221)Every Monster Thinks I'm Their Landlord
Inter · 14px/19.6px · weight 500 · tracking 0px · color rgb(237, 239, 241)Branded a Failure after awakening with no known combat abilities, James Vale is betrayed by the Hero…
Inter · 13.5px/18.5625px · weight 400 · tracking 0px · color rgb(180, 186, 191)Get the app
Bricolage Grotesque · 11px/11px · weight 700 · tracking 0.66px · color rgb(255, 255, 255)Spacing & shape
Spacing
- Base unit
- 4px
- Section gap
- 32px
- Container
- 16px
6px3px4px8px12px16px10px24px20px32pxShape
Soft geometry is the dominant shape voice. Separation relies on borders and surface contrast rather than shadow.
- Containers
- 6px
- Media
- 3px
- Buttons
- 4px
Inspect borders & shadows · 6
1px solid rgb(44, 48, 52)1px solid rgb(51, 51, 51)1px solid rgba(255, 255, 255, 0.502)1px solid rgb(16, 18, 20)1px solid rgb(255, 255, 255)None observedComponent grammar
Hero
Opening proposition
Compact, center-aligned opening anchored by “Watch now”.
Inspect 4 properties
- Pattern
- compact
- Alignment
- center
- Heading
- Bricolage Grotesque · 27px / 800
- Media
- image-led
Navigation
Global wayfinding
Persistent navigation with 4 visible actions in the desktop opening.
Inspect 7 properties
- Text
- #edeff1
- Border
- none
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Inter · 16px / 400
- Position
- sticky
- Height
- 65px
Primary action
Conversion
“Watch now” is the strongest first-viewport action by semantic intent and visual contrast.
Inspect 6 properties
- Background
- #99ea68
- Text
- #101214
- Border
- 1px solid rgb(16, 18, 20)
- Radius
- 6px
- Padding
- 0px 20px 0px 20px
- Type
- Bricolage Grotesque · 12.5px / 700
Media frame
Visual proof
122 style-matched media elements were found among 206 rendered candidates; cover fitting and 0px are the most repeated treatments.
Inspect 4 properties
- Fit
- cover, fill
- Ratios
- 0.75, 1.00, 0.72, 5.65, 1.53
- Radius
- 0px, 3px
- Candidate pool
- 206
Footer
Closing navigation
9 visible actions close the page on a transparent surface.
Inspect 6 properties
- Text
- #edeff1
- Border
- 1px solid rgb(44, 48, 52)
- Radius
- 0px
- Padding
- 0px 0px 0px 0px
- Type
- Inter · 16px / 400
- Links
- 9
Layout & narrative
The homepage continues through 4 observed sections, moving from the opening proposition into Top 10 today, New releases, Coming soon.
- Structure
- Editorial product narrative
- Hero pattern
- Compact hero: navigation and proposition share a shallow opening
- Grid
- 6 columns
- Closing
- Index footer with 9 actions
Full section sequence · 4
- Top 10 today
- New releases
- Coming soon
- All series
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
- Multiple visual elements share the first viewport.
- Inventory
- 206 images/canvas elements and 0 videos across the analyzed homepage.
Motion
11 declared keyframes and 0 active animations were inspectable at capture; observed timing uses 0.15s, 2s, 1.1s.
Reduced-motion rules detectedInspect motion inventory
- Libraries
- CSS / browser-native or bundled source not identifiable
- Keyframes
- pulse, sweep, scroll, panRightContinuous, panRightMobile, pulse-bounce, dock-swap, fade-in, wall-up, wall-down, ticker-left
- Durations
- 0.15s, 2s, 1.1s, 0.2s, 0.3s, 38s, 45s, 15s
- Easings
- cubic-bezier(0.4, 0, 0.2, 1), linear, ease-out, cubic-bezier(0.4, 0, 0.6, 1), cubic-bezier(0, 0, 0.2, 1), ease-in-out, ease-out, ease-out
- States
- disabled, hover, active, transition-all, focus
Mobile
The same 4 visible navigation actions remain at mobile width. Hero remains center-aligned; mobile heading size is 27px.
1 multi-column content region remains on mobile.Inspect responsive test
- Viewport
- 390 × 844
- Overflow
- No horizontal overflow detected
Reproduction guidance
Do
- Pair the observed #1c1f20 canvas with #ffffff primary copy before adding secondary surfaces.
- Use Bricolage Grotesque at 27px/28.35px, weight 800, for the primary display moment.
- Reserve the strongest first-viewport contrast for “Watch now” within the center-aligned compact hero.
- Image led media acts as the page’s primary visual proof rather than decoration.
Don’t
- Do not mix in arbitrary radii; 6px is the repeated treatment on containers.
- Do not reuse the #99ea68 action color across decorative elements; keep its interactive emphasis selective.
- Do not introduce extra type families beyond Bricolage Grotesque and Inter.
- Do not copy transition-all declarations; keep only purposeful transform or opacity motion.