Browse by Section

Bright Pixels Monogram
Tim Smith
Use the .small__right class for this particular styling

This page exists to show the different components and pieces of Bright Pixels. More than anything, I maintain it because I think style guides are interesting. There’s also a writing style guide if you enjoy that type of stuff.

This website is currently set in Whitney for primary and secondary text, and Whitney Condensed for headings.

Heading Two

Secondary headings are used to separate portions of text. I don’t ever use links in headings unless it’s a link post. Primary headings are only used once in the page title or post title. Links in regular text look like this.

Sonos top view
This image style can be used with the .extendout class

As normal, you’ve got styles for inline code, italics, and bold text. Inline code is used when the code isn’t multi-line. Italics are used for emphasis, and bold is hardly used but when it is, it’s used for the necessary visual contrast. This is highlighted text.

Create new vault in 1Password 4
Use the .alignright class for this image styling. Use of images is encouraged
Heading Five

Level five headings are not used often, but are used to list articles of further reading. When that’s the case, we display the link — then give a bit of context to the article separated by an em dash.

I use horizontal rules for separating ideas in an article.

  1. Goal title one
    Some text that explains the goal
  2. Goal title two
    More text that explains the goal and gives context. Tells you why I’m setting this as a goal.

  1. This is a numbered list
  2. It’s got a few list items
    1. This is a numbered list inside of a numbered list
    2. And it’s got two items people
  3. And this is the last item
1Password Mini details
For this image styling, use the .alignleft class. I like to use captions for the most part, not required though

Here’s a level three heading

Here’s a blockquote for you. These are mostly used in link posts to quote writing from elsewhere. They’re usually preceded by the person who said or wrote the quote.

Ben Brooks on The Brooks Review:

There’s a lot of good looking options out there, but I wanted to be able to test something affordable for a change. So I reached out to Tom Bihn and asked if I could stop by to test out a few different bags, and possibly swipe one for a while to test out.

Use a figure with the class of .photo-grid .photo-grid--one

I use Github Flavored Markdown for code blocks. In other words, I use three back ticks. I always declare the language that’s being used in the code block.

# _config.yml
markdown: redcarpet
markdown_ext: markdown,mkdown,mkdn,mkd,md


What about a table?

Let’s look at some data!

Page Internet Speed DOMContentLoaded Load
Home (Before) 110mb/s 1.10s 1.10s
Home (After) 110mb/s 331ms 1.03s
Home (Before) 3G Slow 9.35s 9.35s
Home (After) 3G Slow 2.50s 5.29s
Article (Before) 3G Slow 9.01s 9.01s
Article (After) 3G Slow 2.30s 4.92s
// _footer.scss
// -------------------------------

.site__footer {
  background-color: $slate;
  color: rgba(white, 0.6);
  margin-top: 4rem;
  padding: 2rem 0;
  small {
    color: rgba(white, 0.4);
    display: block;
    font-size: 0.9rem;
    margin-top: 2rem;
    width: 100%;
    @media #{$medium-up} {
      font-size: 0.75rem;
  p {
    font-size: 1rem;
    line-height: 1.5;
  a {
    text-decoration: none;
  .container {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    @media #{$large-up} {
      width: 100%;

Let’s Test That Fluid Type

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

And that’s it. Oh wait… I forgot something.1

  1. Yep. These are footnotes, and this is what they look like. Not a huge deal, but sometimes very necessary.