style guide
Logo
Cobranding Clearspace
Minimum Logo Height
Typography
H1 · Bodar
H2 · Bodar
H3 · Avenir
H4 · Optician Sans
H5 · Optician Sans
H6 · Avenir
Avenir text voice and tone are similar, but not synonymous, aspects of brand-building. “Voice” means the consistent, overall personality of a brand. At the same time, “tone” is the mood a brand expresses depending on the situation - it’s all a bit ethereal and in flux, but it’s important to have a sense of the Grey + Miller voice and tone before communicating with the market.
rich text
H1 in rich text
H2 in rich text
H3 in rich text
H4 in rich text
H5 in rich text
H6 in rich text
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
- Easily make lists
- Manage all the template styles from one page
- Add images and other media
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
- Numbered lists are a great way to order ideas
- Edwin template is packed full of features
- Build your agency website with Edwin
colors
Primary
The GMA color pallet should be founded in the neutral colors, and accentuated by bold sections of color.
RGB (233, 233, 233)
H 0 S 0 L 0.91
C 0% M 0% Y 0% K 9%
R 255 G 255 B 255
H 0 S 0 L 1
C 0% M 0% Y 0% K 0%
RGB (17, 17, 17)
H 0 S 0 L 0.07
C 0% M 0% Y 0% K 93%
RGB (33, 173, 228)
H 196.92 S 0.78 L 0.51
C 76% M 22% Y 0% K 11%
PMS 306 C
RGB (222, 1, 161)
H 316.56 S 0.99 L 0.44
C 0% M 87% Y 24% K 13%
PMS Rubine Red
RGB (255, 242, 0)
H 56.94 S 1 L 0.5
C 0% M 5% Y 100% K 0%
PMS 108 C
Secondary
Should only be used as a result of a CMYK 'multiply' blend.
RGB (208, 0, 0)
H 0 S 1 L 0.41
C 0% M 82% Y 82% K 18%
RGB (29, 144, 0)
H 107.92 S 1 L 0.28
C 45% M 0% Y 56% K 44%
RGB (78, 40, 125)
H 266.82 S 0.52 L 0.32
C 18% M 33% Y 0% K 51%
Color Foundations
GMA's color pallet is inspired by CMYK color or "process color", a subtractive color model used in printing.
The CMYK model works by partially or entirely masking colors on a lighter, usually white, background. The ink reduces the light that would otherwise be reflected. Such a model is called subtractive because inks “subtract” the colors red, green, and blue from white light. White light minus red leaves cyan, white light minus green leaves magenta, and white light minus blue leaves yellow. In the CMYK model, white is the natural color of the background, while black results from a full combination of colored inks.
GMA illustrations play off the subtractive printing process as well as the RGB color process used in TVs by using a 'multiply' blend mode when using Cyan, Magenta and Yellow objects.
Photography
Outside of a studio setting, our photographs and footage should be diegetic lit (naturally, or of the scene or place).
This doesn't mean we don't meticulously light our subjects, quite the opposite, rather we should strive to make the scene achieve the desired mood without the visual focus being the lighting.
Our lifestyle imagery is meant to feel real and not posed. So look for imagery that isn’t perfect or clean. That can come through cropping, composition, subject matter, or interplay between elements.
All photos should be expressive, well-composed, never contrived or over-posed.
Illustrations
Built from simple, related shapes–GMA illustrations should be bold and iconic. All three colors–Cyan, Magenta and Yellow should 'multiply' (using blend mode 'multiply') together to create new vibrant spectrums and rich blacks.
