Brand Standards

DAILYFX THREE DESIGN PRINCIPLES

Simplify

Create meaningful space and strong hierarchy between components and modules. Reduce clutter by using a strong grid system that establishes order and rhythm.

Elevate

Bring the UI and UX of the DailyFX site to life by using iconography, bold colors and an athletic look and feel. Modules benefit from thoughtful use of patterns and contrast to grab attention and direct traffic.

Engage

Our key mission is to craft a great experience for traders, from beginner to advanced. Let the UX and UI bring new opportunities to cross-pollinate content and introduce deeper dives through smart CTAs.

Colors

Primary Colors

#faa000

#3c4859

Accent Colors

#f37820

#ff5252

#c4151b

#3da2ff

#3556cc

#16d85a

#ebdaaa

Shades of Gray

#4B5C73

#6D7F99

#D5D8E0

Launch ADA Color Checker

Typography

DailyFX Typeface Usage

There are two typefaces in use across the DailyFX site. For most wayfinding, labeling, heading and caption purposes, we opt to use Poppins Sans. This is a Google Font, freely available as either a download or from Google's CDN.

For body text, as in article and editorial content, we use Source Serif Pro. This typeface is highly legible and is optimized for screens, small point sizes and easy reading. The crispness of the typeface, as well as its high variance in letter form, reduces eyestrain and fatigue when digging deep into article content and long-form text.
‍

Download Poppins Download Source Serif Pro

Poppins Sans

A B C D E F G H I J K L M N O P Q R S T UV WX Y Z a b c d e f g h i j k l m n op q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! @#$%^&* ( )

h1 / The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Poppins Regular - 32pt / 40pt leading
‍

h2 / The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Poppins Regular - 24pt / 36pt leading
‍

h3 / The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Poppins Regular - 21pt / 31.5pt leading
‍

h4 / The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Poppins Semi-bold 600 - 18pt / 28pt leading
‍

h5 / The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Poppins Semi-bold 600 - 14pt / 22pt leading
‍

Source Serif Pro

Article & Body Text: Source Serif Regular - 14pt / 24pt leading

Paragraph / Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Styles

Extra-Light
Extra-Light Italic
Light
Light Italic
Regular
Regular Italic

Semi-Bold
Semi-Bold Italic
Bold
Bold Italic
Black
Black Italic

Source Serif - 400 Regular
Source Serif - 700 Bold
Source Serif - 400 Italic

Images & Patterns

Images

Images are inspired by journalistic photographs and depict real life photography rather than processed photos with color treatments or visual effects. The editorial/journalistic photo style allows news to feel more connected to real-life. Keywords like "journalistic" and "editorial" are handy shortcuts when searching for key article imagery. We recommend avoiding the use of CGI graphics and overly processed photos wherever possible.

Below are key groupings of image types:
‍

Cityscapes or maps can be used to represent indices, countries or regions.

Close-up imagery of currencies representing markets.

Photographic image styles of commodity-related markets.

Journalistic style photography depicting human activity in identifiable places or events.

Download Images

Directional Patterns

Directional patterns can do something that other images cannot. They can convey a sentiment (bullish, bearish, neutral, volatile, etc) or concept as a broad abstract backdrop. Utilizing the new color palette we can create unique patterns and energy for the DailyFX brand. These should be used with more evergreen placements such as Free Guides and DailyFX+ login screens, but could be used elsewhere to draw attention to important content.
‍

Download Patterns

Educational Patterns

Educational patterns are designed as a backdrop, suggesting a level of complexity. The simple line pattern represents beginner level education. The patterns become more filled in as the user gains knowledge.
‍

Download Patterns

Component Stripe Patterns

Component patterns are used to accentuate and differentiate content. Green stripes are used for webinars, red for IG related content, bold orange for hot events, thin orange for featured and focused content. Red and blue are used for client sentiment. Stripe patterns are created using repeating tiles which can be downloaded below.
‍

Download Stripe Patterns

Module States Guide

This is some text inside of a div block.

Icons

The DailyFX icon set contains a library of currency symbols, international markers and a selection of utility marks. These icons assist visitors in their experience across the site, and act as wayfinding shorthands for when text becomes too verbose, or space is at a premium.
‍

Download Icon Set

Currencies/Forecasts