ItsMyApp LogoItsMyApp Options
ItsMyApp Home
ItsMyApp Logo
ItsMyApp Interactive Client Suite

Live Colourway & Button Laboratory

Test and preview complete UI colour palettes, interactive button states, and micro-interaction icon treatments in real-time. Switch between traditional sector themes and modern high-contrast neo-SaaS colour duos below.

WCAG AAA Contrast Verified Live Hover & Depress Physics 1-Click Tailwind & CSS Tokens
Live Environmental Studio

Interactive Mockup Preview Suite

Menu Architecture:
https://theharbourhouse-inn.co.uk
Locally SourcedHarbour ViewEnsuite Rooms

Experience Historic Charm & Coastal Comfort

Book a table overlooking the harbour or check availability for our boutique guest suites.

AA Rosette Certified
Verified

Harbour Watch Seafood Terrace

Awarded AA Rosette for Sustainable Estuary Gastronomy

Fresh CatchDaily 06:00
Guest Rating4.95 / 5.0
Cellar180+ Btls
Automated WCAG 2.1 Compliance Auditor

Relative Luminance & Contrast Engine

Formula: (L1 + 0.05) / (L2 + 0.05)
Text on Canvas
17.3:1PASS (AAA)
#F8FAFC on #0E1626
Text on Card Surface
15.2:1PASS (AAA)
#F8FAFC on #15223A
Primary Button Text
14.2:1PASS (AAA)
#FFFFFF on #1B2A4A
Accent Button Text
7.2:1PASS (AAA)
#111827 on #C5A059
Micro-Interaction Physics

Interactive Button State Laboratory

Test all interactive button states side-by-side using the active palette: Default, Hover (`-translate-y-0.5` + coloured shadow), Active (`scale-95`), Outline/Ghost, and Disabled. Icons slide `translate-x-0.5` smoothly on hover.

Activity Monitor:Ready: Click buttons or switch modes to test tactile physics
Variant 01Solid Primary

Primary Button

Solid fill in Navy Heritage. Hover elevates by -translate-y-0.5 with coloured shadow. Active press scale-95.

Click to test tactile feedback & 1.2s loading state
  • Solid #1B2A4A
  • Hover: #2A3F6D + Lift
  • Icon shifts right by 4px on hover
Variant 02High-Contrast Duo

Conversion Accent CTA

High-contrast secondary duo fill in Artisan Gold. Lifts on hover with coloured ambient shadow and icon spring.

High-intent conversion trigger
  • Accent: #C5A059
  • Contrast Text: #111827
  • Hover: #B38F46
Variant 03Outline / Ghost

Outline / Ghost Variant

Hairline 1.5px perimeter matching primary tone. Soft wash fill on hover and subtle lift for secondary navigation.

Secondary information discovery
  • 1.5px Crisp Perimeter
  • Transparent Base + Hover Wash
  • Scale 0.95 Tactile Depress
Variant 04State: Disabled

Disabled & Inactive

Strictly non-interactive with cursor-not-allowed, stripped shadows, and opacity-50.

Zero pointer interaction response
  • disabled attribute
  • opacity-50
  • Stripped shadows & hover
Hex Code & Palette Inspector

Palette Swatches & Colour Role Inventory

Click any colour chip to copy its Hex code immediately to your clipboard.

Brand Anchor
Primary (Navy Heritage)
#1B2A4A
Hover Lift
Primary Hover
#2A3F6D
Conversion Driver
Accent (Artisan Gold)
#C5A059
Accent Glow
Accent Hover
#B38F46
Dark Canvas
Canvas Background
#0E1626
Container Surface
Card Surface
#15223A
Separation Line
Structural Border
#23375B
Heading & Body
Text Base
#F8FAFC
Auxiliary Content
Text Muted
#94A3B8
Primary Contrast
Primary Text
#FFFFFF
Accent Contrast
Accent Text
#111827
Depress Physics
Primary Active
#131E35
Industry Semantics & Dynamic Iconography

Curated Sector Iconography Suite

6 industry-tailored Lucide icons mapped to Heritage Hospitality & Dining. Responds dynamically to your active Icon Treatment mode (2.0px Standard UI). Click any card to copy its JSX syntax.

Theme: hospitality
UtensilsCrossed

Culinary Menus & Seasonal Dining Catalog

Copy <UtensilsCrossed />
Calendar

Real-Time Table & Private Event Reservations

Copy <Calendar />
Clock

Kitchen Service & Tasting Hours

Copy <Clock />
Star

Michelin & Sommelier Curated Recommendations

Copy <Star />
Sparkles

VIP Hospitality & Exclusive Degustation

Copy <Sparkles />
PhoneCall

Direct Maitre D' & Concierge Line

Copy <PhoneCall />