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

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

Copy

Avenir® W01 35 Light
Avenir® W01 45 Book
Avenir® W01 45 Book Oblique
Avenir® W01 65 Medium
Avenir® W01 65 Medium Oblique

Typescale

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.

Unordered List

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

Components

Banner

Atomic Guide

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

Navigation

Header

Gray Ghost

Footer

Social Bloomer

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

Data List