Style guide

Heaven Auto

A luxury car dealership: white pages broken by a deep forest-green band and full-bleed photographs, square cards under fully round pills, and IBM Plex Sans for every size.

Variables: --ha-*
Defined in: app/demo/heaven-auto/heaven.css
Values: Read live from that file, so this page always matches it.

Colour
Typography
Corners
Spacing
Motion
Breakpoints
Components

Colour

The whole palette, grouped by the job each colour does. Components only paint with these.

Ink

--ha-ink

Headings and strong text on white

--ha-ink-soft

Body copy

Surfaces

--ha-surface

The page, the pills, the quote card, the submit button

--ha-surface-2

Photo placeholder, the outline pill's hover

--ha-surface-3

The white pill's hover, on the band and photographs

--ha-line

Hairlines, the partner ledger, the outline pill

Brand

--ha-brand

The band, the footer, the painted row, the brand pill

--ha-brand-hover

The brand pill's hover

--ha-on-brand

Headings, links and fields on the band

--ha-on-brand-soft

Quiet copy on the band

--ha-on-brand-line

The accordion's dividers

Fields

--ha-field

Field fill on the band

--ha-field-placeholder

Field placeholders

--ha-field-focus

The focus ring

Photographs

--ha-media-ground

Behind a full-bleed photograph, seen while slides crossfade

--ha-on-media

Ink over a photograph, and the floating navbar

--ha-on-media-soft

Quiet copy over a photograph

--ha-on-media-idle

An unselected model tab

--ha-on-media-hover

Its hover

--ha-edge

The hairline round a photo on white

--ha-edge-on-brand

The same hairline on the band

Scrims

--ha-scrim-hero

The home's opening photograph

--ha-scrim-card

The picture promo card

--ha-scrim-tile

The model tiles

--ha-scrim-showcase

The spec showcase

--ha-scrim-slide

The services slider

--ha-scrim-row

A value row on hover

--ha-scrim-feed

A footer photo on hover

Typography

The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.

Display.ha-6xl

Drive Your Dreams Home

Display 5xl.ha-5xl

Where Innovation Meets Elegance

Display 4xl.ha-4xl

Premium Service Excellence

Heading 3xl.ha-3xl

Aurora Elegance

Heading 2xl.ha-2xl

Concierge Service

Heading xl.ha-xl

Unmatched Luxury and Service

Lead.ha-lg

Welcome to the new standard of automotive luxury.

Body.ha-base

Tailored financing, designed to fit your lifestyle.

Corners

Every radius in the template. Nothing rounds on a value of its own.

--ha-radius

Every card, photograph and field: square

--ha-radius-pill

Every button: a full pill

Spacing

The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.

--ha-section

Top and bottom of a band

--ha-gap

Between a section's lede and its content

--ha-gutter

Page edge

--ha-container

The widest a column gets

--ha-rise-distance

How far a block travels as it rises in

Motion

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

--ha-stagger

Between two siblings of a rise

--ha-dur

Buttons, links, fields, the burger and the menu

--ha-dur-slow

Tab ink, the accordion's plus, the feed hover

--ha-dur-slower

The accordion panel, the spec photo crossfade

--ha-dur-reveal

The scroll rise, the value rows, the slide crossfade

Easings

--ha-ease

Controls

--ha-ease-expo

Reveals, photo swaps and panels

Breakpoints

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: 991px

Tablet: the nav folds into the menu, the reel goes to two columns, the lede gap and the display sizes step down.

max-width: 767px

Phone: the gutter and the band tighten, grids go to one column, the display sizes step down again.

Components

The template's building blocks, live. Hover them: this is how they behave on the pages.

ButtonsHeavenButton. Outline wherever a pill sits on white, brand for the one action a page wants most.

Schedule a Test Drive Back home

Button on the bandThe white variant, for a pill on the band or over a photograph.

Our services

Promo cardsPromoCard. Brand green by default; hand it an image and it stands on the photograph under a scrim.

Premium Service Excellence

Discover a suite of exclusive services tailored to elevate your ownership experience.

Our services

Explore Luxury at Its Finest

Explore our handpicked collection of luxury car models, each a masterpiece of design and innovation.

Our models

Numbered rowsServiceRow. A hairline between rows; highlighted paints one brand green, as the home does.

Personalized Financing Solutions

Secure tailored financing options designed to fit your lifestyle and budget, ensuring your luxury vehicle purchase is as seamless as possible.

Learn more

Concierge Service

Enjoy personalized concierge services that cater to your every need, from scheduling maintenance appointments to delivering your vehicle wherever you desire.

Learn more

Value rowsValueRow. Hover one: it fills with its own photograph under a scrim and the copy turns white.

Commitment to Excellence

At Heaven Auto, we are dedicated to surpassing ordinary expectations with a commitment to excellence ingrained in every facet of our service. From exceptional vehicles to unparalleled customer care, we redefine automotive luxury.

Innovative Technology

Embrace cutting-edge technology with Heaven Auto. Our vehicles integrate the latest advancements in automotive innovation, ensuring superior performance, safety, and connectivity for an unparalleled driving experience.

PhotographsPlate. Square, with a hairline edge: black on white, white on the band with onBrand.

A car parked in a dealership, seen from behind

Form fieldsHeavenInput, HeavenTextarea and HeavenSubmit: the contact form's parts, on the band they are drawn for.

Scroll revealRise. A block rises and fades in as it scrolls into view; step staggers siblings one beat apart.

Luxurious Comfort

Advanced Safety Features

Seamless Connectivity