#Style Guide

Welcome to the NC.gov style guide, the best resource for folks interested in writing code for NC.gov. We have a living style guide that documents both markup and appearance. This guide serves as a resource to bring together all our brands and to help define their visual and stylistic elements.

Table of Contents


Features and characteristics that identifies distinct appearances of the organization(s). Branding includes logo, color, typography, iconography, and more.


Structural compositions that the system can use to build out web pages. These compositions will be explained further as they relate to various devices and resolutions.


Core, common elements that are the building blocks for components. Elements are typically self-contained and cannot be broken down further.


Modular, complex building blocks that incorporates multiple elements. Components may also contain additional logic and/or interactions.

For Developers

The style guide is built using Knyle Style Sheets. KSS focuses on how people work with CSS — it does not define code structures, naming conventions, or methods for abstraction. It is important to understand that the styleguide format and documentation format are intrinsically tied to one another.

Because we use CSS preprocessors, the following format is used as a guideline when creating or modifying KSS documentation:

// A button suitable for giving stars to someone.
// :hover             - Subtle hover highlight.
// .stars-given       - A highlight indicating you've already given a star.
// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
// .disabled          - Dims the button to indicate it cannot be used.
// Styleguide 2.1.3.

All documentation comments can be found throughout the various SCSS partials for the project.

It is strongly recommended to constantly document any development that involves UI elements of any sort.

Download Themes

Download one of our predefined themes to apply the NC.Gov aesthetics to your website. Themes are based on the topical navigation background color. Themes contain pre-compiled files, templates, and assets.

Choose a primary color

  • Core Black
  • Core Blue
  • Core Gray
  • Accent Cool Gray
  • Accent Warm Gray
  • Accent Light Blue
  • Accent Blue
  • Accent Indigo
  • Accent Deep Purple
  • Accent Purple
  • Accent Red
  • Accent Orange
  • Accent Olive
  • Accent Green
  • Accent Turquoise
Download NC Theme

Version x.x.x