Muhammad Syahputra

Generated Nov 5, 2026

DESIGN.md for kingbokep.tv

kingbokep.tv10 colors5 componentsPoppins

Remix

12 screenshots captured· kingbokep.tv

1 / 12 · KingBokep | Streaming Video Bokep Terbaru · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Kingbokep
description: |
  KingBokep's design embodies a bold, high-contrast digital culture aesthetic
  rooted in deep, immersive darkness. The visual identity commands attention
  through vibrant neon accent colors—chiefly a striking electric purple
  (#6200FF)—set against a near-black canvas. This creates a nightlife-inspired,
  energetic mood that prioritizes content prominence and visual hierarchy
  through color blocking rather than subtle shadows. The interface favors crisp
  edges, rounded pill-shaped interactive elements, and a micro-layered elevation
  strategy that relies on flat surfaces punctuated by sharp drop shadows.
  Typography is bold and confident, anchored in Poppins' substantial weights,
  lending the platform a contemporary, youth-focused character. The overall
  sensation is one of high engagement in a playful, unrestrained digital space.
source:
  url: "https://kingbokep.tv"
  pagesAnalyzed: 6
  extractedAt: 2026-11-05
  tokensMeasured: true
colors:
  primary: "#6200FF"
  canvas: "#0D0915"
  surface: "#181325"
  ink: "#F7F5FA"
  body: "#A9A1BA"
  hairline: "#332B46"
  accent-1: "#FFD633"
  accent-2: "#241D34"
  neutral-1: "#000000"
  neutral-2: "#FFFFFF"
typography:
  heading-md:
    fontFamily: Poppins
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.64px
  heading-sm:
    fontFamily: Poppins
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.33
    letterSpacing: -0.48px
  body-xl:
    fontFamily: Poppins
    fontSize: 20px
    fontWeight: 800
    lineHeight: 1.4
    letterSpacing: -0.5px
  body-lg:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: 0px
  body-md-strong:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  nav:
    fontFamily: Poppins
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  button-sm:
    fontFamily: Poppins
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-xs:
    fontFamily: Poppins
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.45px
  label:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  caption-xs-2:
    fontFamily: Poppins
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 12px
  sm: 16px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgb(0, 0, 0) 2px 2px 0px 0px"
  md: "rgb(0, 0, 0) 4px 4px 0px 0px"
  lg: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FAF7FF"
    surface: "#F0EDF5"
    surfaceRaised: "#E9E6ED"
    text: "#15101D"
    textMuted: "#6B6771"
    border: "#D7D4DB"
    accent: "#6200FF"
    accentFg: "#FFFFFF"
    focusRing: "#6200FF"
    elevation: shadow
  dark:
    bg: "#0D0915"
    surface: "#181325"
    surfaceRaised: "#2A2636"
    text: "#F7F5FA"
    textMuted: "#A9A1BA"
    border: "#332B46"
    accent: "#6F14FF"
    accentFg: "#FFFFFF"
    focusRing: "#6200FF"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: linear
    value: "linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4))"
components:
  button-filled:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.primary}"
    height: 47px
    padding: "4px 4px 4px 16px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 4px 4px 0px 0px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.surface}"
  button-primary:
    typography: "{typography.nav}"
    textColor: "rgb(249, 250, 251)"
    border: "2px solid {colors.neutral-1}"
    height: 36px
    padding: "6px 16px 6px 16px"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 2px 2px 0px 0px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.primary}"
  button-filled-sm:
    typography: "{typography.nav}"
    textColor: "rgba(247, 245, 250, 0.85)"
    border: "2px solid {colors.hairline}"
    height: 44px
    padding: "8px 16px 8px 16px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  button-primary-lg:
    typography: "{typography.nav}"
    textColor: "rgb(249, 250, 251)"
    border: "2px solid {colors.neutral-1}"
    height: 44px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 2px 2px 0px 0px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.primary}"
  card:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.hairline}"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.surface}"
  card-sm:
    typography: "{typography.label}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.hairline}"
    padding: "12px 64px 12px 44px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.surface}"
  card-featured:
    textColor: "rgb(10, 10, 10)"
    border: "2px solid {colors.neutral-1}"
    padding: "4px 8px 4px 8px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.neutral-1} 2px 2px 0px 0px"
    fontFamily: Poppins
    fontWeight: 600
    lineHeight: 1.5
    rounded: "{rounded.full}"
    backgroundColor: "{colors.accent-1}"
  navigation:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    height: 74px
    backgroundColor: "rgba(13, 9, 21, 0.85)"
  footer:
    textColor: "{colors.body}"
    padding: "0px 40px 32px 40px"
    fontSize: 14px
    fontFamily: Poppins
    fontWeight: 400
    lineHeight: 1.43
  link:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  link-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
