Typography
Utopia Std – https://fonts.adobe.com/fonts/utopia
Key headline example
Work Sans – https://fonts.adobe.com/fonts/work-sans
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Typography Stack: Desktop
H1 (DEF) – Example headline text line.
H2 (LG - B) – Example headline text line.
H3 (MED - B) – Example headline text line.
H4 (S) – Example headline text line.
H5 (M - B) – Example headline text line.
H6 (S) – Example headline text line.
Paragraph – Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Paragraph Style A – Smaller line-height – Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Paragraph Style B – Raw Honey, Smaller Text – Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Paragraph Style C – Smaller Text, Smaller Line-Height – Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Waterfall example
example headline.
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
example headline.
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate. Orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Colors
Color palette – typography
Example Headline
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Color palette – section backgrounds
This website will have a lot of sections over a pure white background
Used to help differentiate sections and/or behind cards. Primary background that alternates with white sections
An alternate color to differentiate sections and/or behind cards
Used for call-to-action or other important callouts
Used for call-to-action or other important callouts
Box Shadows
0 4px 8px rgba(0,0,0,0.15)
Buttons, links & HTML elements
Buttons & links
This is what a default link within text looks like.
Ordered list
- List item example
- List item example
- List item example
- List item example
Un-Ordered list
- List item example
- List item example
- List item example
- List item example
- List item example
Blockquote
Lorem ipsum dolor sit amet consectetur adipiscing elit orci dis, turpis ad maecenas praesent a taciti egestas nullam, facilisi convallis conubia montes laoreet proin eleifend vulputate.
Dividers and Borders
1px solid #D1CFB7
Tables
Table header column | Table header column | Table header column |
---|---|---|
Table body | Table information | More information |
Table body | Table information | More information |
Table body | Table information | More information |
Table body | Table information | More information |
Icon Lists
- You are an active 501©(3) nonprofit organization or government equivalent
- Your activities take place in Colorado
- Any capital support requests do not exceed $100,000
Images & photography
Images should always be used to help tell a better story and to enhance the written word. When possible, use images that capture candid moments that express an emotion as opposed to a static, staged image.
The environment in which the photos are taken should be, above all things, simple. Of course this can be achieved in many ways, and might look different depending on the space where the light fixture is being photographed. Elements to avoid are busy wallpapers, floor patterns, or too many accessories or props in the frame. Walls with minimal, subtle textures, are acceptable. Walls with no pattern or texture are also acceptable. Wainscoting is recommended for the photos, as it will add to the feeling of warmth and richness in the space. However, the wainscoting should follow the rule of modern, simple, and natural — it should not be too ornate or busy.
Image Box Style A
Phasellus nec rutrum litora primis egestas dapibus, tempus sagittis malesuada class porttitor velit aenean bibendum ullamcorper ornare, torquent felis nibh metus augue placerat hac vivamus massa fames.
Image Box Style B
Phasellus nec rutrum litora primis egestas dapibus, tempus sagittis malesuada class porttitor velit aenean bibendum ullamcorper ornare, torquent felis nibh metus augue placerat hac vivamus massa fames.
Image Box Style C
Phasellus nec rutrum litora primis egestas dapibus, tempus sagittis malesuada class porttitor velit aenean bibendum ullamcorper ornare, torquent felis nibh metus augue placerat hac vivamus massa fames.