#1 Zipline Adventure in Thailand | Hanuman World Phuket

Design Specification — #1 Zipline Adventure in Thailand | Hanuman World Phuket

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#99CC33). All type is set in Inter. Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://hanumanworldphuket.com/_next/image?url=%2Fimages%2Flogos%2Fhw-logo.png&w=640&q=75&dpl=dpl_9wpR7CFSJifYomGaR8WSKZ4QxnBp

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• linear-gradient(#ffffff05 1px,#0000 0),linear-gradient(90deg,#ffffff05 1px,#0000 0)
• linear-gradient(#ffffff08 1px,#0000 0),linear-gradient(90deg,#ffffff08 1px,#0000 0)
• radial-gradient(circle,#00d4ff26,#0000 70%)
• radial-gradient(circle,#99cc3326,#0000 70%)
• linear-gradient(120deg,#10294799,#0d224000 62%)
• linear-gradient(110deg,#183a5399,#0d224000 78%)
• linear-gradient(transparent,#000 13%,#000 82%,transparent)
• linear-gradient(124deg,transparent 45%,#a8d1480c 0,#a8d1480c 55%,transparent 0,transparent 58%,#9ed6ef15 0,#9ed6ef15 58.2%,transparent 0,transparent 60%,#9ed6ef0b 0,#9ed6ef0b 60.2%,transparent 0)
• linear-gradient(0deg,#081b39d4,transparent 70%)
• linear-gradient(0deg,#06162de8,transparent 85%)

> 3 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Inter — stack: Inter

Font stacks (most used first)

• Inter
• Oswald
• Prompt
• var(--font-oswald),sans-serif
• var(--font-inter),sans-serif
• var(--font-oswald),Impact,sans-serif
• var(--font-mono)
• var(--local-font)
• var(--font-sans)
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 1px #ffffff26
• 0 20px 70px #0008
• 0 0 0 55px #8dbad308,0 0 0 110px #8dbad306

Layout

Container max-width: 700px

Grid columns (largest detected grid): 12

Breakpoints

• 480px
• 600px
• 639px
• 40rem
• 700px
• 48rem
• 64rem
• 1200px

Animation & Motion

Transitions

• border-color .18s,background-color .18s
• background .15s,border-color .15s
• color .2s,background .2s,transform .25s,border-color .2s
• transform .25s
• background .25s
• transform .4s
• transform .7s cubic-bezier(.2,.7,.3,1)
• transform .5s
• none

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in-out)
• var(--ease-out)
• cubic-bezier(.8,0,1,1)

Keyframes

@keyframes pulse-ring { 0%{opacity:.6;transform:scale(1)}50%{opacity:0;transform:scale(1.08)}to{opacity:0;transform:scale(1)} }
@keyframes spin-btn-border { 0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(1turn)} }
@keyframes btn-diagonal { 0%{background-position:0 0}50%{background-position:100% 100%}to{background-position:0 0} }
@keyframes gradient-shift { 0%{background-position:0}50%{background-position:100%}to{background-position:0} }
@keyframes card-bg-shift-slow { 0%{background-position:0 100%}50%{background-position:100% 0}to{background-position:0 100%} }
@keyframes card-bg-shift-reverse { 0%{background-position:100%}50%{background-position:0}to{background-position:100%} }
@keyframes card-bg-diagonal { 0%{background-position:0 0}33%{background-position:100%}66%{background-position:50% 100%}to{background-position:0 0} }
@keyframes rotate-golden { 0%{--angle:0deg}to{--angle:360deg} }
@keyframes gradient-rotate { 0%{background-position:0}50%{background-position:100%}to{background-position:0} }
@keyframes gradient-rotate-reverse { 0%{background-position:100%}50%{background-position:0}to{background-position:100%} }
@keyframes card-bg-shift { 0%{background-position:0}50%{background-position:100%}to{background-position:0} }
@keyframes circle-orbit-1 { 0%{transform:translate(0)rotate(0)}25%{transform:translate(20px,-20px)rotate(90deg)}50%{transform:translateY(-40px)rotate(180deg)}75%{transform:translate(-20px,-20px)rotate(270deg)}to{transform:translate(0)rotate(1turn)} }
@keyframes circle-orbit-2 { 0%{transform:translate(0)rotate(0)}25%{transform:translate(-15px,25px)rotate(90deg)}50%{transform:translateY(50px)rotate(180deg)}75%{transform:translate(15px,25px)rotate(270deg)}to{transform:translate(0)rotate(1turn)} }
@keyframes circle-orbit-3 { 0%{transform:translate(0)rotate(0)}25%{transform:translate(30px,10px)rotate(90deg)}50%{transform:translateY(20px)rotate(180deg)}75%{transform:translate(-30px,10px)rotate(270deg)}to{transform:translate(0)rotate(1turn)} }
@keyframes spin-slow { 0%{transform:rotate(0)}to{transform:rotate(1turn)} }
@keyframes spin-slow-reverse { 0%{transform:rotate(1turn)}to{transform:rotate(0)} }
@keyframes spin { to{transform:rotate(1turn)} }
@keyframes pulse { 50%{opacity:.5} }

Animations

• var(--animate-bounce)
• var(--animate-pulse)
• var(--animate-spin)
• SectionBackdrop_slowTurn__Qo8nu 180s linear infinite
• none
• BookingLink_bookingWiggle__V8SzC 4.8s cubic-bezier(.77,0,.175,1) infinite
• PremiumHome_artworkOrbit__OhJ1M 100s linear infinite
• PremiumHome_rollerHang__d3qZc 9.5s cubic-bezier(.77,0,.175,1) infinite
• PremiumHome_riderHang__Axve_ 8s cubic-bezier(.77,0,.175,1) infinite
• PremiumHome_ribbonScrollRight__xdlsj 36s linear infinite

CTA labels found on page

• Explore the courses
• Book World A+
• Book your adventure

Source Design Tokens (CSS custom properties)

:root {
  --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-orange-50: oklch(98% .016 73.684);
  --color-orange-100: oklch(95.4% .038 75.164);
  --color-orange-200: oklch(90.1% .076 70.697);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-orange-800: oklch(47% .157 37.304);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-yellow-100: oklch(97.3% .071 103.193);
  --color-yellow-200: oklch(94.5% .129 101.54);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-yellow-700: oklch(55.4% .135 66.442);
  --color-yellow-800: oklch(47.6% .114 61.907);
  --color-green-50: oklch(98.2% .018 155.826);
  --color-green-100: oklch(96.2% .044 156.743);
  --color-green-200: oklch(92.5% .084 155.995);
  --color-green-300: oklch(87.1% .15 154.449);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-green-800: oklch(44.8% .119 151.328);
  --color-emerald-50: oklch(97.9% .021 166.113);
  --color-emerald-100: oklch(95% .052 163.051);
  --color-emerald-200: oklch(90.5% .093 164.15);
  --color-emerald-400: oklch(76.5% .177 163.223);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --color-teal-50: oklch(98.4% .014 180.72);
  --color-teal-100: oklch(95.3% .051 180.801);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-teal-500: oklch(70.4% .14 182.503);
  --color-teal-600: oklch(60% .118 184.704);
  --color-cyan-400: oklch(78.9% .154 211.53);
  --color-cyan-500: oklch(71.5% .143 215.221);
  --color-sky-400: oklch(74.6% .16 232.661);
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-100: oklch(93.2% .032 255.585);
}

Do's and Don'ts

Do

• Do reserve the accent #99CC33 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #A8D148;
  --color-accent: #99CC33;
  --color-background: #FFFFFF;
  --color-surface: #EDF5FA;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #BFE5F2;
  --color-border: #EDF5FA;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --font-sans: Inter;
  --font-size-headline-lg: 40px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 11.8px;
  --radius-sm: 2px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 1px #ffffff26;
  --shadow-md: 0 20px 70px #0008;
  --shadow-lg: 0 0 0 55px #8dbad308,0 0 0 110px #8dbad306;
  --space-xs: 4.8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --tracking-display: -.025em;
  --tracking-label: .02em;
  --container-max: 700px;
}