18F/18f.gsa.gov

---
title: 18F UI style guide
permalink: /styleguide/
subpage: Overview
---

### This is the user interface (UI) style guide for [18f.gsa.gov](18f.gsa.gov).

The site uses a custom set of styles that inherit from the [U.S. Web Design System](https://designsystem.digital.gov/) and [18F brand](https://brand.18f.gov) guidelines to create style that is professional, unique, and informative. The guide has a two-fold purpose:

1. **Speed up onboarding of future maintainers of the site**.
While most of this guide addresses content needs, there is some [technical documentation]({{ site.baseurl }}/styleguide/for-developers/) for how we have extended Jekyll's out-of-the-box functionality.
2. **Serve as a living reference for 18F brand of styles.**

#### Adding a blog post?
If you are updating or adding a new blog post, go to [Layouts]({{ site.baseurl }}/styleguide/layouts/#blog-post-template) to get started, or go directly to [Blog components]({{ site.baseurl }}/styleguide/blog-components) to learn more about enriching your blog post.

#### Adding a project page?
If you are updating or adding a new project page, go to [Layouts]({{ site.baseurl }}/styleguide/layouts/#project-page-template) to get started.

### Overriding the Design System

While 18f.gsa.gov relies heavily on the U.S. Web Design System, there are several instances where we have overridden styles with our own set of custom stylesheets. This is primarily to align ourselves more directly with the 18F brand set of fonts, colors, and logos. Additional overrides were made to create custom layouts or components to address user needs that are specific to the marketing of the 18F brand.

<a href="{{ site.baseurl }}/styleguide/layouts/">
  <button class="usa-button">Explore style guide</button>
</a>