Remixes of www.trio-ri.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: Trio-ri
description: |
Trio-ri presents a high-energy, premium digital lottery platform with a
sophisticated blend of deep oceanic blues layered with luxurious gold accents
and emerald greens. The design exudes confidence and playfulness through
vibrant gradients, decorative elements like animated parrots and starburst
patterns, and carefully orchestrated colour transitions that suggest movement
and opportunity. The aesthetic balances professional fintech sensibility with
the celebratory, aspirational nature of gaming—rich hero imagery, prominent
medal badges, and gold coin illustrations reinforce the reward-focused
narrative. Whitespace is used strategically to frame high-value content cards
and CTAs, while decorative gradients and layered shadows create perceived
depth without visual clutter.
source:
url: "https://www.trio-ri.com/"
pagesAnalyzed: 1
extractedAt: 2026-10-27
tokensMeasured: true
colors:
primary: "#0564B2"
accent: "#1E293B"
canvas: "#F5F5F5"
surface: "#FFFFFF"
surface-alt: "#041C32"
on-primary: "#FFFFFF"
ink: "#262626"
body: "#1E293B"
muted: "#737373"
faint: "#FFFFFF"
hairline: "#FFB800"
accent-1: "#D4AF37"
accent-2: "#072A4D"
accent-3: "#041427"
neutral-1: "#D4D4D4"
neutral-2: "#000000"
typography:
heading-lg:
fontFamily: graphik
fontSize: 28px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
heading-md:
fontFamily: graphik
fontSize: 20px
fontWeight: 500
lineHeight: 1.8
letterSpacing: 0px
heading-sm:
fontFamily: graphik
fontSize: 12px
fontWeight: 600
lineHeight: 1.83
letterSpacing: 0px
heading-xs:
fontFamily: graphik
fontSize: 10px
fontWeight: 600
lineHeight: 1.8
letterSpacing: 0px
body-xl:
fontFamily: graphik
fontSize: 24px
fontWeight: 600
lineHeight: 1.75
letterSpacing: 0px
body-lg:
fontFamily: graphik
fontSize: 22px
fontWeight: 600
lineHeight: 1.55
letterSpacing: 0px
body-md:
fontFamily: graphik
fontSize: 20px
fontWeight: 600
lineHeight: 1.8
letterSpacing: 0px
body-sm:
fontFamily: graphik
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: graphik
fontSize: 14px
fontWeight: 500
lineHeight: 1.71
letterSpacing: 0px
body-xs-2:
fontFamily: graphik
fontSize: 10px
fontWeight: 400
lineHeight: 1.8
letterSpacing: 0px
button-xl:
fontFamily: graphik
fontSize: 24px
fontWeight: 500
lineHeight: 1.67
letterSpacing: 0px
button-lg:
fontFamily: Prompt
fontSize: 20px
fontWeight: 400
lineHeight: 1.8
letterSpacing: 0px
button-md:
fontFamily: graphik
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: Prompt
fontSize: 14px
fontWeight: 400
lineHeight: 1.57
letterSpacing: 0px
button-xs:
fontFamily: graphik
fontSize: 12px
fontWeight: 400
lineHeight: 1.33
letterSpacing: 0px
label:
fontFamily: graphik
fontSize: 24px
fontWeight: 600
lineHeight: 1.58
letterSpacing: 0px
caption:
fontFamily: graphik
fontSize: 10px
fontWeight: 700
lineHeight: 1.8
letterSpacing: 0px
rounded:
none: 0px
xs: 8px
sm: 16px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 56px
band: 64px
borderWidths:
thin: 1px
shadows:
sm: "rgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1px"
md: "rgba(5, 100, 178, 0.3) 0px 8px 20px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset"
lg: "rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset"
xl: "rgba(3, 17, 32, 0.4) 0px 8px 24px 0px"
elevationStrategy: layered-micro
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F5F5F5"
surface: "#FFFFFF"
surfaceRaised: "#F6F6F6"
text: "#262626"
textMuted: "#1E293B"
border: "#FFB800"
accent: "#0564B2"
accentFg: "#FFFFFF"
focusRing: "#0564B2"
elevation: shadow
dark:
bg: "#0A0F14"
surface: "#191D22"
surfaceRaised: "#25292E"
text: "#F5F9FC"
textMuted: "#9CA0A4"
border: "#31353A"
accent: "#0785EE"
accentFg: "#0B0B0C"
focusRing: "#0564B2"
elevation: "border+surface"
gradients:
- context: hero
kind: mixed
value: "radial-gradient(circle at 10% 8%, rgba(5, 100, 178, 0.28), rgba(0, 0, 0, 0) 544px), radial-gradient(circle at 88% 25%, rgba(255, 184, 0, 0.16), rgba(0, 0, 0, 0) 448px), radial-gradient(circle at 50% 75%, rgba(16, 185, 129, 0.14), rgba(0, 0, 0, 0) 512px), linear-gradient(rgb(7, 33, 66) 0%, rgb(4, 20, 39) 100%)"
- context: hero
kind: linear
value: "linear-gradient(135deg, rgb(5, 76, 140) 0%, rgb(4, 39, 73) 55%, rgb(3, 21, 39) 100%)"
- context: section
kind: linear
value: "linear-gradient(135deg, rgb(5, 100, 178) 0%, rgb(2, 132, 199) 50%, rgb(5, 150, 105) 100%)"
- context: section
kind: linear
value: "linear-gradient(135deg, rgb(5, 76, 140) 0%, rgb(4, 39, 73) 55%, rgb(3, 21, 39) 100%)"
- context: section
kind: linear
value: "linear-gradient(to top, rgb(245, 245, 245), rgb(38, 38, 38))"
components:
button-filled:
textColor: "{colors.primary}"
height: 44px
padding: "10px 12px 10px 12px"
fontSize: 16px
fontFamily: graphik
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
button-text:
textColor: "{colors.faint}"
height: 72px
padding: "12px 16px 12px 16px"
fontSize: 16px
boxShadow: "rgba(5, 100, 178, 0.3) 0px 8px 20px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset"
fontFamily: graphik
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.xs}"
button-outline:
textColor: "{colors.primary}"
border: "1px solid {colors.hairline}"
height: 50px
padding: "24px 16px 24px 16px"
fontSize: 16px
fontFamily: Prompt
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.xs}"
button-text-sm:
textColor: "{colors.faint}"
height: 58px
fontSize: 16px
fontFamily: Prompt
fontWeight: 400
lineHeight: 1.6
input:
typography: "{typography.label}"
textColor: "{colors.ink}"
border: "1px solid {colors.neutral-1}"
height: 72px
padding: "16px 4px 16px 4px"
boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
card:
textColor: "{colors.body}"
border: "1px solid rgba(255, 184, 0, 0.45)"
fontSize: 16px
boxShadow: "rgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1px"
fontFamily: graphik
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
card-featured:
textColor: "{colors.faint}"
border: "1px solid rgba(255, 184, 0, 0.45)"
fontSize: 16px
boxShadow: "rgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1px"
fontFamily: graphik
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.xs}"
backgroundColor: "rgb(34, 34, 34)"
card-sm:
textColor: "{colors.faint}"
fontSize: 16px
fontFamily: graphik
fontWeight: 400
lineHeight: 1.6
rounded: "8px 8px 0px 0px"
backgroundColor: "{colors.surface}"
navigation:
textColor: "{colors.body}"
height: 80px
padding: "8px 32px 8px 32px"
fontSize: 16px
boxShadow: "rgba(3, 17, 32, 0.4) 0px 8px 24px 0px"
fontFamily: Prompt
fontWeight: 400
lineHeight: 1.6
backgroundColor: "{colors.surface-alt}"
link:
textColor: "{colors.faint}"
fontSize: 16px
fontFamily: Prompt
fontWeight: 400
lineHeight: 1.6
link-lg:
textColor: "{colors.faint}"
fontSize: 16px
fontFamily: Prompt
fontWeight: 600
lineHeight: 1.6
states:
other-disabled:
target: other
state: disabled
borderWidth: 1px
other-hover:
target: other
state: hover
opacity: 0.8
other-focus:
target: other
state: focus
outline: "rgba(0, 0, 0, 0) solid 2px"
outlineColor: "rgba(0, 0, 0, 0)"
outlineWidth: 2px
other-active:
target: other
state: active
opacity: 0.6
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 3
navLinksVisible: 1
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 5
navLinksVisible: 1
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 992
gridColumns: 5
navLinksVisible: 1
menuToggleVisible: true
headingPx: 14
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1248
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 20
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1408
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: false
headingPx: 20
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 5
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Trio-ri presents a high-energy, premium digital lottery platform with a sophisticated blend of deep oceanic blues layered with luxurious gold accents and emerald greens. The design exudes confidence and playfulness through vibrant gradients, decorative elements like animated parrots and starburst patterns, and carefully orchestrated colour transitions that suggest movement and opportunity. The aesthetic balances professional fintech sensibility with the celebratory, aspirational nature of gaming—rich hero imagery, prominent medal badges, and gold coin illustrations reinforce the reward-focused narrative. Whitespace is used strategically to frame high-value content cards and CTAs, while decorative gradients and layered shadows create perceived depth without visual clutter.
Key Characteristics
{colors.hairline} — #FFB800) used sparingly for borders and highlights{rounded.xs} — 8px) balancing friendliness with formality{colors.primary} — #0564B2): Dominant colour for primary CTAs, active states, brand accent across hero sections and interactive highlights. Used in button fills, brand mark, and active tab indicators.{colors.accent} — #1E293B): Secondary accent and body copy colour; appears in section bands and supporting text. Rich charcoal-slate providing contrast against lighter surfaces.{colors.accent-1} — #D4AF37): Unassigned role; appears as ornamental gold in borders, accents, and decorative medal imagery. No functional semantic purpose detected.{colors.accent-2} — #072A4D): Unassigned role; used in layered gradient overlays and deep background tints. Decorative depth-building only.{colors.accent-3} — #041427): Unassigned role; darkest tint in gradient stacks for visual richness. No functional UI role.{colors.hairline} — #FFB800): Primary border colour for cards, inputs, and premium UI elements. Bright, attention-drawing gold for dividers and fine strokes (1px).{colors.canvas} — #F5F5F5): Default page background; light, accessible, reduces eye strain in long-form content zones.{colors.surface} — #FFFFFF): Card and panel backgrounds; primary container for content. Highest contrast with dark text, used as the dominant UI surface.{colors.surface-alt} — #041C32): Alternating section band; dark, branded backdrop for layered content. Creates visual sectioning without breaking the layout flow.{colors.ink} — #262626): Headings and primary body text; dark charcoal ensuring WCAG AA contrast on light surfaces.{colors.muted} — #737373): Captions, secondary labels, and supporting text. Reduced contrast for hierarchy without sacrificing readability.{colors.neutral-1} — #D4D4D4): Unassigned role; light grey used in subtle backgrounds or disabled states. Decorative neutral.{colors.neutral-2} — #000000): Unassigned role; pure black for maximum contrast in rare cases or image overlays.{colors.surface} — #FFFFFF): Label text and tertiary text colour when placed on branded ({colors.primary}) surfaces. Ensures readability on deep blue backgrounds.Primary: Graphik (sans-serif)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
Secondary: Prompt (sans-serif, used for buttons and navigation)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Graphik | 28px | 600 | 1.5 | 0px | Hero headings, largest display scale |
| Display L | Graphik | 24px | 600 | 1.75 | 0px | Section titles, prominent headings |
| Display M | Graphik | 20px | 600 | 1.8 | 0px | Card titles, medium hierarchy |
| Display SM | Graphik | 20px | 500 | 1.8 | 0px | Alternative heading weight |
| Heading MD | Graphik | 20px | 500 | 1.8 | 0px | Subheadings, medium prominence |
| Heading SM | Graphik | 12px | 600 | 1.83 | 0px | Tab labels, small caps |
| Heading XS | Graphik | 10px | 600 | 1.8 | 0px | Tiny labels, metadata |
| Body LG | Graphik | 22px | 600 | 1.55 | 0px | Large body emphasis, call-outs |
| Body MD | Graphik | 20px | 600 | 1.8 | 0px | Prominent body text |
| Body SM | Graphik | 16px | 500 | 1.5 | 0px | Standard body copy, default text |
| Body XS | Graphik | 14px | 500 | 1.71 | 0px | Secondary body, supporting copy |
| Body XXS | Graphik | 10px | 400 | 1.8 | 0px | Fine print, annotations |
| Button XL | Graphik | 24px | 500 | 1.67 | 0px | Large button labels |
| Button MD | Graphik | 16px | 600 | 1.5 | 0px | Standard button text |
| Button SM | Prompt | 14px | 400 | 1.57 | 0px | Small button / tertiary action |
| Button XS | Graphik | 12px | 400 | 1.33 | 0px | Tiny button labels |
| Button LG | Prompt | 20px | 400 | 1.8 | 0px | Large action button (Prompt) |
| Label | Graphik | 24px | 600 | 1.58 | 0px | Input labels, form headers |
| Caption | Graphik | 10px | 700 | 1.8 | 0px | Captions, image labels (highest weight) |
Primary / Filled (Large)
{colors.surface} (#FFFFFF){colors.primary} (#0564B2){typography.button-md} (16px, 400 weight, 1.5 line-height)10px 12px{rounded.xs} (8px)Text / Ghost (Large, Brand Background)
rgba(0, 0, 0, 0){colors.surface} (#FFFFFF){typography.button-md} (16px, 400 weight, 1.5 line-height)12px 16px{rounded.xs} (8px)rgba(5, 100, 178, 0.3) 0px 8px 20px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px insetOutline (With Border)
rgba(0, 0, 0, 0){colors.primary} (#0564B2){typography.button-lg} (20px, 400 weight, 1.8 line-height)24px 16px{rounded.xs} (8px)1px solid {colors.hairline} (1px solid #FFB800)Text / Minimal (Small, No Background)
rgba(0, 0, 0, 0){colors.surface} (#FFFFFF){typography.button-lg} (20px, 400 weight, 1.8 line-height)0px{rounded.none} (0px)Large Featured Card
{colors.surface} (#FFFFFF){colors.accent} (#1E293B)1px solid rgba(255, 184, 0, 0.45){rounded.sm} (16px)0px (content padding handled internally)rgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1pxSmall Card (Dark, Featured Content)
#222222 (dark charcoal){colors.surface} (#FFFFFF)1px solid rgba(255, 184, 0, 0.45){rounded.xs} (8px)0pxrgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1pxCard Segment (Lottery Ticket)
{colors.surface} (#FFFFFF){colors.surface} (#FFFFFF){rounded.xs} (8px) top corners, {rounded.none} (0px) bottom0pxNumber Input (Default)
{colors.surface} (#FFFFFF){colors.ink} (#262626)1px solid {colors.neutral-1} (1px solid #D4D4D4){rounded.xs} (8px)16px 4px{typography.label} (24px, 600 weight, 1.58 line-height)rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px insetHeader Navigation Bar
{colors.surface-alt} (#041C32){colors.surface} (#FFFFFF){rounded.none} (0px)8px 32px{typography.button-lg} (20px, 400 weight, 1.8 line-height)rgba(3, 17, 32, 0.4) 0px 8px 24px 0pxNavigation Link (Default)
rgba(0, 0, 0, 0){colors.surface} (#FFFFFF){rounded.none} (0px)0px{typography.button-lg} (20px, 400 weight, 1.8 line-height)Navigation Link (Icon, Larger)
rgba(0, 0, 0, 0){colors.surface} (#FFFFFF){rounded.none} (0px)0px{typography.button-md} (16px, 600 weight, 1.5 line-height)Numeric Badge (Tab Indicator)
{colors.primary} (#0564B2){colors.surface} (#FFFFFF){typography.heading-sm} (12px, 600 weight, 1.83 line-height){rounded.full} (9999px) for pill-shaped appearanceTab Button (Segment Control)
{colors.surface} (#FFFFFF){colors.primary} (#0564B2){colors.ink} (#262626){colors.surface} (#FFFFFF){typography.body-sm} (16px, 500 weight, 1.5 line-height)8px 16px{rounded.xs} (8px)Base unit: {spacing.xs} = 8px
Scale:
{spacing.xxs} = 4px — micro gaps, inline element spacing{spacing.xs} = 8px — tight component spacing, icon margins{spacing.sm} = 12px — small gaps, button internal padding{spacing.md} = 16px — default padding, input padding, standard component margin{spacing.lg} = 24px — generous padding, section titles margin{spacing.xl} = 28px — prominent vertical rhythm{spacing.xxl} = 32px — navigation padding, section headers{spacing.xxxl} = 40px — large content blocks, top-level margins{spacing.section} = 56px — inter-section spacing, major layout breaks{spacing.band} = 64px — full-bleed section padding, hero zone vertical rhythmContext:
{spacing.md} (16px) as default padding for cards, buttons, and input fields.{spacing.lg} (24px) between grouped components (e.g., button rows, label-input pairs).{spacing.section} (56px) and {spacing.band} (64px) for separating major layout regions (hero to content, content to footer).{spacing.xxl} — 32px) on section containers for desktop layouts.Max Width: 1440px (desktop); content column width adapts per viewport
Column Strategy: 5-column flexible grid on desktop (1024px+); responsive collapse to 3 columns at 375px
| Viewport | Content Width | Columns | Column Width | Gutter |
|---|---|---|---|---|
| 375px | 343px | 3 | ~100px | 16px |
| 768px | 736px | 5 | ~135px | 16px |
| 1024px | 992px | 5 | ~185px | 16px |
| 1280px | 1248px | 5 | ~235px | 16px |
| 1440px | 1408px | 5 | ~265px | 16px |
Section Patterns:
{spacing.band} (64px) vertical padding, content centred within max-width{colors.canvas} and {colors.surface-alt} with consistent {spacing.band} padding top/bottomWhitespace is leveraged to create visual hierarchy and reduce cognitive load. Premium content (CTAs, featured cards) floats with generous margins. Section margins ({spacing.section} — 56px vertical) ensure breathing room between major layout regions. Internal component padding ({spacing.md} — 16px) balances density with scannability. Large hero imagery and gradient backgrounds are given clean, open space; dense tabular content (lottery results) uses tighter spacing to maximize information density without clutter.
{rounded.none} — 0px): Navigation bars, card bottoms, overlay panels. Used where edges meet the viewport or hard layout lines.{rounded.xs} — 8px): Buttons, inputs, tab controls, top card corners. The default interactive radius, balancing approachability with professionalism.{rounded.sm} — 16px): Large featured cards, section containers. Creates visual softness for premium content zones.{rounded.full} — 9999px): Numeric badges, icon buttons, avatar containers. Used where a fully circular or pill-shaped appearance is desired.1px): Default stroke width for input borders, card borders, and dividers. Applied to all interactive and container edges.1px solid {colors.hairline} (1px solid #FFB800)1px solid rgba(255, 184, 0, 0.45) (translucent gold)1px solid {colors.neutral-1} (1px solid #D4D4D4)No additional border widths (thick/medium) are present in the system; all strokes are 1px.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Navigation backgrounds, section bands, flat UI surfaces |
| Micro (SM) | rgba(3, 17, 32, 0.22) 0px 14px 34px 0px, rgba(16, 185, 129, 0.12) 0px 0px 0px 1px | Card containers, featured content panels with accent border glow |
| Small (MD) | rgba(5, 100, 178, 0.3) 0px 8px 20px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset | Primary CTA buttons, premium interactive elements |
| Medium (LG) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset | Subtle input focus states, minimal lift |
| Large (XL) | rgba(3, 17, 32, 0.4) 0px 8px 24px 0px | Navigation bars, sticky header elements |
Shadow Philosophy:
The system employs a layered-micro elevation strategy, prioritizing colour blocking and border accents over dramatic shadow depth. Shadows are intentionally subtle—using low opacity dark tints with close blur radii—to maintain visual clarity and prevent the interface from appearing cluttered. The recurring 14px–24px blur distances and small vertical offsets (0–8px) create barely-there lifts that suggest spatial hierarchy without dominating the visual plane. The teal accent glow in card shadows (rgba(16, 185, 129, 0.12)) adds a branded, emerald-tinted depth cue without introducing a new colour to the palette.
0.30): Used in hover and focus states for subtle transparency effects; reduces intensity of overlays and disabled backgrounds.0.40): Applied to gold border transparency in cards (rgba(255, 184, 0, 0.45)), balancing accent visibility with softness.z-index: 1–5): Static content, cards, standard componentsz-index: 10–50): Menus, popovers, select dropdowns; stacked in order of nestingz-index: 999): Navigation bar, sticky headers; positioned above all scrolling contentSpecific extracted values: 1, 5, 10, 20, 22, 30, 50, 999
{colors.primary} (#0564B2) for primary CTAs — this is the brand's action colour and should dominate interactive hierarchy.{spacing.md} (16px) as default padding for cards, buttons, and form elements to maintain consistent rhythm.{typography.body-sm} (16px, Graphik) for standard body copy; it balances readability and density.{rounded.full} — 9999px) for numeric indicators and badges; use {rounded.xs} (8px) for all interactive elements by default.{colors.surface} — #FFFFFF) cards over dark backgrounds to maximize contrast and readability.{colors.hairline} (#FFB800) for accent borders, dividers, and luxury-signalling elements—do not overuse.{spacing.xxl} — 32px) on desktop.{spacing.band} (64px) vertical padding for section margins; breaking this rhythm disrupts visual flow.{rounded.xs} (8px), cards {rounded.sm} (16px), and badges {rounded.full} (9999px).{colors.muted} (#737373) for primary headings—reserve it for captions and secondary labels only.1px solid {colors.hairline}) or no border.| Breakpoint | Width | Grid | Nav Visible | Menu Toggle | Largest Heading | Body Text | Section Padding-X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 3 columns | 1 link | Yes | 14px | 16px | 0px |
| Tablet | 768px | 5 columns | 1 link | Yes | 14px | 16px | 0px |
| Desktop (Small) | 1024px | 5 columns | 1 link | Yes | 14px | 16px | 0px |
| Desktop (Med) | 1280px | 5 columns | 5 links | No | 20px | 16px | 0px |
| Desktop (Large) | 1440px | 5 columns | 5 links | No | 20px | 16px | 0px |
Key Changes:
{spacing.lg} (24px) separation. Navigation collapses into hamburger menu (toggle visible).Specific Collapses:
#0564B2) — use for buttons, active states, brand mark#041C32) — navigation bar, section bands#FFFFFF) — primary UI surface, content panels#F5F5F5) — default page background#262626) — maximum contrast for readability#737373) — reduced emphasis, supporting content#FFB800) — 1px gold borders, highlights#1E293B) — secondary body copy, section flavourAlways use Graphik font for body and headings. Default to 16px body copy ({typography.body-sm}). Use Prompt only for navigation and button labels where specified.
Apply {spacing.md} (16px) padding to all standard components (buttons, inputs, cards). Use {spacing.lg} (24px) between grouped items. Reserve {spacing.section} (56px) for major layout breaks.
Primary buttons: Filled with white background ({colors.surface}) and blue text ({colors.primary}). Apply shadow MD (rgba(5, 100, 178, 0.3) 0px 8px 20px 0px, ...). Border radius {rounded.xs} (8px).
Cards: White background ({colors.surface}), 1px gold border (rgba(255, 184, 0, 0.45)), shadow SM, border radius 16px ({rounded.sm}). Override to dark background (#222222) and white text only for featured/highlight cards.
Navigation bar: Dark navy background ({colors.surface-alt} — #041C32), white text, shadow XL, 80px height, sticky positioning z-index 999.
Responsive collapse point: Navigation links hidden below 1024px; menu toggle appears. Full nav visible at 1280px+. Grid changes from 3 columns (mobile) to 5 columns (tablet+).
Shadows: Never invent custom shadows. Use only SM, MD, LG, XL from the extracted elevation scale. Cards use SM; buttons use MD; navigation uses XL; inputs use LG.
Heading sizes: Display XL (28px) for hero; Display L (24px) for section titles; Display M (20px) for card titles. Line heights range 1.5–1.8; letter spacing always 0px.
Borders: All borders are 1px solid. Use {colors.hairline} (#FFB800) for accent borders (outline buttons, cards); use neutral grey (#D4D4D4) for input borders. No thicker strokes.
Interactive elements: Buttons and inputs use {rounded.xs} (8px). Badges use {rounded.full} (9999px) for pill shape. Navigation uses {rounded.none} (0px). Never mix radius values within a single component class.
Interaction state specificity: The extraction captured :hover, :focus, :active, and :disabled states at a high level, but did not isolate exact colour transitions for each component type (e.g. button hover, input focus, link active). Implementation should infer transitions from the extracted component styles and apply logical contrast shifts (e.g. button fill darkness increases on hover).
Error / Success / Warning semantic colours: The site does not declare explicit error, success, warning, or info state colours in its markup or stylesheets. No validation state palette exists. If form validation is required, a semantic colour ramp must be designed and added.
Light / Dark mode: Only one theme was analysed (the primary brand palette). No dark-mode variant, inverted palette, or system-preference-based switching was extracted. If dark mode is required, it must be designed separately.
Decorative colour roles: Five extracted colours ({colors.accent-1} — gold, {colors.accent-2} — dark navy, {colors.accent-3} — near-black, {colors.neutral-1} — light grey, {colors.neutral-2} — pure black) have no measurable functional role and appear only in decorative contexts (gradient overlays, ornamental imagery). Their exact usage in gradients or background treatments was preserved verbatim, but no semantic UI function was assigned.
Animation / Motion: No keyframe animations, transition timings, or transform properties were extracted from the static page screenshots. Hover animations, page transitions, and scroll effects are not documented. Implementation should refer to best-practice interaction patterns (e.g. 200–300ms cubic-bezier easing on interactive elements).
Surfaces behind authentication: The lottery platform likely includes user dashboard, payment, and account management surfaces that were not visited. Those surfaces may introduce additional component types, layouts, or colour roles not visible in the homepage extraction.
Accessibility details: No aria- attributes, focus rings, or screen-reader hints were systematically extracted. WCAG contrast ratios were inferred from colour values but not formally validated. Keyboard navigation patterns were not observed.
Micro-interactions and temporal states: Hover states, loading states, and transient notifications (toasts, modals) were not comprehensively observed. Copy and precise timing for these patterns are missing.
Print and offline rendering: No print stylesheets or offline fallbacks were extracted. The design system assumes digital, online-first delivery.
Internationalisation: Typography and spacing were optimized for Thai language rendering. Behaviour and sizing for other languages (especially LTR languages with different character heights) is not documented; testing and adjustment will be needed.