Chapter 3 — Build the Visual Design System

Introduction

Now that you know the purpose of your website and have organized its content, it is time to create the visual design system.

A visual design system is the collection of rules that determines how your website looks and feels. It includes colors, typography, spacing, buttons, cards, images, icons, borders, shadows and other reusable visual elements.

Without a design system, a website can quickly become inconsistent. One button may have a different shape from another. One section may use 40 pixels of spacing while another uses 73 pixels. Headings may use several unrelated fonts. Colors may change from section to section.

The result can look amateurish even when individual sections look attractive.

A design system solves this problem.

Think of it as the visual language of your template.

Once the rules are established, you can use them repeatedly across every page.

3.1 Start With the Brand Personality

Before choosing specific colors, decide how the template should feel.

Ask yourself:

What should a visitor feel when they open the website?

For a weight-loss and wellness template, possible answers include:

• Healthy.
• Calm.
• Energetic.
• Modern.
• Natural.
• Friendly.
• Professional.
• Trustworthy.
• Motivational.
• Premium.

You do not need all of these.

Choose three or four characteristics.

For example:

Modern + Natural + Friendly + Trustworthy

This combination gives you a clear direction.

The visual design might then use:

• Soft natural colors.
• Clean typography.
• Rounded cards.
• Generous whitespace.
• High-quality lifestyle photography.
• Simple icons.
• Clear CTA buttons.

Another template might use:

Energetic + Modern + Strong

That could lead to:

• Higher contrast.
• Larger typography.
• Stronger buttons.
• Dynamic photography.
• More dramatic layouts.

The design should reflect the intended audience.

3.2 Choose a Primary Color

The primary color is one of the most recognizable parts of your template.

For a weight-loss website, you might consider colors such as:

• Green.
• Sage.
• Teal.
• Blue.
• Warm beige.
• Coral.
• Soft orange.

However, there is no universal “weight-loss color.”

The important thing is consistency.

For example, you could create a palette around:

Primary: Sage green

Secondary: Deep green

Background: Warm cream

Text: Dark charcoal

Accent: Soft orange

The primary color could be used for:

• Main buttons.
• Links.
• Important labels.
• Selected navigation items.
• Small decorative elements.

Do not use the primary color everywhere.

If everything is green, nothing appears important.

3.3 Create a Five-Color System

A simple commercial template can often begin with five core colors.

1. Primary

Used for major actions.

2. Secondary

Used for supporting elements.

3. Background

Used for the main page or major sections.

4. Text

Used for headings and body content.

5. Accent

Used sparingly to highlight special information.

For example:

:root {
    --primary: #6b8e68;
    --secondary: #355c4d;
    --background: #f8f6ef;
    --text: #26332d;
    --accent: #e9a45c;
}

These are only example values.

The important concept is the use of variables.

If you later decide that the primary color should change, you can update one value rather than searching through hundreds of CSS rules.

3.4 Think About Color Psychology Carefully

Colors can influence perception, but do not rely on simplistic claims such as “green automatically makes people lose weight.”

Instead, think about visual associations.

Green can suggest:

• Nature.
• Freshness.
• Health.
• Growth.

Blue can suggest:

• Calmness.
• Reliability.
• Professionalism.

Orange can suggest:

• Energy.
• Warmth.
• Activity.

Neutral colors can suggest:

• Simplicity.
• Sophistication.
• Cleanliness.

The complete palette matters more than any single color.

A bright neon green may communicate something completely different from a muted sage green.

3.5 Check Color Contrast

A beautiful color combination is not necessarily an accessible color combination.

For example, light gray text on a white background may look elegant in a design tool but become difficult to read.

Always check contrast between:

• Body text and background.
• Button text and button background.
• Navigation text and navigation background.
• Form labels and backgrounds.
• Footer text and footer background.

Accessibility should be considered from the beginning rather than added at the end.

3.6 Choose Your Typography

Typography is one of the most important parts of website design.

A template can have excellent photography and still look unprofessional if its typography is poorly chosen.

Start with two questions:

What should the headings feel like?

What should the body text feel like?

For example:

Heading Font

Modern and slightly expressive.

Body Font

Simple and highly readable.

You can use two different font families, or one family with several weights.

A single-font system can actually look very sophisticated when properly designed.

3.7 Establish a Typography Hierarchy

Do not choose font sizes randomly.

Create a hierarchy.

For example:

Display Heading

56–72px desktop.

Main Heading

42–52px.

Section Heading

32–40px.

Card Heading

20–24px.

Body Text

16–18px.

Small Text

13–14px.

These values are examples rather than strict rules.

The exact sizes should depend on the chosen font and overall design.

