Design
Understand the intricacies of our visual language and learn how to express the Argyle brand consistently and effectively
Logo
There is nothing that manifests the Argyle brand as much as our logo. The simple typographic shape is ubiquitous and indispensable to our communication. The current rendering of our wordmark was introduced in early 2013 and has completely custom letter shapes that are carefully organized into a taut and effective composition.
Logo shades
In most cases, we use the white logo against dark backgrounds. For light-themed materials we use the logo in Misty 80 (#313A49).
Logo usage
Thoughtful, careful, and consistent usage of our logo in communication ensures its recognition and establishes a cohesive and professional brand image. The following rules will help you maintain logo integrity and be effective with its application.
Clear space
Co-branding
Sub-branding
Invalid use
It is essential to provide sufficient clear space around the Argyle logo. The clear space ensures that the logo has enough breathing room and is not crowded or visually cluttered by other elements. Use the letter “e” from the logo to determine the appropriate amount of clear space.
Color
The careful selection and consistent use of colors play a vital role in defining our brand identity and creating a memorable visual experience. Harmonious and effective use of color can ignite an emotional connection and build a bond between the Argyle brand and our audience.
Argyle Misty
Misty
5
F7F8FA
Misty
10
EFF1F5
Misty
15
E6ECF0
Misty
20
DFE6EC
Misty
30
CFDAE2
Misty
40
A6B3C4
Misty
50
94A0B2
Misty
60
6A778A
Misty
70
4E5B6E
Misty
80
313A49
Misty
85
2B323D
Argyle Misty serves as the primary ambiance color for most of the applications. The shades of Misty provide a rich and memorable environment for our assets so that the content we feature on it feels bright, sparkly, and intentional. Using Misty makes it easy to create assets that feel distinctly Argyle from the get-go.
Color palette
The complete Argyle color palette provides you with a wide selection of shades and hues for every occasion. Stick with Blue 40, Green 40, Purple 40, and Orange 30 as your primary accent and functional colors, while using the rest of the palette for nuanced and specialized design scenarios.
Color coding
Use these colors as the standard for defining hyperlinks, calls to action, hover + active states, and errors in your interfaces.
Hyperlink
CTA
Hover + Active
Error
Purple
5
F6F4FA
Purple
10
EDE9F4
Purple
20
DED7EB
Purple
30
C8BBE2
Purple
40
B29EDC
Purple
50
8D74C1
Purple
60
694BA5
Purple
70
45316D
Purple
80
31234D
Blue
5
F5F7FD
Blue
10
EAEFFB
Blue
20
D8E2F7
Blue
30
BBCDF1
Blue
40
8DABE7
Blue
50
7096E2
Blue
60
4C7CDA
Blue
70
2753AA
Blue
80
17346E
Cyan
5
F5FAFC
Cyan
10
EAF4F9
Cyan
20
D8EBF5
Cyan
30
BCDCED
Cyan
40
8EC5E1
Cyan
50
71B6DA
Cyan
60
4EA4D0
Cyan
70
287DA9
Cyan
80
064F74
Green
5
F4FAF6
Green
10
E8F5EC
Green
20
D5EDDC
Green
30
B4E3C2
Green
40
7FD09F
Green
50
5FC48B
Green
60
40AC74
Green
70
2E7B53
Green
80
20553A
Olive
5
F8FAF2
Olive
10
F0F4E4
Olive
20
E4EBCE
Olive
30
D0DCAA
Olive
40
B1C571
Olive
50
9DB64D
Olive
60
84A420
Olive
70
5F7A1F
Olive
80
3D560B
Yellow
5
FFF7E6
Yellow
10
FFEECC
Yellow
20
FEE4AE
Yellow
30
FED88A
Yellow
40
F4CC67
Yellow
50
F0C33D
Yellow
60
E4AE0C
Yellow
70
BA8D08
Yellow
80
846406
Orange
5
FEF7F1
Orange
10
FDEEE3
Orange
20
FBDFCC
Orange
30
F8C8A7
Orange
40
F3A36B
Orange
50
F08C46
Orange
60
EC6F18
Orange
70
C2570A
Orange
80
8C3F07
Red
5
FFF2F4
Red
10
FCE5E8
Red
20
FAD0D5
Red
30
F6ADB7
Red
40
F07586
Red
50
EC5368
Red
60
E72842
Red
70
BF1229
Red
80
8E0B1D
Grayscale
Gray
4
F5F5F5
Gray
8
EBEBEB
Gray
10
E6E6E6
Gray
15
D9D9D9
Gray
20
CCCCCC
Gray
30
B3B3B3
Gray
40
999999
Gray
50
808080
Gray
60
666666
Gray
70
4E5B6E
Gray
80
333333
Gray
90
1A1A1A
Alpha
Black
4
0 @ 4%
Black
8
0 @ 8%
Black
12
0 @ 12%
Black
16
0 @ 16%
Black
20
0 @ 20%
Black
30
0 @ 30%
Black
40
0 @ 40%
Black
50
0 @ 50%
Black
60
0 @ 60%
Black
70
0 @ 70%
Black
80
0 @ 80%
Black
90
0 @ 90%
Black
000000
White
10
F @ 10%
White
20
F @ 20%
White
30
F @ 30%
White
40
f @ 40
White
50
f @ 50
White
60
f @ 60
White
70
f @ 70
White
80
f @ 80
White
90
f @ 88
White
FFFFFF
Gradients
Purple
Blue
Cyan
Green
Olive
Yellow
Orange
Red
Misty
30
Misty
60
Misty
80
By smoothly blending different hues and tones together, gradients add depth, dimension, and a touch of modernity to our design assets. Use them modestly as backdrops for important sections to draw attention and bring visual diversity to your composition.
Typography
Typography is a fundamental element of our design system. Consistent and thoughtful typography ensures clear and impactful communication and is key to establishing a distinct brand voice. We use Lineto Circular in product design and marketing. Its monospaced version Circular Mono is used for code snippets.
Circular “is a geometric sans serif marrying purity with warmth. Striking a balance between functionality and measured idiosyncrasy”.
Circular
Text styles
We have codified our text styles for headlines, body text, captions, and code snippets as a strong typographic foundation. This library of font sizes, line heights, and letter spacing is provided to maintain consistency and legibility across mediums.
Text styles usage
➀ ➁ ➂
Avoid using more than 3 text styles within a single asset, interface, or document. A limited number of styles will help establish visual clarity and hierarchy.
Headlines
Regular 72px; Line: 84px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 56px; Line: 64px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 48px; Line: 56px; Letter: -1%
The quick brown fox jumps over the lazy dog
Regular 36px, Line: 40px; Letter:-1%
The quick brown fox jumps over the lazy dog
Regular 28px; Line: 36px
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Regular 24px; Line: 32px
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Body and caption
Regular 18px; Line: 28px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a sense of wonder and admiration in those fortunate
Regular 16px; Line: 24px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping
Regular 14px; Line: 20px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse,
Regular 12px; Line: 16px; Letter: 1%
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a sense
Medium 11px; Line: 16px; Letter: 5%; Uppercase
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG, SWIFTLY NAVIGATING THE INTRICATE MAZE WITH AGILITY AND GRACE, DEMONSTRATING ITS REMARKABLE ACROBATIC PROWESS WHILE LEAVING BEHIND A TRAIL OF MYSTIFYING FOOTPRINTS, CAPTIVATING THE CURIOUS MINDS OF ONLOOKERS WHO STAND IN AWE OF ITS DEXTERITY AND AUDACITY, AS THE FOX
Code
Mono 18px; Line: 28px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with unparalleled finesse, evoking a
Mono 16px; Line: 24px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing
Mono 14px; Line: 20px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who
Mono 12px; Line: 16px
The quick brown fox jumps over the lazy dog, swiftly navigating the intricate maze with agility and grace, demonstrating its remarkable acrobatic prowess while leaving behind a trail of mystifying footprints, captivating the curious minds of onlookers who stand in awe of its dexterity and audacity, as the fox effortlessly glides through the verdant meadows, traversing hills and valleys, leaping over obstacles with
Punctuation
Always use curly quotes and apostrophes instead of straight quotes to elevate the visual style of your message. Compared to straight quotes, curly quotes are more legible on the page and match the other characters better.
Mac
Windows
‘
opening single quote
⌥ + ]
Alt 0145
’
closing single quote
⌥ + ⇧ + ]
Alt 0146
“
opening double quote
⌥ + [
Alt 0147
”
closing double quote
⌥ + ⇧ + [
Alt 0148
Use en dashes (–) to mark ranges and em dashes (—) to separate extra information or mark a break in a sentence.
Mac
Windows
–
en dash
⌥ + -
Alt 0150
—
em dash
⌥ + ⇧ + -
Alt 0151
Spacing
To maintain visual order, harmony, and coherence we adhere to the predefined system of spacing values that are multiples of 4.
Your can update your Figma nudge settings to have 4 (instead of 10) as your preferred big nudge in the app.
Graphics
The use of graphics makes our brand manifestation interesting and engaging while preventing it from looking dry and characterless. Combined with other brand elements such as the logo, colors, and typography, it plays a vital role in creating captivating and immersive experiences for our audience.
Misty Glass
With an intricate interplay of light and shadow, the Misty Glass graphics style is designed to evoke a sense of innovation and futuristic technology, while maintaining clarity and approachability. These graphics are used for website hero sections, pitch deck covers, and other assets that have to communicate high value and refinement.
Iconography
We have developed a distinctive library of dual-tone icons that is exclusive to Argyle. This library offers 9 different colors tailored for both dark and light modes. The icons are used to identify products, features, and value props.
The dual-tone icons are built using a 16px grid which ensures a consistent recognizable look across metaphors and symbols. You can build new icons using our grid, colors, and overlay settings (hard light for dark theme, multiply for light theme).
In addition to the unique Argyle icon system we extensively use the Google Material Symbols with the following settings:
Weight: 300
Fill: Off
Grade: Normal
Avatars
Our avatars are one of the most unique features of the Argyle design language. While maintaining uniformity and stylistic coherency, they possess an inherent individuality that is instantly recognizable. The avatars play a significant role in fostering a sense of belonging, community, and inclusivity among our employees and stakeholders.
Application
Explore the practical implementation of our brand elements across various real-life contexts and touchpoints. Allow these examples to shape your future design choices.