states:
  card-focus-visible:
    target: card
    state: focus-visible
    outline: "rgba(0, 0, 0, 0) solid 2px"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  button-focus-visible:
    target: button
    state: focus-visible
    outline: "rgba(0, 0, 0, 0) solid 2px"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
  badge-focus-visible:
    target: badge
    state: focus-visible
    outline: "rgba(0, 0, 0, 0) solid 2px"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgba(0, 0, 0, 0)"
  other-focus:
    target: other
    state: focus
    outline: "rgba(0, 0, 0, 0) solid 2px"
    outlineColor: "rgba(0, 0, 0, 0)"
    outlineWidth: 2px
  other-focus-visible:
    target: other
    state: focus-visible
    backgroundColor: "rgba(0, 0, 0, 0)"
  button-hover:
    target: button
    state: hover
    textColor: highlighttext
    backgroundColor: highlight
  nav-focus-visible:
    target: nav
    state: focus-visible
    outline: "solid 2px"
    outlineWidth: 2px
  other-active:
    target: other
    state: active
    transform: "translate(2px, 2px) scale(0.98)"
  button-active:
    target: button
    state: active
    boxShadow: none
    transform: "translate(1px, 1px)"
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 3
    navLinksVisible: 2
    menuToggleVisible: true
    headingPx: 20
    bodyPx: 16
    sectionPaddingX: 12
  - width: 768
    containerWidth: 227
    gridColumns: 6
    navLinksVisible: 8
    menuToggleVisible: false
    headingPx: 24
    bodyPx: 16
    sectionPaddingX: 24
  - width: 1024
    containerWidth: 301
    gridColumns: 6
    navLinksVisible: 20
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1280
    containerWidth: 1280
    gridColumns: 6
    navLinksVisible: 20
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 40
  - width: 1440
    containerWidth: 1440
    gridColumns: 6
    navLinksVisible: 20
    menuToggleVisible: false
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 40
coverage:
  statesFound: 53
  gradientsFound: 1
  rolesUnassigned: 4
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by KingBokep

1. Visual Theme & Atmosphere

KingBokep's design embodies a bold, high-contrast digital culture aesthetic rooted in deep, immersive darkness. The visual identity commands attention through vibrant neon accent colors—chiefly a striking electric purple ({colors.primary} — #6200FF)—set against a near-black canvas. This creates a nightlife-inspired, energetic mood that prioritizes content prominence and visual hierarchy through color blocking rather than subtle shadows. The interface favors crisp edges, rounded pill-shaped interactive elements, and a micro-layered elevation strategy that relies on flat surfaces punctuated by sharp drop shadows. Typography is bold and confident, anchored in Poppins' substantial weights, lending the platform a contemporary, youth-focused character. The overall sensation is one of high engagement in a playful, unrestrained digital space.

Key Characteristics

