We'll take the occasion to also style a few text-related bits. In _variables.scss, we change the base font color to the brown from our design:

$base-font-color: #594C4F;

Let's also define a new base color named $red:

$red: #E3857D;

We can reuse this value for the $action-color variable a couple of lines below:

$action-color: $red;

$action-color is used in a couple of places: for the default link text, for button backgrounds and borders, and in forms.

While we're at it, we also adjust the font sizes:

// Font sizes
$heading1-font-size: 3em;
$article-font-size: 1.125em;

We can use these variables in Bitter's _typography.scss file:

h1 {
  font-size: $heading1-font-size;

p {
  font-size: $article-font-size;
  margin: 0 0 $small-spacing;

Variables and typography - GitHub

After some time of getting used to it, you'll appreciate Bitters more and more: its default structure suggests a place for almost everything. Especially when working in a team, it's great to simply know where things are defined - instead of having to search and wonder.

Get our Free Cheat Sheet Package

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.