The important principle is that visitors should immediately understand which text is more important.

3.8 Make Body Text Comfortable

A common beginner mistake is using extremely small text.

A website may technically fit more information on the screen, but readability becomes worse.

For most websites, body text around 16–18 pixels is a useful starting point.

Also consider line height.

For example:

body {
    font-size: 17px;
    line-height: 1.7;
}

The actual value can change depending on the font.

Long paragraphs need breathing room.

3.9 Control Paragraph Width

A paragraph stretching across an entire large monitor can be difficult to read.

Instead, limit the reading width.

For example:

.article-content {
    max-width: 760px;
    margin: 0 auto;
}

This creates a comfortable reading column.

For a commercial template, this is particularly important because buyers may add longer articles later.

3.10 Create a Spacing System

Spacing is one of the invisible elements that makes a design feel professional.

Instead of using random values such as:

• 17px.
• 29px.
• 43px.
• 61px.
• 87px.

create a spacing scale.

For example:

:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
}

Now you have a predictable rhythm.

You can use smaller spacing inside components and larger spacing between major sections.

3.11 Use White Space Intentionally

White space is not wasted space.

It gives content room to breathe.

Imagine a hero section with:

• A large heading.
• A paragraph.
• Two buttons.
• An image.
• Several decorative shapes.

If everything is packed together, the design feels stressful.

Increase the spacing between major elements.

The same content can suddenly feel premium and calm.

This is especially useful for wellness-related designs.

3.12 Design the Primary Button

Your primary button should be immediately recognizable.

A basic example:

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

The actual colors and dimensions should come from your design system.

The button should have:

• Normal state.
• Hover state.
• Focus state.
• Active state.
• Disabled state where appropriate.

Do not rely only on color to communicate these states.

3.13 Choose Button Shapes

Buttons can be:

• Square.
• Slightly rounded.
• Rounded.
• Pill-shaped.

For a modern wellness template, slightly rounded buttons often create a friendly appearance.

For a premium editorial design, subtle corner rounding may look more sophisticated.

The important thing is consistency.

If your primary buttons have an 8px radius, do not randomly give another primary button a 30px radius.

3.14 Create Secondary Buttons

Not every action should have the same visual strength.

A secondary button can use:

• Outline.
• Neutral background.
• Text-link appearance.

For example:

Primary: Explore Programs

Secondary: Read Free Guides

This creates a clear hierarchy.

If every button looks equally strong, visitors may hesitate.

3.15 Design Article Cards

Article cards will probably become one of the most frequently reused components in a weight-loss content template.

A typical card can contain:

Image

Category

Article Title

Short Description

Read More

For example:

NUTRITION
7 Practical Habits for Better Meal Planning
Simple ideas for organizing everyday meals.
Read Article →

Keep the structure consistent.

3.16 Use Consistent Image Ratios

Suppose your first article image is 800 × 500 pixels.

If the next image is extremely tall, the card grid may look uneven.

Define an image ratio.

For example:

.article-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

Now different source images can fit into the same visual frame.

This is extremely useful in commercial templates because buyers will replace your demo images.

3.17 Design Feature Cards

Feature cards can explain the main categories of the website.

For example:

Nutrition

Explore practical information about balanced eating.

Movement

Discover ways to add more activity to everyday life.

Healthy Habits

Build routines that support a healthier lifestyle.

Each card might include:

• Icon.
• Heading.
• Description.
• Link.

Do not add icons merely because every card “needs an icon.”

The icon should reinforce the meaning.

3.18 Create an Icon System

Choose one visual icon style.

For example:

Outline icons

or

Filled icons

or

Minimal line icons

Avoid mixing five different styles.

If your nutrition card uses a thin outline icon, your movement card should use a similar visual language.

Consistency creates professionalism.

3.19 Design Forms

Forms are often neglected in template design.

A basic newsletter form might contain:

Email Address

Get Healthy Guides

The field should have:

• Label.
• Input.
• Focus state.
• Error state.
• Success state.
• Submit button.

Never rely only on placeholder text as the label.

For example, this is weaker:

Email Address

inside the field that disappears when typing.

A visible label remains clear.

3.20 Design the Newsletter Section

The newsletter section can become one of the most important conversion components.

A simple structure could be:

Get Practical Wellness Tips

Receive new articles, guides and useful resources.

[ Email Address ] [ Subscribe ]

The design should make the benefit clear.

Avoid:

Subscribe to Our Newsletter

without explaining why someone should subscribe.

Give visitors a reason.

3.21 Design Trust Sections

Trust elements may include:

• Author profile.
• Professional credentials.
• Editorial policy.
• Genuine testimonials.
• Sources.
• Transparent contact information.

