Theme Style Guide
Every base element, design token, and reusable component
compiled from the Tailwind CSS v4 build. Use real
h1–h6 for document structure (SEO), Tailwind utilities
for layout, and the component classes below for everything else.
Colors
Reference as Tailwind utilities (text-brand, bg-brand-dark)
or the CSS custom properties, e.g. color: var(--dsn-blue);
--dsn-blue#0f6d92
--dsn-blue-dark#083f59
--dsn-blue-light#4fb7d2
--dsn-ink#111827
--dsn-body#374151
--dsn-muted#667085
--dsn-bg-soft#f5f8fb
--dsn-success#168a63
--dsn-error#c23b3b
Headings
The whole type system is set in Poppins
(--dsn-font). There are two "looks" for the big headings:
- Display / hero —
.h1-hero(huge & heavy, the front-page hero) and.h2-section(large but lighter, the section openers as you scroll down the home page). - Normal — the semantic
h1–h6used for document structure (SEO). The normalh1/h2are a touch lighter (weight 700) than the bold hero. Need the look without the structural weight? Use the matching.h1–.h6classes.
Every size uses clamp(), so headings scale fluidly between mobile and
desktop. The badge shows the live computed size + weight at the current
width — resize the window to watch them move.
Build. Launch. Grow.
Premium Client Website
Bring Your Brand to Life
Why Choose This Client
Local Service Areas
Project Options
Delivery & Support
Eyebrow style label
Responsive preview
The same headings and a 20px paragraph rendered at true laptop and mobile widths,
so you can confirm they fit and scale correctly. These are real device-width
viewports (so clamp() / vw resolve exactly as they would
on the device), shown scaled to fit this page.
Body text & inline elements
This is a lead paragraph — use class="lead" for
introductions and standfirst copy.
A standard paragraph with a text link, bold,
italic, inline code and small print.
Use this starter text to preview headings, body copy, and calls to action before client content is finalized.
Muted helper text — class="text-muted".
“We loved working with this team. The communication and ongoing support have been incredible.” Example Customerclass="lead" · class="text-muted" · <blockquote><cite>
Lists
Markers sit in the left gutter, so when an item runs onto a second line the wrapped text lines up under the first line's text — not under the bullet or number. The long items below show this hanging indent; nested lists change marker style for hierarchy.
Unordered — <ul>
- Services and solutions — designed for clear comparison, helpful education, and energy efficiency, and effortless maintenance so this longer sentence wraps to a second line and stays aligned under the text.
- A second category with a nested list
- A nested item that also wraps onto a second line to prove nested items hang correctly too
- Another nested item
- A third top-level list item — swap this for your own content
- A fourth top-level list item
Ordered — <ol>
- Choose the nearest service area or office from the available locations and book a time — this step wraps to a second line so you can see the number stays in the gutter while the text aligns.
- Book a no-pressure consultation with a client specialist
- Schedule delivery & professional installation
- Site & access check
- Electrical hook-up and water fill
- Relax — and lean on our ongoing service & support team
Description list — <dl>
- Primary Service
- The core offer visitors need to understand before they request a quote or consultation — the answer wraps to a second line and indents as a block.
- Secondary Service
- A secondary offer, package, or product category that supports the main service.
- Support Plan
- A recurring service, maintenance, or care package that keeps customers engaged.
Tables
Full-width, zebra-free tables with a header row, hover highlight and an optional
<caption>. Wrap in .table-wrap to scroll horizontally
on small screens.
| Location | Address | Weekday Hours | Phone |
|---|---|---|---|
| Location One | 123 Example Street, City, ST 00000 | Mon–Sat: 10:00AM – 6:00PM | (000) 000-0000 |
| Location Two | 456 Sample Avenue, City, ST 00000 | Mon–Sat: 10:00AM – 6:00PM | (000) 000-0000 |
| Location Three | 789 Placeholder Road, City, ST 00000 | Mon–Sat: 10:00AM – 6:00PM | (000) 000-0000 |
| Location Four | 1000 Demo Boulevard, City, ST 00000 | Mon–Sat: 10:00AM – 6:00PM | (000) 000-0000 |
| Location Five | 2200 Starter Lane, City, ST 00000 | Mon–Fri: 9:00AM – 5:00PM | (000) 000-0000 |
Buttons
Compose .btn with a variant. Works on
<a>, <button> and inputs.
Variants
Sizes — normal & bigger
class="btn btn-primary btn-sm" · (none = normal) · btn-lg · btn-xlFull width
class="btn btn-outline btn-block"Expandable Animated Button
class="btn-expand" > .btn-expand-circle (.btn-expand-plus) + .btn-expand-text — blue sweeps across on hoverForm fields
Cards
Standard Vertical Card
Horizontal Service Card
Cards, badges & notices
Card Title
A short supporting line of card body text.
.notice.notice--success.notice--errorIcon cards
Blue line-icon + uppercase title + text. Compose 3 across with
.grid.grid--3. (The "Trusted Professionals" cards.)
Certified Specialists
Experienced specialists who understand your customers from first question to follow-up.
Excellent Support
Quick response times, clear answers, and helpful troubleshooting every step.
Pure Peace of Mind
We don't pack up our tools until you are completely satisfied.
Feature cards
Photo beside icon/title/text/button. (The "Services for You" cards.)
Feature Title
A short description of a feature, service, or product highlight goes here.
Primary ActionValet Care Plan
Describe a recurring service, care plan, membership, or support package in plain language.
See Our PlansStats, badge & "+" CTA
Overlay link cards
Photo + dark gradient + corner arrow + bottom title. (The "Have Questions? / Careers" cards.)
CTA media card
Rounded photo beside an icon, uppercase title, text and a pill button. (The "Service Requests" card.)
Service Requests
Use this card to summarize a high-value action and point visitors to the next step.
Contact UsPill tabs & slider
A two-column .section-head, a row of .sr-tabs and a generic
.sr-slider carousel of .team-member cards. The tabs and
slider self-initialise from their data-sr-* hooks
(assets/js/components.js) — no per-page JS to write.
Client Brand
We often hear from long-time customers that their purchase was "the best thing we ever bought." That satisfaction is built on an extraordinary team of sales, service and installation professionals.
Responsive video embed
A 16:9 responsive frame. On the front end, pass a stored "video" field through
sr_video_embed( $url ) (handles YouTube, Vimeo and .mp4),
or write the iframe yourself inside .sr-embed.
Meta box fields
Editable content for a page template is declared with the field framework in
inc/fields.php — no ACF. Register a meta box with a config array and you
get a tabbed UI, media pickers, repeaters and dropdowns for free. Read values back
with plain get_post_meta().
Field types: text, textarea,
url, video, number, email,
select (needs options), checkbox,
image, wysiwyg, repeater (needs
fields).
sr_meta_box( array(
'id' => 'team_fields',
'title' => 'Team Section',
'post_types' => 'page',
'template' => 'page-team.php', // only this template
'fields' => array(
array( 'name' => '_team_heading', 'label' => 'Heading', 'type' => 'text' ),
array( 'name' => '_team_video', 'label' => 'Video URL', 'type' => 'video' ),
array( 'name' => '_team_layout', 'label' => 'Layout', 'type' => 'select',
'options' => array( 'grid' => 'Grid', 'slider' => 'Slider' ) ),
array( 'name' => '_team_members', 'label' => 'Members', 'type' => 'repeater',
'row_label' => 'Member', 'button' => '+ Add Member',
'fields' => array(
array( 'name' => 'photo', 'label' => 'Photo', 'type' => 'image' ),
array( 'name' => 'name', 'label' => 'Name', 'type' => 'text' ),
array( 'name' => 'role', 'label' => 'Role', 'type' => 'text' ),
) ),
),
) );
Full reference: inc/fields.php
Containers & grid
Wrap content in .container (1200px) or .container-wide
(1600px). Use .section for vertical rhythm and
.grid .grid--2/3/4 for responsive columns.
Helper classes
Centered — .text-center
Right — .text-right
Blue + bold — .text-blue .fw-800
Uppercase — .text-uppercase