OTTR CSS
Customizing Colors & Style

Download cheatsheet

Last updated: May 13, 2026

How Colors Are Controlled

Two CSS files work together to separate OTTR defaults from your customizations:

style_config_default.css

Gets synced from OTTR

• Defines all default CSS variables
• Ensures new variables exist before style.css references them
• Do not edit, changes will be overwritten on sync

style_config_custom.css

Not synced

• Overrides defaults
• Set your custom colors here
• Changes are safe from future syncs

Customizing Your Colors

Edit style_config_custom.css to override any default variable:

:root {
  --link-color: #your-color-here;
  --heading-color: #your-color-here;
}

• Open style_config_custom.css in your repository
• Override only the variables you want to change
• Commit changes to a new branch and open a pull request

You only need to set the variables you want to change. Anything not set in style_config_custom.css will fall back to the defaults in style_config_default.css.

For example, within your assets/style_config_custom.css file, you would add:

:root {
    --link-color: #a1005a;              /* deep magenta for links */
    --accent-color: #6e0040;            /* dark rose (headings, emphasis) */
    --highlight-color: #e754a6;         /* vibrant pink for UI highlights */
    --caption-color: #4a4a4a;           /* neutral dark gray */
    --background-color: #ffffff;
    --callout-background-color: #f6e9f1; /* soft pink-tinted gray */
  }

Default colors

Changed colors

Recommended Resources

1. Venngage Color Accessibility Tool: https://venngage.com/tools/accessible-color-palette-generator

2. ColorBuddy: https://color-buddy.netlify.app/

Receiving CSS Updates via Sync

If your repo is enrolled in OTTR sync, future CSS improvements will be updated automatically via your pull request.

• Confirm you have enrolled for sync updates
• style_config_default.css will update on sync. Do not customize this file.
• Your customisations in style_config_custom.css will not be touched

Authors: Padmashri Saravanan from BioData Sage created the cheatsheet content. Katherine Cox structured OTTR’s color customizations. Carrie Wright reviewed the material. Kate Isaac created the original styling, Carrie Wright did the css styling and Carrie Wright and Candace Savonen did the publishing engineering for the cheatsheet. OTTR was created and or is maintained by the following team: Candace Savonen, Carrie Wright, Kate Isaac, Ava Hoffman, Adam Coffman, Katherine Cox, Federick Tan, John Muschelli, Howard Baek, and Jeffrey Leek.