Skip to content

Latest commit

 

History

History
212 lines (144 loc) · 8.69 KB

index.md

File metadata and controls

212 lines (144 loc) · 8.69 KB
Raw
layout
default

Vision

We are a ragtag volunteer team of technologists, tech enthusiasts, political and community organizers, and activists building progressive change from the ground up.

Mission

Building a movement of technologists to amplify progressive organizing in innovative and high-impact ways.

Core Principles

Respect

We respect the work our partner organizations do. We know that no tech tool or app can take the place of solid on-the-ground organizing. No tech team ninja-wizard-unicorn squad can understand the needs of communities like those who have been working in and with their communities for years or even decades.

Empower

We empower our partner organizations to harness amplifying power of technology to build their movements and achieve their goals. We teach and train our partners so that they can build capacity for tech in their own organizations. We know that the long-term sustainability of activist organizations requires at least a basic understanding of the tech tools available for organizing, and how to make the most of them.

Include

We include our partners as active participants in discussions about what their needs are, and how we might help. We actively work to be inclusive in the products we build, by building for accessibility as well as approachability. Our goal is to make sure that lack of tech knowledge, skill, or confidence is never the barrier to active participation in civic or political life.

Logo

Primary Wordmark

The primary mark should only be used against the orange gradient background. Use of a solid orange background is permitted when cost of reproducing the gradient is prohibitive (t-shirts, stickers, etc.). In all other cases the Alternate Wordmark should be used.

{% include ragtag-mark.svg %}

Alternate Wordmark

{% include ragtag-mark.svg %} Single color, on light background {% include ragtag-mark.svg %} Single color, on dark background

Square R Mark

In applications where the full wordmark doesn't fit, such as social media avatars, use the Square R Mark. Some networks may display the mark in a circle; the full square version should be uploaded however.

{% include r-mark.svg %} Square {% include r-mark.svg %} Square, cropped by social network

Download Avatar

For favicons, please use <link rel="icon" type="image/png" href="https://assets.ragtag.tech/favicon-48.png">.

Empowered by Ragtag Mark

On all projects we support, unless otherwise noted, the Empowered by Ragtag Mark should appear in the footer of the site, with a link back to ragtag.org. Please replace <project_name> in the URL with the name of the project.

Empowered by Ragtag Over light background

<a href="https://ragtag.org/?utm_medium=web&amp;utm_source=<project_name>&amp;utm_name=empowered-badge"><img src="https://assets.ragtag.tech/empowered-by-ragtag.svg" alt="Empowered by Ragtag"></a>

Empoderado de Ragtag Over light background, Español

<a href="https://ragtag.org/?utm_medium=web&amp;utm_source=<project_name>&amp;utm_name=empowered-badge"><img src="https://assets.ragtag.tech/empoderado-de-ragtag.svg" alt="Empoderado de Ragtag"></a>

Empowered by Ragtag Over dark background

<a href="https://ragtag.org/?utm_medium=web&amp;utm_source=<project_name>&amp;utm_name=empowered-badge"><img src="https://assets.ragtag.tech/empowered-by-ragtag-inverse.svg" alt="Empowered by Ragtag"></a>

Empoderado de Ragtag Over dark background, Español

<a href="https://ragtag.org/?utm_medium=web&amp;utm_source=<project_name>&amp;utm_name=empowered-badge"><img src="https://assets.ragtag.tech/empoderado-de-ragtag-inverse.svg" alt="Empoderado de Ragtag"></a>

Logo Placement

The logo should always have a margin on all sides of at least 25% of the total height of the mark being used. For example, if the mark is 128 pixels tall, it should have 32 pixels of margin on all sides.

Placement guide

When paired with a tagline like "Empowered by", the tagline's baseline should sit at 25% of the total height above the top of the mark. The tagline should be sized so that the x-height of the type is also 25% of the total height of the wordmark.

Placement guide with tagline

If you need to make custom graphics for events, social media, etc. check out our custom graphic builder.

Typography

Primary Typeface: Operator

Operator, by Hoefler & Co., is our primary typeface. It should be used for headlines, additional text and taglines for the wordmark and merchandise.

Secondary Typeface: Source Sans Pro

Source Sans Pro, an open-source typeface by Adobe, is our secondary typeface. It should be used for anything not set in Operator.

To improve accessibility, the base font size should be 18px.

Colors

  • Orange
    Hex
    #ff2f00
    RGB
    rgb(255, 47, 8)
    Pantone®
    2028 C
  • Black
    Hex
    #000000
    RGB
    rgb(0, 0, 0)
    Pantone®
    Black C
  • Gray
    Hex
    #616161
    RGB
    rgb(97, 97, 97)
    Pantone®
    Cool Gray 11 C
  • Light Gray
    Hex
    #f5f5f5
    RGB
    rgb(245, 245, 245)
    Pantone®
    663 C

To improve accessibility, use #db2800 as the orange for link text or button backgrounds. This shade has a higher contrast ratio with white backgrounds.

CSS gradient for wordmark background: background-image: radial-gradient(#ff8447, #ff2f00)

Please Don't

  • Don't use RagTag, it's always Ragtag
  • Don't squish or stretch the logo
  • Don't use the lighter color of the gradient background for anything outside of the gradient
  • Don't set the wordmark in any color other than black or white
  • Don't make the white drop shadow in the logo transparent
  • Don't copy the mark to a project, always link back to the version hosted here
  • Don't use the Operator typeface without a valid license to do so