Language

Currency

USD: $

Change

You are shopping on MaxTech United Kingdom.

Change Country / Region

This is just for demonstration.

MaxTech

Faster checkout

Save your details, and enjoy a faster checkout every time.

Order tracking

View your current and past orders in one place.

$0.00 0

Buy Maxtech Theme

Maxtech theme

Style Guide

A comprehensive guide to the visual language, typography, colors, and components that define the Maxtech theme.

Colors

Our color palette is designed to convey trust, innovation, and professionalism while maintaining accessibility standards.

Primary Colors

Primary

#0046be

Primary Hover

#003ba3

Primary Light

#003ba3

Secondary Colors

Secondary

#ffe000

Secondary Hover

#ffe000

Secondary Border

#d2b800

Secondary Border Hover

#FFF7ED

Neutral Colors

Blue 50

#eff6ff

Blue 100

#dceafa

Gray 100

#f3f4f6

Gray 200

#e5e7eb

Gray 300

#d1d5db

Gray 400

#9ca3af

Gray 500

#D6D3D1

Gray 700

#374151

Gray 800

#1f2937

Gray 900

#111827

More Colors

Rose

#ff2056

Red

#fb2c36

Orange

#ffb800

Green

#008b53

Typography

We use Inter for headings and Inter for body text, creating a modern and highly readable typographic system.

Body Font

Inter

Used for body text and UI elements. A highly legible sans-serif optimized for screens.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789

H1 / Inter 48px / 700

Display Heading

H2 / Inter 30px / 700

Page Heading

H3 / Inter 31px / 700

Section Heading

H4 / Inter 25px / 700

Subsection Heading

H5 / Inter 20px / 700

Card Heading

H6 / Inter 16px / 700

Small Heading

Lead / Inter 17px / 400

This is lead paragraph text used for introductions and hero sections. It provides a larger, more prominent presentation for important content.

Body / Inter 16px / 400

This is the standard body text size used throughout the website. It balances readability with efficient use of space for general content.

Buttons

Buttons are used for primary actions and navigation. They use square corners to align with our geometric design language.

Base Buttons

Primary Button

Secondary Button

Outline Primary

Light Button

Button with Icons

Primary Button

Secondary Button

Outline Button

Light Button

Forms

Form elements maintain consistent styling with clear focus states and validation feedback.