Visual Elements

A clean and consistent design should undergird everything we do at Entech. It gives the brand life, and helps us share our message in a way that’s professional and dependable. If we don’t have time to create something clean, consistent, and professional with who we are as a brand, we won’t spend time on it at all.

Logos

A clean and consistent design should undergird everything we do at Entech. It gives the brand life, and helps us share our message in a way that’s professional and dependable. If we don’t have time to create something clean, consistent, and professional with who we are as a brand, we won’t spend time on it at all.

The Logo

Use the Full Logo whenever possible. For publications to clients and internal system branding.

The Logo with slogan

Use the Full logo with slogan in items that are sent to customers and slim on content and not excessively wordy such as invoice emails.

The Logo Icon

The Entech Icon mark should only be used in cases where a company icon or avatar is required (traditionally constrained to a perfect square or circle only if the system rounds the square). In all other cases, use the logo.

Applications/Software Icons

Entech with no tag at 320×132 (For Google Workspace)

Entech Icon at 88×44

Entech Icon white and transparent

System/Windows Icon

Colors

The colors in our palette communicate the reliability of our product and the authenticity of our team’s values. They enhance the user experience, from the way customers engage with our service and receive a consistent view of Entech.

Text color classes

text-primary

text-secondary

text-tertiary

text-light

text-dark

Extra text color classes

text-success

text-danger

text-warning

text-info

text-body

text-muted

text-white

text-black-50

text-white-50

Main background colors

bg-primary (#02a3ee)

bg-secondary (#6dd52)

bg-tertiary (#ffffff)

bg-light (#efefef)

bg-dark (#00528c)

Extra background colors

bg-success (#6dd52d)

bg-danger (#dc3545)

bg-warning (#02a3ee)

bg-info (#00528c)

bg-white (#ffffff)

bg-transparent

Gradients

bg-gradient-primary

bg-gradient-secondary

bg-gradient-tertiary

bg-gradient-success

bg-gradient-danger

bg-gradient-warning

bg-gradient-info

bg-gradient-light

bg-gradient-dark

Standard Spacing

Reset the $spacer variable to change size of padding and margins. $spacer is in ems so the size will change depending on the parent element (e.g. mb-1 on a h1 tag will be different than on a p tag).

Margin top and bottom set to 0 (my-0)

Margin top and bottom set to 1 (my-1)

Margin top and bottom set to 2 (my-2)

Margin top and bottom set to 3 (my-3)

Margin top and bottom set to 4 (my-4)

Margin top and bottom set to 5 (my-5)

Padding set to 0 (p-0)

Padding set to 1 (p-1)

Padding set to 2 (p-2)

Padding set to 3 (p-3)

Padding set to 4 (p-4)

Padding set to 5 (p-5)

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Sample paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus pulvinar elementum integer enim neque volutpat ac. Est pellentesque elit ullamcorper dignissim. Sit amet consectetur adipiscing elit pellentesque. Sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.

Eu turpis egestas pretium aenean pharetra magna ac placerat. Molestie a iaculis at erat pellentesque adipiscing commodo. Sed ullamcorper morbi tincidunt ornare. Eget dolor morbi non arcu risus quis varius. Nisl vel pretium lectus quam id leo.

Interdum velit laoreet id donec ultrices tincidunt arcu. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Vel pharetra vel turpis nunc eget lorem. Ridiculus mus mauris vitae ultricies leo integer malesuada. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Duis at tellus at urna condimentum. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sed risus ultricies tristique nulla aliquet.

Standard List

You can use fontawesome to change bullets to icons.

Note that “list-unstyled” gets rid of bullets.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem