Design System Template
Developer/Designer Reference Sheet
1. Colours
PRIMARY COLOUR
--color-primary
PRIMARY COLOUR DARK
--color-primary-dark
PRIMARY COLOUR LIGHT
--color-primary-light
SECONDARY COLOUR
--color-secondary
SECONDARY COLOUR DARK
--color-secondary-dark
SECONDARY COLOUR LIGHT
--color-secondary-light
BACKGROUNDS
--color-bg-light
--color-bg-gray
--color-bg-dark
--color-bg-gradient
TEXT
Aa
--color-text-primary
Aa
--color-text-secondary
Aa
--color-text-muted
Aa
--color-text-white
BORDERS
--color-border-light
--color-border-medium
--color-border-dark
UTILITY
--color-success
--color-warning
--color-error
--color-info
2. Typography
The quick brown fox jumps over the lazy dog
Class Name: h1
Size: --h1
Weight: 600 - Semi Bold
Line Height: 110%
The quick brown fox jumps over the lazy dog
Class Name: h2
Size: --h2
Weight: 600 - Semi Bold
Line Height: 120%
The quick brown fox jumps over the lazy dog
Class Name: h3
Size: --h3
Weight: 500 - Medium
Line Height: 120%
The quick brown fox jumps over the lazy dog
Class Name: h4
Size: --h4
Weight: 500 - Medium
Line Height: 130%
The quick brown fox jumps over the lazy dog
Class Name: h5
Size: --h5
Weight: 500 - Medium
Line Height: 130%
The quick brown fox jumps over the lazy dog
Class Name: h6
Size: --h6
Weight: 500 - Medium
Line Height: 140%
The quick brown fox jumps over the lazy dog
Class Name: body
Size: --body
Weight: 300 - Light
Line Height: 150%
The quick brown fox jumps over the lazy dog
Class Name: body-bold
Size: --body
Weight: 600 - Semi Bold
Line Height: 150%
The quick brown fox jumps over the lazy dog
Class Name: body-muted
Size: --body
Weight: 500 - Medium
Line Height: 150%
The quick brown fox jumps over the lazy dog
Class Name: body-small-text
Size: --body
Weight: 400 - Normal
Line Height: 150%
3. Buttons
Primary
Primary Hover
.btn .btn--primary
Secondary
Secondary Hover
.btn .btn--secondary
Link
Link Hover
.btn .btn--link
4. Sections
Light Section
This is a light background section. Perfect for main content areas and maintaining high readability.
.section--light
Dark Section
This is a dark background section. Ideal for creating visual contrast and highlighting important content.
.section--dark
Gray Section
This is a gray background section. Great for alternating sections and subtle visual separation.
.section--gray
Gradient Section
This is a gradient background section. Use for hero sections and call-to-action areas.
.section--gradient
5. Cards
Default Card
This is a standard card with white background and subtle border.
.card
Horizontal Card
This card has a horizontal layout with an image or icon area on the left.
.card .card--horizontal
Dark Card
A dark themed card for creating visual contrast.
.card-dark
Gradient Card
A gradient card perfect for featured content.
.card-gradient
Blog Card
Card with image header, ideal for blog posts and articles.
.card
"This is a testimonial card designed for customer reviews and quotes."
Jane Doe
Customer
.card-testimonial
6. Header
Home About
Services
Conversion Website
High-converting website built to generate qualified leads.
Contact
Home About
Services
Conversion Website
Full Lead System
Growth Accelerator
Contact
Get Started
7. Footer
Get clarity on what's working in your marketing system.
Services
Conversion Website Full Lead System Growth Accelerator
Company
Home About us Contact us
Follow
© 2026 Hills Media. All rights reserved.
Privacy policy Terms of service Cookie settings
8. Components
Frequently Asked Question 1
Traffic arrives but disappears before conversion happens.
Frequently Asked Question 2
Traffic arrives but disappears before conversion happens.
Frequently Asked Question 3
Traffic arrives but disappears before conversion happens.
.accordion
Tab 1
Tab 2
Tab 3
Content for Tab 1. Click tabs above to switch between content.
.tabs
Feature one with icon
Feature two with icon
Feature three with icon
.icon-list
.logo-slider
9. Grid Layouts
Column 1
Placeholder content for 2-column grid.
Column 2
Placeholder content for 2-column grid.
.grid--2col
Column 1
Placeholder content for 2-column grid.
Column 2
Placeholder content for 2-column grid.
Column 3
Placeholder content for 2-column grid.
.grid--3col
Column 1
Placeholder content for 2-column grid.
Column 2
Placeholder content for 2-column grid.
Column 3
Placeholder content for 2-column grid.
Column 4
Placeholder content for 2-column grid.
.grid--4col
10. States & Utilities
State Classes
Toggle
is-active
.is-active
Toggle
is-open
.is-open
Toggle
is-hidden
.is-hidden
Toggle
is-visible
.is-visible
Divider
.divider
Social Links Row
.socialmedia-links
11. Feature
Feature Card 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature Card 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature Card 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
12. Pricing
Pricing Card 1
Everything included
$12,000
Build my system
Conversion-focused website
Conversion-focused website
Conversion-focused website
Conversion-focused website
Pricing Card 2
Everything included
$16,000
Build my system
Conversion-focused website
Conversion-focused website
Conversion-focused website
Conversion-focused website
Pricing Card 3
Everything included
$20,000
Build my system
Conversion-focused website
Conversion-focused website
Conversion-focused website
Conversion-focused website
13. Contact Form
Get in Touch
You Can React Us Anytime.
14. Slider
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a making it look like readable English.
Kenneth Fong
Postgraduate Student
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a making it look like readable English.
Kenneth Fong
Postgraduate Student
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a making it look like readable English.
Kenneth Fong
Postgraduate Student
Key Highlights
250+
Projects Completed
98%
Client Satisfaction
15+
Years of Experience
120+
Team Members
Our Process
How This Template Works
01
Plan
Outline the structure and purpose of the website to create a clear direction.
02
Design
Build a clean and visually appealing layout using modern design elements.
03
Develop
Transform the design into a functional website with organized components.
04
Launch
Finalize the template and make it ready for customization and use.
About Us
Sample Website Introduction
This website is a sample template designed to demonstrate layout, structure, and design elements. It showcases how content can be organized to create a clean and user-friendly experience.

All text and images used here are for demonstration purposes only and can be easily customized to fit your own brand, business, or personal project. Use this template as a starting point to build something unique and tailored to your needs.
Features
Feature List
Featured One
Featured Two
Featured Three
View All Services
Book
Heading One
Support during the early stages of life, including concerns arising around birth and the newborn period.
Feature one with icon
Feature two with icon
Feature three with icon
Our approach focuses on close monitoring, reassurance, and supporting healthy development from the beginning.