Remixes of stripchat.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Stripchat
description: |
Stripchat's design system embraces a bold, contemporary aesthetic built for a
mature entertainment platform. The visual language combines deep, moody
backgrounds with vibrant accent colors to create an energetic yet
sophisticated environment. A dark canvas (#000000) provides a dramatic
foundation, allowing bright accent colors—particularly the signature
lime-green (#79943D) and hot pink (#FA5365)—to command attention. The system
uses strategic color blocking and layered gradients to establish depth without
relying on shadows, creating a sleek, modern impression that feels both
welcoming and exclusive.
source:
url: "https://stripchat.com"
pagesAnalyzed: 1
extractedAt: 2026-10-17
tokensMeasured: true
colors:
primary: "#79943D"
accent: "#9FE20D"
link: "#FA5365"
canvas: "#000000"
on-primary: "#F8F8F8"
ink: "#FFFFFF"
body: "#F8F8F8"
hairline: "#F14B57"
accent-1: "#FC6172"
accent-2: "#FFA900"
accent-3: "#3C2800"
neutral-1: "#A4A4A5"
neutral-2: "#414141"
neutral-3: "#F1F1F1"
neutral-4: "#141415"
typography:
heading:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 15px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.29
letterSpacing: 0px
body-sm-loose:
fontFamily: Inter
fontSize: 14px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-xs:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 2.23
letterSpacing: 0px
body-xs-tight:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 1.23
letterSpacing: 0px
body-xs-strong:
fontFamily: Inter
fontSize: 13px
fontWeight: 500
lineHeight: 1.23
letterSpacing: 0px
button-md:
fontFamily: Inter
fontSize: 15px
fontWeight: 500
lineHeight: 2.6
letterSpacing: 0px
button-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.17
letterSpacing: 0px
button-sm-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 700
lineHeight: 2.42
letterSpacing: 0px
textTransform: uppercase
button-xs:
fontFamily: Inter
fontSize: 0px
fontWeight: 400
letterSpacing: 0px
label:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm-tight:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
caption-sm-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
letterSpacing: 0.3px
caption-sm-uppercase:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.33
letterSpacing: 0px
textTransform: uppercase
caption-sm-2:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
caption-xs:
fontFamily: Inter
fontSize: 11px
fontWeight: 400
lineHeight: 1.45
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 72px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: light # the other theme is the site's measured palette
light:
bg: "#FCFCFA"
surface: "#F2F2F0"
surfaceRaised: "#EAEAE9"
text: "#161813"
textMuted: "#6D6E6A"
border: "#D9D9D7"
accent: "#617731"
accentFg: "#FFFFFF"
focusRing: "#79943D"
elevation: shadow
dark:
bg: "#000000"
surface: "#000000"
surfaceRaised: "#141414"
text: "#FFFFFF"
textMuted: "#F8F8F8"
border: "#F14B57"
accent: "#79943D"
accentFg: "#0B0B0C"
focusRing: "#79943D"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgb(162, 37, 45) 0%, rgb(0, 0, 0) 50%)"
- context: hero
kind: linear
value: "linear-gradient(rgba(73, 171, 255, 0.3) 0%, rgb(0, 0, 0) 50%)"
- context: hero
kind: linear
value: "linear-gradient(rgba(181, 86, 255, 0.3) 0%, rgb(0, 0, 0) 50%)"
- context: section
kind: linear
value: "linear-gradient(90deg, rgb(45, 0, 3) 0%, rgb(167, 22, 30) 100%)"
components:
button-primary:
typography: "{typography.button-md}"
textColor: "{colors.body}"
height: 41px
padding: "0px 20px 0px 20px"
rounded: 32px
backgroundColor: "{colors.primary}"
button-secondary:
typography: "{typography.body-xs-strong}"
textColor: "{colors.link}"
height: 32px
padding: "8px 10px 8px 10px"
rounded: 5px
backgroundColor: "rgba(255, 255, 255, 0.12)"
button-filled:
typography: "{typography.body-xs}"
textColor: "{colors.neutral-2}"
height: 31px
padding: "0px 20px 0px 20px"
rounded: 32px
backgroundColor: "{colors.neutral-3}"
button-filled-sm:
typography: "{typography.button-sm-strong}"
textColor: "{colors.accent-3}"
height: 29px
padding: "0px 14px 0px 14px"
rounded: 32px
backgroundColor: "{colors.accent-2}"
button-secondary-2:
textColor: "{colors.canvas}"
height: 32px
padding: "0px 20px 0px 20px"
fontSize: 13px
fontFamily: Inter
fontWeight: 400
lineHeight: 2.31
rounded: 32px
backgroundColor: "{colors.ink}"
button-outline:
typography: "{typography.caption-sm-uppercase}"
textColor: "rgba(255, 255, 255, 0.5)"
border: "2px solid rgba(255, 255, 255, 0.3)"
height: 32px
padding: "6px 14px 6px 14px"
rounded: 16px
badge-icon:
textColor: "{colors.body}"
height: 20px
fontSize: 14px
fontFamily: Inter
fontWeight: 400
rounded: "{rounded.xs}"
backgroundColor: "rgba(0, 0, 0, 0.7)"
navigation:
textColor: "{colors.body}"
height: 54px
fontSize: 14px
fontFamily: Inter
fontWeight: 400
footer:
textColor: "{colors.ink}"
padding: "14px 0px 14px 0px"
fontSize: 12px
fontFamily: Inter
fontWeight: 400
backgroundColor: "rgb(33, 34, 35)"
link:
textColor: "rgb(164, 164, 164)"
padding: "0px 0px 140.109px 0px"
fontSize: 14px
fontFamily: Inter
fontWeight: 400
backgroundColor: "rgb(32, 32, 32)"
link-2:
textColor: "rgba(248, 248, 248, 0.8)"
fontSize: 11px
fontFamily: Inter
fontWeight: 400
breakpoints:
- width: 375
containerWidth: 359
gridColumns: 1
navLinksVisible: 11
menuToggleVisible: true
headingPx: 17
bodyPx: 14
sectionPaddingX: 0
- width: 768
containerWidth: 744
gridColumns: 2
navLinksVisible: 12
menuToggleVisible: true
headingPx: 20
bodyPx: 14
sectionPaddingX: 0
- width: 1024
containerWidth: 600
gridColumns: 2
navLinksVisible: 90
menuToggleVisible: true
headingPx: 20
bodyPx: 14
sectionPaddingX: 0
- width: 1280
containerWidth: 600
gridColumns: 2
navLinksVisible: 90
menuToggleVisible: true
headingPx: 20
bodyPx: 14
sectionPaddingX: 0
- width: 1440
containerWidth: 600
gridColumns: 2
navLinksVisible: 90
menuToggleVisible: true
headingPx: 20
bodyPx: 14
sectionPaddingX: 0
coverage:
statesFound: 0
gradientsFound: 4
rolesUnassigned: 7
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Stripchat's design system embraces a bold, contemporary aesthetic built for a mature entertainment platform. The visual language combines deep, moody backgrounds with vibrant accent colors to create an energetic yet sophisticated environment. A dark canvas ({colors.canvas} — #000000) provides a dramatic foundation, allowing bright accent colors—particularly the signature lime-green ({colors.primary} — #79943D) and hot pink ({colors.link} — #FA5365)—to command attention. The system uses strategic color blocking and layered gradients to establish depth without relying on shadows, creating a sleek, modern impression that feels both welcoming and exclusive.
Key Characteristics
{colors.primary} — #79943D): Primary call-to-action buttons, active states, and core brand identity. Warm, muted olive-green that conveys trust and progression.{colors.accent} — #9FE20D): Hero bands and secondary emphasis areas. A bright, high-saturation lime-green used for maximum contrast and energy.{colors.link} — #FA5365): Inline links and interactive text elements. A vivid hot pink that draws the eye and signals interactivity.{colors.accent-1} — #FC6172): Decorative element without assigned role.{colors.accent-2} — #FFA900): Decorative element without assigned role. Warm orange tone.{colors.accent-3} — #3C2800): Decorative element without assigned role. Deep brown tone.{colors.hairline} — #F14B57): 1px borders and dividers. A softer pink than the primary link color, used for subtle structural separation.{colors.canvas} — #000000): Default page background. Pure black for maximum contrast and a premium feel.{colors.ink} — #FFFFFF): Primary headings and display text. Pure white for maximum legibility against dark backgrounds.{colors.on-primary} — #F8F8F8): Body copy and label text on brand surfaces. Off-white for reduced eye strain while maintaining contrast.{colors.neutral-1} — #A4A4A5): Secondary text and lower-priority content. Mid-gray for visual hierarchy.{colors.neutral-2} — #414141): Subtle backgrounds and secondary surfaces. Dark gray maintaining dark-mode cohesion.{colors.neutral-3} — #F1F1F1): Light neutral, used sparingly for contrast on dark surfaces.{colors.neutral-4} — #141415): Very dark neutral for near-black surfaces or deep overlays.Primary: Inter (sans-serif)
Fallback Stack: Inter, system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Heading | Inter | 20px | 500 | 1.5 | 0px | Page and section headings |
| Body Medium | Inter | 15px | 400 | 1.33 | 0px | Comfortable reading size for primary content |
| Body Small | Inter | 14px | 400 | 1.29 | 0px | Secondary content and longer passages |
| Body Small Loose | Inter | 14px | 400 | 1.43 | 0px | Body text with generous line spacing |
| Body Extra Small | Inter | 13px | 400 | 1.23 | 0px | Compact body text and descriptions |
| Body Extra Small Strong | Inter | 13px | 500 | 1.23 | 0px | Emphasized body text |
| Button Medium | Inter | 15px | 500 | 2.6 | 0px | Primary call-to-action buttons |
| Button Small | Inter | 12px | 500 | 1.17 | 0px | Secondary and tertiary buttons |
| Button Small Strong | Inter | 12px | 700 | 2.42 | 0px | Bold button text, uppercase |
| Button Extra Small | Inter | 0px | 400 | — | 0px | Minimal-text buttons |
| Caption Small | Inter | 12px | 400 | 1.5 | 0px | Supporting text, disclaimers |
| Caption Small Tight | Inter | 12px | 400 | 1.33 | 0px | Compact captions |
| Caption Small Strong | Inter | 12px | 500 | — | 0.3px | Emphasized captions with tight tracking |
| Caption Small Uppercase | Inter | 12px | 500 | 1.33 | 0px | Uppercase labels and tags, medium weight |
| Caption Small 2 (Uppercase) | Inter | 12px | 500 | 1.2 | 0px | Uppercase labels, compact line height |
| Caption Extra Small | Inter | 11px | 400 | 1.45 | 0px | Minimal fine print |
| Label | Inter | 12px | 400 | 1.25 | 0px | Form labels and metadata |
| Link | Inter | 13px | 400 | 2.23 | 0px | Inline hyperlinks with tall line spacing |
Primary Button
{colors.primary} (#79943D){colors.on-primary} (#F8F8F8){typography.button-md} (15px, weight 500, line-height 2.6)0px 20px41px{rounded.full} (9999px — pill shape)1px solid transparentnoneSecondary Button
rgba(255, 255, 255, 0.12){colors.link} (#FA5365){typography.body-xs} (13px, weight 500, line-height 2.23)8px 10px32px{rounded.xs} (5px)0pxnoneFilled Button (Light)
rgb(241, 241, 241)rgb(65, 65, 65){typography.body-xs} (13px, weight 400, line-height 1.23)0px 20px31px{rounded.full} (9999px — pill shape)1px solid transparentnoneFilled Small Button (Orange)
{colors.accent-2} (#FFA900){colors.accent-3} (#3C2800){typography.button-sm-strong} (12px, weight 700, line-height 2.42, uppercase)0px 14px29px{rounded.full} (9999px — pill shape)0pxnoneSecondary Button 2 (White)
rgb(255, 255, 255)rgb(0, 0, 0){typography.body-xs} (13px, weight 400, line-height 1.5)0px 20px32px{rounded.full} (9999px — pill shape)1px solid transparentnoneOutline Button
transparentrgba(255, 255, 255, 0.5){typography.button-sm} (12px, weight 500, line-height 1.17)6px 14px32px16px2px solid rgba(255, 255, 255, 0.3)noneIcon Badge
rgba(0, 0, 0, 0.7){colors.on-primary} (#F8F8F8){typography.body-sm} (14px, weight 400, line-height normal)0px20px25px{rounded.xs} (4px)0pxnoneNavigation Default
transparent{colors.on-primary} (#F8F8F8){typography.body-sm} (14px, weight 400, line-height normal)54px{rounded.none} (0px)0pxnoneFooter Default
rgb(33, 34, 35){colors.ink} (#FFFFFF){typography.caption-sm} (12px, weight 400, line-height normal)14px 0px706px{rounded.none} (0px)0pxnoneLink Default
rgb(32, 32, 32){colors.neutral-1} (#A4A4A5){typography.body-sm} (14px, weight 400, line-height normal){rounded.none} (0px)0px 0px 140.109px 0pxLink Default 2 (Footer / Secondary Links)
transparentrgba(248, 248, 248, 0.8){typography.caption-xs} (11px, weight 400, line-height normal){rounded.none} (0px)0pxStripchat employs an 8-unit base with a carefully scaled increment system:
{spacing.xxs} (4px): Minimal micro-spacing within components (e.g., icon–text gaps){spacing.xs} (8px): Tight spacing within groups and between small elements{spacing.sm} (12px): Compact spacing between related sections{spacing.md} (16px): Standard breathing room between components{spacing.lg} (20px): Generous spacing for emphasis and visual hierarchy{spacing.xl} (24px): Large spacing between major sections{spacing.xxl} (28px): Extra-large spacing for section separation{spacing.xxxl} (32px): Substantial spacing for page-level divisions{spacing.section} (40px): Section padding and major layout breaks{spacing.band} (72px): Full-bleed band spacing (hero sections, distinct zones){spacing.section} (40px) to {spacing.band} (72px) between major sectionsStripchat balances visual density with breathing room. The dark canvas creates natural contrast, allowing tightly spaced components to feel spacious. Vertical rhythm uses multiples of {spacing.lg} and {spacing.xl} to establish clear sectional breaks. Horizontal padding is minimal, trusting a fixed content width to create margins. This approach maximizes the use of the viewport while maintaining clarity.
{rounded.none} (0px): Buttons (primary, secondary-2, filled variants), links, modals, overlays, inputs, images. Sharp, modern edges are the default.{rounded.xs} (4px): Secondary buttons, badges, select icon elements. Slight softening for secondary components.{rounded.full} (9999px): Pills. Primary buttons, filled buttons, and outline buttons use extreme rounding for a friendly, distinctive silhouette.2px solid rgba(255, 255, 255, 0.3)), prominent stroke statesStripchat does not employ traditional drop shadows for elevation. Instead, depth is achieved through color blocking—surfaces are defined by background color changes, opacity variations, and decorative gradients. This creates a flat, contemporary aesthetic that reads as premium rather than layered.
Gradients are used decoratively to add visual richness and guide the eye:
linear-gradient(rgb(162, 37, 45) 0%, rgb(0, 0, 0) 50%) — Creates a moody, branded entry pointlinear-gradient(rgba(73, 171, 255, 0.3) 0%, rgb(0, 0, 0) 50%) — Subtle cool accent for visual varietylinear-gradient(rgba(181, 86, 255, 0.3) 0%, rgb(0, 0, 0) 50%) — Alternative accent with mystiquelinear-gradient(90deg, rgb(45, 0, 3) 0%, rgb(167, 22, 30) 100%) — Creates a subtle directional emphasis across sectionsThe system employs opacity to create hierarchy and interaction states:
{colors.primary} (#79943D) for primary calls-to-action and moments requiring brand emphasis.{colors.link} (#FA5365) to inline links, interactive labels, and elements signaling user action.{rounded.full} — 9999px) for primary and filled button variants to maintain brand consistency.{colors.canvas} — #000000) for all page backgrounds to ensure brand consistency.{colors.on-primary} (#F8F8F8) for body text and secondary labels on brand surfaces for optimal legibility.{rounded.full} — 9999px) for brand recognition.{colors.ink} (#FFFFFF) on {colors.canvas} (#000000) for body text; it creates eye strain. Use {colors.on-primary} (#F8F8F8) or {colors.neutral-1} (#A4A4A5) instead.{rounded.none} (0px).| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 375px | 1 column grid, 17px headings, 0px section padding-x, menu toggle visible |
| Tablet | 768px | 2 column grid, 20px headings, 0px section padding-x, navigation visible (partial) |
| Desktop Small | 1024px | 2 column grid, 20px headings, fixed 600px content width, full navigation visible |
| Desktop Medium | 1280px | 2 column grid, 20px headings, fixed 600px content width, full navigation visible |
| Desktop Large | 1440px | 2 column grid, 20px headings, fixed 600px content width, full navigation visible |
{spacing.sm} (12px) to {spacing.md} (16px) padding around inline links for safe touch zones{colors.primary} — #79943D){colors.link} — #FA5365){colors.canvas} — #000000){colors.ink} — #FFFFFF){colors.on-primary} — #F8F8F8){colors.neutral-1} — #A4A4A5){colors.hairline} — #F14B57)rgb(33, 34, 35)){colors.accent} — #9FE20D){colors.primary} with {rounded.full} pill geometry; text color is always {colors.on-primary}.rgba(255, 255, 255, 0.12) background with {colors.link} text and {rounded.xs} (5px) corner radius.{typography.body-md} (15px, weight 400) unless a smaller caption or label size is specified.{typography.heading} (20px, weight 500, line-height 1.5) with {colors.ink} text.{colors.on-primary} text and no border radius.{spacing.section} (40px) or {spacing.band} (72px) for clear visual hierarchy.{colors.canvas} (#000000); never use alternatives.{colors.accent-1}, {colors.accent-2}, {colors.accent-3}, {colors.neutral-2}, {colors.neutral-3}, {colors.neutral-4}) were extracted but have no measured role in the UI. They are treated as decorative or edge-case surfaces only.