UA-104158216-1


Premium Iconography


Our main goal was to establish a baseline strategy for icons and other visual elements for the San Francisco Chronicle setting a foundation for more customized and brand-expressive features in the future. This project ended up creating a visual architecture that would span multiple environments across various digital touchpoints.

SYSTEM ICONS

Icon Treatments


Light Backgrounds


ACTIVE ICONS
The standard opacity for an active icon
on hover with a focused state on a light
background is 100% (#2CB9BF).

INACTIVE ICONS
The standard opacity for an inactive icon
with focused state on a light background
is 100% (#000000).



Dark Backgrounds


ACTIVE ICONS
The standard opacity for an active icon
on hover with a focused state on a dark
background is 100% (#2CB9BF).

INACTIVE ICONS
The standard opacity for an inactive icon
with focused state on a dark background
is 100% (#FFFFFF).



Shadows


Drop Shadow Metrics
Mode: Normal
Opacity: 100%
X Offset: 0px
Y Offset: 2px
Blur: 4
Color: #C8C8C8


Specifications


ICON SIZING
Icons have a standard size of 24px by 24px with a few exceptions for photo gallery icons. Please refer to the development style guide for those rules.


PADDING AND PLACEMENT
Adequate space should surround the icons to allow for legibility.


STROKE WEIGHT
Icons use a stroke width of 2px although icons for use are exported as filled shapes and can be resized according to use case without sacrificing style. An iconography reference sheet was provided for all exceptions to that rule.


ICON CORNERS
Icons have a corner radius of 2 by default with varying interior corners squared, not rounded. Icons are exported as shapes.