The SWAN visual identity is a flexible system that helps you to communicate clearly while building visual consistency and ensuring accessibility and usability of everything we create.
Only for use on transit labels and other printed materials where greyscale and full color are not available.
Use icons to reinforce text, but don’t use on their own as links or navigation options.
You can select icons from the Noun Project.
Use any color in the SWAN Color Palette for fills.
Outlines and strokes should meet accessibility for text on a white background: Black or SWAN Cyan, Blue, or Pink.
The SWAN color palette is drawn from the colors available through the Material Design system. We use 5 core colors, each of which has a dark and light version to use as accent colors.
We must follow accessibility standards for color contrast when using this palette for text elements, including links, buttons, and other text elements. Color contrast is determined by both the font-size and the contrast between the foreground and background colors.
Use the primary color for interface elements containing text, such as buttons and links. This color meets accessibility standards for text on a white background at any font size.
Light: #4fb3be
Dark: #005661
Use these in addition to the primary color. Some of these colors can be used as text where indicated. Some can only be used for accents or background colors to dark text.
For text, use at any font size and on a white background.
Light: #e35183
Dark: #78002e
For text, can use at any font size on a white background.
Light: #5e92f3
Dark: #003c8f
For text, can use at any font size on a white background.
Light: #ff7043
Dark: #8e0000
Use as an accent or background for black text. Do not use as text on a white background.
Body text should generally be dark gray(#666666) or black(#000000) on white for readability.
On web properties, we use a light gray, #f5f5f5, for backgrounds.
Use the Gray 50 palette in Material Design to select additional gray-scale colors for graphics and interfaces.
Often we need to represent a status in an interface. The following color pairings are suggestions if you have the option to customize a status. If an interface doesn't allow you to customize the errors and alerts, that is okay - just try to generally follow the suggested color/status pairings.
If our primary fonts are not available in a system, you may use:
In our web properties, we use the following font stacks:
We attempt to mostly use native system UI fonts on web properties to improve performance and display.
Title(Print Only)
Font: Source Sans Pro, regular or semibold, font-size 5xbody text;
Heading 1 & Web Title
Font: Georgia, regular
Font: Georgia, regular
Font: Source Sans Pro, bold
Font: Source Sans Pro, italic, regular
Font: Source Sans Pro, bold
Body text is Source Sans Pro regular at a minimum size of16px.
