Leapfin Style Guide
Updated July 3, 2024Logo 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.
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.
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.
Typography
Brand colors
Deep Galaxy
Spectral White
Neon Galaxy
Aurora Mint
Fire Tangerine
Mystic Magenta
Sunset Salmon
Sky Blue
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.
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.
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.
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
