Leapfin Style Guide

Updated July 3, 2024

Logo intro

Logo anatomy

The Leapfin logo is comprised of the logomark and the wordmark. Because the two elements overlap at the "L", the wordmark should never be used independently.

The Logomark can be used independently when the display area for the logo is too small for the full core logo to be discernible.

There is no vertical orientation for the Leapfin logo.

Space around the logo

The minimum amount space around the logo, and logomark, is defined by the width of the letter "e" in the wordmark.

This area should be kept free of any visual elements, including text, graphics, borders, patterns, and other logos. Ensuring proper clear space between the logo and surrounding elements preserves the visual integrity of our brand.

logo-spacing

Correct logo treatment

Dark logo

The dark Leapfin logo, and logomark, use the Deep Galaxy fill color. This dark version is only used on light backgrounds. Maintain WCAG AA contrast.

Light logo

The light Leapfin logo, and logomark, use the Totally White fill color. This dark version is only used on light backgrounds. Maintain WCAG AA contrast.

Dark logomark

The dark logomark is only used when the display area for the logo is too small for the full core logo to be discernible.

Light logomark

The light logomark is only used when the display area for the logo is too small for the full core logo to be discernible.

Incorrect logo treatment

Unapproved color
Multiple colors
Light on light
Dark on dark
High-contrast background
Rotated
Stretched
Too small
Overflowing
Flush with container
Insufficient white space
Overlapped
Drop shadow
Disproportionate
Stroke
Unapproved tagline
Missing elements

Font families

Poppins

Modern, round, and minimal, the Poppins font family represents Leapfin's cutting edge and user-friendly approach to the finance industry. Poppins is the core font of Leapfin's DNA, used in both the logo and in all headers.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

Roboto

Versatile, readable, and digitally ubiquitous, the Roboto font family represents Leapfin's streamlined user experience. Roboto is used for all body text, and anywhere that a significant block of text displayed.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

Typography

Titles | Poppins Bold | Size: 200% base | Leading: 120% | Color: Deep Galaxy Lorem ipsum dolor sit amet
Section Headers | Poppins Bold | Size: 175% base | Leading: 130% | Color: Deep Galaxy Lorem ipsum dolor sit amet
Paragraph Headers | Poppins Semibold | Size: 150% base | Leading: 130% | Color: Deep Galaxy Lorem ipsum dolor sit amet
Body Text | Roboto Regular | Size: 100% base | Leading: 150% | Color: Galaxy Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Pre-Headers | Roboto Medium | Size: 85% base | Leading: 150% | Tracking: 1px | Color: Neon Galaxy Lorem ipsum dolor sit amet

Brand colors

primary

Deep Galaxy

HEX: #252366
RGB: 37, 35, 102
CMYK: 64%, 66%, 0%, 60%
Galaxy Paragraph
#2e2b80
Galaxy Medium
#3732b2
primary

Spectral White

HEX: #f6f6ff
RGB: 246, 246, 255
CMYK: 4%, 4%, 0%, 0%
Totally White
#ffffff
Off White
#e8e8ff
primary

Neon Galaxy

HEX: #4942ff
RGB: 75, 66, 255
CMYK: 71%, 74%, 0%, 0%
Galaxy Light
#8985FF
Galaxy Pale
#bcbafd
primary

Aurora Mint

HEX: #4ee68d
RGB: 78, 230, 141
CMYK: 66%, 0%, 39%, 10%
Mint Bright
#57ff9c
Mint Dark
#45cc7d
secondary

Fire Tangerine

HEX: #ff9257
RGB: 255, 146, 87
CMYK: 0%, 43%, 66%, 0%
Tangerine Medium
#ffbb57
Tangerine Light
#ffe357
secondary

Mystic Magenta

HEX: #e62983
RGB: 230, 41, 131
CMYK: 0%, 82%, 43%, 10%
Magenta Bright
#ff5292
Magenta Dark
#cc0074
tertiary

Sunset Salmon

HEX: #ff6257
RGB: 255, 98, 87
0%, 62%, 66%, 0%
tertiary

Sky Blue

HEX: #57abff
RGB: 87, 171, 255
CMYK: 66%, 33%, 0%, 0%

Color Usage

Light Layouts

The primary layout in Leapfin designs is a light background with dark and vibrant colors used for text, imagery, and accents. All color combinations must meet WCAG AA standards for contrast.

color-ratios_light

Dark Layouts

Dark layouts are used to draw extra attention to a region of special interest in a primarily light layout. Use light and vibrant colors for text, imagery, and accents. All color combinations must meet WCAG AA standards for contrast.

color-ratios_dark

App UI

Partial UI Images

When displaying the app UI, focus on the areas that are relevant to the topic being covered, and crop out the remaining portion of the image.

App UI images should always be displayed at a readable size.

cropping-elements

Full UI Images

When an image of the entire app UI is needed, the screenshot should include only the UI. The user's browser and desktop should never be visible.

The UI image should be captured at a 16:9 aspect ratio, and as large as the user's screen will permit. To achieve this:

  • Open the app in your browser of choice and resize the window so that the browser is as tall as possible, flush with the top and bottom of your screen.
  • Right-click on the app page and hit "inspect" to open up the browser's developer tools. The size of the screen should be displayed in the top right corner
  • Get the height of the the browser. Multiply it by 1.78. Resize your browser width to this number
app_ui-full