Deep, near-black canvas (#0D0915) establishing an immersive, distraction-free viewing environment
Electric purple primary accent (#6200FF) used sparingly as the hero brand and interactive focal point
Decorative accents in gold (#FFD633) and dark plum (#241D34) adding playful visual rhythm
Pill-shaped (9999px radius) primary interactive elements, contrasting with rounded-corner ({rounded.sm} — 16px) card surfaces
Color-blocking elevation strategy: depth conveyed through surface-color changes, not shadow diffusion
Bold, high-contrast typography (weights 400–800) in Poppins, with negative letter-spacing on display sizes
Micro-layered shadows (2–4px hard offsets in black) creating a tactile, slightly playful visual depth
High-opacity, desaturated body text ({colors.body} — #A9A1BA) ensuring readability against dark surfaces

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #6200FF): Primary CTA fills, brand mark, active navigation states, and interactive focal points. Used as the hero accent and interactive feedback color.

Accent Colors

Gold Accent ({colors.accent-1} — #FFD633): Decorative badge counters, video duration overlays, and category highlight tokens. No functional role; treated as visual punctuation.
Dark Plum Accent ({colors.accent-2} — #241D34): Decorative supporting accent; no measured functional role.

Interactive

Primary CTA Background ({colors.primary} — #6200FF): Filled button backgrounds, active states, and hero highlights.
Primary CTA Text ({colors.ink} — #F7F5FA): Text over primary backgrounds.

Neutral Scale

Canvas ({colors.canvas} — #0D0915): Default page and viewport background.
Surface ({colors.surface} — #181325): Card and container backgrounds, secondary surface layers.
Ink ({colors.ink} — #F7F5FA): Primary heading and text color, high-contrast foreground.
Body ({colors.body} — #A9A1BA): Body copy, secondary text, reduced emphasis.
Neutral Black ({colors.neutral-1} — #000000): Deepest neutral; reserved for specific borders and extreme contrast.
Neutral White ({colors.neutral-2} — #FFFFFF): Rarely used; reserved for exceptional contrast needs.

Surface & Borders

Hairline ({colors.hairline} — #332B46): 1px borders, dividers, and subtle frame lines. Creates visual segmentation without breaking the dark mood.

3. Typography Rules

Font Family

Primary: Poppins, fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Secondary: (None declared; Poppins serves all roles)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Poppins	32px	800	1.15	−0.64px	Page title; `{typography.heading-md}`
Heading Large	Poppins	24px	800	1.33	−0.48px	Section headers; `{typography.heading-sm}`
Body Extra Large	Poppins	20px	800	1.4	−0.5px	`{typography.body-xl}`; high-emphasis body
Body Large	Poppins	16px	400	1.5	0px	Links and large body text; `{typography.body-lg}`
Body Medium	Poppins	14px	400	1.71	0px	Default body copy; `{typography.body-md}`
Body Medium Strong	Poppins	14px	500	1.43	0px	Emphasized body; `{typography.body-md-strong}`
Label	Poppins	16px	500	1.5	0px	Form labels and input markers; `{typography.label}`
Navigation	Poppins	14px	600	1.43	0px	Nav links and tab labels; `{typography.nav}`
Button Small	Poppins	13px	400	1.5	0px	Small button text; `{typography.button-sm}`
Button Extra Small	Poppins	9px	500	1.5	−0.45px	Minimal buttons, micro-UI; `{typography.button-xs}`
Caption Extra Small	Poppins	12px	400	1.33	0px	Captions and fine print; `{typography.caption-xs}`
Caption Extra Small Strong	Poppins	12px	600	1	0px	Emphasized captions; `{typography.caption-xs-strong}`
Caption Extra Small Bold	Poppins	12px	700	1.33	0px	High-emphasis captions; `{typography.caption-xs-2}`

Principles

Negative tracking on display: Display and body-xl sizes use tight, negative letter-spacing (−0.64px, −0.5px, −0.45px) to create compact, authoritative headlines.
Weight spectrum: Poppins weights range 400 (regular) → 800 (bold), with 600 and 700 reserved for labels, captions, and emphasis.
Line height proportionality: Larger sizes use tighter line-height ratios (1.15–1.4); smaller captions and body text relax to 1.5–1.71 for legibility.
Hierarchy by size, not color: Text hierarchy is enforced through size and weight alone; color is reserved for functional roles (primary text vs. secondary text).

4. Component Stylings

Buttons

Primary Pill Button

Font: {typography.nav} (14px, 600, line-height 1.43)
Background: {colors.primary} (#6200FF)
Text Color: {colors.ink} (#F7F5FA)
Padding: 6px 16px 6px 16px
Border: 2px solid {colors.neutral-1} (#000000)
Border Radius: {rounded.full} (9999px)
Height: 36px
Width: 79px
Box Shadow: rgb(0, 0, 0) 2px 2px 0px 0px (micro hard offset)
Hover: Background deepens; shadow amplifies slightly

Filled Large Pill Button

Font: {typography.body-lg} (16px, 400, line-height 1.5)
Background: {colors.surface} (#181325)
Text Color: {colors.ink} (#F7F5FA)
Padding: 4px 4px 4px 16px (asymmetric internal spacing for icon-adjacent layouts)
Border: 2px solid {colors.primary} (#6200FF)
Border Radius: {rounded.full} (9999px)
Height: 47px
Width: 244px
Box Shadow: rgb(0, 0, 0) 4px 4px 0px 0px (lg micro offset)
Hover: Slight elevation and border-color shift to primary

Filled Small Button

Font: {typography.nav} (14px, 600, line-height 1.43)
Background: {colors.surface} (#181325)
Text Color: rgba({colors.ink}, 0.85) (slightly desaturated #F7F5FA)
Padding: 8px 16px 8px 16px
Border: 2px solid {colors.hairline} (#332B46)
Border Radius: {rounded.xs} (12px)
Height: 44px
Width: 90px
Box Shadow: none (flat)
Hover: Color brightens; hairline border may shift to primary

Primary Large Square Button

Font: {typography.nav} (14px, 600, line-height 1.43)
Background: {colors.primary} (#6200FF)
Text Color: {colors.ink} (#F7F5FA)
Padding: 0px 0px 0px 0px (icon-only or minimal interior space)
Border: 2px solid {colors.neutral-1} (#000000)
Border Radius: {rounded.xs} (12px)
Height: 44px
Width: 44px
Box Shadow: rgb(0, 0, 0) 2px 2px 0px 0px (md micro offset)
Hover: Elevation and border highlight

Disabled Button

Opacity: 0.5 (reduced visual weight)
Cursor: not-allowed

Cards & Containers

Default Card

Font: {typography.body-lg} (16px, 400, line-height 1.5)
Background: {colors.surface} (#181325)
Text Color: {colors.ink} (#F7F5FA)
Padding: 0px 0px 0px 0px (no internal padding; content margin managed by child elements)
Border: 2px solid {colors.hairline} (#332B46)
Border Radius: {rounded.sm} (16px)
Height: 181.125px
Width: 322px
Box Shadow: none (flat elevation strategy)
Hover: Border shifts to {colors.primary} (#6200FF); mild transform applied (see interaction states)
Focus Visible: Border set to primary; box-shadow applied per focus styling

Small Pill Card

Font: {typography.label} (16px, 500, line-height 1.5)
Background: {colors.surface} (#181325)
Text Color: {colors.ink} (#F7F5FA)
Padding: 12px 64px 12px 44px
Border: 2px solid {colors.hairline} (#332B46)
Border Radius: {rounded.full} (9999px)
Height: 56px
Width: 416px
Box Shadow: none
Hover: Border color shifts; possible transform lift

Featured Badge Card

Font: {typography.nav} (14px, 600, line-height 1.43)
Background: {colors.accent-1} (#FFD633)
Text Color: {colors.neutral-1} (#000000) (high contrast on gold)
Padding: 4px 8px 4px 8px
Border: 2px solid {colors.neutral-1} (#000000)
Border Radius: {rounded.full} (9999px)
Height: 24px
Width: 56px
Box Shadow: rgb(0, 0, 0) 2px 2px 0px 0px
Hover: Background slightly darkens; shadow amplifies
Focus Visible: Standard focus ring applied

Inputs & Forms

Base Label: Font {typography.label} (16px, 500), color {colors.ink}
Input Text: Font {typography.body-lg} (16px, 400), color {colors.body}
Placeholder: Font {typography.body-lg}, color {colors.body} at 50% opacity
Border: 1px solid {colors.hairline} (#332B46)
Border Radius: {rounded.xs} (12px)
Focus State: Border color shifts to {colors.primary} (#6200FF); optional outline applied

Navigation

Header Navigation

Font: {typography.nav} (14px, 600, line-height 1.43)
Background: rgba({colors.canvas}, 0.85) (semi-transparent dark with slight transparency)
Text Color: {colors.ink} (#F7F5FA)
Border: none
Border Radius: {rounded.none} (0px)
Height: 74px
Padding: internal spacing varies by link density
Active Link: Background or border set to {colors.primary} (#6200FF)
Hover: Color shift to accent; optional background highlight
Focus Visible: 2px outline in primary or media-foreground color

Footer

Font: {typography.body-md} (14px, 400, line-height 1.71)
Background: transparent
Text Color: {colors.body} (#A9A1BA)
Padding: 0px 40px 32px 40px (full-width section)
Border: none
Link color: {colors.ink} on hover/focus

Badges & Category Tags

Font: {typography.caption-xs-strong} (12px, 600, line-height 1)
Background: {colors.surface} (#181325)
Text Color: {colors.ink} (#F7F5FA)
Padding: varies by size
Border: 2px solid {colors.hairline} (#332B46)
Border Radius: {rounded.full} (9999px)
Box Shadow: micro or none (flat)
Hover: Background shifts to {colors.primary}; text to {colors.neutral-2}; shadow amplifies
Typically displays count or category label

5. Layout Principles

Spacing System

The system employs a base unit of 4px (represented as {spacing.xxs}), scaling linearly across standard intervals:

{spacing.xxs} = 4px (micro-spacing: button internal gaps, tight groupings)
{spacing.xs} = 8px (small padding: icon spacing, compact sections)
{spacing.sm} = 12px (form field padding, small card interior)
{spacing.md} = 16px (standard padding: card internals, section edges)
{spacing.lg} = 24px (medium section separation, moderate breathing room)
{spacing.xl} = 32px (large section gaps, hero spacing)
{spacing.xxl} = 40px (extra-large page-level spacing)

Usage Context:

Button internal padding: {spacing.xs} to {spacing.md}
Card edges and sections: {spacing.md} to {spacing.lg}
Page margins and major section breaks: {spacing.lg} to {spacing.xxl}

Grid & Container

Desktop (1280px+): Full-width layouts with max-content width of 1440px; 6-column grid or flexible layout
Tablet (768px): Content column width narrows; section padding reduces to {spacing.lg} (24px)
Mobile (375px): Single-column flows; section padding: {spacing.sm} (12px); content width fills viewport minus gutters

Whitespace Philosophy

KingBokep employs aggressive negative space punctuated by color-blocking. The dark canvas ({colors.canvas}) is allowed to breathe around content, creating visual rest. Cards and sections are separated by 24–40px gaps, and individual elements within sections use 8–16px gutters. The approach prioritizes readability and visual scannability in a low-light, high-contrast environment; whitespace is used to prevent cognitive overload rather than to soften the UI.

Border Radius Scale

{rounded.none} = 0px (card images, full-bleed backgrounds, navigation bar)
{rounded.xs} = 12px (form inputs, small buttons, modals, secondary interactive elements)
{rounded.sm} = 16px (primary card surfaces, video containers, content cards)
{rounded.full} = 9999px (badge pills, primary pill buttons, category tags, circular UI)

Component Contexts:

Images: {rounded.none} (sharp edges)
Badges / Category Tags: {rounded.full} (pill-shaped)
Cards (video, content): {rounded.sm} (slightly rounded)
Buttons (primary interactive): {rounded.full} (pill) or {rounded.xs} (standard)
Inputs: {rounded.xs} (standard rounded corners)

Border Widths

Thin: 1px (subtle frame lines, input borders, hairline dividers)
Medium: 2px (primary button borders, card borders, interactive highlights)

Application:

Hairline borders (dividers, subtle frames): 1px in {colors.hairline}
Interactive borders (buttons, cards, inputs): 2px in {colors.hairline} (default) or {colors.primary} (active/hover)

6. Depth & Elevation

Elevation Levels

Level	Treatment	Use
Flat	No shadow; `box-shadow: none`	Default cards, surfaces, backgrounds
Micro (Small)	`rgb(0, 0, 0) 2px 2px 0px 0px`	Small buttons, badges, light emphasis
Micro (Large)	`rgb(0, 0, 0) 4px 4px 0px 0px`	Large buttons, featured elements, hero accents
Modal	`rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`	Modals, overlays, floating dialogs

Shadow Philosophy

The system uses a color-blocking, micro-offset elevation strategy rather than diffuse blur-based shadows. Depth is conveyed through:

Surface color change: Darker backgrounds for elevated surfaces; lighter text or borders for emphasis.
Hard micro-offsets: Exact 2–4px black drop shadows positioned directly beneath elements, creating a tactile, slightly playful depth reminiscent of layered paper or a slightly skewed perspective.
Flat-first: Most surfaces (cards, containers) are flat with no shadow; shadow is applied only on interaction (hover, active, focus) or for exceptional elevation (modals).

This approach keeps the design graphically sharp and maintains the neon-on-dark aesthetic without introducing diffuse glow or blur.

Opacity Levels

0.85 (85%): Slightly desaturated text or background; mild visual retreat
0.70 (70%): Navigation bar background; semi-transparent overlay
0.50 (50%): Disabled or inactive text; reduced emphasis
0.45 (45%): Fine reduction in presence
0.40 (40%): Disabled button state; minimal visual weight
0.30 (30%): Very faint overlay or emphasis
0.25 (25%): Barely-there transparency; primarily for borders or extreme subtlety

Application: Opacity is used sparingly to manage focus and reduce visual clutter without abandoning the high-contrast aesthetic.

Z-index / Layering

base = z-index 1 (default stacking context)
dropdown = z-index 10, 20, 30, 40, 50 (nested dropdown levels, stacked menus)
sticky = z-index 100 (sticky headers, persistent navigation)
sticky = z-index 101 (highest sticky layer; reserved for critical persistent UI)

Strategy: Layering is reserved for modal overlays and persistent navigation. Most content relies on DOM order and CSS stacking context; explicit z-index is applied only to dropdowns, floating panels, and the navigation bar.

7. Do's and Don'ts

Do

Use the purple primary (#6200FF) as your only brand accent. It is reserved for primary CTAs, active states, and brand moments.
Employ the micro-offset shadow strategy (2–4px hard black drop shadows) for elevation. Never use blur-based shadows; they conflict with the neon-on-dark aesthetic.
Maintain high color contrast. Pair {colors.ink} with {colors.canvas} or {colors.surface}, and {colors.body} with {colors.canvas} for readable secondary text.
Use pill-shaped buttons ({rounded.full}) for primary, high-priority interactive elements. Reserve {rounded.xs} for secondary actions and inputs.
Rely on Poppins weight (400, 500, 600, 800) for hierarchy, not color shifts. Text hierarchy should be obvious from size and weight alone.
Apply generous whitespace (24–40px gaps) between major sections. The dark canvas is allowed to breathe.
Test hover and focus states on all interactive elements. The extraction data includes comprehensive interaction state rules; implement them fully for accessibility and delight.
Use the gold accent (#FFD633) sparingly for decorative counters or highlight overlays, not as a functional color.
Use the hairline color (#332B46) for all subtle borders and dividers. Ensure 2px card/button borders shift to primary on hover.
Apply the hero gradient (linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4))) over full-width banner images to ensure text legibility and atmospheric depth.

Don't

Do not invent custom accent colors. The system has two decorative accents (gold, dark plum); any other color belongs in "Known Gaps."
Do not use diffuse or blur-based shadows. The system is built on hard micro-offsets (2–4px) in solid black; soft drop-shadows violate the visual language.
Do not pair body text ({colors.body} — #A9A1BA) with {colors.surface} backgrounds. Always use {colors.canvas} for body text or increase contrast via weight/size.
Do not override Poppins with secondary typefaces unless explicitly extracted. The system is monolithic; custom fonts will fracture hierarchy and brand cohesion.
Do not round corners sharply on images or full-bleed content. Images use {rounded.none}; cards and buttons use their designated radius values.
Do not apply drop-shadow to flat cards by default. Shadows are reserved for hover states, modals, and featured elements; flat cards have box-shadow: none.
Do not exceed 6 columns in responsive grids. The extraction shows 6 columns at all breakpoints ≥ 768px; smaller viewports use single-column or 3-column layouts as measured.
Do not strip or re-color the gold badge accent. It serves a specific role in video duration and category counters; altering its presence or hue breaks visual scanning.
Do not disable focus states or outline styles for keyboard navigation. All interactive elements must have a clear, 2px focus indicator (primary or media-foreground).
Do not reduce letter-spacing on display sizes. Negative tracking (−0.64px on 32px headings, −0.5px on 20px body-xl) is a defining trait of the typographic voice; removing it flattens the hierarchy.

8. Responsive Behavior

Breakpoints

Viewport	Width	Grid Columns	Nav Links Visible	Menu Toggle	Heading Size	Body Size	Section Padding
Mobile	375px	3	2	yes	20px	16px	12px (`{spacing.sm}`)
Tablet	768px	6	8	no	24px	16px	24px (`{spacing.lg}`)
Desktop	1024px+	6	20	no	32px	16px	40px (`{spacing.xxl}`)

Breakpoint Strategy:

Mobile (375px): Hamburger menu toggle appears; nav collapses to 2 visible links; single-column or narrow 3-column layout; reduced heading size (20px vs. 32px at desktop).
Tablet (768px): Navigation expands to 8 visible links; menu toggle disappears; 6-column grid activated; padding increases to {spacing.lg}.
Desktop (1024px+): Full 20-link navigation visible; max-width container (1280–1440px); section padding: {spacing.xxl} (40px); heading at full 32px.

Touch Targets

Minimum interactive element size: 44px × 44px (buttons, icon buttons, tappable card targets)
Recommended spacing between touch targets: 8–16px (minimum {spacing.xs})
Link/button padding: At least {spacing.sm} (12px) internal padding to ensure comfortable tap zones on mobile

Collapsing Strategy

Header Navigation: Collapses to hamburger menu at 768px (tablet breakpoint). At 375px (mobile), only 2 primary nav links remain visible; secondary links move to menu.
Content Grid: At 375px, video/content cards stack to single column. At 768px, grid expands to 2–3 columns. At 1024px+, 6-column grid or flex layout applies, depending on content type.
Sidebar / Secondary UI: On mobile, sidebars collapse into accordion or off-canvas panels. Tablet and desktop reveal full sidebar.
Section Padding: Scales from {spacing.sm} (12px) at mobile → {spacing.lg} (24px) at tablet → {spacing.xxl} (40px) at desktop.
Typography: Display heading ({typography.heading-md} — 32px) reduces to 20px on mobile; body text remains 16px across all breakpoints.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Purple Brand ({colors.primary} — #6200FF) – button backgrounds, active nav, hero accents
Background (Canvas): Deep Black ({colors.canvas} — #0D0915) – page/viewport default
Surface (Cards): Dark Plum ({colors.surface} — #181325) – card/panel backgrounds
Heading & Primary Text: Off-White Ink ({colors.ink} — #F7F5FA) – h1, h2, labels
Body & Secondary Text: Desaturated Mauve ({colors.body} — #A9A1BA) – body copy, captions
Borders & Dividers: Hairline ({colors.hairline} — #332B46) – subtle 1–2px frames
Decorative Gold: Badge Highlight ({colors.accent-1} — #FFD633) – video duration, category counters (no functional role)
Neutral Black: Pure Black ({colors.neutral-1} — #000000) – button borders, high-contrast elements
Neutral White: Pure White ({colors.neutral-2} — #FFFFFF) – rare; reserved for extreme contrast

Iteration Guide

Every interactive element (button, link, badge) must have a 2px primary or media-foreground focus-visible outline. Keyboard accessibility is non-negotiable; test all tab flows.
Apply 2–4px hard black drop shadows only on interaction (hover/active) or for modals. Default cards and flat surfaces have box-shadow: none.
Use Poppins weights 400, 500, 600, 800 exclusively. Do not interpolate or use 700 outside of captions; weight hierarchy is critical to visual consistency.
On hover, shift card and button borders from hairline to primary (#6200FF). This is the primary interactive feedback signal.
Maintain a minimum content column width of 301px at desktop (1024px+). Adjust grid or flex layout to avoid excessively narrow text columns.
Apply the hero gradient overlay (dark-top, light-middle, dark-bottom) to all full-width banner images to ensure 60% minimum text contrast over imagery.
Disable or hide overflow on 375px mobile viewports; use single-column or constrained multi-column layouts to prevent horizontal scroll.
On mobile navigation collapse, reserve the two highest-priority nav links (typically Home and primary category) for the header; move remaining links to hamburger menu.
Ensure all form inputs use {rounded.xs} (12px), 1px hairline borders, and scale to 44px minimum height for touch comfort.
Test all opacity values (0.25–0.85) in actual dark backgrounds to confirm readability and visual hierarchy before shipping; some opacity levels may require adjustment in low-light viewing contexts.

10. Known Gaps

No semantic status colors extracted. The site does not expose error, success, warning, or info states in its measured markup. Any status color ramp would be an invention; use a custom palette or return for re-extraction if status messaging is added.
Four colors have no measured functional role: {colors.accent-2} (#241D34) and {colors.neutral-1} (#000000) and {colors.neutral-2} (#FFFFFF) are described as decorative or neutral utilities only. If your use case requires assigning them functional roles (e.g., disabled state, error background), conduct a fresh audit or document those roles separately.
Interaction states (hover, active, focus, disabled) were extracted from stylesheets and are comprehensive, but some edge cases (e.g., multi-touch, long-press, voice input) were not observed. Implement standard keyboard focus and pointer hover; for advanced states, refer back to the raw CSS extraction data or conduct manual QA.
Surfaces behind authentication were not visited. The extraction covers 6 public pages; logged-in or gated content may use different component styles or tokens.
No dark/light theme toggle was observed. The system ships as a single dark theme; light mode was not extracted or measured. If light mode is required, it belongs to a future audit.
Gradients are limited to one hero overlay gradient. No background-gradient or multi-stop decorative gradients were extracted; the system relies on solid color surfaces and borders.
No animation or transition timing data was extracted. Keyframe animations, transition-duration, and easing functions are not documented; implement standard 200–300ms ease-out transitions for interactive elements or define custom motion separately.
Z-index values are sparse. Only base (1), dropdown (10–50), and sticky (100–101) layers were observed. If complex modal stacking or advanced layering is required, plan z-index ranges in multiples of 100 to future-proof the scale.

Document Version: 1.0
Extracted from: https://kingbokep.tv (6 pages analysed)
Extraction Date: 2025
Confidence Level: High (colors, typography, spacing, components all measured; interaction states comprehensive; semantic roles inferred from measured usage)

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from kingbokep.tv

Primary

#6200FF

Primary CTA, brand accent, active state

#FFD633

Accent / decorative

#241D34

Accent / decorative

Neutral

#0D0915

Default page background

#181325

Card / panel background

#F7F5FA

Headings / primary text

#A9A1BA

Body copy

#332B46

1px borders and dividers

#000000

Neutral

#FFFFFF

Neutral

Typography · Poppins

h132px · 800 · 36.8px

link16px · 400 · 24px

input16px · 500 · 24px

nav-link14px · 600 · 20px

caption12px · 600 · 12px

caption12px · 400 · 16px

body20px · 800 · 28px

body14px · 400 · 24px

caption12px · 700 · 16px

h224px · 800 · 32px

button13px · 400 · 19.5px

body14px · 500 · 20px

button9px · 500 · 13.5px

Spacing

8px

4px

32px

24px

40px

16px

12px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 2px 2px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 4px 4px 0px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

Components · 5

Remixes of kingbokep.tv

Latest remixes

No public remixes yet. Be the first to make one.

Remix it