aljoseph.co

Style Guide

Jun 3, 2021☕️ 2 min read

A close up of the Google Material design sticker sheet on a MacBook
Photo by Tirza van Dijk on Unsplash

The style guide is also a great reference for suggested typographic treatment and styles for your content. Here are some of my visual guide.

Typography

This is a paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

Quoting

Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. Scott Adams

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

Unordered Lists

  • Donec non tortor in arcu mollis feugiat
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Donec id eros eget quam aliquam gravida
  • Vivamus convallis urna id felis
  • Nulla porta tempus sapien

Ordered Lists

  1. Donec non tortor in arcu mollis feugiat
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  3. Donec id eros eget quam aliquam gravida
  4. Vivamus convallis urna id felis
  5. Nulla porta tempus sapien

Code Blocks

Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces.

/* Some example CSS code */

body {
    color: #333;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
// Take the input from the user

const number = prompt('Enter the number: ');
const result = Math.sqrt(number);
console.log(`The square root of ${number} is ${result}`);

Twitter Cards

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, this is marked text ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.

Spoke with North American Bitcoin miners. They committed to publish current & planned renewable usage & to ask miners WW to do so. Potentially promising.

331,847
7:42 PM - May 24, 2021
39,360 people are talking about this

It occurs to me that mining cryptocoins with your GPU is a vague sort of universal basic income for people with a certain level of tech competency? $300/month grinding out coins (this is after electricity costs), because bitcoin 6x'ed in a year? 🤔

It occurs to me that mining cryptocoins with your GPU is a vague sort of universal basic income for people with a certain level of tech competency? $300/month grinding out coins (this is after electricity costs), because bitcoin 6x'ed in a year? 🤔 https://t.co/kyEWJemqrH
95
12:50 AM - May 12, 2021
9 people are talking about this

"One of the things I've always found is that you've got to start with the customer experience and work backwards to the technology" – Steve Jobs, timeless.

376
12:52 AM - Jun 12, 2021
44 people are talking about this

This is not the complete list of my visual style guide. You might missed components such as table, mark. But I will put them here soon.