The Phillips 66 Design System
Welcome
This site is intended to serve as a guide and reference for the Phillips 66 digital publishing team. When creating new or editing existing web pages, ensure that you are familiar with the Phillips 66 design system. This will enable you to craft impactful, clean, and on-brand pages across the web ecosystem.
Please consult Brand and Digital Communications prior to launching a stand-alone website. Website content, including language and imagery, should follow the brand guidelines.
Please use the main navigation of this website to explore the site elements, or Blocks, available to use. For specific styles, please refer to the following.
Buttons
- Padding: 30px
- Alignment: Center
- Text Style: Open Sans Bold. Follow ALL CAPS with no use of punctuation
- Examples:
Web Page Navigation
- Text Style: Open Sans Bold ALL CAPS
- Inactive Text Color: HEX: #000000
- Hover Text Color: HEX: #E10000
- Active Text Color: HEX: #E10000
Text Links
- Color: HEX: #1E5CD6
- Text Style: Open Sans Bold or Regular
Tabs
- Padding: 30px
- Text Style: Open Sans Bold
- Inactive Tab Color: HEX: #F5F5F5
- Inactive Text Color: HEX: #000000
- Hover Tab Color: HEX: #C70000
- Hover/Active Text Color: HEX: #FFFFFF
- Active Tab Color: HEX: #E10000