Remixes of px7.world
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: Px7
description: |
Lô Đề Online embodies a vibrant, high-energy gaming aesthetic rooted in
traditional Vietnamese lottery culture elevated through modern web design. The
visual language is bold and celebratory, leveraging warm golden accents, deep
reds, and striking contrasts to evoke trust, excitement, and premium quality.
The brand projects confidence through generous use of white space, pill-shaped
interactive elements, and carefully layered depth that guides attention to
calls-to-action. The typography is assertive and warmly geometric, reinforcing
the playful yet professional tone essential to gaming and lottery platforms.
Every surface feels meticulously crafted, with attention to micro-interactions
and visual hierarchy that makes navigation intuitive and engagement
effortless.
source:
url: "https://px7.world/"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#DA0037"
link: "#D2730D"
canvas: "#F8F6F6"
surface-alt: "#FFFFFF"
on-primary: "#FFFFFF"
ink: "#141414"
hairline: "#666666"
accent-1: "#F3F306"
accent-2: "#B20000"
neutral-1: "#444444"
neutral-2: "#000000"
neutral-3: "#ECECEC"
typography:
heading-lg:
fontFamily: "Roboto Slab"
fontSize: 27.2px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
heading-md:
fontFamily: "Roboto Slab"
fontSize: 25.6px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
heading-sm:
fontFamily: "Roboto Slab"
fontSize: 20px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
heading-xs:
fontFamily: "Roboto Slab"
fontSize: 16.56px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
body-xl:
fontFamily: "Roboto Slab"
fontSize: 25.6px
fontWeight: 900
lineHeight: 1.3
letterSpacing: 0px
body-lg:
fontFamily: "Roboto Slab"
fontSize: 20px
fontWeight: 900
lineHeight: 1.6
letterSpacing: 0px
body-md:
fontFamily: "Roboto Slab"
fontSize: 16px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md-strong:
fontFamily: "Roboto Slab"
fontSize: 16px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
body-sm:
fontFamily: "Roboto Slab"
fontSize: 14.4px
fontWeight: 400
lineHeight: 1.3
letterSpacing: 0px
body-sm-strong:
fontFamily: "Roboto Slab"
fontSize: 14.4px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
caption-sm:
fontFamily: "Roboto Slab"
fontSize: 14.4px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-xs:
fontFamily: "Roboto Slab"
fontSize: 11.2px
fontWeight: 700
lineHeight: 0.85
letterSpacing: 0px
rounded:
none: 0px
xs: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 32px
xxxl: 140px
section: 176px
band: 188px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.15) 1px 1px 15px 0px"
md: "rgba(0, 0, 0, 0.3) 0px -150px 15px 0px"
lg: "rgb(186, 1, 1) 0px 0px 14px -7px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F8F6F6"
surface: "#FFFFFF"
surfaceRaised: "#F6F6F6"
text: "#141414"
textMuted: "#646363"
border: "#666666"
accent: "#DA0037"
accentFg: "#FFFFFF"
focusRing: "#DA0037"
elevation: shadow
dark:
bg: "#15090E"
surface: "#23181C"
surfaceRaised: "#2F2429"
text: "#FEF5F7"
textMuted: "#A59B9E"
border: "#3A3035"
accent: "#FF0443"
accentFg: "#0B0B0C"
focusRing: "#DA0037"
elevation: "border+surface"
gradients:
- context: hero
kind: linear
value: "linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(135deg, rgb(255, 77, 79), rgb(193, 18, 31), rgb(120, 0, 0))"
components:
button-primary:
textColor: "{colors.on-primary}"
border: "1px solid rgba(0, 0, 0, 0.05)"
height: 33.6562px
padding: "0px 15.8304px 0px 15.8304px"
fontSize: 13.192px
fontFamily: "Roboto Slab"
fontWeight: 700
lineHeight: 2.4
rounded: 99px
backgroundColor: "{colors.primary}"
badge-secondary:
textColor: "{colors.primary}"
border: "2px solid {colors.primary}"
height: 44.7969px
padding: "2px 2px 2px 2px"
fontSize: 16px
fontFamily: "Roboto Slab"
fontWeight: 700
lineHeight: 0.85
backgroundColor: "{colors.surface-alt}"
badge-text:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 44.7969px
navigation:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
padding: "0px 15px 0px 15px"
footer:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
link:
textColor: "{colors.primary}"
fontSize: 32px
fontFamily: "Roboto Slab"
fontWeight: 700
lineHeight: 1
link-sm:
textColor: "{colors.ink}"
border: "2px solid {colors.ink}"
fontSize: 15.52px
fontFamily: "Roboto Slab"
fontWeight: 700
lineHeight: 2.19
rounded: 999px
states:
other-focus:
target: other
state: focus
textColor: "{colors.neutral-1}"
textDecoration: none
backgroundColor: "rgb(221, 221, 221)"
other-hover:
target: other
state: hover
opacity: 1
nav-hover:
target: nav
state: hover
opacity: 1
badge-hover:
target: badge
state: hover
textColor: "{colors.on-primary}"
button-hover:
target: button
state: hover
textColor: "{colors.on-primary}"
input-hover:
target: input
state: hover
boxShadow: "transparent 0px -1.8em 1em 0px inset"
input-focus:
target: input
state: focus
textColor: "rgb(51, 51, 51)"
opacity: 1
boxShadow: "rgb(204, 204, 204) 0px 0px 5px"
backgroundColor: "{colors.surface-alt}"
link-hover:
target: link
state: hover
textColor: "{colors.neutral-2}"
backgroundColor: "{colors.surface-alt}"
button-disabled:
target: button
state: disabled
opacity: 0
boxShadow: none
button-focus:
target: button
state: focus
outline: none
button-focus-visible:
target: button
state: focus-visible
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
breakpoints:
- width: 375
containerWidth: 345
gridColumns: 2
navLinksVisible: 2
menuToggleVisible: true
headingPx: 22
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 738
gridColumns: 2
navLinksVisible: 2
menuToggleVisible: true
headingPx: 27
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 994
gridColumns: 5
navLinksVisible: 3
menuToggleVisible: false
headingPx: 27
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1090
gridColumns: 5
navLinksVisible: 3
menuToggleVisible: false
headingPx: 27
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1090
gridColumns: 5
navLinksVisible: 3
menuToggleVisible: false
headingPx: 27
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 1
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Lô Đề Online embodies a vibrant, high-energy gaming aesthetic rooted in traditional Vietnamese lottery culture elevated through modern web design. The visual language is bold and celebratory, leveraging warm golden accents, deep reds, and striking contrasts to evoke trust, excitement, and premium quality. The brand projects confidence through generous use of white space, pill-shaped interactive elements, and carefully layered depth that guides attention to calls-to-action. The typography is assertive and warmly geometric, reinforcing the playful yet professional tone essential to gaming and lottery platforms. Every surface feels meticulously crafted, with attention to micro-interactions and visual hierarchy that makes navigation intuitive and engagement effortless.
Key Characteristics
{colors.primary} — #DA0037) as the dominant accent for CTAs and brand identity{colors.link} — #D2730D) for secondary emphasis{colors.primary} — #DA0037): Dominant accent color for primary CTAs, active states, brand mark, and hero highlights. Conveys urgency and trust in gaming contexts.{colors.link} — #D2730D): Warm golden-orange for inline links and secondary calls-to-action. Creates visual hierarchy beneath the primary red.{colors.accent-1} — #F3F306): Bright yellow used for purely decorative purposes and visual punctuation; no semantic role.{colors.accent-2} — #B20000): Dark maroon accent used decoratively to add richness; no functional role.{colors.canvas} — #F8F6F6): Default page background; a soft warm white providing calm contrast to bold accents.{colors.surface-alt} — #FFFFFF): Pure white for alternating section bands and text on brand surfaces.{colors.ink} — #141414): Primary text color for headings and body copy; near-black for maximum contrast and readability.{colors.neutral-1} — #444444): Mid-gray for secondary text and borders.{colors.neutral-2} — #000000): Pure black for deep shadows and maximum contrast overlays.{colors.neutral-3} — #ECECEC): Light gray for disabled states and subtle dividers.{colors.hairline} — #666666): 1px borders, dividers, and fine-line accents throughout the interface.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Roboto Slab | 27.2px | 700 | 1.3 | 0px | Measured on <h1>; page title prominence |
| Display LG | Roboto Slab | 25.6px | 700 | 1.3 | 0px | Measured on <h2>; section headers |
| Display MD | Roboto Slab | 20px | 700 | 1.6 | 0px | Measured on <h3>; subsection headers |
| Display SM | Roboto Slab | 16.56px | 700 | 1.3 | 0px | Measured on <h5>; card titles |
| Body XL Bold | Roboto Slab | 25.6px | 900 | 1.3 | 0px | Heavy-weight emphasis text; decorative headlines |
| Body LG Bold | Roboto Slab | 20px | 900 | 1.6 | 0px | Bold call-out text over images or featured blocks |
| Body MD | Roboto Slab | 16px | 400 | 1.6 | 0px | Default body text; article and card content |
| Body MD Strong | Roboto Slab | 16px | 700 | 1.6 | 0px | Emphasis within body; strong inline text |
| Body SM | Roboto Slab | 14.4px | 400 | 1.3 | 0px | Supplementary text, figure captions, metadata |
| Body SM Strong | Roboto Slab | 14.4px | 700 | 1.3 | 0px | Emphasized small text; badge labels |
| Caption XS | Roboto Slab | 11.2px | 700 | 0.85 | 0px | Smallest text; fine print, timestamps |
| Caption SM | Roboto Slab | 14.4px | 400 | 1.6 | 0px | Small text blocks; auxiliary information |
Primary Button
#DA0037 ({colors.primary})#FFFFFF ({colors.surface-alt})0px 15.83px33.66px107.83px (fitted to content)1px solid rgba(0, 0, 0, 0.05) (hairline, not visible){rounded.full} (9999px)13.19px31.66pxcolor: #FFFFFF, opacity: 0.8, smooth transitionoutline: 2px solid #DA0037 ({colors.primary})Secondary Badge
#FFFFFF ({colors.surface-alt})#DA0037 ({colors.primary})2px solid #DA0037 ({colors.primary})2px44.80px (square, for date/number display){rounded.none} (0px) (sharp corners)16px13.6pxbackground: #DA0037, color: #FFFFFF, border-color: #DA0037Text Badge
rgba(0, 0, 0, 0))#141414 ({colors.ink})0px44.80px{rounded.none} (0px)16px25.6pxContent Card
#FFFFFF ({colors.surface-alt})1px solid {colors.hairline} (#666666){rounded.xs} (12px){spacing.xl} (24px)rgba(0, 0, 0, 0.15) 1px 1px 15px 0px (sm elevation)#141414 ({colors.ink})transform: translateY(-5px), shadow intensifies to rgba(0, 0, 0, 0.3) 0px -150px 15px 0px (md elevation)Image Container
{rounded.xs} (12px)rgba(0, 0, 0, 0.15) 1px 1px 15px 0px (sm elevation)Text Input
#FFFFFF ({colors.surface-alt})#333333 (dark gray for text entry)1px solid {colors.hairline} (#666666){spacing.md} (16px)16px1.6outline: 0px, box-shadow: #CCCCCC 0px 0px 5px, background: #FFFFFF, opacity: 1box-shadow: transparent 0px -1.8em 1em 0px insetNavigation Bar
#DA0037 ({colors.primary}) on hover for link items#141414 ({colors.ink}) at rest, #FFFFFF ({colors.surface-alt}) on hover99px0px 15px16pxcolor: #FFFFFF, background-color: #DA0037, border-color: #DA0037opacity: 1 (from 0.85)Navigation Link (Secondary)
rgba(255, 255, 255, 0.85) on primary background16pxopacity: 0.7, color: rgba(255, 255, 255, 0.85) maintainedPrimary Link
#DA0037 ({colors.primary})32px32pxcolor: #FFFFFF, outline-width: 0px, smooth transitionPill Link (Small)
2px solid #141414 ({colors.ink}){rounded.full} (9999px)#141414 ({colors.ink})15.52px38.80px (small icon/button link)color: #DA0037, border-color: #DA0037, background remains transparentBase unit: {spacing.xs} (8px)
The spacing scale progresses by consistent increments:
{spacing.xxs} (4px): Micro-spacing within buttons, badge padding, tight lists{spacing.xs} (8px): Small gaps between inline elements, subtle separations{spacing.sm} (12px): Text-to-icon spacing, compact card internals{spacing.md} (16px): Default content padding, standard line-height multiplier baseline{spacing.lg} (20px): Section breaks, medium card spacing{spacing.xl} (24px): Card and container padding, prominent sections{spacing.xxl} (32px): Large spacing between major sections{spacing.xxxl} (140px): Hero section top/bottom padding{spacing.section} (176px): Full-width section margin; breathing room between major content blocks{spacing.band} (188px): Maximum band padding for alternating background sections1090px (observed at 1280px viewport and above)345px (at 375px viewport, with no horizontal padding)738px (at 768px viewport)0px at mobile and tablet; content relies on max-width containerThe system embraces expansive whitespace as a signal of premium quality and respectable distance from aggressive marketing. Large spacing between sections (using {spacing.section} and {spacing.band}) creates a meditative, unhurried browsing experience. Cards and content blocks are surrounded by air, never crammed. Alternating background colors (canvas vs. white) replace dense visual separators, allowing breathing room to guide the eye naturally through the page.
{rounded.none} (0px): Sharp corners for badges, overlays, and clean geometric blocks{rounded.xs} (12px): Softly rounded edges on images and card containers; signals friendliness without excessive roundness{rounded.full} (9999px): Pill-shaped buttons and link elements; modern, approachable CTAs1px): Delicate dividers, hairline borders on buttons (often transparent), and text input borders2px): Bolder badge borders and secondary link outlines; creates visual emphasis without dominance| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Text, icons, minimal UI containers |
| Small | rgba(0, 0, 0, 0.15) 1px 1px 15px 0px | Dropdown menus, default card shadows, modest lift |
| Medium | rgba(0, 0, 0, 0.3) 0px -150px 15px 0px | Button hover states, elevated card interactions, pronounced depth |
| Large | rgb(186, 1, 1) 0px 0px 14px -7px | Button focus state or decorative glow; brand-colored depth highlight |
Shadow Philosophy: The system employs a progressive elevation model where depth is conveyed through increasing opacity and blur on dark shadows, plus occasional color-tinted glows for interactive emphasis. The large/brand shadow (red-tinted glow) appears on buttons and high-priority elements to reinforce brand presence during interaction. Shadows are subtle at rest, intensifying on hover to guide attention and signal interactivity.
0% (0): Hidden, invisible overlays or disabled states5% (0.05): Barely perceptible borders or overlay tints10% (0.10): Subtle disabled text or faint background tints15% (0.15): Default shadow opacity; visible but not aggressive30% (0.30): Pronounced shadow opacity; high-elevation or interactive states60% (0.60): Strong opacity for text over images or high-contrast overlaysz-index: 1 and z-index: 9): Default document flow; static cards and sectionsz-index: 10 and z-index: 20): Expanded menus, tooltips, and floating overlays above base contentz-index: 21): Nested dropdowns or sub-menus above primary dropdownsz-index: 999): Fixed navigation bars, sticky headers, persistent UI chromez-index: 1001): Full-screen overlays, dialogs, and priority interrupts{colors.primary} (#DA0037) for all primary CTAs — buttons, links, and brand accents must use this red to maintain consistency and drive focus.{rounded.full} (9999px) to all button elements — pill-shaped buttons are a core identity trait and signal modern, friendly interaction.{spacing.section} (176px) or {spacing.band} (188px) to create breathing room and premium feel.{colors.hairline} (#666666) for subtle dividers and 1px borders — never use pure black or heavy strokes for internal separations.{colors.canvas} and {colors.surface-alt}) between sections — this replaces visual dividers and creates rhythmic visual pacing.{colors.primary} for primary CTAs — maintain red as the sole brand accent to avoid diluting brand recognition.{rounded.none}) to buttons — buttons must be pill-shaped; reserve sharp corners for badges and overlay elements only.{spacing.xl} (24px) between major sections — whitespace is a core design principle; never sacrifice breathing room for content density.| Breakpoint | Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Heading Size | Body Size | Section Padding-X |
|---|---|---|---|---|---|---|---|---|
| Mobile | 375px | 345px | 2 | 2 | Yes | 22px | 16px | 0px |
| Tablet | 768px | 738px | 2 | 2 | Yes | 27px | 16px | 0px |
| Desktop | 1024px | 994px | 5 | 3 | No | 27px | 16px | 0px |
| Desktop Large | 1280px | 1090px | 5 | 3 | No | 27px | 16px | 0px |
| Desktop XL | 1440px | 1090px | 5 | 3 | No | 27px | 16px | 0px |
Key transitions:
44px × 44px (badge and small button dimensions measured)33.66px minimum for primary buttons; increase to 44px+ for touch-optimized mobile CTAs{spacing.md} (16px) or {spacing.lg} (20px) padding around text links for comfortable tapping27.2px at desktop to 22px at mobile for legibility on small screens; maintains 700-weight for hierarchy.0px on mobile and tablet; vertical spacing remains generous using {spacing.xl} and {spacing.xxl} to maintain whitespace philosophy.{rounded.xs} — 12px).{colors.primary} — #DA0037){colors.link} — #D2730D){colors.canvas} — #F8F6F6){colors.surface-alt} — #FFFFFF){colors.ink} — #141414){colors.hairline} — #666666){colors.accent-1} — #F3F306) — for visual punctuation only{colors.accent-2} — #B20000) — for visual punctuation only{rounded.full} (9999px), background: #DA0037, color: #FFFFFF, weight 700.rgba(0, 0, 0, 0.15) 1px 1px 15px 0px by default; on hover, apply rgba(0, 0, 0, 0.3) 0px -150px 15px 0px.{spacing.section} (176px) or {spacing.band} (188px)minimum; never crowd content.{rounded.xs} (12px) corners — Soft rounding signals friendliness; never use sharp corners except for badges.outline: 2px solid with brand color or clear background change; never hide keyboard navigation.box-shadow: #CCCCCC 0px 0px 5px and set opacity: 1 on focus.{rounded.none} (0px), height/width: 44px, border: 2px solid #DA0037, background white, text red.outline: 2px solid {colors.primary} as a default; verify component-by-component.Georgia, serif) but not verified.