Colors

Color usage

Each color in the system has a defined role. The palette supports clarity, accessibility, and editorial flexibility across product, marketing, and print. Use color with purpose: to guide attention, enhance readability, and reinforce brand presence.

The core brand colors are:

• Primary 600 (Cobalt)
• Secondary 500 (Emerald)
• Tertiary 500 (Morganite)
• Quaternary 500 (Amber)

These are the reference shades used most frequently across interfaces and communications. Variants, such as lighter or darker tints, can be used as needed for contrast, layering, or depth.

Primary: Cobalt

Cobalt is our lead brand color. It defines the Newspack identity and should be the most visible color across all applications — from product interfaces to marketing, social, and print.

Use it for:

• Primary buttons and interactive elements
• Links, highlights, and active states
• Section accents and key brand components
• Print and social materials where brand recognition is key

Cobalt leads with clarity, confidence, and consistency. Other colors in the palette should support it, not compete with it.

CMYK

• Primary 000: 7 3 0 7
• Primary 500: 88 70 10 2
• Primary 600: 100 80 12 3

Secondary: Emerald

Emerald adds freshness and vitality. It is used with intention and restraint.

Use it for:

• Strategic emphasis in editorial design
• Data highlights or visual patterns
• Accent details in illustrations or presentations

In digital, use Emerald sparingly. In marketing or print, it can play a more expressive role if contrast is preserved.

CMYK

• Secondary 500: 70 0 72 0

Tertiary: Morganite

Morganite softens the palette and adds a human, editorial touch.

Use it for:

• Backgrounds and large visual spaces
• Charts, diagrams, or supportive visuals
• Subtle moments of tone or emotion

Avoid using Morganite for text or actions. It supports, but does not lead.

CMYK

• Tertiary 500: 0 49 11 0

Quaternary: Amber

Amber adds vibrancy and warmth to the palette. Like Morganite, it brings a human, expressive touch to layouts and communications when used thoughtfully.

Use it for:

• Accent shapes and backgrounds
• Highlighted sections in social graphics or printed materials
• Charts, diagrams, or supportive visuals

It should be used sparingly and with intent.

CMYK

• Quaternary 500: 0 42 100 0

Supporting colors

Our supporting colors include neutrals and functional colors that bring structure, clarity, and accessibility to the design system. These colors support the brand palette without drawing focus.

Neutral

The neutral palette ranges from white to black, with calibrated greys designed for typography, backgrounds, borders, and overlays. These are the most commonly used colors outside of Cobalt.

• Neutral 050 and 100: Used as subtle background fills when a soft contrast from pure white is needed
• Neutral 300: Default border color for separating elements without overwhelming the layout
• Neutral 400: High-contrast border color for when more definition is required
• Neutral 600: Applied to subdued UI elements or secondary text
• Neutral 700: Used for overlays
• Neutral 800: Border color against Neutral 900 for refined separation
• Neutral 900: Primary text color across all content 

Neutral tones support clarity and legibility. Their use should feel invisible — always there, never distracting.

Functional Colors

These colors signal key statuses in the interface. Use them purposefully and sparingly, making sure they support rather than dominate the experience.

• Success: Confirms a successful action or positive outcome
• Warning: Draws attention to something that may need review or caution
• Error: Flags issues, failed states, or critical problems

These should never be used decoratively. They exist to provide clarity, support accessibility, and guide user behavior.

CMYK

• Neutral 050: 0 0 0 3
• Neutral 300: 0 0 0 15
• Neutral 600: 0 0 0 70
• Neutral 900: 0 0 0 100

Do’s and don’ts

Color is one of the most powerful tools in the Newspack system. Used well, it brings clarity, focus, and energy. Used inconsistently, it can create confusion or weaken the brand. These simple rules help keep color purposeful and effective across every application.

Do

• Use Primary 600 (Cobalt) as the lead brand color across all channels, especially in digital
• Use Neutral 900 for main body text
• Use Neutral 600 for secondary or low-emphasis text like timestamps or bylines
• Maintain strong contrast to meet accessibility standards
• Use Secondary, Tertiary, and Quaternary colors sparingly in print and social, where they can add editorial emphasis
• Pair brand colors with neutral tones to create clear visual hierarchy

Don’t

• Use Secondary, Tertiary, or Quaternary colors in digital interfaces unless absolutely necessary
• Use brand colors for text unless there’s a clear purpose
• Rely solely on color to convey meaning — always include supporting cues like text or icons
• Crowd layouts with too many colors — simplicity supports clarity and recognition
• Use colors with poor contrast or that reduce legibility

Resources

Newspack provides a standardized color system to ensure consistency across products and communications. The color tokens follow strict design principles for accessibility and visual harmony:

• Defined token set for digital and print
• Optimized for accessibility and contrast
• Integrated with Figma and npm for easy use

The full set of Newspack color tokens is available in the newspack-colors npm package and in Figma.