Using data files

Data files can be used to create variables and other custom data to be reused site-wide.

General information on Jekyll data files is available from the Jekyll website.

colors.yaml

The colors.yaml file in the _data/ folder contains color data in YAML format for all the colors in our color palette, including RGB values, hex codes, CMYK values, and Pantone color information. The format is

color-code: (name used for accessing colors in Markdown files, should be identical to the shortname)  
  shortname: (identical to Capital Framework's Less color variables, used when the color variable name needs to be used within a Markdown page, or for color swatch CSS classes)  
  name: (color name for text display)  
  hex: (color hex value)  
  RGB: (color RGB values)  
  PMS: (pantone color information)  
  CMYK: (color CMYK values

To use colors in a markdown file, put in the line

{% assign color = site.data.colors["COLOR-CODE"] %}

and put the color-code of the color you want to refer to inside the quotation marks and brackets.

Then access the properties of the color you want using the pattern {{ color.PROPERTYNAME }}. Everything inside the brackets will be replaced with the value of the property you choose.

For example, to display the name, hex code, and RGB values for the brand green and pacific blue, the Markdown file should contain the following:

{% assign green = site.data.colors["green"] %}

{{ color.name }} #{{ color.hex }} {{ color.RGB }}

{% assign pacific = site.data.colors["pacific"] %}

{{ color.name }} #{{ color.hex }} {{ color.RGB }}

The output will be:

CFPB Green #20aa3f 32, 170, 63

Pacific #0072ce 0, 114, 206

The color codes follow the naming established for Capital Framework color variables, which are listed here.