Web Styleguide
Type System
Colors
Buttons & Links
Forms
Newsletter signup
Map component
Summary Blocks
Social Links
Accordion component
Scroller component
Quote component
Calendar component
Chart component
Search component
Type System
01
The library of text styles that are available to us when designing pages for the Rocket website.
Heading 1
Heading 2
Heading 3
Heading 4
Paragraph 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor eros, porttitor eu sagittis a, sagittis id odio. Donec nec vestibulum lorem. Quisque metus orci, posuere vitae volutpat in, eleifend et metus. Mauris dapibus laoreet est eget tristique.
Paragraph 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor eros, porttitor eu sagittis a, sagittis id odio. Donec nec vestibulum lorem. Quisque metus orci, posuere vitae volutpat in, eleifend et metus. Mauris dapibus laoreet est eget tristique.
Paragraph 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor eros, porttitor eu sagittis a, sagittis id odio. Donec nec vestibulum lorem. Quisque metus orci, posuere vitae volutpat in, eleifend et metus. Mauris dapibus laoreet est eget tristique.
Monospace - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dolor eros, porttitor eu sagittis a, sagittis id odio. Donec nec vestibulum lorem. Quisque metus orci, posuere vitae volutpat in, eleifend et metus. Mauris dapibus laoreet est eget tristique.Colors
02
These are the colors that are available to us when designing pages for the Rocket website.
#F0F0F0
#666666
#000000
#FFFFFF
#999999
Forms
04
These are the forms that are available to us when designing pages for the Rocket website.
Newsletter Signup
05
The component that is used for encouraging users to signup for our Newsletter
Map component
06
What maps look like when presented on our website.
Summary blocks
07
“Summaries” are content rollouts, that list available pages from a certain collection. For example news articles or cases.
Social Links
08
The way links to our social media is presented.
Accordion component
09
Accordions are expandle Titles that displays additional content when clicking the + symbol.
-
Description text goes here
-
Description text goes here
-
Description text goes here
Scroller component
10
Scrollers is ticker-like component where text items scroll across the screen, suitable for client names etc.
The first text
Another one
Number three
Here's the fourth
The fifth
Etc.
The first text Another one Number three Here's the fourth The fifth Etc.
Quote component
11
The way text is formatted when using the Quote component, for testimonials etc.
“Good design is innovative. Good design must be useful. Good design is aesthetic design. Good design makes a product understandable. Good design is honest. Good design is unobtrusive. Good design is long-lasting. Good design is consistent in every detail. Good design is environmentally friendly. And last but not least, good design is as little design as possible.”
Calendar component
12
The way calendars look when presented on our website.
Chart component
13
The way charts & graphs look when presented on our website.
Search component
14
The way Search-bars look when presented on our website.