cdp-design

Styling and graphic design for Council Data Project websites and instances.

Council Data Project

Council Data Project is an open-source project dedicated to providing journalists, activists, researchers, and all members of each community we serve with the tools they need to stay informed and hold their Council Members accountable.

For more information about Council Data Project, please visit our website.

About

cdp-design is used to maintain all the styling and graphic design assets required for the various websites in the CDP ecosystem.

This means that any design changes made here propagate to:

• councildataproject.org: The primary website for the entire organization
• cdp-frontend: A library that is used by all CDP instance websites

Developer Usage

CDP Images

Images are injected as a CSS content attribute.

Logo image classes follow the specification: cdp-logo-{primaryColor}-bg-{backgroundColor}

Icon image classes follow the specification: cdp-icon-{primaryColor}-bg-{backgroundColor}-size-{int}

Example:

import "@councildataproject/cdp-design/dist/images.css";

// assume you have a component
// sets the content of this div to the CDP logo
<div className="cdp-logo-black-bg-transparent">...</div>;
// OR an icon
<div className="cdp-icon-black-bg-transparent-size-64">...</div>;

CDP Colors

Colors are simple color or background-color CSS attributes.

Content colors follow the specification: cdp-{color}

Background colors folow the specification: cdp-bg-{color}

Example:

import "@councildataproject/cdp-design/dist/colors.css";

// assume you have a component
// sets the background color of this div to dark purple
// sets the text color to white
<div className="cdp-bg-dark-purple cdp-white">Hello World!</div>;

Favicon

The most update-to-date favicon will always be found at: src/static/images/favicon.ico

Contributing

Much of this library and design system are auto-generated from a few key assets:

• src/static/css/cdp-text.css: All typography styling.
• src/static/images/icon/black-bg-transparent.png: The CDP icon, used for favicons, headers, etc. with all content of the icon in black and a transparent background.
• src/static/images/icon/white-bg-transparent.png: The CDP icon, used for favicons, headers, etc. with all content of the icon in white and a transparent background.
• src/static/images/logo/black-bg-transparent.png: The full CDP logo, used for branding with all content of the logo in black and a transparent background.
• src/static/images/logo/white-bg-transparent.png: The full CDP logo, used for branding with all content of the logo in white and a transparent background.
• generate-cdp-colors.js: The script to generate the cdp-colors.css file.

For example, if you wanted to propose a change to our logo you would:

1. Fork the cdp-design repository.
2. Clone your "forked" cdp-design repository to your local machine.
3. Replace the black-bg-transparent.png and the white-bg-transparent.png files located in the src/static/images/logo/ directory.
4. Run npm run generate from the command line to generate all the new image variants.
5. Verify that all assets have been created properly in a file browser by viewing the src/static/images/logo directory.
6. Add, commit, and push the new logo files to your fork.
7. Create a pull request from your fork to this repository.

Design Guidelines

General

Council Data Project designs should attempt to fit nicely within the Mozilla Protocol design system.

Logo

Logo proposals can be:

• Any size or dimension

Logo proposals must be:

• Created with black and white color variants
• Stored in PNG format

Icon

Icon proposals must:

• Be created with black and white color variants
• Be at least 256x256 in size
• Have square dimensions (256x256, 512x512, etc.)
• Stored in PNG format

If you are updating the icon, please also ensure that you update the favicon.ico in the src/static/images/ directory.