USE-CASE EXAMPLES
The mockup below provides a close proximity to the Recycling & Skip Hire website.
It has been branded using the suggested Building Supplies and Supporting Colours pallets and styled with Style Option I which uses URW DIN-condensed for the headings, strapline and messaging and URW DIN for the body-text.
PANTONE 280 C
rgb: (12,57,132)
cmyk: (91,57,0,48)
HEX: #0C3984
PANTONE: 2945
rgb: (0,91,170)
cmyk: (100,46,0,33)
hex: #005CAB
PANTONE: 299
rgb: (0,161,222)
cmyk: (100,27,0,13)
hex: #00A2DE
Pantone: P 179-15 C
rgb: (57,57,57)
cmyk: (0,0,0,78)
HEX: #393939
rgb: (255,255,255)
cmyk: (0,0,0,0)
HEX: #FFFFFF
rgb: (240,240,240)
cmyk: (0,0,0,6)
HEX: #F0F0F0
rgb: (40,40,40)
cmyk: (0,0,0,84)
hex: #292929
rgb:(255,191,16)
cmyk: (0,25,94,0)
HEX: #FFBF0F
rgb: (125,224,71)
cmyk: (44,0,68,12)
HEX: #7EE048
rgb: (179,12,12)
cmyk: (0,93,93,30)
Hex: #B30C0C
rgb: (8,152,48)
cmyk: (95,0,68,40)
hex: #089931
rgb: (102,217,255)
cmyk: (60,15,0,0)
hex: #66D9FF
URW DIN-condensed
Heading:
font-family: URW DiN-condensed
font-weight: 800
Letter-spacing: -0.o1em
Line-height: 0.95em
The quick brown fox jumps over the lazy dog
Strapline:
font-family: URW DiN-condensed
font-weight: 700
Letter-spacing: -0.01em
Line-height: 0.95em
The quick brown fox jumps over the lazy dog
Default/Default Bold:
font-family: URW DiN
font-weight: 400
Letter-spacing: -0.05em
Line-height: 1.4em
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Home Products Services FAQ About Contact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Corned beef short loin tail andouille capicola, pastrami venison picanha ham strip steak jowl rump cupim. Pig ribeye burgdoggen short loin hamburger filet mignon ham hock corned beef venison chuck ham short ribs sausage capicola.
Biltong sirloin ham leberkas meatloaf spare ribs. Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Corned beef short loin tail andouille capicola, pastrami venison picanha ham strip steak jowl rump cupim. Pig ribeye burgdoggen short loin hamburger filet mignon ham hock corned beef venison chuck ham short ribs sausage capicola. Biltong sirloin ham leberkas meatloaf spare ribs.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Corned beef short loin tail andouille capicola, pastrami venison picanha ham strip steak jowl rump cupim. Pig ribeye burgdoggen short loin hamburger filet mignon ham hock corned beef venison chuck ham short ribs sausage capicola. Biltong sirloin ham leberkas meatloaf spare ribs.
Shank kevin leberkas chislic spare ribs swine. Tenderloin sausage meatball pork chop. Strip steak tenderloin landjaeger t-bone kevin chislic burgdoggen filet mignon.
Website Footer
The code shown below is the CSS font-styling for the website mockup.
Once the house-style has been finalised, the Design Specifications will include style guidelines for both print and web useage.
/* Paragraph/body text - URW-DIN */
.DIN_body p, .DIN_body ul, .DIN_body ol {
font-family: "urw-din", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.2em;
color: #393939;
letter-spacing: -0.03em;
line-height: 1.5em;
}
.DIN_body strong {font-weight: 700;}
.DIN_body a {color: #66D9FF; font-weight:700;}
.DIN_body ul {list-style-type: square; margin-left: 20px; margin-bottom: 20px; padding: 0;}
.DIN_body ol {margin-left: 25px; margin-bottom: 20px; padding: 0;}
/* Heading - URW-DIN-CONDENSED */
.DIN_con h1, .DIN_con h2, .DIN_con h3, .DIN_con h4, .DIN_con h5 {
font-family: "urw-din-condensed", sans-serif;
text-transform: normal;
line-height: 1.0em;
margin-bottom: 0.1em;
}
/* Uppercase Headings - URW-DIN */
.DIN_head h1 {font-size: 3.5em; margin-top: 0px;}
.DIN_head h2 {font-size: 2.8em; margin-top: 60px;}
.DIN_head h3 {font-size: 2.0em; margin-top: 40px;}
.DIN_head h4 {font-size: 1.5em; margin-top: 40px;}
.DIN_head h5 {font-size: 1.2em; margin-top: 20px;}
.DIN_head h1, .DIN_head h2, .DIN_head h3, .DIN_head h4 {
color: #393939; font-weight: 800; text-transform: uppercase;
}
/* Lowercase Straplines - URW-DIN */
.DIN_strap h1, .DIN_strap h2, .DIN_strap h3, .DIN_strap h4 {
color: #393939;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 0.95em;
margin-bottom: 10px;
margin-top: 0px;
}
/* General CSS */
.title h1, .title h2, .title h3 { margin: 0px!important;}
@media only screen and (min-width: 768px) {
.title {font-size: 1.5em; letter-spacing: -0.05em;}
}
.sml p, .sml ul, .sml a {font-size: 1.0em!important;}
.wht h1, .wht h2, .wht h3, .wht p, .wht ul {color: #fff!important;}
USE-CASE EXAMPLES
COLOURS