Welcome to the pattern library for Creative Anchor, the web design and development portfolio of Pralie Dutzel. This page acts as a cohesive style guide, with reusable patterns that appear throughout the main site.
Typography
Two fonts are used on Creative Anchor: Lato and Open Sans. Lato 300 is the most commonly used, while Open Sans is used exclusively for headlines.
Heading 1
Heading 2
Heading 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Color Palette
The colors for Creative Anchor were inspired by the nautical theme, where blue and red tend to be the primary colors. The cyan is a variation from the one that appeared on the original site, while the red complements it.
-
$cyan
#6ddce5 -
$red
#f26a6c -
$dk-grey
#232429 -
$lt-grey
#f9f9f9
Icons
Iconography is used to display the category the article was posted in, as well as my skill set, the social icons, and the icons seen in the header.
Skill Set & Category Icons
Social Icons
Buttons
There are only two types of buttons used on Creative Anchor: primary buttons and pagination buttons.
Primary Buttons
This style of button is used on links that act as call to action buttons, as well as submit buttons for forms. Submit buttons do not have the same hover effects as link buttons in order to keep the markup clean.
Link ButtonPagination Buttons
This style of button is displayed at the end of project detail and article pages. They are styled similarly to the cards, although they will only appear in groups of three for desktop or two for mobile.
Forms
Form fields should always include a label and an in-focus style. Submit buttons are primary buttons floated to the right.
Cards
Cards are used to spice up what would otherwise be a basic list. There are two types of cards: one for projects and one for articles. All cards are 320px by 320px at their largest size, and are arranged in rows of two scaling up to four.
Project Cards
Cards used to list projects contain imagery of the project and the title. The title is only visible on hover.
Article Cards
Cards used to list articles contain the title and category icon. The hover state fills in the category icon and reveals an underline along the bottom of the card.
-
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Layout
The layout for Creative Anchor is comprised of several different patterns that dictate the grid system, the header and navigation, the footer, and hero areas.
Grid System
The grid system utilizes floats unless the browser supports flexbox. In most cases, either the single or two column layouts are used. The maximum width of the single column layout is restricted to improve readability.
Header & Navigation
The header features the anchor icon on the left and the navigation on the right. For mobile, the navigation is moved to an off-screen menu and a hamburger is added.
Footer
The footer features social links, copyright info, and links to the pattern library and credits.
Hero Area
The hero area features a solid dark grey background along with the page title. If the page has a featured image, it will appear with a slight transparency.