Design System
Color
Typography
Typefaces and Font Weights
Apercu Light
Apercu Regular
Apercu Medium
Apercu Bold
Apercu Mono
Calluna Light
Calluna Regular
Calluna Medium
Calluna Bold
Type Scale
Type sizes are based on a modular type scale with a base text size of 18 and a type scale of 1.5. Line height is determined by multiplying type sizes by 1.5 and rounding to the nearest multiple of the 6px grid. Headings have a reduced line height ratio of 1.2 rounded to nearest multiple of the 6px grid.
rem | px | Line Height | Actual Size |
---|---|---|---|
rem: 0.7rem | px: 12px | Line Height: 18px (1.5) | The arsonist had oddly shaped feet |
rem: 1.125rem | px: 18px | Line Height: 30px (1.667) | The arsonist had oddly shaped feet |
rem: 1.6875rem | px: 27px | Line Height: 42px (1.556) | The arsonist had oddly shaped feet |
rem: 2.5rem | px: 40px | Line Height: 48px (1.2) | The arsonist had oddly shaped feet |
rem: 3.75rem | px: 60px | Line Height: 72px (1.2) | The arsonist had oddly shaped feet |
rem: 5.6875rem | px: 90px | Line Height: 108px (1.2) | The arsonist had oddly shaped feet |
Headers
Header size and typeface is determined by the layout. Editorial content typically uses Calluna as the headline for H1 and H2. Calluna is used sparingly below H2 sizes.
Type Specimen
The Telepathy
Design Method
After nearly 20 years of design expertise, we have refined a results-driven design methodology to iteratively improve the experience of your customers. Our team utilizes the foundational stages below to tailor a bespoke engagement for each of our clients.
The Telepathy Design
Method 2 line headline
After nearly 20 years of design expertise, we have refined a results-driven design methodology to iteratively improve the experience of your customers. Our team utilizes the foundational stages below to tailor a bespoke engagement for each of our clients.
The Telepathy Design Method
After nearly 20 years of design expertise, we have refined a results-driven design methodology to iteratively improve the experience of your customers. Our team utilizes the foundational stages below to tailor a bespoke engagement for each of our clients.
Design Principles
Design principles help us achieve our greatest work. They serve as guidelines to navigate design decisions. They inspire our process and influence our outcomes.
- Solve real problems
- Strive to simplify
- Do it together
- Stay humble and ask why
- Do good
- Think big
- Never stop exploring
Motion
Motion should be used to help guide the user’s experience in a natural and subtle way.
Motion should not be overused or feel unnatural or jarring.
Text Loading
A mad boxer shot a quick, gloved
jab to the jaw of his dizzy opponent
The five boxing wizards jump quickly
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a turpis et orci elementum volutpat
Five quacking zephyrs jolt my wax bed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a turpis et orci elementum volutpat
The quick brown fox jumps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a turpis et orci elementum volutpat
Image Wipes and Hovers
Photography
Our photography style is professional and human. Shots should appear realistic and candid. Shallow depth of field should be used to give focus to otherwise busy images. Lightroom presets should be used to give photos a subtle filtered effect.
Illustrations and icons
Icons and illustrations are based on simple shapes and dot patterns.
Simple Shapes
Icons should be based on simple shapes. Other shapes may be used when needed.
Dot Patterns
Dots are 4px by 4px. Dots may be black, gray or white. Dot patterns are not required on icons.
Icon Colors
Large Icon Examples
Small Icon Examples
Layout and Grid System
Layout
Layout follows a 12 column grid with 30px of gutter between each column.
Large Screens: Grid Width: 1140px # of Columns: 12 Gutter Width: 30px
Medium Screens: Grid Width: 720px # of Columns: 12 Gutter Width: 30px
Small Screens: Grid Width: 540px # of Columns: 12 Gutter Width: 30px
Extra Small Screens: Grid Width: < 540px # of Columns: 12 Gutter Width: 0
Breakpoints
Breakpoints exist for small screens under 540px, medium screens between 540px and 719px, large screens between 720px and 1139px, and extra-large screens above 1140px.
Grid
We use a 6px grid system. The grid system is used to provide structure with type and design components.
Text inputs and dropdowns
Text Inputs
Dropdowns
Radio buttons and check boxes
Buttons and links
Call to Action Buttons
Navigation Buttons
Links
Inline Links
Inline links are styled with an underline.
Call to Action Links
Call to action links are red and include an arrow.
Breadcrumbs
Notifications
Notifications should be used to alert users of important things. Notifications that do not require action should fade away after 10 seconds. Notifications that require actions should be persistent until the user interacts with them.