LOGO USAGE
Primary Logo
(used on white backgrounds)
Only right logo element has 50% opacity.
Please allow 40px minimin clearance around the logo.
Primary Logo
(used on dark backgrounds)
Both logo elements have 50% opacity to create overlapping effect.
Please allow 40px minimin clearance around the logo.
Secondary Logo
Standalone logo requires at least 25px all around.
Secondary Logo
(48px/ leading 60px)
Secondary Logo
(used on app headers)
COLORS
Perfect Properties’s main colors are mostly monochromatic, featuring four variations of blue shades. Extensive use of blue aims to convey a sense of trust-worthiness and reliability. An off-white background (cultured) is used to give a simplicity that is clean and simple, desirable attributes in a property investment app. Sienna and Peach orange is added sparingly to add contrast.
TYPOGRAPHY
TITLES AND HEADINGS (used on white background)
Key: name/ weight/ size/ line height
Skolar Latin
Skolar Latin is used for all headings in the Perpect Properties’ brand. Skolar’s letterforms follow conventional proportions for comfortable reading, while its stylistic details introduce a subtle personal style - exactly the message the Perfect Properties wants to convey to its target users. Extrabold, bold, and regular weights are used to establish hierarchy.
Extra Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
H1 AaBbCc123
Skolar Latin/ Extra Bold, 36, 48.5
H2 AaBaCc123
Skolar Latin/ Bold, 28, 45.3
H3 AaBbCc123
Skolar Latin/ Bold, 20, 32.36
Menu Title Active AaBaCc123
Skolar Latin/ Bold, 10
Menu Title Inactive AaBaCc123
Skolar Latin/ Regular, 10
BODY (used on white background)
Key: name/ weight/ size/ line height
Proxima Nova
Proxima Nova is used for all body copy in the Perpect Properties’ brand. Proxima Nova’s humanistic proportion pairs well with Skolar Latin. The font comes with a wide variety of weight, offering incredible flexibility when used for different body texts.
Bold ABCDEFGHIJKLMNOPQRSTUVWYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Regular ABCDEFGHIJKLMNOPQRSTUVWYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Light ABCDEFGHIJKLMNOPQRSTUVWYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Primary Button Text AABBCC123
Proxima Nova/ Bold, 18, 28 (ALL CAPS)
Secondary Button Text AABBCC123
Proxima Nova/ Medium, 14, 18 (ALL CAPS)
Body Large AaBbCc123
Proxima Nova/ Bold, 18, 29
Body Small AaBaCc123
Proxima Nova/ Medium, 14, 18
Placeholder Text AaBbCc123
Proxima Nova/ Regular, 14, 18
Link Text AaBbCc123
Proxima Nova/ Bold, 12, 19.42
Body Primary AaBbCc123
Proxima Nova/ Light, 12, 19.42
SUPPORT (used on white background)
Key: name/ weight/ size/ line height
Quicksand
Quicksand is used for error messages and coaching messages in Perpect Properties’ brand. Quicksand is based on geometric forms that have been optically corrected for better legibility, which helps to accurately deliver errors and assistance to users. It is a wider font than Proxima Nova, , hence distinguishing the messages from normal text, yet it pairs with Proxima Nova well with its geometric style.
Medium ABCDEFGHIJKLMNOPQRSTUVWYZ
abcdefghijklmnopqrstuvwyz
1234567890!@£%#^&*{}_
Error Text AABBCC123
QuickSands / Medium, 10, 15
Coaching Text AABBCC123
QuickSands / Medium, 10, 15
COMPONENTS
PRIMARY BUTTON
SECONDARY BUTTON
TERTIARY BUTTON
SLIDING SCALE
DROPDOWNS
SELECTION CONTROLS
CHECKBOX
Checkboxes allow users to select more than one item or to turn notification on or off.
TOGGLE SWITCHES
Toggle switches allow users to turn a setting on or off.
INPUT STEPPERS
Input steppers allow users to incrementally increase or decrease a value, used in filters.
FORM FIELDS
PRIMARY FORM FIELDS
The containers of primary form fields have 15px rounded corners. Form fields are filled with pure white (#FFFFFF) to visually distinguish from the background color (#F8F8F8). All form fields are outlined with 1px border and label on top left. Form field should always have placeholder text to give examples of what kind of data that type field requires.
SECONDARY FORM FEILDS
The containers of secondary form fields have 6px rounded corners. Form fields are filled with pure white (#FFFFFF) to visually distinguish from the background color (#F8F8F8). All form fields are outlined with 1px border and label on top left. Form field should always have placeholder text to give examples of what kind of data that type field requires.
SEARCH FIELDS
The containers of search form fields have 24.5px rounded corners. Form fields are filled with pure white (#FFFFFF) to visually distinguish from the background color (#F8F8F8). All search form fields are outlined with 1px border. Search form fields should always have placeholder text to give examples of what kind of search terms are available.
SHADOW
Most of Perfect Properties’ elements are flat. There are only two elements that have shadows, cards and the top menu bar. Shadows should be light and subtle, without taking attention from the content.
Cards are used to display property listing search results. All property cards should have a light shadow, elevated at 4px in the x and y axis.
The top navigation is to provide a quick and easy way for users to always know where they are in the app and access core features anytime. The menu should be always on top of other element, elevate it at 2px in the x and y axis.
ICONS
Icons are modified to have sharp edges and right angle instead of soft, rounded edges to reflect the brand aesthetic of clean, quick and smart.
Icons are styled according to the brand colors, line type, and mood.
NAVIGATION
There are two ways to navigate Perfect Properties. The top menu bar gives users access to core features of the app anywhere and anytime. Alternatively, users can also access those same menu items within the hamburger menu, along with other system functions and preferences, such as settings and FAQs.
TOP TAB MENU
HAMBURGER MENU
ILLUSTRATION
Illustrations for Perfect Properties should use the brand color as much as possible, such as yankee’s blue, turquoise, sienna, peach orange, Azureish White and lavendar gray. The image of “home,” as represented in the logo, should be always present in every illustation depicting life at home.
IMAGES
Photography used in Perfect Properties should show both the interior and the exterior of properties. Exterior photos must capture the property in its entirety. Interior shots must be wide-angled, have good exposure, and show the interior space.
TONE
Perfect Properties defines itself as an easy-going, smart, get-things-done brand. There is no pretentiousness in our presentation of information - we communicate simply and directly. We are down-to-earth, with the only goal of helping you find your perfect property. Our logo features two different colored Ps overlapping and forming a third color, a suiting metaphor to the exciting process of building a family.
Honest, Smart, Get-things-done
