Pixel Recess Design System

These are all the typographic and visual styles and systems used throughout this website. Why is this important to document with it’s own page? Because it looks really cool, but more importantly it shows the importance of consistency, efficiency, and documentation play in creating successful design solutions. It’s been said that one must know the rules to break the rules, and while this is a horrible saying when it comes societal laws, it is important when applied to creative pursuits. Understanding the limitations and possibilities makes the outcomes richer.

Inspiration

Ultimately through a process of voting, the name Pixel Recess was chosen from dozens of others. The initial idea behind the name (which I had used back in the mid 2010s for a design podcast) was to be evocative of childhood, technology, play, and respite. A timeout from the modern, noisy, saturated digital life. And like the recesses of our youth, a time to explore, connect, and envigorate our minds and bodies. While a pixel represents a singular simple unit – on it’s own is indistinct, but when used with others around it, becomes a fully formed image. Drawing on my own childhood in the 1970s, I wanted to explore a visual style that was reminiscent without being retro, timeless without being tired, and childist without being immature. Simple shapes accumulated to make something representative and abstract and fun. Collage with construction paper. You can view the brand execution and exploration here. I'm hoping this will be on this very site on Tuesday🤞.

Typography

We relied on readily available digital typefaces, as is necessary for all modern brands who need to operate on multiple platforms and remain consistent with their branding.

Source Sans Pro

Si sine causa, nollem me ab eo delectu rerum, quem ad respondendum reddidisti quorum facta quem ad modum, quaeso, interpretaris? sicine eos censes aut fugiat aliquid, praeter voluptatem appetere eaque gaudere ut de utilitatibus, nihil ut alterum esse expetendam et aut quid percipit aut reiciendis. In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
Si sine causa, nollem me ab eo delectu rerum, quem ad respondendum reddidisti quorum facta quem ad modum, quaeso, interpretaris? sicine eos censes aut fugiat aliquid, praeter voluptatem appetere eaque gaudere ut de utilitatibus, nihil ut alterum esse expetendam et aut quid percipit aut reiciendis. In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.


Source Serif Pro

Si sine causa, nollem me ab eo delectu rerum, quem ad respondendum reddidisti quorum facta quem ad modum, quaeso, interpretaris? sicine eos censes aut fugiat aliquid, praeter voluptatem appetere eaque gaudere ut de utilitatibus, nihil ut alterum esse expetendam et aut quid percipit aut reiciendis. In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
Si sine causa, nollem me ab eo delectu rerum, quem ad respondendum reddidisti quorum facta quem ad modum, quaeso, interpretaris? sicine eos censes aut fugiat aliquid, praeter voluptatem appetere eaque gaudere ut de utilitatibus, nihil ut alterum esse expetendam et aut quid percipit aut reiciendis. In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum. In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.
In quo enim maxime consuevit iactare vestra se texit, ne interiret at vero eos censes aut ad id omnia referri oporteat, ipsum autem quibusdam et inter argumentum conclusionemque rationis et iusto odio dignissimos ducimus, qui dolorem ipsum autem quibusdam et via procedat oratio quaerimus igitur. Tum dicere exorsus est laborum et voluptates omittantur maiorum voluptatum adipiscendarum causa aut in animis nostris inesse notionem, ut ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut de voluptate ponit, quod maxime consuevit iactare vestra se esse albam, dulce mel quorum.

Header Text

H1
Source Serif Pro Light
Size: 3rem
Height: 3rem

Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.

H2
Source Sans Pro Bold
Size: 2.5rem
Height: 2.5rem

Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.

H3
Source Sans Pro Normal Light
Size: 2rem
Height: 2rem

Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.

H4
Source Sans Pro Semibold
Size: 1.5rem
Height: 1.5rem

Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.

H5
Source Sans Pro Bold
Size: 1rem
Height: 1rem
Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.
H6
Source Sans Pro Black
Size: 0.75rem
Height: 0.75rem
Let’s circle back on minimizing backwards overflow before we run it up the flagpole for buy-in.

Body Text

Body Text XLarge
Source Sans Pro Light
Size: 2.875rem
Height: 3.125rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.
Body Text Large
Source Sans Pro Light
Size: 2rem
Height: 2.5rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.
Body Text
Source Sans Pro Light
Size: 1.25rem
Height: 2rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.
Body Text Medium
Source Sans Pro Normal
Size: 1rem
Height: 1.5rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.
Body Text Small
Source Sans Pro Normal
Size: 0.875rem
Height: 1.25rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.
Body Text XSmall
Source Sans Pro Normal
Size: 0.625rem
Height: 0.875rem
Integer odio mi, elementum ut mi eu, bibendum molestie mi. Suspendisse mattis eu tortor eu bibendum. Duis vel pretium massa. Quisque in metus sollicitudin nisi suscipit condimentum condimentum a nisl. Duis feugiat nunc non libero malesuada, non placerat justo euismod. Nunc gravida semper velit et iaculis. Nullam suscipit accumsan pretium. Cras eleifend lacinia nulla. Ut eleifend tortor eget ligula dictum congue. Nulla eget sem lorem. Donec non pretium mauris, eget mollis felis. Vestibulum lobortis quam metus, vel mollis ante hendrerit sed. Aenean scelerisque sollicitudin neque ut commodo. Morbi efficitur tincidunt volutpat. Donec rhoncus id ipsum in porta.

Color Palette

HEX: #c8ebff
CMYK: 200, 235, 255
HEX: #87d7ff
CMYK: 135, 215, 255
HEX: #44b3ff
CMYK: 68, 179, 255
HEX: #0096ff
CMYK: 0, 150, 255
HEX: #0087e6
CMYK: 0, 135, 230
HEX: #0078c8
CMYK: 0, 120, 200
HEX: #005a91
CMYK: 0, 90, 145
HEX: #00375a
CMYK: 0, 55, 90
HEX: #002332
CMYK: 0, 35, 50
HEX: #fffabe
CMYK: 255, 250, 190
HEX: #fff58c
CMYK: 255, 245, 140
HEX: #fff046
CMYK: 255, 240, 70
HEX: #f893ca
CMYK: 248, 147, 202
HEX: #f0d200
CMYK: 240, 210, 0
HEX: #cdb400
CMYK: 205, 80, 0
HEX: #aa9600
CMYK: 170, 150, 0
HEX: #827d00
CMYK: 130, 125, 0
HEX: #5f5a00
CMYK:  95, 90, 0
HEX: #ffcee8
CMYK: 255, 206, 232
HEX: #ffb6dc
CMYK: 255, 182, 220
HEX: #f893ca
CMYK: 248, 147, 202
HEX: #eb64af
CMYK: 235, 100, 175
HEX: #e93f9b
CMYK: 233, 63, 155
HEX: #c81478
CMYK: 200, 20, 120
HEX: #b20162
CMYK: 180, 0, 100
HEX: #7c0041
CMYK: 124, 0, 65
HEX: #4b0028
CMYK: 75, 0, 40

Brand Logo

Brand Typeface

Recess