main-wrapper
JACKSON AUTOMOTIVE GROUP
Style Guide
Style Guide
The Jackson Automotive Group strives to offer our customers exceptional value through a wide range of high-quality vehicles, competitive pricing, and tailored financing solutions. Our mission is to build lasting relationships with our clients by providing reliable automotive services and outstanding customer care. Whether their purchasing their next car or visiting for maintenance, we are committed to making everyone's experience smooth, enjoyable, and rewarding.
Overview
The purpose of this style guide is to help you understand how to properly represent Jackson Automotive Group and its dealerships. It lays out all the elements, components, tools, and resources used to develop it. Each section begins with a tutorial to reinforce you further. If you have any questions, please reach out marketing@jacksonautomotive.com
Consistency Across Channels
Our brand identity must remain consistent across all communication platforms, ensuring that messaging, visuals, and tone reflect a unified and professional image, fostering recognition and trust among our audience.
Customer-Centric Approach
Every aspect of our branding prioritizes the customer experience, creating a relatable and trustworthy brand that resonates with our audience and aligns with their needs and values.
Timeless and Professional Design
The design elements of our brand are crafted to reflect a balance of sophistication and modernity, ensuring a timeless appeal that underscores the brand's heritage and forward-thinking vision.
Adaptability and Scalability
Our branding is built to evolve with changing trends and business needs, allowing for updates and growth while maintaining the integrity and recognizability of the core identity.
Colors
The Jackson Automotive Group color palette is a vital element of our brand identity, representing trust, reliability, and sophistication. The carefully chosen primary and secondary colors ensure consistency across all platforms while allowing flexibility for various applications. By adhering to this palette, we create a unified visual presence that reinforces brand recognition and resonates with our audience.
Typography
The Jackson Automotive Group typography reflects our brand’s professionalism, clarity, and modernity. By using a consistent font family for headlines, body text, and accents, we ensure readability and visual harmony across all platforms. This unified approach to typography reinforces our brand identity, enhances communication, and maintains a polished and cohesive look in every application.
Logo
The Jackson Automotive Group, Inc. logo embodies a classic and elegant design with a focus on simplicity, professionalism, and trust. Its elements convey the brand's dedication to excellence and customer satisfaction. This logo represents more than just a name; it’s a mark of trust and assurance that every car sold and every interaction with Jackson Automotive Group meets the highest standards of quality and customer care.
Primary Logo
- Typography: A sophisticated cursive script spells out "Jackson," resembling a signature. This conveys a sense of authenticity, trust, and a personal connection. The handwritten style reflects the brand’s "seal of approval" and commitment to standing behind every vehicle and customer experience.
- Supporting Text: Below "Jackson," the words "AUTOMOTIVE GROUP, INC." are presented in a clean, all-caps sans-serif font. This provides balance to the fluidity of the script above and ensures clarity and readability.
- Symbolism: The signature-style "Jackson" serves as a metaphor for the company’s "sign-off" on every car and customer interaction, ensuring quality and satisfaction. It represents the brand’s promise to deliver excellence in every aspect of its service.
- Color Scheme: Rendered in Jackson Navy and white, the logo exudes timelessness and adaptability, suitable for various applications and backgrounds.
- Design Balance: The sweeping stroke of the “J” in “Jackson” adds movement and flow, drawing the eye through the logo in a seamless and engaging manner.
Primary Logo
The logo with the dealership icons (Mercedes, Volvo, Subaru, Volkswagen, Kia) emphasizes Jackson Automotive Group's diverse portfolio and expertise in handling multiple premium automotive brands. This version highlights both the corporate strength and the dealership offerings.
Corporate Logo
The logo without the dealership icons represents Jackson Automotive Group independently, focusing on the corporate identity rather than individual brands. This version emphasizes professionalism, trust, and the group's overall reputation.
Dealership Logos
The primary logo and its dealership-specific variants must always adhere to OEM branding guidelines, including clear space, color usage, and proper scaling, to maintain a cohesive visual identity.
This logo variation is designed to convey the Jackson Automotive Group’s professionalism and cohesive brand identity in spaces that require a concise and symmetrical presentation. Its square shape makes it versatile and easily adaptable to a variety of uses without losing its visual impact.
The stacked text layout is perfect for compact branding applications where a balanced, modern aesthetic is essential.
The horizontal text layout is ideal for scenarios requiring clear, linear readability and use in wide spaces, providing a clean, organized look.
This logo variation is designed to maximize clarity and impact in wide spaces. Its sleek, linear design ensures it remains professional and visually striking, making it ideal for applications requiring extended horizontal formats. It balances elegance with practicality, reinforcing Jackson Automotive Group's brand identity across all mediums.
Product information, Lorem Ipsum. Fuga atque qui. Ullam facere quibusdam. Dolorem ut id. Eum ullam laborum et. Aliquam voluptate ut.
Product title
Aut aliquam et at quod. Fuga atque qui. Ullam facere quibusdam. Dolorem ut id. Eum ullam laborum et. Aliquam voluptate ut.
Product title
Product information, Lorem Ipsum. Fuga atque qui. Ullam facere quibusdam. Dolorem ut id. Eum ullam laborum et. Aliquam voluptate ut.
Product title
Product information, Lorem Ipsum. Fuga atque qui. Ullam facere quibusdam. Dolorem ut id. Eum ullam laborum et. Aliquam voluptate ut.
Text Classes
Typography organization keeps your brand professional. Use class prefix text- on a piece of text to change the size of the text. This project uses a global classing system based on Client-First. This project uses a 4pt system based on REM measurements. When you need to convert units such as pixels to REM, select your input field and type 20/16rem and it automatically calculates the difference and converts.
text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-linktext-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.
Text Weights
Style font-weight css to make text more or less bold.
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text Alignments
Style text-align css to make text, or other elements, align left, center, or right.
text-align-left
text-align-center
text-align-right
Rich Text
A rich text element (RTE) is perfect for creating long-form content for blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double click into a rich text element to create these different content elements directly. RTE also makes it easy for collaborators (e.g. team members or clients) to edit rich content within the Editor.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
- The rich text element allows you to create and format headings,
-
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Buttons
A button serves as your call to action (CTA) and links to pages, forms, assets, and more. They should be as universal and global as possible.
Icons
Use global classes for your icons to easily manage them across the project. These are great for company logos, footer assets, etc. Avoid using them on elements that likely require unique customization on tablet or mobile. Please upload icons in the SVG format to avoid pixelation. If you want to embed them like the social media icons below, you can Find more icons here and add property fill='currentColor' inside of the <svg> tag to control the color of the icon through font color style.
Icon Sizes
Icons 1x1 Sizes
Social Media
Elements
In addition to the primary elements featured in this style guide, Webflow offers many more building blocks. This course walks through all the available elements, pointing out common examples and making suggestions to help you get the most out of each element.
List
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
- Sample text is being used as a placeholder for real text that is normally present.
Form
Custom Code
The following snippets were used in this project. There are three ways to add custom code to this project. You can embed it directly into your page, insert it in your page settings, or host it on another server and then embed it as a script file. You can also upload the script file within your project as an asset and embed it.
Dynamic Copyright Year
<script>
const year = new Date().getFullYear();
$('.year').text(year);
</script>
Title
Your Code
Resources
Take your Webflow game to the next level with these tools and services.
Finsweet Attributes
Give your Webflow website superpowers, such as advanced filtering, search, and much more.
Flowbase
Flowbase is the largest Webflow resource site, with premium components, templates, and guides.
Webflow University
Learn web design, development, and the ins and outs of Webflow through comprehensive tutorials.
Accessibility Checklist
Your website should be inclusive of, and accessible to, as many people as possible. This essential tool for Webflow users contains guidelines derived from WCAG, including how to implement them with no and low-code solutions.
Default Easings
Linear (None)
Ease
Ease In
Ease Out
Ease In Out
In Quad
In Cubic
In Quart
In Quint
In Sine
In Expo
In Circ
In Back
In Elastic
Out Quad
Out Cubic
Out Quart
Out Quint
Out Sine
Out Expo
Out Circ
Out Bounce
Out Back
Out Elastic
In Out Quad
In Out Cubic
In Out Quart
In Out Quint
In Out Sine
In Out Expo
In Out Circ
In Out Back
In Out Elastic
Bounce
Bounce Past
Swing From To
Swing From
Swing To
Structure
This project was developed using the Client-First methodology by Finsweet to enable anyone that opens this Webflow Project to understand how it was structured and built. These are the primary pillars that were used.
Structures
page-wrapper
page-padding
Containers
container-large
container-medium
container-small
Max Widths
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Margins
margin-0
margin-tiny
margin-xxsmall
margin-small
margin-small
margin-medium
margin-large
margin-large
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Paddings
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Padding Directions
padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal
Margin Directions
margin-top
margin-bottom
margin-left
margin-right
margin-vertical
margin-horizontal
Responsiveness
hide
show
show-tablet
show-mobile-landscape
show-mobile-portrait
Utility
spacing-clean
z-1
z-2
align-center
div-square
clickable-on
overflow-hidden
overflow-scroll
overflow-auto