Grid system

We use a 12 column responsive, mobile first grid. There are predifined classes that make it easy to use and can be used for any part of the site layout.
Primary Grid
We use a 12 column responsive, mobile first grid. There are predifined classes that make it easy to use and can be used for any part of the site layout.
Grid 12 560PX
Grid 12 370PX

Colors

Valmont uses color to communicate how things function. This helps us create interfaces that can make interacting with our product more predictable for users.
Primary Colors
The brand colors are equal in status and should bring focus to what matters most. Color should be used purposefully, and support page hierachy.
brand-pri
#5e514d
brand-sec
#005f83
Neutral Colors
warmgrey-90
#262626
warmgrey-80
#333333
warmgrey-70
#666666
warmgrey-60
gray
warmgrey-50
#999999
warmgrey-40
#b3b3b3
warmgrey-30
#cccccc
warmgrey-20
#e6e6e6
warmgrey-10
#fafafa
coolgrey-90
#22262a
coolgrey-80
#2d3338
coolgrey-70
#5b6770
coolgrey-60
#72818c
coolgrey-50
#8e9aa3
coolgrey-40
#aab3ba
coolgrey-30
#c6ccd1
coolgrey-20
#e2e5e8
coolgrey-10
#f9f9fa
Content accessibility
WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text. This color contrast tool is a useful resource for testing the compliance of any color combination.

Typography

The typography styles of Valmont Industries creates a flexible system which helps maintain typographic clarity and hierachy across all our products.
Roboto
Roboto is the standard typeface for Valmont Industries. Roboto has six weights: Thin, Light, Regular, Medium, Bold, and Black. All font sizes use rem with a px fallback. We also use Roboto as our body copy with the base font size of 1rem. It is slightly wider and rounder, giving it clarity to work across a wide set of supported platforms.
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Type sizes, spacing and alignment
The type scale, line spacing and spacing between headline, subheadline, copy can be freely selected. Bold can also be used for additional emphasis in headlines, sub-headlines and calls to action. The alignment can be flush-left, flush-right or centered. Typography appears in mixed case.

Header Level 1

32px/42px
Regular

Header Level 2

32px/42px
Regular

Header Level 3

32px/42px
Regular

Header Level 4

32px/42px
Regular
Header Level 5
32px/42px
Regular
Header Level 6
32px/42px
Regular
Header Level 7
32px/42px
Regular
Paragraphs
This is a paragraph. It's designed for readability and optimizing the number of characters per line. The font size is chosen to account for longer chunks of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt orci ipsum, ut condimentum odio pharetra sit amet. Nunc hendrerit maximus venenatis. Curabitur urna neque, sodales non enim.
Unordered List
  • This is an unordered
  • list for which
  • you can make list.
Ordered List
  1. This is an ordered
  2. list for which
  3. to number itmes.

Imagery

The imagery of Valmont exude an authentic snapshots from our everyday industrialized world. They should look natural, contain a balance of product and people, and support the Valmont story.
Image style and impressions
In terms of their overall impression, we want to capture the gravitas of our mission. We need imagery that is heroic, and reflects the granduer of projects we work on and the dedication of our people. The visual style is reduced and straightforward, situations shown communicate a feeling of confidence.
Heroic Imagery
We need imagery that is heroic and that captures candid moments.
Focus and color
The style of our photographs is a bright, dynamic and reflects the grandeur of the projects we work on.

Icon Library

The icon style of Valmont is originated from technical renderings. Icons should be consistent in use and construction, by means of a fine constant thick line and that avoids any filled-in blocks.
Primary Icons
Valmont icons have been designed for a specific use. Using multiple icons to represent the same concept reduces efficacy of the icon and creates confusion in the relationship between the icon and the idea. Icons are generally applied in black and white.
View More

Data Visualization

The data visualization style of Valmont is used to provide a supporting visual to provide greater clarity and understanding to real time data.
Our primary goal for data visualization
Data should not be overly complicated and hard to understand that is why we want to have a clear question that needs to be answered. "What percent of the business is structures?" These standards will help us maintain a consistent style and format for all our data visualizations, which ensures that the data presented is truthful and accurate.
4.1B
FY'16
6.1B
FY'17
83% YoY
8.2B
Payment Transactions up 24% YoY

Structures

75%

Payment Transactions up 24% YoY

Animations

Animation may be used in a wide range of contexts to unite design and functionality.
Primary Animations
Animations include directionality (horizontally and vertically, relating to origin and completion of tasks), enter/exit (fade in, fade out, zoom in, zoom out), and duration (speed of enter/exit relating to urgency or content type).A card may smoothly transition to grow to give focus on that particular element. This effect both informs the user of the card's function while adding an element of wonder to the interaction.
Grow-Small
Grow
Dim
FadeIn
fadeInUp
FadeInDown
* Refresh to see animations.