Color

#ff3d25
C=0 M=90 Y=98 K=0
R=255 G=61 B=37
#1e2122
C=74 M=66 Y=64 K=73
R=30 G=33 B=34
#d0d6d2
C=18 M=10 Y=15 K=0
R=208 G=213 B=210
#f5f7f6
C=3 M=1 Y=2 K=0
R=245 G=247 B=246
#ffffff
C=0 M=0 Y=0 K=0
R=255 G=255 B=255

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

#ff3d25
C=0 M=90 Y=98 K=0
R=255 G=61 B=37
#d1311f
C=0 M=90 Y=98 K=0
R=255 G=61 B=37
#1e2122
C=74 M=66 Y=64 K=73
R=30 G=33 B=34
#d0d6d2
C=18 M=10 Y=15 K=0
R=208 G=213 B=210
#ffffff
C=0 M=0 Y=0 K=0
R=255 G=255 B=255

Large Icon Examples

Discover
Ideate
Create
Driven
Care

Small Icon Examples

Driven
See
Initiative
Care
Soul
Owner

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.

Small Screens
Medium Screens
Large Screens
Extra Large Screens

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

Error state text
Error state text
Error state text
Error State Text
Error state text

Radio buttons and check boxes

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.

New File Added


DesignSystem.jpg has been added to the almanac

Success


Your post has been successfully uploaded and awaiting review

Oh no


Something went wrong, please try again

Oh no


Something went wrong, please try again

Sliders

Full width slider

Single Image Slider

8:32AM

Morning Ritual

Mornings usually start in the kitchen where stories are shared as the team loads up with their favorite drinks and snacks.

9:07AM

Staff Huddle

Two times a week we kick off the day with a morning huddle presentation. Topics include work-related learnings, AMAs, pics from a family vacation, and so on.

10:17AM

Client Meeting

We meet with our clients multiple times per week to collaborate on projects. We encourage all team members to join and participate in the meetings.

11:21AM

Whiteboard Session

Developers, strategists, and designers all participate in problem solving and execution. Everyone has a voice and everyone contributes to the team.

12:44PM

Team Lunch With Guests

Every Monday and Wednesday we have a family-style lunch home cooked by our chef, Rosie. It's a serve-yourself feast where you can relax, eat, and connect with your colleagues.

2:18PM

Focus Time

Our team works hard and is passionate about their craft. You might find us working on customer research, designing an application, or developing for our clients.

3:44PM

Take a Breather

Sometimes being productive means taking a break. Unwind with a little VR, playing our arcade machine, or going for a walk around East Village.

4:32PM

Team Collaboration

Throughout the day you will find us constantly collaborating. Roles seem to disappear as our teams work together on challenging projects.

5:46PM

Happy Hour

A few times a month we unwind and hang out with good friends at one of our favorite local spots.