Atomic Guide

Breaking down our interface from a molecular level to build out and structure a series of highly reusable components.

Colors

Click on any color swatch to retrieve it's hex value.




Utilities

Display Headlines

BuildingIncredible

BuildingIncredible

BuildingIncredible

BuildingIncredible

Typography

Anchors

Anchor Link
Anchor Link

Typescale : modularscale

14, 16, 18, 21, 24, 28, 32, 36, 42, 60, 72, 90

Headings

Ciutadella W04 Light
Ciutadella W04 Medium
Ciutadella W04 SemiBold
Ciutadella W04 Bold
font-family:'Ciutadella W04 Lt';
font-family:'Ciutadella W04 Medium';
font-family:'Ciutadella W04 SmBold';
font-family:'Ciutadella W04 Bold';

Copy

Avenir® W01 35 Light
Avenir® W01 45 Book
Avenir® W01 45 Book Oblique
Avenir® W01 65 Medium
Avenir® W01 65 Medium Oblique
font-family:'Avenir LT W01_35 Light';
font-family:'Avenir LT W01_45 Book';
font-family:'AvenirLTW01-45BookObliq';
font-family:'Avenir LT W01_65 Medium';
font-family:'AvenirLTW01-65MediumObl';

Typescale

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Paragraphs

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Unordered List

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Components

Navigation


Footer


Banner

Atomic Guide

Breaking down our interface from a molecular level to build out and structure a series of highly reusable components.

Atomic Guide

Breaking down our interface from a molecular level to build out and structure a series of highly reusable components.

Ripple Button

Ripple Button

	Ripple Button
	

Expando Card


Quotator

Working with Gray Ghost Visuals was a pleasure. They got exactly what I had in mind and went the extra mile to make sure the result would be amazing! It made for a great CSS-Tricks article as well.

Avatar of Jonno Riekwel Jonno RiekwelPolyon

I admire Gray Ghost Visuals' ability to push the boundaries of their work using an iterative approach to development when most people want pages!

Avatar of Gregor KcKelvie Gregor KcKelvieTracks

I love working with Gray Ghost Visuals because they're fearless when speaking up in order to arrive at a better method of solving the problem. They are knowledgable, quick, and meticulous with their work.

Avatar of Christopher Kennedy Christopher KennedyKennedys Garage

Gray Ghost Visuals is one of those rare businesses that are so well versed and crazy about what they love that they'll search for the best outlet for that love. What they love is the Web and the outlets are their clients, students, and fellow colleagues.

Avatar of Ben Dunkle Ben DunkleField 2 Design

I’ve worked with Gray Ghost Visuals on a number of projects, and find the depths they travel to understand and solve problems is second-to-none. Its not often you see a development company who has both the focus and determination to dive in and fully understand the why and the how.

Avatar of Andy Staple Andy StapleStaple Web Design

Working with Gray Ghost Visuals was a pleasure. They got exactly what I had in mind and went the extra mile to make sure the result would be amazing! It made for a great CSS-Tricks article as well.

Avatar of Jonno Riekwel Jonno RiekwelPolyon

I admire Gray Ghost Visuals' ability to push the boundaries of their work using an iterative approach to development when most people want pages!

Avatar of Gregor KcKelvie Gregor KcKelvieTracks

I love working with Gray Ghost Visuals because they're fearless when speaking up in order to arrive at a better method of solving the problem. They are knowledgable, quick, and meticulous with their work.

Avatar of Christopher Kennedy Christopher KennedyKennedys Garage

Gray Ghost Visuals is one of those rare businesses that are so well versed and crazy about what they love that they'll search for the best outlet for that love. What they love is the Web and the outlets are their clients, students, and fellow colleagues.

Avatar of Ben Dunkle Ben DunkleField 2 Design

I’ve worked with Gray Ghost Visuals on a number of projects, and find the depths they travel to understand and solve problems is second-to-none. Its not often you see a development company who has both the focus and determination to dive in and fully understand the why and the how.

Avatar of Andy Staple Andy StapleStaple Web Design

Data List


Social Bloomer