Urban Luxe Neo
An interiors studio: near-white pages broken by flat painted slabs, one buttercup yellow for every button, Sentient for the three display sizes and DM Sans for everything else. It ships a light and a dark theme on the same variables.
- Variables
--lx-*- Defined in
app/demo/urban-luxe-neo/urban.css- Values
- Read live from that file, so this page always matches it.
- Theme
Colour
The whole palette, grouped by the job each colour does. Components only paint with these.
Ink
--lx-ink--lx-ink-soft--lx-ink-strong--lx-placeholderSurfaces
--lx-surface--lx-surface-2--lx-surface-3--lx-inverse--lx-on-inverse--lx-hover-washBrand
--lx-brand--lx-brand-hover--lx-on-brandSlabs
--lx-sage--lx-mint--lx-moss--lx-moss-line--lx-sand--lx-sand-line--lx-butter--lx-honey--lx-honey-deep--lx-amber--lx-lilacLines and fields
--lx-line--lx-field--lx-field-hover--lx-field-focusTypography
The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.
.lx-6xlWhere creativity meets
.lx-5xlThe Urban Luxe Story
.lx-4xlCoastal Retreat
.lx-3xlA palette that lasts
.lx-2xlIndoor-outdoor living
.lx-xlIndustry Experience
.lx-lgElegant design, tailored to your space.
.lx-baseTwo decades of expertise in every project.
.lx-smLead designer
.lx-navProjects
Corners
Every radius in the template. Nothing rounds on a value of its own.
--lx-radius-sm--lx-radius--lx-radius-lg--lx-radius-xlSpacing
The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.
--lx-section--lx-gap--lx-gutter--lx-containerMotion
How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.
Durations
--lx-stagger--lx-dur-fast--lx-dur-hover--lx-dur--lx-dur-slow--lx-dur-enter--lx-dur-enter-mediaEasings
--lx-ease--lx-ease-expo--lx-ease-circBreakpoints
Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.
max-width: 991pxmax-width: 767pxmax-width: 479pxComponents
The template's building blocks, live. Hover them: this is how they behave on the pages.
