London Homestays • Staging
Style Guide
A quick playground for buttons, cards, grids, spacing, and typography.
These components should feel “UKSE polished” while using LH brand colours.
CTA Button Behaviour
UKSE Pill Contract with LH palette. Primary lifts on hover; secondary shifts colour only.
Magenta gradient, white text, resting shadow.
Hover: translateY(-2px) + deeper shadow.
True outline, navy text.
Hover: colour shift to LH blue (no transform).
Smaller padding, uppercase text. Use for inline or tight layouts.
Section Title Underline
Use .lh-title--underline modifier to add the magenta accent line.
Section Heading
No underline — use for quieter sections.
Section Heading
Magenta underline — use for major sections.
Cards
Cards should have calm spacing, readable type, and a subtle hover lift.
Typography
H1 Heading
H2 Section Title (lh-title)
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Lead paragraph: slightly larger, calmer line-height.
Standard body text: this should be easy to read and not fight the parent theme.
This is a link with hover underline refinement.
Small text: muted helper copy for captions and notes.
Heading Systems Comparison
Two heading approaches: .lh-title for section titles vs .lh-h2 utility class.
font-weight: 800, letter-spacing: -0.2px, color: #000032
Section Title Example
Used for major section headings throughout the site.
font-weight: 600, font-size: 2rem, inherits colour
Utility Heading Example
General-purpose heading utility for flexible use.
These selectors are aliased to .lh-title for backward compatibility:
.home-testimonials-heading.blog-slider-title
Section spacing
Smaller vertical rhythm for dense areas.
Default vertical rhythm for most sections.
Large vertical rhythm for hero / major breakpoints.