Design System
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
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.
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
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.