The design should communicate credibility without exaggeration.

For example:

Written With Care

Educational content reviewed and updated according to the site’s editorial process.

This type of section can be useful when the actual website has a legitimate editorial policy.

3.22 Design Testimonials Responsibly

If you include testimonials in the template, use clearly identified sample content.

For example:

“Sample testimonial content can be replaced with a verified customer experience.”

Do not create fake testimonials and present them as real.

When the buyer installs the template, they should understand which content needs replacement.

This is particularly important for health and wellness websites.

3.23 Create a Section Heading Component

Many sections can use a common heading pattern.

For example:

EXPLORE OUR RESOURCES

Practical Guides for a Healthier Lifestyle

Supporting description.

This creates consistency throughout the website.

The component might include:

<div class="section-heading">
    <span class="eyebrow">Explore Our Resources</span>
    <h2>Practical Guides for a Healthier Lifestyle</h2>
    <p>Helpful educational content designed for everyday readers.</p>
</div>

Now the same pattern can be reused throughout the website.

3.24 Create a Container System

The website should have a consistent maximum content width.

For example:

.container {
    width: min(92%, 1180px);
    margin-inline: auto;
}

This means the content remains centered while maintaining comfortable margins.

You can use the same container for:

• Header.
• Hero.
• Content sections.
• Blog.
• Resources.
• Footer.

This creates alignment across the entire website.

3.25 Design the Header

The header is one of the first elements visitors see.

A typical structure might be:

Logo

Home

About

Programs

Blog

Resources

Contact

Get Started

Keep the header clean.

Do not overload it with unnecessary elements.

On mobile, the navigation can collapse into a menu.

3.26 Create the Footer Design

The footer should visually belong to the same design system.

Use the same:

• Typography.
• Color palette.
• Spacing.
• Button style.
• Link style.

Possible footer structure:

Brand

Short description.

Explore

About
Programs
Blog

Resources

Guides
Recipes
FAQ

Connect

Social links.

Legal

Privacy
Terms
Disclaimer

3.27 Create a Design Token File

At this stage, gather your main design rules into one place.

For example:

:root {

    /* Colors */
    --primary: #6b8e68;
    --secondary: #355c4d;
    --background: #f8f6ef;
    --text: #26332d;
    --accent: #e9a45c;

    /* Spacing */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* Container */
    --container: 1180px;
}

This is the beginning of a real design system.

3.28 Build a Style Guide Page

If you are creating a commercial template, consider adding a style-guide page.

The page can display:

Typography

Heading 1
Heading 2
Heading 3
Body Text
Small Text

Colors

Primary
Secondary
Accent
Background
Text

Buttons

Primary
Secondary
Text Link

Components

Cards
Forms
Alerts
Testimonials
FAQ

This gives buyers an immediate understanding of how the template works.

3.29 Think About Customization

A commercial buyer may want to change the design.

Ask:

Can the buyer easily change the primary color?

Can the buyer replace the logo?

Can the buyer change the typography?

Can the buyer replace the hero image?

Can the buyer add another article card?

Can the buyer duplicate a section?

If the answer is yes, your template is becoming a useful product rather than just a visual demonstration.

3.30 Practical Exercise

Create your first visual design sheet.

Write down:

Brand Personality

Example:

Modern + Natural + Friendly + Trustworthy

Color Palette

Choose:

• Primary.
• Secondary.
• Background.
• Text.
• Accent.

Typography

Choose:

• Heading font.
• Body font.
• Heading sizes.
• Body size.
• Line height.

Spacing

Choose approximately:

• Small.
• Medium.
• Large.
• Section.

Components

Design:

• Primary button.
• Secondary button.
• Article card.
• Feature card.
• Form.
• Section heading.

Do not move to full-page design yet.

First make sure these components look good individually.

3.31 The Golden Rule of the Design System

Remember this principle:

Consistency is more valuable than decoration.

You do not need:

• Ten gradients.
• Twenty animations.
• Fifteen font styles.
• Dozens of colors.
• Complicated shapes.

You need a small number of strong decisions used consistently.

A visitor should feel that every section belongs to the same website.

Conclusion

The visual design system is the bridge between your research and the actual website.

You now have the foundation for:

• Colors.
• Typography.
• Spacing.
• Buttons.
• Cards.
• Images.
• Icons.
• Forms.
• Containers.
• Header.
• Footer.
• Trust elements.
• Responsive components.

Do not rush into coding the entire website yet.

The next step is to transform this visual system into a wireframe.

A wireframe will show where the content goes before you spend time perfecting colors, photographs and visual effects.

In Chapter 4, we will create the website wireframe step by step—from the header and hero section to the homepage, blog, forms and footer.